import { useState } from 'react';
import { ANALYTICS_PERIODS, type AnalyticsPeriod } from '@siop/shared';
import { useAnalyticsSummary } from '@/api/gestion';

const fmt = new Intl.NumberFormat('fr-FR');
const fmtCompact = new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 1 });

function enMilliers(v: number): string {
  return v >= 1000 ? `${fmtCompact.format(v / 1000)} k` : fmt.format(v);
}

/** « 2026-03 » → « mars » (maquette : étiquettes de mois en toutes lettres). */
function moisLisible(period: string): string {
  const [annee, mois] = period.split('-').map(Number);
  return new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(annee, mois - 1, 1));
}

/** Écran 5 des maquettes R3 : M. Bennis lit en 30 s — barres horizontales
 *  à étiquettes directes (palette CVD validée), chiffres tabulaires. */
export default function PageStatistiques() {
  const [periode, setPeriode] = useState<AnalyticsPeriod>(12);
  const { data } = useAnalyticsSummary(periode);
  if (!data) return null;

  const delta =
    data.previousMonthCost > 0
      ? Math.round(((data.monthCost - data.previousMonthCost) / data.previousMonthCost) * 100)
      : null;
  const maxPannes = Math.max(...data.failuresByComponent.map((f) => f.count), 1);
  const maxCout = Math.max(...data.costsByMonth.map((c) => c.total), 1);

  return (
    <>
      <div className="entete-page">
        <h1>Statistiques</h1>
        <div className="actions">
          <select
            aria-label="Période"
            value={periode}
            onChange={(e) => setPeriode(Number(e.target.value) as AnalyticsPeriod)}
          >
            {ANALYTICS_PERIODS.map((m) => (
              <option key={m} value={m}>Période : {m} derniers mois</option>
            ))}
          </select>
        </div>
      </div>
      <div className="kpis" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi">
          <div className="lib">
            Coût · {new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date())}
          </div>
          <div className="val num">
            {fmt.format(data.monthCost)}{' '}
            <span style={{ fontSize: 14, color: 'var(--encre-2)' }}>MAD</span>
          </div>
          {delta != null ? (
            <div className={`delta ${delta <= 0 ? 'bon' : 'mauvais'}`}>
              {delta > 0 ? '+' : '−'}{Math.abs(delta)} % vs mois précédent
            </div>
          ) : (
            <div className="delta neutre">pas de mois précédent</div>
          )}
        </div>
        <div className="kpi">
          <div className="lib">OT clôturés · {data.months} mois</div>
          <div className="val num">{fmt.format(data.closed.total)}</div>
          <div className="delta neutre">dont {fmt.format(data.closed.preventive)} préventifs</div>
        </div>
        <div className="kpi">
          <div className="lib">Taux de préventif</div>
          <div className="val num">
            {data.preventiveRate != null ? `${Math.round(data.preventiveRate * 100)} %` : '—'}
          </div>
          <div className="delta bon">grilles faites / dues</div>
        </div>
        <div className="kpi">
          <div className="lib">Durée moyenne de résolution</div>
          <div className="val num">
            {data.avgResolutionDays != null ? `${fmtCompact.format(data.avgResolutionDays)} j` : '—'}
          </div>
          <div className="delta neutre">dépannages, {data.months} mois</div>
        </div>
      </div>
      <div className="grille-2">
        <div className="carte graf">
          <h2>
            Pannes par organe · {data.months} mois{' '}
            <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--encre-3)' }}>
              (bilans codés)
            </span>
          </h2>
          <div className="barres-h">
            {data.failuresByComponent.map((f) => (
              <div className="ligne-b" key={f.label}>
                <span>{f.label}</span>
                <div className="fond-b">
                  <div
                    className="rempli"
                    style={{ width: `${(f.count / maxPannes) * 100}%`, background: 'var(--graf-1)' }}
                  />
                </div>
                <span className="valeur num">{f.count}</span>
              </div>
            ))}
            {!data.failuresByComponent.length ? (
              <p className="text-encre-3">Aucun bilan codé sur la période.</p>
            ) : null}
          </div>
        </div>
        <div className="carte graf">
          <h2>
            Coûts par mois{' '}
            <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--encre-3)' }}>
              (pièces + main-d'œuvre, MAD)
            </span>
          </h2>
          <div className="barres-h">
            {data.costsByMonth.map((c) => (
              <div className="ligne-b" key={c.month}>
                <span style={{ textTransform: 'capitalize' }}>{moisLisible(c.month)}</span>
                <div className="fond-b">
                  <div
                    className="rempli"
                    style={{ width: `${(c.total / maxCout) * 100}%`, background: 'var(--graf-2)' }}
                  />
                </div>
                <span className="valeur num">{enMilliers(c.total)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="carte">
        <h2>Top équipements en coût · {data.months} mois</h2>
        <div className="table">
          <table>
            <thead>
              <tr><th>Appareil</th><th>Site</th><th>Dépannages</th><th>Pièces</th><th>Main-d'œuvre</th><th>Total</th></tr>
            </thead>
            <tbody>
              {data.topAssets.map((a) => (
                <tr key={a.reference}>
                  <td className="ref num">{a.reference}</td>
                  <td>{a.siteName}</td>
                  <td className="num">{a.correctives}</td>
                  <td className="num">{fmt.format(a.partsCost)}</td>
                  <td className="num">{fmt.format(a.laborCost)}</td>
                  <td className="num"><b>{fmt.format(a.total)} MAD</b></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}
