import type { Metadata } from "next";
import { modifierEtape } from "@/lib/actions/procedure";
import { utilisateurCourant } from "@/lib/auth";
import { db } from "@/lib/db";
import { ANCRES, libelleEcheance } from "@/lib/libelles";
import { EnTetePage } from "@/components/ui";

export const metadata: Metadata = { title: "Procédure" };

export default async function PageProcedure() {
  const moi = await utilisateurCourant();
  const admin = moi.role === "DIRECTEUR" || moi.role === "ADMIN";
  const modele = await db.modeleProcedure.findFirst({
    where: { actif: true },
    include: { etapes: { orderBy: { numero: "asc" } } },
  });
  const etapes = modele?.etapes ?? [];
  const sections = [...new Map(etapes.map((e) => [e.section, e.sectionNom])).entries()];

  return (
    <div className="mx-auto max-w-6xl">
      <EnTetePage
        titre="Modèle de procédure"
        sousTitre={`${modele?.nom ?? "Aucun modèle"} — ${etapes.length} étapes. Les modifications s'appliquent aux dossiers créés ensuite.`}
      />
      <div className="space-y-4">
        {sections.map(([code, nom]) => (
          <details key={code} className="carte overflow-hidden" open={code === "A"}>
            <summary className="cursor-pointer bg-fond px-4 py-3 text-sm font-semibold">
              Section {code} — {nom} <span className="font-normal text-encre-2">({etapes.filter((e) => e.section === code).length} étapes)</span>
            </summary>
            <ul className="divide-y divide-bord">
              {etapes
                .filter((e) => e.section === code)
                .map((e) =>
                  admin ? (
                    <li key={e.id}>
                      <form action={modifierEtape.bind(null, e.id)} className="grid items-center gap-2 px-4 py-2 md:grid-cols-[2.5rem_1fr_9rem_10rem_5rem_auto]">
                        <span className="chiffres text-xs text-encre-3">{e.numero}.</span>
                        <input name="libelle" defaultValue={e.libelle} aria-label="Libellé" className="champ" />
                        <input name="responsable" defaultValue={e.responsable} aria-label="Responsable" className="champ" />
                        <select name="ancre" defaultValue={e.ancre ?? ""} aria-label="Date de référence" className="champ">
                          <option value="">Indéterminée</option>
                          {Object.entries(ANCRES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                        </select>
                        <input name="decalage" type="number" defaultValue={e.decalage} aria-label="Décalage en jours" className="champ" />
                        <button className="bouton">OK</button>
                      </form>
                    </li>
                  ) : (
                    <li key={e.id} className="grid gap-2 px-4 py-2 text-sm md:grid-cols-[2.5rem_1fr_9rem_10rem]">
                      <span className="chiffres text-xs text-encre-3">{e.numero}.</span>
                      <span>{e.libelle}</span>
                      <span className="text-encre-2">{e.responsable}</span>
                      <span className="text-encre-2">{libelleEcheance(e.ancre, e.decalage)}</span>
                    </li>
                  ),
                )}
            </ul>
          </details>
        ))}
      </div>
    </div>
  );
}