// ─── KANBAN ───────────────────────────────────────────────
const KanbanScreen = () => {
  const [tasks, setTasks] = React.useState(window.TASKS);
  const [dragId, setDragId] = React.useState(null);
  const [overCol, setOverCol] = React.useState(null);
  const [filterTag, setFilterTag] = React.useState("all");

  const onDragStart = id => setDragId(id);
  const onDragEnd = () => { setDragId(null); setOverCol(null); };
  const onDrop = colId => {
    if (!dragId) return;
    setTasks(prev => prev.map(t => t.id === dragId ? { ...t, col: colId } : t));
    setDragId(null); setOverCol(null);
  };

  const tagList = ["all", "art", "code", "design", "audio", "narrative"];

  return (
    <div className="content-pad" data-screen-label="03 Kanban">
      <div className="page-head">
        <div>
          <div className="page-title display">Kanban</div>
          <div className="page-sub">Drag cards between columns · {tasks.length} tasks total</div>
        </div>
        <div className="right">
          <div className="row" style={{ gap: 6 }}>
            {tagList.map(t => (
              <button key={t} className={`filter-btn ${filterTag === t ? "is-on" : ""}`} onClick={() => setFilterTag(t)}>
                {t !== "all" && <span className="dot" style={{ width: 7, height: 7, borderRadius: 50, background: `var(--st-${t})` }}/>}
                {t}
              </button>
            ))}
          </div>
          <div style={{ width: 8 }}/>
          <button className="btn primary"><Icon name="plus" size={13}/> New task</button>
        </div>
      </div>

      <div className="kanban-wrap">
        {window.KB_COLUMNS.map(col => {
          const colTasks = tasks.filter(t => t.col === col.id && (filterTag === "all" || t.tag === filterTag));
          return (
            <div
              className="kb-col"
              key={col.id}
              onDragOver={e => { e.preventDefault(); setOverCol(col.id); }}
              onDrop={() => onDrop(col.id)}
              style={overCol === col.id ? { borderColor: "var(--accent)" } : {}}
            >
              <div className="kb-col-head">
                <StatusDot status={col.status}/>
                <span className="kb-col-title">{col.title}</span>
                <span className="kb-col-count">{colTasks.length}</span>
                <div className="kb-col-actions">
                  <button className="icon-btn" style={{ width: 22, height: 22 }}><Icon name="plus" size={13}/></button>
                  <button className="icon-btn" style={{ width: 22, height: 22 }}><Icon name="more" size={13}/></button>
                </div>
              </div>
              <div className="kb-col-cards">
                {colTasks.map(t => (
                  <div
                    key={t.id}
                    className={`kb-card ${dragId === t.id ? "dragging" : ""}`}
                    draggable
                    onDragStart={() => onDragStart(t.id)}
                    onDragEnd={onDragEnd}
                  >
                    <div className="kb-card-head">
                      <span className="kb-card-id mono">{t.id}</span>
                      <PrioDot p={t.prio}/>
                      <div className="spacer"/>
                      <span className="muted" style={{ fontSize: 10.5 }}>{t.chapter || ""}</span>
                    </div>
                    <div className="kb-card-title">{t.title}</div>
                    {t.desc && (
                      <div className="muted small" style={{
                        lineHeight: 1.45,
                        display: "-webkit-box",
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: "vertical",
                        overflow: "hidden",
                        marginBottom: 6,
                      }}>
                        {t.desc}
                      </div>
                    )}
                    <div className="kb-card-meta">
                      <TagChip tag={t.tag}/>
                    </div>
                    <div className="kb-card-foot">
                      <span className="due"><Icon name="calendar" size={11}/>{t.due}</span>
                      <div className="kb-avatars">
                        {t.assignees.map(a => <Avatar key={a} id={a} size={20}/>)}
                      </div>
                    </div>
                  </div>
                ))}
                <button className="kb-add"><Icon name="plus" size={12}/> Add task</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.KanbanScreen = KanbanScreen;