import StatusDot from './StatusDot.jsx'
import Avatar from './Avatar.jsx'
import { kindColor } from '../../pages/task/kind.js'
import { taskShortId } from '../../pages/task/date.js'

// 看板卡片 (T-UI-02): 轻量化
//   - 标题 + 状态点 (T-ST-09)
//   - 负责人 12px/600 突出 (T-AS-01); 任务成员 10.5px 弱化置于下方 (T-AS-02)
//   - 子任务内嵌简洁展示 + 可直接勾选 (T-ST-06/07)
const MAX_SUB = 3

export default function TaskCard({
  task, bindDrag, onClick, onToggleSub, onToggle, onMore, dragging = false, highlight = false,
}) {
  const children = task.children || []
  const shown = children.slice(0, MAX_SUB)
  const rest = children.length - shown.length
  // 编号只显示 `#序号`; 完整编号 (项目编号-序号) 放详情页 (见 TaskDetail)
  const shortId = taskShortId(task)

  return (
    <div
      className={`bcard${dragging ? ' dragging' : ''}${highlight ? ' hl' : ''}`}
      data-task-id={task.id}
      onClick={onClick}
      {...(bindDrag ? bindDrag(task) : {})}
    >
      {/* 左侧竖排: 状态点 + ⋯ */}
      <div className="bcard-left">
        <span
          className="bstat"
          onClick={(e) => { e.stopPropagation(); onToggle?.(task) }}
          onPointerDown={(e) => e.stopPropagation()}
          title="点按切换完成"
        >
          <StatusDot status={task.status} />
        </span>
        {onMore && (
          <span
            className="bmore-btn"
            onClick={(e) => { e.stopPropagation(); onMore(task) }}
            onPointerDown={(e) => e.stopPropagation()}
          >⋯</span>
        )}
      </div>

      <div className="bcard-body">
        <div className="brow1">
          <span className="btitle">{task.title}</span>
        </div>

        <div className="bmeta">
          {shortId && <span className="num-tag">{shortId}</span>}
          {task.markDate && (
            <span className="date-tag">{task.markDate.slice(5, 10).replace('-', '/')}</span>
          )}
          {task.kind && (
            <span className="kind-tag" style={{ background: kindColor(task.kind) }}>{task.kind}</span>
          )}
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 'auto', minWidth: 0, justifyContent: 'flex-end' }}>
            <Avatar name={task.assignee?.name} size={18} />
            {task.members?.length > 0 && (
              <span className="bmembers">+ {task.members.map((m) => m.name).join('、')}</span>
            )}
          </span>
        </div>

        {shown.map((c) => (
          <div
            key={c.id}
            className={`bsub${c.status === 'done' ? ' done' : ''}`}
            onClick={(e) => { e.stopPropagation(); onToggleSub?.(c) }}
            onPointerDown={(e) => e.stopPropagation()}
          >
            <span className="sbox" />
            <span className="stitle">{c.title}</span>
            <StatusDot status={c.status} />
          </div>
        ))}
        {rest > 0 && <div className="bmore">+{rest} 个子任务</div>}
      </div>
    </div>
  )
}