import TaskCard from '../../components/task/TaskCard.jsx'
import useColumnDrag from '../../components/task/useColumnDrag.js'

// 看板视图 (T-BD-01, T-UI-07)
//   拖动 = 长按 400ms 激活, 卡片原位抬起, 指针划过列高亮, 松手落列 (重点设计 §7.1)
//   不做"拖到卡片上转子任务" —— 统一走详情页「转为子任务」
export default function BoardView({
  tasks, columns, onMoveColumn, onOpen, onToggleSub, onToggle, onMore, onQuickAdd,
}) {
  const drag = useColumnDrag({ onDrop: onMoveColumn })

  const ordered = [...(columns || [])].sort((a, b) => a.sortOrder - b.sortOrder)

  return (
    <div className="board-wrap">
      {ordered.map((col) => {
        const list = (tasks || []).filter((t) => t.columnId === col.id)
        return (
          <div
            className={`bcol${drag.overCol === col.id ? ' dragover' : ''}`}
            key={col.id}
            data-column-id={col.id}
          >
            <div className="bcol-head">
              <span className="bcol-name">{col.name}</span>
              <span className="bcol-cnt">{list.length}</span>
              {col.boundStatus ? (
                <span className="bcol-bind">
                  ↔ {col.boundStatus === 'done' ? '完成' : col.boundStatus === 'doing' ? '执行中' : '未开始'}
                </span>
              ) : (
                <span className="bcol-bind off">未绑定</span>
              )}
            </div>

            <div className="bcol-body">
              {list.map((t) => (
                <TaskCard
                  key={t.id}
                  task={t}
                  dragging={drag.dragTask?.id === t.id}
                  bindDrag={drag.bind}
                  onClick={() => { if (!drag.dragTask && !drag.justEnded()) onOpen?.(t) }}
                  onToggleSub={onToggleSub}
                  onToggle={onToggle}
                  onMore={onMore}
                />
              ))}
              {list.length === 0 && <div className="bcol-empty">暂无任务</div>}
              <div className="badd" onClick={() => onQuickAdd?.(col.id)}>+ 添加任务</div>
            </div>
          </div>
        )
      })}
    </div>
  )
}