/* ============================================
   KANBAN VIEW with drag & drop
   ============================================ */

const TaskCard = ({ task, onOpen, onDragStart, onDragEnd, isDragging }) => {
  const proj = getProject(task.project);
  const assignee = getUser(task.assignee);
  const pic = getUser(task.pic);
  const rel = relativeDue(task.dueDate, task.status);
  const checkDone = (task.checklist || []).filter(c => c.done).length;
  const checkTotal = (task.checklist || []).length;

  return (
    <div
      className={`card${isDragging ? ' dragging' : ''}`}
      draggable
      onDragStart={(e) => onDragStart(task, e)}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(task.id)}
    >
      <div className="card-top">
        {proj && <ProjectChip projectId={task.project} />}
        <span className="card-id">{task.id.split('-').slice(-2).join('-')}</span>
      </div>
      <div className="card-name">{task.name}</div>

      <div className="card-meta">
        <PriorityBadge priority={task.priority} />
        {task.workType && <span className="tag">{task.workType}</span>}
        {task.recurring && (
          <span className="tag" style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }} title={task.recurring.label}>
            <Icon name="repeat" size={10} /> Recurring
          </span>
        )}
      </div>

      {checkTotal > 0 && (
        <>
          <div className="card-progress">
            <div className="card-progress-fill" style={{ width: `${(checkDone / checkTotal) * 100}%` }} />
          </div>
          <div className="card-foot">
            <span className="card-foot-meta">
              <Icon name="checkSquare" size={11} /> {checkDone}/{checkTotal}
            </span>
            {(task.comments || []).length > 0 && (
              <span className="card-foot-meta">
                <Icon name="message" size={11} /> {task.comments.length}
              </span>
            )}
            {(task.attachments || []).length > 0 && (
              <span className="card-foot-meta">
                <Icon name="paperclip" size={11} /> {task.attachments.length}
              </span>
            )}
            <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
              {rel && <DuePill date={task.dueDate} status={task.status} />}
              {assignee && <Avatar user={assignee} size="sm" />}
            </span>
          </div>
        </>
      )}

      {checkTotal === 0 && (
        <div className="card-foot">
          {(task.comments || []).length > 0 && (
            <span className="card-foot-meta">
              <Icon name="message" size={11} /> {task.comments.length}
            </span>
          )}
          {(task.attachments || []).length > 0 && (
            <span className="card-foot-meta">
              <Icon name="paperclip" size={11} /> {task.attachments.length}
            </span>
          )}
          <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            {rel && <DuePill date={task.dueDate} status={task.status} />}
            {assignee && <Avatar user={assignee} size="sm" />}
          </span>
        </div>
      )}
    </div>
  );
};

const KanbanView = ({ tasks, onOpenTask, onMoveTask, onAddInColumn }) => {
  const [draggingId, setDraggingId] = React.useState(null);
  const [dropCol, setDropCol] = React.useState(null);

  // Hide "Archived" from the board — archived tasks live in the Archived page
  const visibleStatuses = STATUSES.filter(s => s.key !== 'Archived');

  const grouped = React.useMemo(() => {
    const map = {};
    visibleStatuses.forEach(s => map[s.key] = []);
    tasks.forEach(t => {
      const key = t.status || 'Backlog';
      if (key === 'Archived') return; // archived tasks live in Archived page
      if (!map[key]) map[key] = [];
      map[key].push(t);
    });
    // sort by priority within columns
    const order = { Highest: 0, High: 1, Medium: 2, Low: 3 };
    Object.keys(map).forEach(k => {
      map[k].sort((a, b) => (order[a.priority] ?? 5) - (order[b.priority] ?? 5));
    });
    return map;
  }, [tasks]);

  const handleDragStart = (task, e) => {
    setDraggingId(task.id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', task.id);
  };
  const handleDragEnd = () => {
    setDraggingId(null);
    setDropCol(null);
  };
  const handleDragOver = (status, e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    if (dropCol !== status) setDropCol(status);
  };
  const handleDrop = (status, e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    if (id) onMoveTask(id, status);
    setDropCol(null);
    setDraggingId(null);
  };

  return (
    <div className="kanban">
      {visibleStatuses.map(s => (
        <div
          key={s.key}
          className={`kan-col${dropCol === s.key ? ' drop-active' : ''}`}
          onDragOver={(e) => handleDragOver(s.key, e)}
          onDragLeave={() => setDropCol(c => c === s.key ? null : c)}
          onDrop={(e) => handleDrop(s.key, e)}
        >
          <div className="kan-col-head">
            <span className="kan-col-pill">
              <span className="dot" style={{ background: s.color }} />
              {s.label}
            </span>
            <span className="kan-col-count">{grouped[s.key].length}</span>
            <button className="kan-col-add" title="Add task" onClick={() => onAddInColumn(s.key)}>
              <Icon name="plus" size={14} />
            </button>
          </div>
          <div className="kan-col-body">
            {grouped[s.key].length === 0 ? (
              <div className="kan-col-empty">No tasks here yet.</div>
            ) : grouped[s.key].map(t => (
              <TaskCard
                key={t.id}
                task={t}
                onOpen={onOpenTask}
                onDragStart={handleDragStart}
                onDragEnd={handleDragEnd}
                isDragging={draggingId === t.id}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { KanbanView, TaskCard });