import { useState } from 'react'
import { Toast } from 'antd-mobile'
import TaskCard from '../../components/task/TaskCard.jsx'
import useLongPressDrag from '../../components/task/useLongPressDrag.js'

// 看板视图 (T-BD-01, T-UI-07, T-ST-06/12)
//   列横向滚动; 长按卡片拖拽换列 / 降为子任务
export default function BoardView({
  tasks, columns, onMoveColumn, onMakeSubtask, onOpen, onToggleSub, onToggle, onQuickAdd,
}) {
  const [overCol, setOverCol] = useState(null)

  const drag = useLongPressDrag({
    onDropColumn: (task, columnId) => { setOverCol(null); onMoveColumn?.(task, columnId) },
    onDropTask: (task, parentId) => { setOverCol(null); onMakeSubtask?.(task, parentId) },
    onReject: (msg) => { setOverCol(null); Toast.show({ content: msg }) },
  })

  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${overCol === col.id ? ' dragover' : ''}`}
              key={col.id}
              data-column-id={col.id}
              onDragEnter={() => setOverCol(col.id)}
              onDragLeave={() => setOverCol((c) => (c === col.id ? null : c))}
            >
              <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.dragging?.task?.id === t.id}
                    highlight={drag.dragging && drag.dragging.task.id !== t.id && overCol === col.id}
                    bindDrag={drag.bind}
                    onClick={() => { if (!drag.dragging) onOpen?.(t) }}
                    onToggleSub={onToggleSub}
                    onToggle={onToggle}
                  />
                ))}
                {list.length === 0 && <div className="bcol-empty">暂无任务</div>}
                <div className="badd" onClick={() => onQuickAdd?.(col.id)}>+ 添加任务</div>
              </div>
            </div>
          )
        })}
      </div>

      {drag.dragging && (
        <div
          className="drag-ghost"
          style={{ left: drag.dragging.x, top: drag.dragging.y }}
        >
          {drag.dragging.task.title}
        </div>
      )}
    </>
  )
}