import { Link, useNavigate } from 'react-router-dom';
import {
  WORK_ORDER_STATUS_LABELS,
  WORK_ORDER_TYPE_LABELS,
  type WorkOrderStatus,
} from '@siop/shared';
import { usePreventiveStatus, useRequests, useWorkOrders } from '@/api/exploitation';
import { useAnalyticsSummary } from '@/api/gestion';
import { useMe } from '@/auth/use-auth';
import { usePermissions } from '@/auth/use-permissions';
import { Avatar } from '@/components/avatar';
import { PrioriteOT, StatutOT } from '@/components/chips-ot';
import { Button } from '@/components/ui/button';

const ST_COULEURS: Record<string, string> = {
  OPEN: 'var(--st-ouvert)',
  IN_PROGRESS: 'var(--st-encours)',
  ON_HOLD: 'var(--st-attente)',
  DONE: 'var(--st-termine)',
};

/** Écran 2 validé R0 — données réelles R2, pannes par organe réelles R3. */
export default function PageTableauDeBord() {
  const navigate = useNavigate();
  const { can, chargé } = usePermissions();
  const peutVoirOT = can('WORK_ORDERS', 'view');
  const peutVoirStats = can('ANALYTICS', 'view');
  const { data: workOrders } = useWorkOrders(peutVoirOT);
  const { data: requests } = useRequests();
  const { data: preventif } = usePreventiveStatus(peutVoirOT);
  const { data: stats } = useAnalyticsSummary(12, peutVoirStats);

  if (!chargé) return null;
  if (!peutVoirOT) return <AccueilSansExploitation />;

  const tous = workOrders ?? [];
  const urgences = tous.filter(
    (w) => w.priority === 'PERSON_TRAPPED' && w.status !== 'DONE' && w.status !== 'CANCELLED',
  );
  const ouverts = tous.filter((w) => w.status !== 'DONE' && w.status !== 'CANCELLED');
  const enRetard = ouverts.filter((w) => w.dueDate && new Date(w.dueDate) < new Date());
  const aTraiter = (requests ?? []).filter((r) => r.status === 'RECEIVED');
  const parStatut = (['OPEN', 'IN_PROGRESS', 'ON_HOLD', 'DONE'] as WorkOrderStatus[]).map(
    (statut) => ({
      statut,
      n: tous.filter((w) => w.status === statut).length,
    }),
  );
  const max = Math.max(1, ...parStatut.map((s) => s.n));
  const recents = tous.slice(0, 5);

  return (
    <>
      <div className="entete-page"><h1>Tableau de bord</h1></div>
      {urgences.map((u) => (
        <div className="bandeau-urgence" key={u.id}>
          <span className="point-pulse" />
          <div>
            <b>{u.title} — Ascenseur {u.assetReference}</b> ({u.siteName})
            <br />
            <span className="depuis">
              {u.reference} · signalé{' '}
              {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(u.createdAt))}
              {u.assignees.length === 0 ? ' · aucune intervention en cours' : ''}
            </span>
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <Button variant="prim" onClick={() => navigate(`/ot/${u.id}`)}>
              Ouvrir l'OT d'urgence
            </Button>
          </div>
        </div>
      ))}
      <div className="kpis">
        <div className="kpi">
          <div className="lib">OT ouverts</div>
          <div className="val num">{ouverts.length}</div>
          <div className="delta neutre">
            dont {tous.filter((w) => w.status === 'IN_PROGRESS').length} en cours
          </div>
        </div>
        <div className={enRetard.length ? 'kpi alarme' : 'kpi'}>
          <div className="lib">En retard</div>
          <div className="val num">{enRetard.length}</div>
        </div>
        <div className="kpi">
          <div className="lib">Préventif · {preventif ? mois(preventif.month) : '…'}</div>
          <div className="val num">
            {preventif && preventif.generated > 0
              ? `${Math.round((preventif.done / preventif.generated) * 100)} %`
              : '—'}
          </div>
          <div className="delta bon">
            {preventif ? `${preventif.done} / ${preventif.generated} grilles` : ''}
          </div>
        </div>
        <div className="kpi">
          <div className="lib">Demandes à traiter</div>
          <div className="val num">{aTraiter.length}</div>
          <div className="delta neutre">
            {aTraiter[0]
              ? `la + ancienne : ${new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' }).format(new Date(aTraiter[aTraiter.length - 1]!.createdAt))}`
              : 'file vide'}
          </div>
        </div>
      </div>
      <div className="grille-2">
        <div className="carte">
          <h2>OT par statut</h2>
          <div className="barres-h flex flex-col gap-2">
            {parStatut.map(({ statut, n }) => (
              <div className="ligne-b" key={statut}>
                <span>{WORK_ORDER_STATUS_LABELS[statut]}</span>
                <div className="fond-b">
                  <div
                    className="rempli"
                    style={{ width: `${(n / max) * 100}%`, background: ST_COULEURS[statut] }}
                  />
                </div>
                <span className="valeur num">{n}</span>
              </div>
            ))}
          </div>
        </div>
        {peutVoirStats ? (
          <div className="carte graf">
            <h2>
              Pannes par organe · 12 mois{' '}
              <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--encre-3)' }}>
                (bilans codés)
              </span>
            </h2>
            {stats?.failuresByComponent.length ? (
              <div className="barres-h">
                {stats.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 / Math.max(...stats.failuresByComponent.map((x) => x.count), 1)) * 100}%`,
                          background: 'var(--graf-1)',
                        }}
                      />
                    </div>
                    <span className="valeur num">{f.count}</span>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-encre-3">Aucun bilan codé sur la période.</p>
            )}
            <p className="mt-2">
              <Link to="/statistiques" className="text-[12.5px] font-semibold text-primaire">
                Toutes les statistiques →
              </Link>
            </p>
          </div>
        ) : (
          <div className="carte">
            <h2>Pannes par organe · 12 mois</h2>
            <p className="text-encre-3">Réservé aux rôles disposant du pilotage.</p>
          </div>
        )}
      </div>
      <div className="carte">
        <h2>Interventions récentes</h2>
        <div className="table">
          <table>
            <thead>
              <tr>
                <th>N°</th><th>Objet</th><th>Équipement</th><th>Type</th><th>Priorité</th><th>Statut</th><th>Assignés</th>
              </tr>
            </thead>
            <tbody>
              {recents.map((w) => (
                <tr
                  key={w.id}
                  className={w.priority === 'PERSON_TRAPPED' ? 'ligne-bloque' : undefined}
                  onClick={() => navigate(`/ot/${w.id}`)}
                  style={{ cursor: 'pointer' }}
                >
                  <td className="ref num">{w.reference}</td>
                  <td>{w.title}</td>
                  <td>
                    Asc. {w.assetReference}
                    <span className="sous">{w.siteName}</span>
                  </td>
                  <td>{WORK_ORDER_TYPE_LABELS[w.type]}</td>
                  <td><PrioriteOT priorite={w.priority} /></td>
                  <td><StatutOT statut={w.status} /></td>
                  <td>
                    {w.assignees.length ? (
                      <div className="avatars">
                        {w.assignees.map((a) => (
                          <Avatar key={a.id} initials={a.initials} className="h-6 w-6 text-[10px]" />
                        ))}
                      </div>
                    ) : (
                      '—'
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

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

/** Accueil des rôles sans exploitation (Demandeur) : ses demandes. */
function AccueilSansExploitation() {
  const { data: me } = useMe();
  const { data: requests } = useRequests();
  const { can } = usePermissions();
  return (
    <>
      <div className="entete-page"><h1>Mes signalements</h1></div>
      <div className="carte">
        <p>
          Bienvenue{me ? ` ${me.displayName}` : ''} — retrouvez ici vos signalements
          et leur avancement.
        </p>
        {can('REQUESTS', 'view') ? (
          <p className="mt-2">
            <Link to="/demandes" className="font-semibold text-primaire">
              Voir mes demandes ({(requests ?? []).length})
            </Link>
          </p>
        ) : null}
      </div>
    </>
  );
}
