"use client";

import type { Contact } from "@prisma/client";
import { useActionState } from "react";
import type { EtatContact } from "@/lib/actions/contacts";
import { TYPES_CONTACT } from "@/lib/libelles";

export function FormulaireContact({
  action,
  contact,
}: {
  action: (etat: EtatContact, form: FormData) => Promise<EtatContact>;
  contact?: Contact;
}) {
  const [etat, envoyer, enCours] = useActionState(action, {});
  const champ = (nom: keyof Contact, libelle: string, props: React.InputHTMLAttributes<HTMLInputElement> = {}) => (
    <label className="block text-sm font-medium">
      <span className="mb-1 block text-encre-2">{libelle}</span>
      <input name={nom} defaultValue={(contact?.[nom] as string | null) ?? ""} className="champ" {...props} />
    </label>
  );
  return (
    <form action={envoyer} className="grid gap-4 sm:grid-cols-2">
      {champ("nom", "Nom / raison sociale", { required: true })}
      <label className="block text-sm font-medium">
        <span className="mb-1 block text-encre-2">Type</span>
        <select name="type" defaultValue={contact?.type ?? "CLIENT"} className="champ">
          {Object.entries(TYPES_CONTACT).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
      </label>
      {champ("ice", "ICE (15 chiffres)", { inputMode: "numeric", pattern: "\\d{15}" })}
      {champ("identifiantFiscal", "Identifiant fiscal (IF)")}
      {champ("rc", "Registre de commerce (RC)")}
      {champ("ville", "Ville")}
      {champ("adresse", "Adresse")}
      {champ("telephone", "Téléphone", { type: "tel" })}
      {champ("email", "E-mail", { type: "email" })}
      <label className="block text-sm font-medium sm:col-span-2">
        <span className="mb-1 block text-encre-2">Notes</span>
        <textarea name="notes" rows={2} defaultValue={contact?.notes ?? ""} className="champ" />
      </label>
      <div className="flex items-center gap-3 sm:col-span-2">
        <button disabled={enCours} className="bouton-principal">{enCours ? "Enregistrement…" : contact ? "Enregistrer" : "Créer le contact"}</button>
        {etat.erreur && <p className="text-sm text-danger">{etat.erreur}</p>}
        {etat.ok && <p className="text-sm text-succes">Enregistré.</p>}
      </div>
    </form>
  );
}