import { useState, type FormEvent } from 'react';
import type { PreventiveGenerationResult } from '@siop/shared';
import {
  useCreateTaskTemplate,
  useGeneratePreventive,
  usePreventiveStatus,
  useTaskTemplates,
  useUpdateTaskTemplate,
} from '@/api/exploitation';
import { usePermissions } from '@/auth/use-permissions';
import { Button } from '@/components/ui/button';

const MOIS_FR = [
  'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre',
];
const libelleMois = (period: string) => {
  const [annee, mois] = period.split('-').map(Number);
  return `${MOIS_FR[mois! - 1]} ${annee}`;
};

/** Écran 3 des maquettes R2 : gabarits à périodicité + génération idempotente. */
export default function PagePreventif() {
  const { data: status } = usePreventiveStatus();
  const { data: templates } = useTaskTemplates();
  const { can } = usePermissions();
  const generation = useGeneratePreventive();
  const creation = useCreateTaskTemplate();
  const maj = useUpdateTaskTemplate();
  const [resultat, setResultat] = useState<PreventiveGenerationResult | null>(null);
  const [nouveau, setNouveau] = useState({ label: '', periodMonths: 1 });

  const peutGenerer = can('WORK_ORDERS', 'create');
  const peutAdministrer = can('SETTINGS', 'edit');

  const ajouterGabarit = (e: FormEvent) => {
    e.preventDefault();
    if (!nouveau.label.trim()) return;
    creation.mutate(
      { label: nouveau.label.trim(), periodMonths: nouveau.periodMonths },
      { onSuccess: () => setNouveau({ label: '', periodMonths: 1 }) },
    );
  };

  return (
    <>
      <div className="entete-page">
        <h1>Préventif</h1>
        <div className="actions">
          {peutGenerer && status ? (
            <Button
              variant="prim"
              disabled={generation.isPending}
              onClick={() => generation.mutate({}, { onSuccess: setResultat })}
            >
              Générer la grille de {libelleMois(status.month)}
            </Button>
          ) : null}
        </div>
      </div>
      {status ? (
        <div className="kpis">
          <div className="kpi">
            <div className="lib">Grilles générées</div>
            <div className="val num">{status.generated} / {status.assetsUnderContract}</div>
          </div>
          <div className="kpi">
            <div className="lib">Terminées</div>
            <div className="val num">{status.done}</div>
          </div>
          <div className={status.late ? 'kpi alarme' : 'kpi'}>
            <div className="lib">En retard</div>
            <div className="val num">{status.late}</div>
          </div>
          <div className="kpi">
            <div className="lib">Premiers contrôles</div>
            <div className="val num">{status.firstControls}</div>
          </div>
        </div>
      ) : null}
      {resultat ? (
        <div className="carte gen-info">
          <span style={{ fontSize: 13 }}>
            ✓ Génération {libelleMois(resultat.month)} : <b className="num">{resultat.created}</b> OT créés
            {resultat.firstControls ? <> (dont <b className="num">{resultat.firstControls}</b> premiers contrôles)</> : null},{' '}
            <b className="num">{resultat.skipped}</b> déjà en place — <b>regénérer ne double rien</b>.
          </span>
        </div>
      ) : null}
      {generation.isError ? (
        <p className="erreur-form" role="alert">{generation.error.message}</p>
      ) : null}
      <div className="carte" style={{ padding: 0 }}>
        <div className="table">
          <table>
            <thead>
              <tr>
                <th>Tâche du gabarit</th>
                <th>Organe visé</th>
                <th>Périodicité</th>
                {peutAdministrer ? <th></th> : null}
              </tr>
            </thead>
            <tbody>
              {(templates ?? []).map((t) => (
                <tr key={t.id} style={!t.isActive ? { color: 'var(--encre-3)' } : undefined}>
                  <td>{t.isRegulatory ? <b>{t.label}</b> : t.label}{!t.isActive ? ' (désactivé)' : ''}</td>
                  <td>{t.componentTypeName ?? '—'}</td>
                  <td>
                    <span className={t.isRegulatory ? 'periode reglementaire' : 'periode'}>
                      {t.periodMonths === 1
                        ? 'Tous les mois'
                        : `${t.periodMonths} mois${t.isRegulatory ? ' · réglementaire' : ''}`}
                    </span>
                  </td>
                  {peutAdministrer ? (
                    <td>
                      <Button
                        variant="ghost"
                        className="px-2 py-1 text-[12px]"
                        onClick={() => maj.mutate({ id: t.id, isActive: !t.isActive })}
                      >
                        {t.isActive ? 'Désactiver' : 'Réactiver'}
                      </Button>
                    </td>
                  ) : null}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      {peutAdministrer ? (
        <form className="carte flex items-end gap-3" onSubmit={ajouterGabarit}>
          <div className="champ" style={{ flex: 2 }}>
            <label htmlFor="gab-label">Nouvelle tâche</label>
            <input
              id="gab-label"
              placeholder="Ex. : Contrôle éclairage de gaine"
              value={nouveau.label}
              onChange={(e) => setNouveau((n) => ({ ...n, label: e.target.value }))}
            />
          </div>
          <div className="champ">
            <label htmlFor="gab-periode">Périodicité (mois)</label>
            <input
              id="gab-periode"
              type="number"
              min={1}
              max={60}
              value={nouveau.periodMonths}
              onChange={(e) => setNouveau((n) => ({ ...n, periodMonths: Number(e.target.value) }))}
            />
          </div>
          <Button type="submit" variant="prim" disabled={creation.isPending}>Ajouter</Button>
        </form>
      ) : null}
      {creation.isError ? <p className="erreur-form">{creation.error.message}</p> : null}
      <div className="carte" style={{ borderStyle: 'dashed', color: 'var(--encre-2)', fontSize: 13 }}>
        Le gabarit s'applique à tout appareil <b>sous contrat préventif</b>. Un appareil sans
        historique reçoit un OT « <b>premier contrôle</b> » : toutes les tâches, quelle que soit
        la périodicité. Les autres tâches tombent aux mois anniversaires de la mise en service.
      </div>
    </>
  );
}
