clienthub/src/components/client/kanban/ClientKanban.tsx

"use client";

import type { ClientView } from "@/lib/client-view";
import { ApproveButton } from "@/components/client/ApproveButton";
import { isClosedTaskStatus, TASK_STATUS_VISUALS } from "@/components/client/TaskStatusIndicator";
import { TASK_STATUS_LABELS, TASK_STATUSES, type TaskStatus } from "@/lib/task-status";

type Task = ClientView["phases"][number]["tasks"][number] & {
  phaseTitle: string;
};

const COLUMNS: { id: TaskStatus; label: string }[] = TASK_STATUSES.map((id) => ({
  id,
  label: TASK_STATUS_LABELS[id],
}));

function TaskCard({ task, token }: { task: Task; token: string }) {
  return (
    <div
      className={`bg-card rounded-lg border border-border-light px-4 py-4 shadow-sm hover:border-primary/30 hover:shadow-card-hover transition-all ${
        task.status === "cancelled" ? "opacity-70" : ""
      }`}
    >
      <p className="text-[9px] font-semibold text-muted-foreground uppercase tracking-wide mb-1 truncate">
        {task.phaseTitle}
      </p>
      <p className={`text-xs font-medium leading-snug ${isClosedTaskStatus(task.status) ? "line-through text-muted-foreground" : "text-foreground"}`}>
        {task.title}
      </p>
      {task.description && (
        <p className="text-[11px] text-muted-foreground mt-2 leading-snug">{task.description}</p>
      )}
      {task.deliverables.length > 0 && (
        <ul className="space-y-1.5 mt-2 pt-2 border-t border-border-light">
          {task.deliverables.map((d) => (
            <li key={d.id} className="flex items-center justify-between gap-2">
              <span className="text-xs text-muted-foreground truncate">{d.title}</span>
              {(d.status === "pending" || d.status === "submitted" || d.approved_at !== null) && (
                <ApproveButton deliverableId={d.id} token={token} approvedAt={d.approved_at} />
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export function ClientKanban({ phases, token }: { phases: ClientView["phases"]; token: string }) {
  const allTasks: Task[] = phases.flatMap((phase) =>
    phase.tasks.map((task) => ({ ...task, phaseTitle: phase.title }))
  );

  // Derived from the statuses, not a hand-written object: as three fixed keys it
  // dropped any task outside them from every column AND every counter, so the
  // client silently saw fewer tasks than the project had.
  const tasksByStatus = COLUMNS.reduce(
    (acc, col) => {
      acc[col.id] = allTasks.filter((t) => t.status === col.id);
      return acc;
    },
    {} as Record<TaskStatus, Task[]>
  );

  // "Cancellate" è l'unica colonna che si nasconde da vuota: nella maggior parte
  // dei progetti non ce n'è nessuna, e una quinta colonna vuota ruberebbe spazio
  // alle quattro che raccontano il lavoro. Si nasconde solo se è vuota, quindi
  // nessun task sparisce mai dalla board — era proprio quello il bug di prima.
  const visibleColumns = COLUMNS.filter(
    (col) => col.id !== "cancelled" || tasksByStatus.cancelled.length > 0
  );

  return (
    <div
      className={`grid grid-cols-1 gap-6 sm:grid-cols-2 ${
        visibleColumns.length > 4 ? "xl:grid-cols-5" : "xl:grid-cols-4"
      }`}
    >
      {visibleColumns.map((col) => {
        // Stessa tinta dell'icona in Timeline: passando da una vista all'altra
        // "in corso" e "in revisione" restano riconoscibili senza rileggere.
        const v = TASK_STATUS_VISUALS[col.id];
        return (
          <div key={col.id} className="flex flex-col gap-4 rounded-xl border border-border-light bg-muted/60 p-4 min-h-[300px]">
            <div className="flex items-center justify-between gap-2 border-b border-border-light pb-2">
              <div className="flex min-w-0 items-center gap-2">
                <span aria-hidden="true" className={`h-1.5 w-1.5 shrink-0 rounded-full ${v.dot}`} />
                <span className={`truncate text-xs font-bold uppercase tracking-wider ${v.label}`}>
                  {col.label}
                </span>
              </div>
              <span className={`shrink-0 text-[10px] font-bold tabular-nums rounded-full px-2 py-0.5 ${v.count}`}>
                {tasksByStatus[col.id].length}
              </span>
            </div>
            <div className="flex-1 flex flex-col gap-3">
              {tasksByStatus[col.id].map((task) => (
                <TaskCard key={task.id} task={task} token={token} />
              ))}
              {tasksByStatus[col.id].length === 0 && (
                <p className="text-xs text-muted-foreground italic text-center py-10">Nessun task</p>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}