import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { enregistrerContact } from "@/lib/actions/contacts";
import { peutModifierDossiers, utilisateurCourant } from "@/lib/auth";
import { db } from "@/lib/db";
import { dateCourte } from "@/lib/format";
import { STATUTS_COMMERCIAUX } from "@/lib/libelles";
import { FormulaireContact } from "@/components/formulaire-contact";
import { Badge, EnTetePage, Vide } from "@/components/ui";

export const metadata: Metadata = { title: "Contact" };

export default async function FicheContact({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const moi = await utilisateurCourant();
  const contact = await db.contact.findUnique({
    where: { id },
    include: { dossiers: { orderBy: { numero: "desc" }, include: { societe: true } } },
  });
  if (!contact) notFound();
  const gagnes = contact.dossiers.filter((d) => d.statutCommercial === "CONFIRME").length;

  return (
    <div className="mx-auto max-w-5xl">
      <Link href="/contacts" className="text-sm text-encre-2 hover:text-encre">← Contacts</Link>
      <div className="mt-2">
        <EnTetePage titre={contact.nom} sousTitre={`${contact.dossiers.length} dossier(s), dont ${gagnes} confirmé(s)`} />
      </div>
      <div className="grid gap-6 lg:grid-cols-2">
        <section className="carte p-4">
          {peutModifierDossiers(moi.role) ? (
            <FormulaireContact action={enregistrerContact.bind(null, contact.id)} contact={contact} />
          ) : (
            <p className="text-sm text-encre-2">Lecture seule.</p>
          )}
        </section>
        <section className="carte overflow-hidden">
          <h2 className="titre-carte border-b border-bord px-4 py-3">Dossiers</h2>
          {contact.dossiers.length === 0 ? (
            <Vide>Aucun dossier.</Vide>
          ) : (
            <ul className="divide-y divide-bord">
              {contact.dossiers.map((d) => (
                <li key={d.id}>
                  <Link href={`/dossiers/${d.id}`} className="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-fond">
                    <div className="min-w-0">
                      <p className="truncate text-sm">
                        <span className="chiffres mr-1.5 text-xs text-encre-3">N° {d.numero}</span>
                        {d.intitule}
                      </p>
                      <p className="text-xs text-encre-2">{d.societe.code} · {dateCourte(d.dateDebut)}</p>
                    </div>
                    <Badge ton={STATUTS_COMMERCIAUX[d.statutCommercial].ton}>{STATUTS_COMMERCIAUX[d.statutCommercial].libelle}</Badge>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>
    </div>
  );
}