import type { Prisma, TypeContact } from "@prisma/client";
import { Search } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { enregistrerContact } from "@/lib/actions/contacts";
import { peutModifierDossiers, utilisateurCourant } from "@/lib/auth";
import { db } from "@/lib/db";
import { TYPES_CONTACT } from "@/lib/libelles";
import { FormulaireContact } from "@/components/formulaire-contact";
import { EnTetePage, Vide } from "@/components/ui";

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

export default async function PageContacts({ searchParams }: { searchParams: Promise<{ q?: string; type?: string }> }) {
  const f = await searchParams;
  const moi = await utilisateurCourant();
  const where: Prisma.ContactWhereInput = {
    ...(f.type && { type: f.type as TypeContact }),
    ...(f.q && { nom: { contains: f.q, mode: "insensitive" } }),
  };
  const contacts = await db.contact.findMany({
    where,
    orderBy: { nom: "asc" },
    take: 300,
    include: { _count: { select: { dossiers: true } } },
  });

  return (
    <div className="mx-auto max-w-5xl">
      <EnTetePage titre="Contacts" sousTitre="Clients, fournisseurs et lieux d'événements" />

      {peutModifierDossiers(moi.role) && (
        <details className="carte mb-4 p-4">
          <summary className="cursor-pointer text-sm font-medium">+ Nouveau contact</summary>
          <div className="mt-4">
            <FormulaireContact action={enregistrerContact.bind(null, null)} />
          </div>
        </details>
      )}

      <form method="get" className="mb-4 flex flex-wrap gap-2">
        <label className="relative min-w-60 flex-1">
          <span className="sr-only">Rechercher</span>
          <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-encre-3" aria-hidden />
          <input name="q" defaultValue={f.q} placeholder="Rechercher un nom" className="champ pl-9" />
        </label>
        <select name="type" defaultValue={f.type ?? ""} className="champ w-auto">
          <option value="">Tous les types</option>
          {Object.entries(TYPES_CONTACT).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        <button className="bouton">Filtrer</button>
      </form>

      <div className="carte overflow-hidden">
        {contacts.length === 0 ? (
          <Vide>Aucun contact.</Vide>
        ) : (
          <ul className="divide-y divide-bord">
            {contacts.map((c) => (
              <li key={c.id}>
                <Link href={`/contacts/${c.id}`} className="flex items-center justify-between gap-3 px-4 py-3 hover:bg-fond">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium">{c.nom}</p>
                    <p className="text-xs text-encre-2">
                      {TYPES_CONTACT[c.type]}
                      {c.ville && ` · ${c.ville}`}
                      {c.ice ? ` · ICE ${c.ice}` : c.type === "CLIENT" && " · ICE manquant"}
                    </p>
                  </div>
                  <span className="chiffres shrink-0 text-xs text-encre-2">{c._count.dossiers} dossier(s)</span>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}