import Link from "next/link";
import { eq, asc } from "drizzle-orm";
import { db, schema } from "@/lib/db";
import Icon from "@/components/Icon";
import CreateInvoiceForm, { type ClientOption } from "./CreateInvoiceForm";
import { DEFAULT_EMITTER } from "@/lib/invoices";

export const metadata = { title: "Nouvelle facture" };

export default async function NouvelleFacturePage() {
  // Liste des clients (role=client) + profil joint pour pré-remplir l'UI.
  const rows = await db
    .select({
      id: schema.user.id,
      name: schema.user.name,
      email: schema.user.email,
      company: schema.clientProfile.company,
      siret: schema.clientProfile.siret,
      addressStreet: schema.clientProfile.addressStreet,
      addressZip: schema.clientProfile.addressZip,
      addressCity: schema.clientProfile.addressCity,
      addressCountry: schema.clientProfile.addressCountry,
    })
    .from(schema.user)
    .leftJoin(
      schema.clientProfile,
      eq(schema.clientProfile.userId, schema.user.id)
    )
    .where(eq(schema.user.role, "client"))
    .orderBy(asc(schema.user.name));

  const clients: ClientOption[] = rows.map((r) => ({
    id: r.id,
    name: r.name,
    email: r.email,
    company: r.company ?? null,
    siret: r.siret ?? null,
    addressStreet: r.addressStreet ?? null,
    addressZip: r.addressZip ?? null,
    addressCity: r.addressCity ?? null,
    addressCountry: r.addressCountry ?? null,
  }));

  return (
    <div className="space-y-10 max-w-5xl">
      <Link
        href="/socialexadmin/factures"
        className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors font-serif"
      >
        <Icon name="arrow_back" className="!text-base" />
        Retour aux factures
      </Link>

      <header>
        <span className="eyebrow">Comptabilité</span>
        <h1 className="display-lg !text-4xl text-primary mt-2">
          Nouvelle facture
        </h1>
        <p className="body-md text-on-surface-variant mt-2 max-w-2xl">
          Création manuelle, indépendante d&apos;un dossier. Les coordonnées
          émetteur et client sont pré-remplies mais éditables ligne par ligne.
        </p>
      </header>

      <CreateInvoiceForm
        clients={clients}
        defaultEmitter={{
          name: DEFAULT_EMITTER.name,
          tagline: DEFAULT_EMITTER.tagline ?? "",
          email: DEFAULT_EMITTER.email ?? "",
          addressLines: "",
          siret: "",
        }}
      />
    </div>
  );
}