import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import { METER_KIND_LABELS, type MeterDto, type MeterKind } from '@siop/shared';
import { useAddMeterReading, useMeters } from '@/api/exploitation';
import { useAsset } from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { Button } from '@/components/ui/button';

const UNITES: Record<MeterKind, string> = { RUNNING_HOURS: 'h', STARTS: 'cycles' };
const fmt = new Intl.NumberFormat('fr-FR');

/** Écran 5 des maquettes R2 : relevés simples du carnet, strictement croissants. */
export default function PageCompteurs() {
  const { id } = useParams<{ id: string }>();
  const { data: asset } = useAsset(id);
  const { data: meters } = useMeters(id);
  if (!asset) return null;

  return (
    <>
      <div className="filajout">
        <Link to="/ascenseurs">Ascenseurs</Link> /{' '}
        <Link to={`/ascenseurs/${asset.id}`}>Ascenseur {asset.reference}</Link> / Compteurs
      </div>
      <div className="entete-page"><h1>Compteurs — Ascenseur {asset.reference}</h1></div>
      <div className="grille-2">
        {(meters ?? []).map((meter) => (
          <CarteCompteur key={meter.kind} assetId={asset.id} meter={meter} />
        ))}
      </div>
      <div className="carte" style={{ borderStyle: 'dashed', color: 'var(--encre-2)', fontSize: 13 }}>
        Un relevé <b>inférieur au précédent</b> est refusé (un compteur ne redescend pas).
        Les seuils d'alerte (préventif conditionnel) sont au backlog — R2 stocke et trace.
      </div>
    </>
  );
}

function CarteCompteur({ assetId, meter }: { assetId: string; meter: MeterDto }) {
  const { can } = usePermissions();
  const ajout = useAddMeterReading(assetId);
  const [valeur, setValeur] = useState('');

  return (
    <div className="carte">
      <h2>{METER_KIND_LABELS[meter.kind]}</h2>
      {can('METERS', 'create') ? (
        <form
          className="releve-saisie"
          onSubmit={(e) => {
            e.preventDefault();
            const v = Number(valeur.replace(/\s/g, ''));
            if (!Number.isFinite(v)) return;
            ajout.mutate({ kind: meter.kind, value: v }, { onSuccess: () => setValeur('') });
          }}
        >
          <input
            aria-label={`Nouveau relevé — ${METER_KIND_LABELS[meter.kind]}`}
            className="num"
            inputMode="numeric"
            placeholder={meter.readings[0] ? fmt.format(meter.readings[0].value) : '0'}
            value={valeur}
            onChange={(e) => setValeur(e.target.value)}
          />
          <span style={{ color: 'var(--encre-2)', fontSize: 13 }}>{UNITES[meter.kind]}</span>
          <Button type="submit" variant="prim" disabled={ajout.isPending}>
            Enregistrer le relevé
          </Button>
        </form>
      ) : null}
      {ajout.isError ? <p className="erreur-form mt-2">{ajout.error.message}</p> : null}
      <ul className="chrono" style={{ marginTop: 14 }}>
        {meter.readings.map((r) => (
          <li key={r.id} className="fait">
            <span className="num">{fmt.format(r.value)} {UNITES[meter.kind]}</span>
            <br />
            <span className="quand">
              {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' }).format(new Date(r.createdAt))}
              {r.readBy ? ` · ${r.readBy.displayName}` : ''}
            </span>
          </li>
        ))}
        {meter.readings.length === 0 ? (
          <li className="text-encre-3" style={{ padding: 0 }}>Aucun relevé pour l'instant.</li>
        ) : null}
      </ul>
    </div>
  );
}
