"use client";

import type { Dossier } from "@prisma/client";
import { useActionState } from "react";
import type { EtatFormulaire } from "@/lib/actions/dossiers";
import { TYPES_DOSSIER } from "@/lib/libelles";
import { valeurDate } from "@/lib/format";

type Option = { id: string; nom: string };

export function FormulaireDossier({
  action,
  dossier,
  societes,
  clients,
  charges,
  libelleBouton,
}: {
  action: (etat: EtatFormulaire, form: FormData) => Promise<EtatFormulaire>;
  dossier?: Dossier;
  societes: Option[];
  clients: Option[];
  charges: Option[];
  libelleBouton: string;
}) {
  const [etat, envoyer, enCours] = useActionState(action, {});
  return (
    <form action={envoyer} className="space-y-6">
      <fieldset className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
        <legend className="mb-2 text-sm font-semibold">Informations générales</legend>
        <Champ libelle="Intitulé de l'événement" className="sm:col-span-2">
          <input name="intitule" required defaultValue={dossier?.intitule} className="champ" />
        </Champ>
        <Champ libelle="Société">
          <select name="societeId" required defaultValue={dossier?.societeId ?? societes[0]?.id} className="champ">
            {societes.map((s) => <option key={s.id} value={s.id}>{s.nom}</option>)}
          </select>
        </Champ>
        <Champ libelle="Type de dossier">
          <select name="type" defaultValue={dossier?.type ?? "EVENEMENT"} className="champ">
            {Object.entries(TYPES_DOSSIER).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
          </select>
        </Champ>
        <Champ libelle="Client">
          <select name="clientId" defaultValue={dossier?.clientId ?? ""} className="champ">
            <option value="">— Choisir —</option>
            {clients.map((c) => <option key={c.id} value={c.id}>{c.nom}</option>)}
          </select>
        </Champ>
        <Champ libelle="… ou nouveau client">
          <input name="nouveauClient" placeholder="Nom du nouveau client" className="champ" />
        </Champ>
        <Champ libelle="Chargé(e) de compte">
          <select name="chargeId" defaultValue={dossier?.chargeId ?? ""} className="champ">
            <option value="">— Non affecté —</option>
            {charges.map((c) => <option key={c.id} value={c.id}>{c.nom}</option>)}
          </select>
        </Champ>
        <Champ libelle="Lieu">
          <input name="lieu" defaultValue={dossier?.lieu ?? ""} className="champ" />
        </Champ>
        <Champ libelle="Montant estimé (MAD HT)">
          <input name="montantEstime" inputMode="decimal" defaultValue={dossier?.montantEstime?.toString() ?? ""} className="champ" />
        </Champ>
      </fieldset>

      <fieldset className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-3">
        <legend className="mb-1 text-sm font-semibold">Dates clés</legend>
        <p className="-mt-1 text-xs text-encre-2 sm:col-span-3">Elles fixent automatiquement les échéances de la procédure (Récep. +1 j, Conf. +3 j, Événement −1 j…).</p>
        <Champ libelle="Réception de la demande">
          <input type="date" name="dateReception" defaultValue={valeurDate(dossier?.dateReception)} className="champ" />
        </Champ>
        <Champ libelle="Visite de repérage">
          <input type="date" name="dateReperage" defaultValue={valeurDate(dossier?.dateReperage)} className="champ" />
        </Champ>
        <Champ libelle="Confirmation client">
          <input type="date" name="dateConfirmation" defaultValue={valeurDate(dossier?.dateConfirmation)} className="champ" />
        </Champ>
        <Champ libelle="Début de l'événement">
          <input type="date" name="dateDebut" defaultValue={valeurDate(dossier?.dateDebut)} className="champ" />
        </Champ>
        <Champ libelle="Fin de l'événement">
          <input type="date" name="dateFin" defaultValue={valeurDate(dossier?.dateFin)} className="champ" />
        </Champ>
      </fieldset>

      <Champ libelle="Notes">
        <textarea name="notes" rows={3} defaultValue={dossier?.notes ?? ""} className="champ" />
      </Champ>

      <div className="flex items-center gap-3">
        <button disabled={enCours} className="bouton-principal">{enCours ? "Enregistrement…" : libelleBouton}</button>
        {etat.erreur && <p className="text-sm text-danger">{etat.erreur}</p>}
        {etat.ok && <p className="text-sm text-succes">Enregistré.</p>}
      </div>
    </form>
  );
}

function Champ({ libelle, children, className }: { libelle: string; children: React.ReactNode; className?: string }) {
  return (
    <label className={`block text-sm font-medium ${className ?? ""}`}>
      <span className="mb-1 block text-encre-2">{libelle}</span>
      {children}
    </label>
  );
}