import StatusDot from './StatusDot.jsx'

// 看板卡片 (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

  return (
    <div
      className={`bcard${dragging ? ' dragging' : ''}${highlight ? ' hl' : ''}`}
      data-task-id={task.id}
      onClick={onClick}
      {...(bindDrag ? bindDrag(task) : {})}
    >
      <div className="brow1">
        <span className="btitle">{task.title}</span>
        <span
          className="bstat"
          onClick={(e) => { e.stopPropagation(); onToggle?.(task) }}
          title="点按切换完成"
        >
          <StatusDot status={task.status} />
        </span>
      </div>

      <div className="bmeta">
        <span className={`bassignee${task.assignee ? '' : ' none'}`}>
          {task.assignee?.name || '未指派'}
        </span>
        {task.members?.length > 0 && (
          <span className="bmembers">+ {task.members.map((m) => m.name).join('、')}</span>
        )}
        {onMore && (
          <span
            className="bmore-btn"
            onClick={(e) => { e.stopPropagation(); onMore(task) }}
          >⋯</span>
        )}
      </div>

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