"use client";

import type { Dossier } from "@prisma/client";
import { useActionState, useState } from "react";
import type { EtatFormulaire } from "@/lib/actions/dossiers";
import { STATUTS_COMMERCIAUX, STATUTS_FINANCIERS, STATUTS_OPERATIONNELS } from "@/lib/libelles";

const AVEC_MOTIF = ["PERDU", "ANNULE_CLIENT", "ABANDONNE_AGENCE", "REPORTE"];

export function FormulaireStatuts({
  action,
  dossier,
}: {
  action: (etat: EtatFormulaire, form: FormData) => Promise<EtatFormulaire>;
  dossier: Pick<Dossier, "statutCommercial" | "statutOperationnel" | "statutFinancier" | "motif">;
}) {
  const [etat, envoyer, enCours] = useActionState(action, {});
  const [commercial, setCommercial] = useState<string>(dossier.statutCommercial);
  return (
    <form action={envoyer} className="grid gap-3 sm:grid-cols-3">
      <Choix nom="statutCommercial" libelle="Commercial" valeur={dossier.statutCommercial} options={STATUTS_COMMERCIAUX} onChange={setCommercial} />
      <Choix nom="statutOperationnel" libelle="Opérationnel" valeur={dossier.statutOperationnel} options={STATUTS_OPERATIONNELS} />
      <Choix nom="statutFinancier" libelle="Financier" valeur={dossier.statutFinancier} options={STATUTS_FINANCIERS} />
      {AVEC_MOTIF.includes(commercial) && (
        <label className="block text-xs font-medium text-encre-2 sm:col-span-3">
          Motif (obligatoire)
          <input name="motif" defaultValue={dossier.motif ?? ""} required className="champ mt-1" placeholder="Prix, date, concurrent retenu…" />
        </label>
      )}
      <div className="flex items-center gap-3 sm:col-span-3">
        <button disabled={enCours} className="bouton">{enCours ? "…" : "Mettre à jour les statuts"}</button>
        {etat.erreur && <p className="text-sm text-danger">{etat.erreur}</p>}
        {etat.ok && <p className="text-sm text-succes">Statuts enregistrés.</p>}
      </div>
    </form>
  );
}

function Choix({
  nom,
  libelle,
  valeur,
  options,
  onChange,
}: {
  nom: string;
  libelle: string;
  valeur: string;
  options: Record<string, { libelle: string }>;
  onChange?: (v: string) => void;
}) {
  return (
    <label className="block text-xs font-medium text-encre-2">
      {libelle}
      <select name={nom} defaultValue={valeur} onChange={(e) => onChange?.(e.target.value)} className="champ mt-1">
        {Object.entries(options).map(([k, v]) => <option key={k} value={k}>{v.libelle}</option>)}
      </select>
    </label>
  );
}