// Kanban view — columns by status with drag & drop
const { useState: useStateK } = React;

function KanbanBoard({ creators, onCardClick, onStatusChange }) {
  const [dragId, setDragId] = useStateK(null);
  const [dragOver, setDragOver] = useStateK(null);

  const byStatus = {};
  Object.keys(STATUS_META).forEach(k => byStatus[k] = []);
  creators.forEach(c => byStatus[c.status]?.push(c));

  const onDragStart = (e, id) => {
    setDragId(id);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", id);
  };
  const onDragOver = (e, status) => {
    e.preventDefault();
    setDragOver(status);
  };
  const onDrop = (e, status) => {
    e.preventDefault();
    if (dragId) onStatusChange(dragId, status);
    setDragId(null);
    setDragOver(null);
  };

  return (
    <div className="kanban">
      {Object.entries(STATUS_META).map(([k, m]) => (
        <div
          key={k}
          className="kanban-col"
          onDragOver={(e) => onDragOver(e, k)}
          onDrop={(e) => onDrop(e, k)}
          style={dragOver === k ? { background: "var(--accent-50)", borderColor: "var(--accent-300)" } : {}}
        >
          <div className="kanban-col-head">
            <span className="dot" style={{ width: 8, height: 8, borderRadius: "50%", background: m.color, display: "inline-block" }} />
            <span className="col-name">{m.ru}</span>
            <span className="col-count">{byStatus[k].length}</span>
          </div>
          <div className="kanban-cards">
            {byStatus[k].slice(0, 40).map(c => (
              <div
                key={c.id}
                className="kanban-card"
                draggable
                onDragStart={(e) => onDragStart(e, c.id)}
                onClick={() => onCardClick(c)}
              >
                <div className="top">
                  <Avatar creator={c} size={26} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="name">{c.name}</div>
                    <div className="small muted" style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{c.handle}</div>
                  </div>
                </div>
                <div className="stats">
                  <span>{CRM.fmtNum(c.subs)} subs</span>
                  <span>{CRM.fmtNum(c.avgViews)} avg</span>
                  <span>CPV {c.cpv} ₽</span>
                </div>
                <div className="meta-row" style={{ marginTop: 8 }}>
                  <span className="price">{CRM.fmtMoney(c.price)}</span>
                  <ContactsStack contacts={c.contacts} max={2} />
                </div>
              </div>
            ))}
            {byStatus[k].length > 40 && (
              <div className="small muted" style={{ textAlign: "center", padding: 6 }}>
                +{byStatus[k].length - 40} more
              </div>
            )}
            {byStatus[k].length === 0 && (
              <div className="small muted" style={{ textAlign: "center", padding: 14, border: "1.5px dashed var(--border-default)", borderRadius: 8 }}>
                Empty
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { KanbanBoard });