import { useState, type FormEvent } from 'react';
import { CATEGORY_KINDS, type Category, type CategoryKind } from '@siop/shared';
import { useCategories, useCreateCategory, useUpdateCategory } from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { Button } from '@/components/ui/button';

const TITRES: Record<CategoryKind, string> = {
  EQUIPMENT: 'Catégories d’équipement',
  COMPONENT_TYPE: 'Types d’organes',
};

/** Écran 7 des maquettes R1 : référentiels administrables — renommer,
 *  ajouter, (dés)activer. Jamais de suppression si utilisé. */
export default function PageCategories() {
  return (
    <>
      <div className="entete-page"><h1>Catégories</h1></div>
      <div className="grille-2">
        {CATEGORY_KINDS.map((kind) => (
          <ListeCategories key={kind} kind={kind} />
        ))}
      </div>
      <div className="carte" style={{ borderStyle: 'dashed', color: 'var(--encre-2)', fontSize: 13 }}>
        Une catégorie <b>utilisée</b> ne peut pas être supprimée — seulement renommée ou
        désactivée (elle disparaît des sélecteurs, l'historique reste lisible).
      </div>
    </>
  );
}

function ListeCategories({ kind }: { kind: CategoryKind }) {
  const { data: categories } = useCategories();
  const { can } = usePermissions();
  const creation = useCreateCategory();
  const [nom, setNom] = useState('');

  const liste = (categories ?? []).filter((c) => c.kind === kind);
  const peutEditer = can('SETTINGS', 'edit');

  const surAjout = (e: FormEvent) => {
    e.preventDefault();
    if (!nom.trim()) return;
    creation.mutate({ kind, name: nom.trim() }, { onSuccess: () => setNom('') });
  };

  return (
    <div className="carte">
      <h2>{TITRES[kind]}</h2>
      {liste.map((categorie) => (
        <LigneCategorie key={categorie.id} categorie={categorie} peutEditer={peutEditer} />
      ))}
      {can('SETTINGS', 'create') ? (
        <form className="ligne-organe" style={{ border: 0, marginTop: 6 }} onSubmit={surAjout}>
          <input
            aria-label={`Nouvelle entrée — ${TITRES[kind]}`}
            style={{ flex: 1 }}
            placeholder={kind === 'EQUIPMENT' ? 'Nouvelle catégorie…' : 'Nouveau type…'}
            value={nom}
            onChange={(e) => setNom(e.target.value)}
          />
          <Button type="submit" variant="prim" disabled={creation.isPending}>
            Ajouter
          </Button>
        </form>
      ) : null}
      {creation.isError ? (
        <p className="erreur-form" role="alert">{creation.error.message}</p>
      ) : null}
    </div>
  );
}

function LigneCategorie({
  categorie,
  peutEditer,
}: {
  categorie: Category;
  peutEditer: boolean;
}) {
  const maj = useUpdateCategory();
  const [enEdition, setEnEdition] = useState(false);
  const [nom, setNom] = useState(categorie.name);

  const renommer = (e: FormEvent) => {
    e.preventDefault();
    maj.mutate({ id: categorie.id, name: nom.trim() }, { onSuccess: () => setEnEdition(false) });
  };

  if (enEdition) {
    return (
      <form className="ligne-organe" onSubmit={renommer}>
        <input
          aria-label={`Renommer ${categorie.name}`}
          style={{ flex: 1 }}
          value={nom}
          onChange={(e) => setNom(e.target.value)}
          autoFocus
        />
        <Button type="submit" variant="prim" disabled={maj.isPending}>OK</Button>
        <Button onClick={() => setEnEdition(false)}>Annuler</Button>
      </form>
    );
  }

  return (
    <div className="item-liste" style={!categorie.isActive ? { color: 'var(--encre-3)' } : undefined}>
      {categorie.name}
      {!categorie.isActive ? <span style={{ fontSize: 11 }}> (désactivée)</span> : null}
      <span className="fin">
        <span className="num">
          {categorie.usageCount} {categorie.kind === 'EQUIPMENT' ? 'appareils' : ''}
        </span>
        {peutEditer ? (
          <>
            ·{' '}
            <button
              type="button"
              className="border-0 bg-transparent font-semibold text-primaire"
              onClick={() => setEnEdition(true)}
            >
              Renommer
            </button>
            ·{' '}
            <button
              type="button"
              className="border-0 bg-transparent font-semibold text-primaire"
              onClick={() => maj.mutate({ id: categorie.id, isActive: !categorie.isActive })}
            >
              {categorie.isActive ? 'Désactiver' : 'Réactiver'}
            </button>
          </>
        ) : null}
      </span>
    </div>
  );
}
