import { useState } from 'react'
import TaskRow from '../../components/task/TaskRow.jsx'

// 列表视图 (T-VW-01, T-ST-04/05)
//   按看板列分组展示(列表不分组也允许, 这里默认分组更接近 Todoist)
//   子任务缩进 + 折叠展开
export default function ListView({
  tasks, columns, onToggle, onOpen, onAddSub,
}) {
  const [collapsed, setCollapsed] = useState({})

  if (!tasks || tasks.length === 0) {
    return (
      <div className="empty" style={{ paddingTop: 90 }}>
        <div className="ico">✓</div>
        <p>这个项目还没有任务</p>
      </div>
    )
  }

  // 分组: 按列顺序, 未匹配列的任务归到一起
  const groups = []
  const orderedCols = [...(columns || [])].sort((a, b) => a.sortOrder - b.sortOrder)
  for (const c of orderedCols) {
    const list = tasks.filter((t) => t.columnId === c.id)
    if (list.length) groups.push({ key: c.id, name: c.name, list })
  }
  const known = new Set(orderedCols.map((c) => c.id))
  const orphans = tasks.filter((t) => !known.has(t.columnId))
  if (orphans.length) groups.push({ key: 'other', name: '其他', list: orphans })

  return (
    <div className="list-body">
      {groups.map((g) => (
        <div key={g.key}>
          <div className="group-title">
            {g.name}
            <span className="cnt">{g.list.length}</span>
          </div>

          {g.list.map((t) => {
            const kids = t.children || []
            const isCollapsed = !!collapsed[t.id]
            return (
              <div key={t.id}>
                <TaskRow
                  task={t}
                  onToggle={onToggle}
                  onClick={() => onOpen(t)}
                  onMore={() => onOpen(t)}
                />
                {kids.length > 0 && (
                  <>
                    {!isCollapsed && kids.map((c) => (
                      <TaskRow key={c.id} task={c} indent onToggle={onToggle} onClick={() => onOpen(c)} />
                    ))}
                    <div
                      className="collapse"
                      onClick={() => setCollapsed((p) => ({ ...p, [t.id]: !p[t.id] }))}
                    >
                      {isCollapsed ? `展开 ${kids.length} 个子任务 ⌄` : `收起 ${kids.length} 个子任务 ⌃`}
                    </div>
                  </>
                )}
                {kids.length === 0 && onAddSub && (
                  <div className="sub-add-hint" onClick={() => onAddSub(t)}>+ 子任务</div>
                )}
              </div>
            )
          })}
        </div>
      ))}
    </div>
  )
}