// view-reference.jsx — la PAGE DE RÉFÉRENCE de l'habillage (chantier habillage, 1.6, 2026-10-08), le pendant
// de la page /style de La Cabane. Route prototype SEULEMENT : on y arrive par la barre prototype, et un hôte de
// production remplace cette route par l'écran de lien invalide (assets/hotes-production.js).
//
// Elle montre les patrons du socle et les familles de couleur, tels que les jetons générés les rendent
// (assets/kodama-habillage.css). Les contrastes y sont MESURÉS dans la page, sur les valeurs que le navigateur
// lit, pas recopiés. STOP 1 tranché le 2026-10-08 : le jaune B et le violet de la méthode, les candidats en sont
// sortis ; la section « Les gestes » montre la règle posée au même STOP : hors des badges, les deux familles à
// geste écrivent à l'encre, leur couleur reste dans le point, le pâle et la barre.
//
// Aucune donnée : des libellés inventés, aucun jeton, aucun appel, aucune écriture (le contrôle du chantier le
// vérifie, famille 7).

// Le contraste WCAG de deux couleurs, lues en hexadécimal (six ou huit chiffres : l'alpha est ignoré).
function refLuminance(hex) {
  const h = String(hex || "").trim().replace("#", "").slice(0, 6);
  if (h.length !== 6) return null;
  const c = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)));
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
}
function refContraste(a, b) {
  const la = refLuminance(a), lb = refLuminance(b);
  if (la == null || lb == null) return null;
  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
}
function refRatio(x) { return x ? x.toFixed(2).replace(".", ",") + ":1" : "?"; }
// « rgb(30, 29, 26) » en « #1e1d1a » : une couleur calculée par le navigateur, pour refContraste.
function refHex(rgb) {
  const m = String(rgb || "").match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
  return m ? "#" + [m[1], m[2], m[3]].map((x) => (+x).toString(16).padStart(2, "0")).join("") : null;
}

// Les valeurs que le navigateur lit sur un élément, pour une liste de jetons.
function useJetons(ref, noms) {
  const [v, setV] = React.useState(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const st = getComputedStyle(ref.current);
    const o = {};
    noms.forEach((n) => { o[n] = st.getPropertyValue("--" + n).trim(); });
    setV(o);
  }, []);
  return v;
}

function RefSection({ id, titre, meta, children }) {
  return (
    <section id={id} style={{ marginTop: 40, scrollMarginTop: 72 }}>
      <TitreSection meta={meta}>{titre}</TitreSection>
      <div style={{ marginTop: 14 }}>{children}</div>
    </section>);
}

function RefGrille({ min = 300, children }) {
  return <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(" + min + "px, 100%), 1fr))", gap: 16 }}>{children}</div>;
}

// ——— Les familles de couleur : pâle, point et encre, avec leurs contrastes mesurés ———
const REF_FAMILLES = [
  ["information", "Information", "Pré-production"],
  ["valide", "Validé", "MPC validé"],
  ["energie", "Énergie", "En production"],
  ["action", "Action attendue (à vous d'agir)", "Validation MPC"],
  ["tiers", "Aux mains d'un tiers (jaune)", "Transport en cours"],
  ["neutre", "Neutre", "Prod planifiée"]
];
function RefFamille({ famille, titre, exemple }) {
  const ref = React.useRef(null);
  const f = Statuts.FAMILLES[famille];
  const noms = [f.bg, f.accent, f.texte].map((n) => n.replace(/^--/, ""));
  const v = useJetons(ref, noms);
  // Le badge tire son encre de son accent (P5 renversée), le texte hors badge de `texte` : deux mesures.
  const [badge, setBadge] = React.useState(null);
  React.useEffect(() => {
    const el = ref.current && ref.current.querySelector(".k-badge");
    if (el) { const st = getComputedStyle(el); setBadge({ encre: refHex(st.color), fond: refHex(st.backgroundColor) }); }
  }, []);
  const c = Statuts.couleurs(famille);
  return (
    <div ref={ref} className="k-card k-card-panneau" style={{ padding: 14, minWidth: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <Badge accent={c.accent} bg={c.bg} point>{exemple}</Badge>
        <span style={{ fontWeight: 600 }}>{titre}</span>
      </div>
      {v && badge ? (
        <p className="k-label" style={{ margin: "10px 0 0" }}>
          Badge {refRatio(refContraste(badge.encre, badge.fond))} · texte hors badge sur blanc {refRatio(refContraste(v[noms[2]], "#ffffff"))} · point seul {refRatio(refContraste(v[noms[1]], "#ffffff"))}
        </p>) : null}
    </div>);
}

function ReferenceHabillage() {
  const [segment, setSegment] = React.useState("prods");
  const [puce, setPuce] = React.useState("cours");
  const [feuille, setFeuille] = React.useState(false);
  const aller = (id) => () => kScrollTo("#" + id, 72);
  return (
    <div style={{ minHeight: "100vh", overflowX: "clip" }}>
      <TopBar space="admin" title="Référence de l'habillage" name="KODAMA" sub="route prototype seulement"
        menu={[
          { key: "gestes", label: "Gestes", onClick: aller("ref-gestes") },
          { key: "familles", label: "Familles", onClick: aller("ref-familles") },
          { key: "controles", label: "Contrôles", onClick: aller("ref-controles") },
          { key: "surfaces", label: "Surfaces", onClick: aller("ref-surfaces") },
          { key: "icones", label: "Icônes", onClick: aller("ref-icones") }
        ]} />
      <div className="k-page" style={{ maxWidth: 1520, margin: "0 auto", padding: "24px 44px 64px" }}>
        <h1 className="k-round" style={{ margin: 0, fontSize: "var(--k-title-page)" }}>Référence de l'habillage</h1>
        <p style={{ margin: "6px 0 0", color: K.sub, maxWidth: 760 }}>
          Les patrons du socle et les familles de couleur du portail, rendus par les jetons de la source commune. Les
          contrastes sont mesurés dans la page. Aucune donnée réelle ici.
        </p>

        <RefSection id="ref-gestes" titre="Les gestes" meta="à vous d'agir, aux mains d'un tiers">
          <p style={{ margin: "0 0 14px", color: K.sub, maxWidth: 760 }}>
            Hors des badges, les deux familles à geste écrivent à l'encre : texte, contour et icône. Leur couleur reste
            dans le point, le pâle et la barre (STOP 1, 2026-10-08).
          </p>
          <RefGrille min={340}>
            <div style={{ display: "grid", gap: 14, alignContent: "start", minWidth: 0 }}>
              <FenetreAction ton="orange" etiquette="À vous d'agir · 2" sous="exemple" style={{ marginTop: 0 }}>
                <p style={{ margin: 0 }}>Choisir la méthode de validation de la pré-production.</p>
              </FenetreAction>
              <FenetreAction ton="violet" etiquette="En attente de l'usine" sous="exemple" style={{ marginTop: 0 }}>
                <p style={{ margin: 0 }}>Le geste est aux mains d'un tiers.</p>
              </FenetreAction>
              <Bandeau variante="attention" titre="Aux mains d'un tiers">L'usine doit encore confirmer sa date de fin.</Bandeau>
            </div>
            <div className="k-card" style={{ padding: 20, minWidth: 0 }}>
              <Rail ariaLabel="Rail d'exemple">
                <RailEtape icone="check" titre="eProofs" etat="fait" etatMot="fait" meta="2 juin" />
                <RailEtape icone="package" titre="Validation MPC" etat="action" etatMot="à vous d'agir" />
                <RailEtape icone="factory" titre="Production de masse" etat="attente" etatMot="aux mains d'un tiers" />
                <RailEtape icone="truck" titre="Expédition" etat="avenir" etatMot="à venir" />
              </Rail>
            </div>
            <div className="k-card" style={{ padding: 20, minWidth: 0, display: "grid", gap: 14, alignContent: "start" }}>
              <StateBar counts={{ ok: 3, waiting: 2, changes: 1, done: 1 }} height={9} />
              <StateCounters counts={{ ok: 3, waiting: 2, changes: 1, done: 1 }} labels={{ ok: "validés", waiting: "en attente", changes: "à reprendre", done: "terminé" }} />
              <Chips attendu ariaLabel="Choix attendu d'exemple">
                <Chip>Échantillon MPC</Chip>
                <Chip>Vidéo</Chip>
              </Chips>
              <LegendeCouleurs lang="fr" />
            </div>
          </RefGrille>
        </RefSection>

        <RefSection id="ref-familles" titre="Les familles de couleur" meta="pâle, point et encre">
          <RefGrille min={300}>{REF_FAMILLES.map((f) => <RefFamille key={f[0]} famille={f[0]} titre={f[1]} exemple={f[2]} />)}</RefGrille>
          <LegendeCouleurs lang="fr" />
        </RefSection>

        <RefSection id="ref-controles" titre="Les contrôles" meta="pilules, puces, champs">
          <div className="k-card" style={{ padding: 20, display: "grid", gap: 18 }}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
              <button type="button" className="k-btn k-btn-primary">Primaire</button>
              <button type="button" className="k-btn">Secondaire</button>
              <button type="button" className="k-btn k-btn-tertiaire">Tertiaire</button>
              <button type="button" className="k-btn k-btn-danger">Danger</button>
              <button type="button" className="k-btn" disabled>Désactivé</button>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
              <button type="button" className="k-btn k-btn-primary k-btn-sm">Compacte</button>
              <button type="button" className="k-btn k-btn-sm">Compacte</button>
              <button type="button" className="k-btn k-btn-primary k-btn-xs">Menue</button>
              <button type="button" className="k-btn k-btn-xs">Menue</button>
              <CopyBtn text="exemple" label="Copier" lang="fr" />
            </div>
            <Chips ariaLabel="Filtre d'exemple">
              <Chip actif={puce === "tous"} onClick={() => setPuce("tous")}>Tous (5)</Chip>
              <Chip actif={puce === "cours"} onClick={() => setPuce("cours")}>En cours (3)</Chip>
              <Chip actif={puce === "fini"} onClick={() => setPuce("fini")}>Terminés (2)</Chip>
            </Chips>
            <div>
              <SousNav ariaLabel="Segmenté d'exemple" items={[
                { key: "prods", label: "Productions", active: segment === "prods", onClick: () => setSegment("prods") },
                { key: "chiffres", label: "Chiffres", active: segment === "chiffres", onClick: () => setSegment("chiffres") },
                { key: "infos", label: "Informations", active: segment === "infos", onClick: () => setSegment("infos") }
              ]} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(240px, 100%), 1fr))", gap: 14 }}>
              <label className="k-label" style={{ display: "grid", gap: 6 }}>Champ<input className="k-input" placeholder="Texte d'exemple" /></label>
              <label className="k-label" style={{ display: "grid", gap: 6 }}>Liste<select className="k-select" defaultValue="b"><option value="a">Première valeur</option><option value="b">Seconde valeur</option></select></label>
              <label className="k-label" style={{ display: "grid", gap: 6 }}>Zone de texte<textarea className="k-textarea" rows={2} placeholder="Notes d'exemple"></textarea></label>
            </div>
            <p style={{ margin: 0 }}>Un <a className="k-link" href="#ref-controles">lien texte</a> dans une phrase, souligné à 28 %.</p>
          </div>
        </RefSection>

        <RefSection id="ref-surfaces" titre="Les surfaces" meta="cartes, bandeaux, temps">
          <RefGrille min={320}>
            <div className="k-card" style={{ padding: 20 }}>
              <div className="k-round" style={{ fontSize: 19 }}>Carte claire</div>
              <p style={{ margin: "6px 0 0", color: K.sub }}>Dégradé blanc translucide, liseré blanc, ombre douce, rayon 24.</p>
              <div className="k-card k-card-panneau" style={{ padding: 14, marginTop: 14 }}>Un groupe : blanc 90 %, filet d'encre 6 %, rayon 20.</div>
            </div>
            <div style={{ display: "grid", gap: 10 }}>
              {["info", "succes", "fierte", "attention", "coeur", "erreur"].map((v) => <Bandeau key={v} variante={v} titre={"Bandeau " + v}>Corps du bandeau, en encre.</Bandeau>)}
            </div>
            <div style={{ display: "grid", gap: 14, alignContent: "start" }}>
              <GrilleStats colonnes={3}>
                <Stat label="Prints en cours" valeur="2" />
                <Stat label="Unités" valeur="12 400" couleur={K.green} />
                <Stat label="Échéances" valeur="3" ligne="7 jours avant · 30 après" />
              </GrilleStats>
              <div className="k-card" style={{ padding: 18 }}>
                <LigneTemps>
                  <EtapeTemps icone="check" titre="eProofs validés" meta="2 juin" sourde />
                  <FiletAujourdhui />
                  <EtapeTemps icone="factory" titre="Fin de production" meta="19 juin" sous="Lanterne · Print 2" />
                </LigneTemps>
              </div>
              <div><button type="button" className="k-btn" onClick={() => setFeuille(true)}>Ouvrir une feuille</button></div>
            </div>
          </RefGrille>
          <div className="k-card" style={{ marginTop: 16, overflow: "hidden" }}>
            <div style={{ overflowX: "auto" }}>
              <table className="k-table">
                <thead><tr><th>Jeu</th><th>Print</th><th style={{ textAlign: "right" }}>Unités</th><th>Statut</th></tr></thead>
                <tbody>
                  <tr><td>Lanterne</td><td>Print 7</td><td className="k-num">28 900</td><td><Badge {...(() => { const c = Statuts.couleurs("action"); return { accent: c.accent, bg: c.bg }; })()}>Validation MPC</Badge></td></tr>
                  <tr><td>Brindille</td><td>Print 2</td><td className="k-num">9 800</td><td><Badge {...(() => { const c = Statuts.couleurs("energie"); return { accent: c.accent, bg: c.bg }; })()}>En production</Badge></td></tr>
                  <tr><td>Lanterne</td><td>Print 6</td><td className="k-num">4 600</td><td><Badge {...(() => { const c = Statuts.couleurs("tiers"); return { accent: c.accent, bg: c.bg }; })()}>Prêt à enlever</Badge></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </RefSection>

        <RefSection id="ref-icones" titre="Les icônes" meta="Lucide, trait 1,7">
          <div className="k-card" style={{ padding: 18, display: "flex", flexWrap: "wrap", gap: 18 }}>
            {["check", "x", "menu", "arrowRight", "arrowUpRight", "arrowLeft", "arrowDown", "arrowUp", "download", "copy", "refresh", "play", "external", "info", "triangle", "octagon", "trophy", "heart", "pencil", "upload", "link", "mail", "euro", "calendar", "factory", "truck", "package", "mappin"].map((n) => (
              <span key={n} style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 6, minWidth: 64 }}>
                <IconeBandeau nom={n} size={20} />
                <span className="k-label">{n}</span>
              </span>))}
          </div>
        </RefSection>
      </div>
      {feuille ? (
        <Modal title="Une feuille" lang="fr" onClose={() => setFeuille(false)}>
          <p style={{ margin: 0 }}>Voile d'encre flouté, feuille ivoire, rayon 28 ; ancrée en bas avec une poignée sous 640 px.</p>
          <div style={{ marginTop: 16, display: "flex", gap: 10 }}>
            <button type="button" className="k-btn k-btn-primary" onClick={() => setFeuille(false)}>Compris</button>
          </div>
        </Modal>) : null}
    </div>);
}

Object.assign(window, { ReferenceHabillage });