import Link from "next/link";

interface LeadItem {
  id: string;
  number: string;
  status: "new" | "in_progress" | "converted" | "declined";
  firstName: string | null;
  lastName: string | null;
  companyName: string | null;
  cargoDescription: string | null;
  createdAt: Date;
  responsible: { name: string } | null;
}

interface Column {
  status: LeadItem["status"];
  label: string;
}

function toDateInputValue(date: Date): string {
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

export function LeadsBoard({ leads, columns }: { leads: LeadItem[]; columns: Column[] }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {columns.map((col) => {
        const items = leads.filter((l) => l.status === col.status);
        return (
          <div key={col.status}>
            <h2 className="mb-2 flex items-center gap-2 text-sm font-semibold text-text-muted">
              {col.label}
              <span className="rounded-full bg-surface-hover px-1.5 py-0.5 text-xs">{items.length}</span>
            </h2>
            <div className="flex flex-col gap-2">
              {items.map((lead) => (
                <Link key={lead.id} href={`/leads/${lead.id}`} className="card block p-3 hover:border-accent">
                  <div className="mb-1 flex items-center justify-between">
                    <span className="font-mono text-xs text-text-faint">{lead.number}</span>
                  </div>
                  <div className="mb-1 truncate text-sm font-medium">
                    {[lead.lastName, lead.firstName].filter(Boolean).join(" ") || lead.companyName || "Без имени"}
                  </div>
                  {lead.cargoDescription && <div className="truncate text-xs text-text-muted">{lead.cargoDescription}</div>}
                  <div className="mt-1 flex items-center justify-between text-xs text-text-faint">
                    <span>{lead.responsible?.name ?? "—"}</span>
                    <span>{toDateInputValue(lead.createdAt)}</span>
                  </div>
                </Link>
              ))}
              {items.length === 0 && <p className="text-xs text-text-faint">Пусто</p>}
            </div>
          </div>
        );
      })}
    </div>
  );
}