import Link from "next/link";
import { db, schema } from "@/lib/db";
import { desc, eq } from "drizzle-orm";
import Icon from "@/components/Icon";
import RowDeleteButton from "./RowDeleteButton";

export const metadata = { title: "Factures" };

function formatEuros(cents: number): string {
  return new Intl.NumberFormat("fr-FR", {
    style: "currency",
    currency: "EUR",
  }).format(cents / 100);
}

const statusStyles: Record<string, { label: string; cls: string }> = {
  brouillon: {
    label: "Brouillon",
    cls: "bg-surface-container text-on-surface-variant",
  },
  envoyee: {
    label: "À payer",
    cls: "bg-secondary-container text-on-secondary-container",
  },
  payee: { label: "Payée", cls: "bg-primary text-on-primary" },
  annulee: {
    label: "Annulée",
    cls: "bg-error-container text-on-error-container",
  },
};

export default async function FacturesPage() {
  const invoices = await db
    .select({
      id: schema.invoice.id,
      number: schema.invoice.number,
      amountCents: schema.invoice.amountCents,
      status: schema.invoice.status,
      issuedAt: schema.invoice.issuedAt,
      dueAt: schema.invoice.dueAt,
      description: schema.invoice.description,
      clientName: schema.user.name,
      clientEmail: schema.user.email,
    })
    .from(schema.invoice)
    .leftJoin(schema.user, eq(schema.invoice.clientId, schema.user.id))
    .orderBy(desc(schema.invoice.createdAt));

  return (
    <div className="space-y-10 max-w-7xl">
      <header className="flex items-end justify-between gap-4 flex-wrap">
        <div>
          <span className="eyebrow">Comptabilité</span>
          <h1 className="display-lg !text-4xl text-primary mt-2">Factures</h1>
          <p className="body-md text-on-surface-variant mt-2">
            {invoices.length} facture{invoices.length > 1 ? "s" : ""} au total.
          </p>
        </div>
        <Link
          href="/socialexadmin/factures/nouvelle"
          className="btn btn-primary inline-flex items-center gap-2"
        >
          <Icon name="add" className="!text-base" />
          Créer une facture
        </Link>
      </header>

      {invoices.length === 0 ? (
        <div className="bg-white border border-outline-variant p-16 text-center">
          <p className="body-md text-on-surface-variant italic">
            Aucune facture émise.
          </p>
        </div>
      ) : (
        <div className="bg-white border border-outline-variant overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-outline-variant/60 text-left">
                <th className="eyebrow !text-on-surface-variant p-4">N°</th>
                <th className="eyebrow !text-on-surface-variant p-4">Client</th>
                <th className="eyebrow !text-on-surface-variant p-4">
                  Description
                </th>
                <th className="eyebrow !text-on-surface-variant p-4">
                  Montant
                </th>
                <th className="eyebrow !text-on-surface-variant p-4">
                  Statut
                </th>
                <th className="eyebrow !text-on-surface-variant p-4">
                  Échéance
                </th>
                <th className="eyebrow !text-on-surface-variant p-4 text-right">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {invoices.map((inv) => {
                const s = statusStyles[inv.status] ?? {
                  label: inv.status,
                  cls: "",
                };
                return (
                  <tr
                    key={inv.id}
                    className="border-b border-outline-variant/40 last:border-b-0 hover:bg-surface-container-low transition-colors group"
                  >
                    <td className="p-0">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4 font-serif text-primary"
                      >
                        {inv.number}
                      </Link>
                    </td>
                    <td className="p-0">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4 text-on-surface"
                      >
                        {inv.clientName ?? "—"}
                      </Link>
                    </td>
                    <td className="p-0 max-w-md">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4 text-on-surface-variant truncate"
                      >
                        {inv.description}
                      </Link>
                    </td>
                    <td className="p-0">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4 font-serif text-primary"
                      >
                        {formatEuros(inv.amountCents)}
                      </Link>
                    </td>
                    <td className="p-0">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4"
                      >
                        <span
                          className={`inline-block px-2.5 py-1 text-[10px] uppercase tracking-widest font-serif ${s.cls}`}
                        >
                          {s.label}
                        </span>
                      </Link>
                    </td>
                    <td className="p-0">
                      <Link
                        href={`/socialexadmin/factures/${inv.id}`}
                        className="block p-4 text-on-surface-variant text-xs"
                      >
                        {inv.dueAt
                          ? new Date(inv.dueAt).toLocaleDateString("fr-FR")
                          : "—"}
                      </Link>
                    </td>
                    <td className="p-4">
                      <div className="inline-flex items-center gap-1 justify-end">
                        <a
                          href={`/api/admin/invoices/${inv.id}/print`}
                          target="_blank"
                          rel="noopener noreferrer"
                          aria-label="Télécharger la facture en PDF"
                          title="Télécharger PDF"
                          className="p-2 text-on-surface-variant hover:text-primary transition-colors"
                        >
                          <Icon name="download" className="!text-base" />
                        </a>
                        <Link
                          href={`/socialexadmin/factures/${inv.id}`}
                          aria-label="Modifier la facture"
                          title="Modifier"
                          className="p-2 text-on-surface-variant hover:text-primary transition-colors"
                        >
                          <Icon name="edit" className="!text-base" />
                        </Link>
                        <RowDeleteButton
                          invoiceId={inv.id}
                          number={inv.number}
                        />
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}