import Link from "next/link";
import { listProposals } from "@/lib/proposal/queries";
import { FileText, Plus, ArrowRight } from "lucide-react";
import { PageHeader } from "@/components/admin/PageHeader";
import { Button } from "@/components/ui/button";

export const revalidate = 0;

const STATE_STYLES: Record<string, { label: string; className: string }> = {
  draft: {
    label: "Bozza",
    className:
      "bg-amber-50 text-amber-600 border-amber-100 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900",
  },
  published: {
    label: "Pubblicato",
    className:
      "bg-sky-50 text-sky-700 border-sky-100 dark:bg-sky-950/40 dark:text-sky-300 dark:border-sky-900",
  },
  accepted: {
    label: "Accettato",
    className:
      "bg-emerald-50 text-emerald-600 border-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900",
  },
  rejected: {
    label: "Rifiutato",
    className:
      "bg-red-50 text-red-600 border-red-100 dark:bg-red-950/40 dark:text-red-300 dark:border-red-900",
  },
};

export default async function PreventiviPage() {
  const proposals = await listProposals();

  const preventiviAction = (
    <Button asChild className="self-start sm:self-auto">
      <Link href="/admin/preventivi/genera">
        <Plus size={16} />
        Genera preventivo
      </Link>
    </Button>
  );

  return (
    <div className="space-y-6">
      <PageHeader
        title="Preventivi"
        subtitle="Preventivi generati con AI e pubblicati ai clienti"
        action={preventiviAction}
      />

      {proposals.length === 0 ? (
        <div className="text-center py-20 border border-dashed border-border rounded-xl">
          <FileText size={40} className="mx-auto text-muted-foreground mb-4" />
          <p className="text-muted-foreground text-sm">Nessun preventivo ancora.</p>
          <Link
            href="/admin/preventivi/genera"
            className="mt-4 inline-flex items-center gap-2 text-sm text-primary hover:underline font-medium"
          >
            Genera il primo preventivo →
          </Link>
        </div>
      ) : (
        <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm border-collapse">
              <thead>
                <tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
                  <th className="py-4 px-6 w-1/3">Titolo</th>
                  <th className="py-4 px-6">Lead / Cliente</th>
                  <th className="py-4 px-6">Offerta</th>
                  <th className="py-4 px-6 text-center">Stato</th>
                  <th className="py-4 px-6">Data</th>
                  <th className="py-4 px-6 text-right">Azione</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {proposals.map((p) => {
                  const stateInfo =
                    STATE_STYLES[p.state] ?? {
                      label: p.state,
                      className: "bg-muted text-muted-foreground border-border",
                    };
                  const subject = p.clientName ?? p.leadName ?? "—";
                  const isPublic = p.state === "published" || p.state === "accepted";
                  return (
                    <tr key={p.id} className="hover:bg-muted/40 transition-colors">
                      <td className="py-4 px-6">
                        <Link
                          href={`/admin/preventivi/${p.id}`}
                          className="font-semibold text-foreground hover:text-primary transition-colors"
                        >
                          {p.title ?? "Senza titolo"}
                        </Link>
                      </td>
                      <td className="py-4 px-6 text-muted-foreground">{subject}</td>
                      <td className="py-4 px-6 font-medium text-muted-foreground">{p.offerName}</td>
                      <td className="py-4 px-6 text-center">
                        <span
                          className={`inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-semibold tracking-wide uppercase border whitespace-nowrap ${stateInfo.className}`}
                        >
                          {stateInfo.label}
                        </span>
                      </td>
                      <td className="py-4 px-6 text-xs font-mono text-muted-foreground">
                        {p.createdAt.toLocaleDateString("it-IT")}
                      </td>
                      <td className="py-4 px-6 text-right">
                        {isPublic ? (
                          <a
                            href={`/preventivo/${p.slug}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="group inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
                          >
                            Apri
                            <ArrowRight
                              size={14}
                              className="transform group-hover:translate-x-0.5 transition-transform"
                            />
                          </a>
                        ) : (
                          <span className="text-muted-foreground/50 text-xs">—</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
            Mostrando {proposals.length} di {proposals.length}{" "}
            {proposals.length === 1 ? "preventivo generato" : "preventivi generati"}
          </div>
        </div>
      )}
    </div>
  );
}
