"use client";

import type { ClientView } from "@/lib/client-view";
import { ApproveButton } from "@/components/client/ApproveButton";

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

const COLUMNS: { id: "todo" | "in_progress" | "done"; label: string }[] = [
  { id: "todo",        label: "Da fare"  },
  { id: "in_progress", label: "In corso" },
  { id: "done",        label: "Fatto"    },
];

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">
      <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 ${task.status === "done" ? "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 }))
  );

  const tasksByStatus = {
    todo:        allTasks.filter((t) => t.status === "todo"),
    in_progress: allTasks.filter((t) => t.status === "in_progress"),
    done:        allTasks.filter((t) => t.status === "done"),
  };

  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
      {COLUMNS.map((col) => (
        <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 border-b border-border-light pb-2">
            <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">{col.label}</span>
            <span className="text-[10px] font-bold tabular-nums bg-secondary text-secondary-foreground rounded-full px-2 py-0.5">
              {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>
  );
}