"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; dotClass: string; headerClass: string }[] = [
  { id: "todo",        label: "Da fare",   dotClass: "bg-[#d4d4d8]",  headerClass: "text-[#71717a]" },
  { id: "in_progress", label: "In corso",  dotClass: "bg-[#DEF168]",  headerClass: "text-[#1A463C]" },
  { id: "done",        label: "Fatto",     dotClass: "bg-[#1A463C]",  headerClass: "text-[#1A463C]" },
];

function TaskCard({ task, token }: { task: Task; token: string }) {
  return (
    <div className="bg-white rounded-lg border border-[#e5e7eb] px-3 py-2.5 shadow-sm">
      <p className="text-[10px] font-medium text-[#71717a] uppercase tracking-wide mb-1 truncate">
        {task.phaseTitle}
      </p>
      <p className={`text-sm font-medium leading-snug mb-2 ${task.status === "done" ? "line-through text-[#71717a]" : "text-[#1a1a1a]"}`}>
        {task.title}
      </p>
      {task.description && (
        <p className="text-xs text-[#71717a] mb-2 leading-snug">{task.description}</p>
      )}
      {task.deliverables.length > 0 && (
        <ul className="space-y-1.5 mt-2 pt-2 border-t border-[#f4f4f5]">
          {task.deliverables.map((d) => (
            <li key={d.id} className="flex items-center justify-between gap-2">
              <span className="text-xs text-[#666666] 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-4">
      {COLUMNS.map((col) => (
        <div key={col.id} className="flex flex-col rounded-xl border border-[#e5e7eb] bg-[#f9f9f9] min-h-[200px]">
          <div className={`px-4 py-3 flex items-center justify-between ${col.headerClass}`}>
            <div className="flex items-center gap-2">
              <span className={`w-2 h-2 rounded-full ${col.dotClass}`} />
              <span className="text-xs font-bold uppercase tracking-wider">{col.label}</span>
            </div>
            <span className="text-xs font-semibold tabular-nums bg-white rounded-full px-2 py-0.5 border border-[#e5e7eb]">
              {tasksByStatus[col.id].length}
            </span>
          </div>
          <div className="flex-1 p-3 space-y-2">
            {tasksByStatus[col.id].map((task) => (
              <TaskCard key={task.id} task={task} token={token} />
            ))}
            {tasksByStatus[col.id].length === 0 && (
              <p className="text-xs text-[#d4d4d8] italic text-center py-10">Nessun task</p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}