import Link from "next/link";
import { listProposals } from "@/lib/proposal/queries";
import { FileText, Plus } from "lucide-react";

export const revalidate = 0;

const STATE_LABELS: Record<string, { label: string; className: string }> = {
  draft:     { label: "Bozza",      className: "bg-yellow-100 text-yellow-800" },
  published: { label: "Pubblicato", className: "bg-blue-100 text-blue-800" },
  accepted:  { label: "Accettato",  className: "bg-green-100 text-green-800" },
  rejected:  { label: "Rifiutato",  className: "bg-red-100 text-red-800" },
};

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

  return (
    <div className="max-w-5xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-foreground">Preventivi</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Preventivi generati con AI e pubblicati ai clienti
          </p>
        </div>
        <Link
          href="/admin/preventivi/genera"
          className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
        >
          <Plus size={16} />
          Genera preventivo
        </Link>
      </div>

      {/* Lista */}
      {proposals.length === 0 ? (
        <div className="text-center py-20 border border-dashed border-border rounded-lg">
          <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"
          >
            Genera il primo preventivo →
          </Link>
        </div>
      ) : (
        <div className="border border-border rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-muted border-b border-border">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Titolo</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Lead / Cliente</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Offerta</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Stato</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Data</th>
                <th className="px-4 py-3" />
              </tr>
            </thead>
            <tbody>
              {proposals.map((p) => {
                const stateInfo = STATE_LABELS[p.state] ?? { label: p.state, className: "bg-gray-100 text-gray-700" };
                const subject = p.clientName ?? p.leadName ?? "—";
                return (
                  <tr key={p.id} className="border-b border-border last:border-0 hover:bg-muted/50 transition-colors">
                    <td className="px-4 py-3 font-medium">
                      <Link href={`/admin/preventivi/${p.id}`} className="hover:text-primary transition-colors">
                        {p.title ?? "Senza titolo"}
                      </Link>
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">{subject}</td>
                    <td className="px-4 py-3 text-muted-foreground">{p.offerName}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${stateInfo.className}`}>
                        {stateInfo.label}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">
                      {p.createdAt.toLocaleDateString("it-IT")}
                    </td>
                    <td className="px-4 py-3 text-right">
                      {p.state === "published" || p.state === "accepted" ? (
                        <a
                          href={`/preventivo/${p.slug}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-xs text-primary hover:underline"
                        >
                          Apri →
                        </a>
                      ) : null}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
