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

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();

  const preventiviAction = (
    <Link
      href="/admin/preventivi/genera"
      className="flex items-center gap-2 px-4 py-2 bg-[#1A463C] text-white rounded-md text-sm font-medium hover:bg-[#163a31] transition-colors"
    >
      <Plus size={16} />
      Genera preventivo
    </Link>
  );

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

      {/* Lista */}
      {proposals.length === 0 ? (
        <div className="text-center py-20 border border-dashed border-[#e5e7eb] rounded-lg">
          <FileText size={40} className="mx-auto text-[#71717a] mb-4" />
          <p className="text-[#71717a] text-sm">Nessun preventivo ancora.</p>
          <Link
            href="/admin/preventivi/genera"
            className="mt-4 inline-flex items-center gap-2 text-sm text-[#1A463C] hover:underline"
          >
            Genera il primo preventivo →
          </Link>
        </div>
      ) : (
        <div className="border border-[#e5e7eb] rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-[#71717a]">Titolo</th>
                <th className="px-4 py-3 text-left font-medium text-[#71717a]">Lead / Cliente</th>
                <th className="px-4 py-3 text-left font-medium text-[#71717a]">Offerta</th>
                <th className="px-4 py-3 text-left font-medium text-[#71717a]">Stato</th>
                <th className="px-4 py-3 text-left font-medium text-[#71717a]">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-[#e5e7eb] last:border-0 hover:bg-[#f9f9f9] transition-colors">
                    <td className="px-4 py-3 font-medium">
                      <Link href={`/admin/preventivi/${p.id}`} className="hover:text-[#1A463C] transition-colors">
                        {p.title ?? "Senza titolo"}
                      </Link>
                    </td>
                    <td className="px-4 py-3 text-[#71717a]">{subject}</td>
                    <td className="px-4 py-3 text-[#71717a]">{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-[#71717a]">
                      {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-[#1A463C] hover:underline"
                        >
                          Apri →
                        </a>
                      ) : null}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
