import { Button } from '@/components/ui/button';
import { Avatar } from '@/components/avatar';

/**
 * /design — référence VIVANTE des revues pixel (charte §8) : tous les tokens
 * et primitives, rendus par le vrai code de l'app, dans le thème courant.
 */

const NUANCES: { titre: string; puces: [string, string][] }[] = [
  {
    titre: 'Marque',
    puces: [
      ['--primaire', 'primaire'],
      ['--primaire-doux', 'primaire-doux'],
      ['--safran', 'safran'],
      ['--safran-doux', 'safran-doux'],
    ],
  },
  {
    titre: 'Neutres',
    puces: [
      ['--fond', 'fond'],
      ['--surface', 'surface'],
      ['--surface-2', 'surface-2'],
      ['--bordure', 'bordure'],
      ['--bordure-forte', 'bordure-forte'],
      ['--encre', 'encre'],
      ['--encre-2', 'encre-2'],
      ['--encre-3', 'encre-3'],
    ],
  },
  {
    titre: 'Statuts OT (réservés)',
    puces: [
      ['--st-ouvert', 'ouvert'],
      ['--st-encours', 'en cours'],
      ['--st-attente', 'attente'],
      ['--st-termine', 'terminé'],
      ['--st-annule', 'annulé'],
    ],
  },
  {
    titre: 'Sémantique',
    puces: [
      ['--succes', 'succès'],
      ['--alerte', 'alerte'],
      ['--danger', 'danger'],
      ['--info', 'info'],
    ],
  },
  {
    titre: 'Palette graphique (ordre fixe, validée CVD)',
    puces: [
      ['--graf-1', 'graf-1'],
      ['--graf-2', 'graf-2'],
      ['--graf-3', 'graf-3'],
      ['--graf-4', 'graf-4'],
      ['--graf-grille', 'grille'],
    ],
  },
];

const TAILLES = [12, 13, 14, 16, 20, 24, 32] as const;

export default function PageDesign() {
  return (
    <>
      <div className="entete-page">
        <h1>Design — référence vivante</h1>
        <span className="text-[12.5px] text-encre-3">
          tokens.css est la loi ; cette page est comparée aux maquettes à chaque
          revue pixel.
        </span>
      </div>

      {NUANCES.map(({ titre, puces }) => (
        <div className="carte" key={titre}>
          <h2>{titre}</h2>
          <div className="nuancier">
            {puces.map(([token, libelle]) => (
              <div className="puce-c" key={token}>
                <i style={{ background: `var(${token})` }} />
                {libelle}
                <br />
                <code className="text-[10px]">{token}</code>
              </div>
            ))}
          </div>
        </div>
      ))}

      <div className="carte">
        <h2>Typographie — Manrope, échelle 12→32</h2>
        <div className="flex flex-col gap-2">
          {TAILLES.map((t) => (
            <div key={t} className="flex items-baseline gap-4">
              <code className="w-10 text-[11px] text-encre-3">{t}px</code>
              <span style={{ fontSize: t, fontWeight: t >= 20 ? 700 : 400 }}>
                Grille du mois — juillet 2026
              </span>
            </div>
          ))}
          <div className="flex items-baseline gap-4">
            <code className="w-10 text-[11px] text-encre-3">num</code>
            <span className="num text-[16px]">
              18 450 MAD · 12 OT · 78 % — chiffres tabulaires alignés
            </span>
          </div>
        </div>
      </div>

      <div className="carte">
        <h2>Boutons</h2>
        <div className="flex flex-wrap items-center gap-3">
          <Button variant="prim">Créer l'OT d'urgence</Button>
          <Button>Exporter</Button>
          <Button variant="succes">Clôturer l'intervention</Button>
          <Button variant="dangerLeger">Annuler l'OT</Button>
          <Button variant="ghost">Voir tout</Button>
          <Button variant="prim" disabled>
            Désactivé
          </Button>
        </div>
      </div>

      <div className="grille-2">
        <div className="carte">
          <h2>Statuts (pastille + libellé, jamais la couleur seule)</h2>
          <div className="flex flex-wrap gap-2">
            <span className="st ouvert">Ouvert</span>
            <span className="st encours">En cours</span>
            <span className="st attente">En attente</span>
            <span className="st termine">Terminé</span>
            <span className="st annule">Annulé</span>
          </div>
        </div>
        <div className="carte">
          <h2>Priorités</h2>
          <div className="flex flex-wrap gap-4">
            <span className="prio bloque">
              <i />
              Personne bloquée
            </span>
            <span className="prio haute">
              <i />
              Haute
            </span>
            <span className="prio moyenne">
              <i />
              Moyenne
            </span>
            <span className="prio basse">
              <i />
              Basse
            </span>
          </div>
          <p className="mt-3 text-[12px] text-encre-3">
            La pastille « personne bloquée » est la seule animation continue de
            l'application (charte §6).
          </p>
        </div>
      </div>

      <div className="carte">
        <h2>Champs & identité</h2>
        <div className="grille-2">
          <div className="champ">
            <label htmlFor="demo-champ">Email</label>
            <input id="demo-champ" placeholder="prenom.nom@spelev.ma" />
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <Avatar initials="SI" roleName="Dispatcher" />
            <Avatar initials="AB" roleName="Technicien" />
            <Avatar initials="NB" roleName="Gestionnaire" />
            <span className="chip-demo">DÉMO</span>
          </div>
        </div>
      </div>
    </>
  );
}
