/* Hi-fi · Sécuriser (SE1-4) + Piloter (PI1-4) */

// ============================================================
// SE1 — Vue d'ensemble sécurité
// ============================================================
const HFScreenSE1 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Sécuriser · Vue d'ensemble · SE1"
      title="Posture de sécurité."
      lead="Score global, surface d'attaque, vecteurs détectés — vue 30 j."
      actions={<>
        <button className="btn ghost"><Icon name="filter" size={14} />30 jours</button>
        <button className="btn primary"><Icon name="fileText" size={14} />Rapport sécurité</button>
      </>}
    />

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
      <div className="card dark lg" style={{ display: 'grid', placeItems: 'center', textAlign: 'center' }}>
        <div>
          <span className="label" style={{ color: 'rgba(237,237,242,0.6)' }}>Score posture global</span>
          <div style={{ marginTop: 14, position: 'relative', display: 'inline-block' }}>
            <ActivityRingsHF size={200} dimensions={[{ label: 'Posture', value: 78, color: '#ddac63' }]} strokeRatio={0.10} glow />
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: 'var(--font-accent)', fontSize: 'var(--text-5xl)', fontWeight: 600, color: 'var(--fg-on-inverse)', fontFeatureSettings: '"tnum"' }}>78</div>
          </div>
          <p style={{ color: 'rgba(237,237,242,0.7)', fontSize: 'var(--text-sm)', margin: '12px 0 0' }}>
            ▲ +4 vs sem. dernière · objectif 85 d'ici T3 2026
          </p>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Évolution des incidents · 30 j</h3>
            <p className="card-subtitle">Par criticité — barres journalières.</p>
          </div>
          <div className="row" style={{ gap: 4 }}>
            <span className="chip crit"><span className="dot"></span>P1</span>
            <span className="chip warn"><span className="dot"></span>P2</span>
            <span className="chip"><span className="dot"></span>P3</span>
          </div>
        </div>
        <svg viewBox="0 0 600 160" preserveAspectRatio="none" style={{ width: '100%', height: 160 }}>
          {[2,1,3,1,0,4,2,1,1,3,2,1,0,1,2,1,3,1,2,0,1,1,2,3,1,2,4,1,2,3].map((v, i) => {
            const w = 600 / 30 - 3;
            const h = (v / 4) * 140;
            return <rect key={i} x={i * (w + 3) + 2} y={150 - h} width={w} height={h}
              fill={v >= 3 ? '#e89b8e' : v >= 2 ? '#e6c97a' : 'var(--navy-700)'} rx="2" opacity="0.85" />;
          })}
        </svg>
      </div>
    </div>

    {/* Heatmap + Top vectors */}
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--space-6)' }}>
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Heatmap · agents × OWASP LLM Top 10</h3>
            <p className="card-subtitle">Intensité = nombre de déclenchements sur 30 j.</p>
          </div>
        </div>
        <div className="heatmap" style={{ marginTop: 10 }}>
          <div className="rows-labels">
            {['LLM01 Prompt injection','LLM02 Sortie sensible','LLM03 Empoisonnement','LLM04 DoS modèle','LLM05 Supply chain','LLM06 PII / data leak','LLM07 Plug-in unsafe','LLM08 Excès agentique','LLM09 Sur-confiance','LLM10 Vol modèle'].map(l => <span key={l}>{l}</span>)}
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(14, 1fr)', gridTemplateRows: 'repeat(10, 1fr)', minHeight: 320 }}>
            {Array.from({ length: 140 }).map((_, i) => {
              const intensities = [0.9,0.2,0.4,0.1,0.6,0.15,0.3,0.5,0.85,0.4,0.2,0.6,0.15,0.4,0.7,0.4,0.2,0.5,0.1,0.6,0.4,0.85,0.2,0.5,0.1,0.7,0.4,0.3,0.1,0.2,0.5,0.4,0.3,0.55,0.1,0.4,0.7,0.3,0.55,0.4,0.2,0.55,0.3,0.1,0.55,0.2,0.4,0.3,0.5,0.15,0.4,0.1,0.55,0.2,0.4,0.3,0.85,0.3,0.55,0.2,0.4,0.1,0.55,0.3,0.85,0.5,0.4,0.2,0.55,0.3,0.7,0.4,0.85,0.3,0.55,0.4,0.2,0.85,0.4,0.55,0.3,0.7,0.4,0.85,0.4,0.2,0.55,0.4,0.3,0.1,0.4,0.55,0.2,0.4,0.3,0.55,0.4,0.2,0.55,0.85,0.4,0.3,0.55,0.2,0.4,0.55,0.85,0.3,0.4,0.2,0.55,0.85,0.3,0.55,0.4,0.2,0.55,0.4,0.85,0.3,0.55,0.4,0.2,0.55,0.4,0.3,0.2,0.4,0.3,0.55,0.4,0.2,0.55,0.4,0.3,0.55,0.4,0.2,0.55,0.4];
              const v = intensities[i] || 0.1;
              const bg = v > 0.75 ? 'rgba(232,155,142,0.85)'
                : v > 0.5 ? 'rgba(230,201,122,0.7)'
                : v > 0.25 ? 'rgba(13,10,44,0.25)'
                : 'rgba(13,10,44,0.08)';
              return <div key={i} className="cell" style={{ background: bg }} />;
            })}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3 className="card-title">Top vecteurs · 30 j</h3></div>
        <div className="col" style={{ gap: 14, marginTop: 8 }}>
          {[
            ['Prompt injection', 47, 'crit'],
            ['Data leak / PII', 34, 'warn'],
            ['Hallucination critique', 22, 'warn'],
            ['Jailbreak tentative', 18, 'warn'],
            ['Exfiltration outils', 11, 'crit'],
            ['Sortie toxique', 5, ''],
          ].map(([n, v, c], i) => (
            <div key={i}>
              <div className="row between">
                <span style={{ fontSize: 'var(--text-sm)' }}>{n}</span>
                <span style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, fontFeatureSettings: '"tnum"' }}>{v}</span>
              </div>
              <div style={{ height: 5, background: 'var(--bg-sunken)', borderRadius: 3, marginTop: 4 }}>
                <div style={{ width: `${(v / 50) * 100}%`, height: '100%', borderRadius: 3, background: c === 'crit' ? 'var(--signal-critical)' : c === 'warn' ? 'var(--signal-caution)' : 'var(--navy-700)' }} />
              </div>
            </div>
          ))}
        </div>
        <button className="btn primary" style={{ width: '100%', marginTop: 16 }}>Voir tous les vecteurs<Icon name="arrowRight" size={14} /></button>
      </div>
    </div>
  </div>
);

// ============================================================
// SE2 — Catalogue policies & guardrails
// ============================================================
const HFScreenSE2 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Sécuriser · Policies · SE2"
      title="Policies & guardrails."
      lead="Bibliothèque + custom tenant — règles applicables aux agents."
      actions={<>
        <button className="btn ghost"><Icon name="upload" size={14} />Importer YAML</button>
        <button className="btn accent"><Icon name="plus" size={14} />Créer une policy</button>
      </>}
    />

    <div className="row" style={{ gap: 0, borderBottom: '1px solid var(--hairline)', marginBottom: 24 }}>
      {[['Bibliothèque · 24', true],['Custom tenant · 9'],['Affectations'],['Versions']].map(([t, active], i) => (
        <button key={i} style={{
          background: 'transparent', border: 0, padding: '12px 18px',
          fontFamily: 'var(--font-primary)', fontSize: 11, fontWeight: 600,
          letterSpacing: 'var(--track-label)', textTransform: 'uppercase',
          color: active ? 'var(--fg)' : 'var(--fg-muted)',
          borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
          cursor: 'pointer',
        }}>{t}</button>
      ))}
    </div>

    <div className="filter-strip">
      <button className="filter-chip">Catégorie <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip active">Actives ✕</button>
      <div style={{ flex: 1 }} />
      <div className="row" style={{ padding: '6px 12px', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-full)', gap: 8 }}>
        <Icon name="search" size={12} className="" />
        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>Rechercher dans 33 policies…</span>
      </div>
    </div>

    <div className="grid-2" style={{ gap: 14 }}>
      {[
        { n: 'anti-prompt-injection-v3', d: 'Détection multi-couches injection / jailbreak — classifier + heuristiques.', a: 138, t: '47 · 30 j', s: 'active', tag: 'Sécurité' },
        { n: 'pii-detection-eu', d: 'PII détection RGPD-compliant : email, téléphone, IBAN, SSN, adresse.', a: 142, t: '34 · 30 j', s: 'active', tag: 'Conformité' },
        { n: 'output-filter-sensitive', d: 'Bloque les sorties contenant données réglementées non autorisées.', a: 104, t: '22 · 30 j', s: 'active', tag: 'Sécurité' },
        { n: 'anti-toxicity-baseline', d: 'Filtre toxicité sortie, seuil 0.7 — multi-langue FR/EN.', a: 142, t: '5 · 30 j', s: 'active', tag: 'Qualité' },
        { n: 'jailbreak-pattern-v2', d: 'Patterns connus (DAN, GodMode, role-play exploit).', a: 142, t: '18 · 30 j', s: 'monitoring', tag: 'Sécurité' },
        { n: 'tool-call-allowlist', d: 'Restriction des outils accessibles — allowlist par agent.', a: 76, t: '11 · 30 j', s: 'active', tag: 'Sécurité' },
        { n: 'cost-throttle-daily', d: 'Throttle si dépassement budget agent > 130 % en 24 h.', a: 142, t: '4 · 30 j', s: 'monitoring', tag: 'Coûts' },
        { n: 'bias-fairness-hr', d: 'Détection biais protégés (genre, origine, âge) — RH only.', a: 4, t: '2 · 30 j', s: 'monitoring', tag: 'Conformité', custom: true },
      ].map((p, i) => (
        <div key={i} className="card" style={{ borderLeft: p.s === 'active' ? '3px solid var(--accent)' : '3px solid var(--hairline-strong)' }}>
          <div className="row between" style={{ alignItems: 'flex-start' }}>
            <div style={{ flex: 1 }}>
              <div className="row" style={{ gap: 6, marginBottom: 4 }}>
                <h4 style={{ fontFamily: 'var(--font-primary)', fontSize: 'var(--text-base)', fontWeight: 600, margin: 0, fontFeatureSettings: 'normal' }}>{p.n}</h4>
                {p.custom && <span className="chip gold">custom</span>}
              </div>
              <p style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)' }}>{p.d}</p>
            </div>
            {p.s === 'active' ? <span className="chip pos"><span className="dot"></span>active</span> : <span className="chip"><span className="dot"></span>monitoring</span>}
          </div>
          <div className="divider" style={{ margin: '14px 0 12px' }} />
          <div className="row between" style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)' }}>
            <span><strong style={{ color: 'var(--fg)' }}>{p.a}</strong> agents · {p.t}</span>
            <span className="chip outline">{p.tag}</span>
          </div>
          <div className="row" style={{ gap: 6, marginTop: 12 }}>
            <button className="btn ghost sm">Affecter</button>
            <button className="btn ghost sm">Modifier</button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ============================================================
// SE3 — Incidents Kanban
// ============================================================
const HFScreenSE3 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Sécuriser · Incidents · SE3"
      title="Centre des incidents."
      lead="File des incidents sécurité — P1 → P4, SLA, assignation."
      actions={<>
        <div className="row" style={{ gap: 4 }}>
          <button className="filter-chip active">Kanban</button>
          <button className="filter-chip">Liste</button>
        </div>
        <button className="btn primary"><Icon name="plus" size={14} />Créer manuellement</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Nouveaux · 24 h" value="6" sub="3 P1 · 3 P2" variant="dark" />
      <MetricCard label="En cours" value="11" />
      <MetricCard label="Résolus · 7 j" value="34" sub="MTTR moyen 7 min" />
      <MetricCard label="SLA respecté" value="96" unit="%" variant="gold" />
    </div>

    <div className="grid-4" style={{ gap: 12 }}>
      {[
        { t: 'Nouveau', c: 6, bg: 'rgba(232,155,142,0.06)', items: [
          { p: 'P1', a: 'agent-rh-screening', d: 'Prompt injection · exfil', sla: '04:12', user: '—', pv: 'crit' },
          { p: 'P1', a: 'copilot-credit', d: 'PII non masqué', sla: '11:38', user: '—', pv: 'crit' },
          { p: 'P2', a: 'rag-juridique', d: 'Dérive qualité > seuil', sla: '22:01', user: '—', pv: 'warn' },
        ]},
        { t: 'Triagé', c: 5, bg: 'var(--bg-sunken)', items: [
          { p: 'P1', a: 'shadow-rag-proc', d: 'Source non identifiée', sla: '38:22', user: 'L. Mercier', pv: 'crit' },
          { p: 'P2', a: 'chatbot-helpdesk', d: 'Volumétrie ×3', sla: '31:44', user: 'N. Dubois', pv: 'warn' },
          { p: 'P3', a: 'agent-cashflow', d: 'Token spike · coût', sla: '2 j', user: 'F. Lemoine', pv: '' },
        ]},
        { t: 'En cours', c: 4, bg: 'var(--bg-sunken)', items: [
          { p: 'P1', a: 'agent-rh-screening', d: 'Suspension active', sla: 'kill', user: 'L. Mercier', pv: 'crit' },
          { p: 'P2', a: 'copilot-treso', d: 'Anomalie JSON', sla: '3 j', user: 'O. Petit', pv: 'warn' },
        ]},
        { t: 'Résolu · 7 j', c: 34, bg: 'rgba(122,201,168,0.06)', items: [
          { p: 'P1', a: 'agent-fraud-alert', d: 'Faux positif policy', sla: '✓', user: 'L. Mercier', pv: 'pos' },
          { p: 'P3', a: 'chatbot-helpdesk', d: 'Re-indexation OK', sla: '✓', user: 'O. Petit', pv: 'pos' },
        ]},
      ].map((col, ci) => (
        <div key={ci} className="card sunken" style={{ background: col.bg, padding: 14 }}>
          <div className="row between" style={{ marginBottom: 14 }}>
            <h3 style={{ fontFamily: 'var(--font-primary)', fontSize: 11, fontWeight: 600, letterSpacing: 'var(--track-label)', textTransform: 'uppercase', margin: 0 }}>{col.t}</h3>
            <span className="chip outline">{col.c}</span>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {col.items.map((it, i) => (
              <div key={i} className="card" style={{ padding: 12, boxShadow: 'var(--elev-1)' }}>
                <div className="row between" style={{ marginBottom: 8 }}>
                  <span className={`chip ${it.pv}`}><span className="dot"></span>{it.p}</span>
                  <span className="mono" style={{ fontSize: 10, color: it.pv === 'pos' ? 'var(--signal-positive)' : 'var(--fg-subtle)', fontWeight: 600 }}>{it.sla}</span>
                </div>
                <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{it.a}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 4 }}>{it.d}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-subtle)', marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--hairline)' }}>↳ {it.user}</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ============================================================
// SE4 — Accès et secrets
// ============================================================
const HFScreenSE4 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Sécuriser · Accès & secrets · SE4"
      title="Comptes de service & secrets."
      lead="Principe du moindre privilège visible — qui accède à quoi."
      actions={<>
        <button className="btn ghost">Politique de rotation</button>
        <button className="btn primary"><Icon name="plus" size={14} />Nouveau secret</button>
      </>}
    />

    <div className="grid-3" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Comptes de service" value="38" sub="3 inactifs > 30 j" />
      <MetricCard label="Secrets gérés" value="64" sub="12 LLM · 31 SI · 21 outils" variant="dark" />
      <MetricCard label="À rotater < 7 j" value="4" variant="gold" />
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-6)' }}>
      <table className="tbl">
        <thead>
          <tr><th>Secret</th><th>Type</th><th>Scope</th><th>Agents</th><th>Dernière rotation</th><th>Prochaine</th><th>Statut</th><th></th></tr>
        </thead>
        <tbody>
          {[
            ['azure-openai-prod-key','API LLM','tenant · prod','22','21.04.2026','21.07.2026','pos','OK'],
            ['anthropic-api-key-fr','API LLM','workspace fr','17','14.04.2026','14.07.2026','pos','OK'],
            ['openai-org-default','API LLM','3 projets','28','12.02.2026','12.05.2026','crit','expirée'],
            ['workday-svc-ats','SI interne','RH · lect.+écr.','3','30.03.2026','30.06.2026','warn','à planifier'],
            ['pgvector-rag-juridique','Base vector','RAG · lect.','1','08.04.2026','08.07.2026','pos','OK'],
            ['smtp-relay-agents','Sortie mail','outbound · ext.','5','01.02.2026','01.05.2026','crit','expirée'],
            ['sap-finance-ro','ERP · lect.','Finance','2','12.03.2026','12.06.2026','warn','à planifier'],
          ].map((r, i) => (
            <tr key={i}>
              <td className="mono" style={{ fontWeight: 600 }}>{r[0]}</td>
              <td>{r[1]}</td>
              <td style={{ color: 'var(--fg-muted)' }}>{r[2]}</td>
              <td className="num">{r[3]}</td>
              <td className="mono">{r[4]}</td>
              <td className="mono">{r[5]}</td>
              <td><span className={`chip ${r[6]}`}><span className="dot"></span>{r[7]}</span></td>
              <td><button className="btn ghost sm">Rotater</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    {/* Permissions matrix */}
    <div className="card">
      <div className="card-head">
        <div>
          <h3 className="card-title">Permissions par agent — matrice</h3>
          <p className="card-subtitle">Principe du moindre privilège : pas plus que nécessaire.</p>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '200px repeat(6, 1fr)', gap: 6, marginTop: 8 }}>
        <div></div>
        {['Workday','pgvector','SMTP','SAP','S3','Slack'].map(h => <div key={h} className="label" style={{ margin: 0, textAlign: 'center' }}>{h}</div>)}
        {[
          ['agent-rh-screening', ['rw','r','w','-','r','-']],
          ['copilot-credit', ['-','r','-','r','r','-']],
          ['rag-juridique', ['-','r','-','-','r','-']],
          ['agent-cashflow', ['-','-','w','rw','r','r']],
          ['chatbot-helpdesk', ['-','r','-','-','-','rw']],
        ].map(([agent, perms], i) => (
          <React.Fragment key={i}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 600, display: 'flex', alignItems: 'center' }}>{agent}</div>
            {perms.map((p, j) => (
              <div key={j} style={{
                textAlign: 'center', padding: 10, borderRadius: 'var(--radius-xs)',
                background: p === '-' ? 'var(--bg-sunken)'
                  : p === 'rw' || p === 'w' ? 'rgba(232,155,142,0.18)'
                  : 'rgba(122,201,168,0.18)',
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                color: p === '-' ? 'var(--fg-subtle)'
                  : p === 'rw' || p === 'w' ? '#a55142'
                  : '#4f8b71',
              }}>{p}</div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <div className="row" style={{ gap: 14, marginTop: 16, fontSize: 11, color: 'var(--fg-muted)' }}>
        <span className="row" style={{ gap: 6 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'rgba(122,201,168,0.4)' }} />lecture seule</span>
        <span className="row" style={{ gap: 6 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'rgba(232,155,142,0.4)' }} />écriture (sensible)</span>
        <span className="row" style={{ gap: 6 }}><div style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--bg-sunken)' }} />pas d'accès</span>
      </div>
    </div>
  </div>
);

// ============================================================
// PI1 — Centre d'alertes
// ============================================================
const HFScreenPI1 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Piloter · Centre d'alertes · PI1"
      title="Toutes les alertes, une seule file."
      lead="Sécurité, conformité, coûts, performance — vue unifiée actionnable."
      actions={<>
        <button className="btn ghost">Acquitter sélection</button>
        <button className="btn primary">→ Envoyer vers Jira</button>
      </>}
    />

    <div className="filter-strip">
      <button className="filter-chip active">Critique ✕</button>
      <button className="filter-chip">Source <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Agent <Icon name="chevronDown" size={10} /></button>
      <button className="filter-chip">Propriétaire <Icon name="chevronDown" size={10} /></button>
      <div style={{ flex: 1 }} />
      <button className="filter-chip active">Liste</button>
      <button className="filter-chip">par agent</button>
      <button className="filter-chip">par source</button>
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-5)' }}>
      <table className="tbl">
        <thead>
          <tr>
            <th style={{ width: 32 }}></th>
            <th>Sév.</th><th>Source</th><th>Agent</th><th>Description</th><th>Reçue</th><th>Statut</th><th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {[
            ['crit','sécurité','agent-rh-screening','Prompt injection bloquée + exfil tentée','il y a 14 min','nouveau'],
            ['crit','coûts','copilot-credit','Coût journalier dépassé +47 %','il y a 26 min','nouveau'],
            ['warn','conformité','rag-juridique','DPIA expirée > 12 mois','il y a 1 h','en cours'],
            ['warn','performance','chatbot-helpdesk','Latence p95 > 800 ms','il y a 2 h','en cours'],
            ['warn','sécurité','copilot-treso','3 jailbreak patterns en 1 h','il y a 3 h','triagé'],
            ['info','système','tous','Connecteur Vertex token expiré','il y a 4 h','en cours'],
            ['warn','conformité','agent-cashflow','Documentation art. 11 incomplète','il y a 5 h','en cours'],
            ['info','conformité','sentinel','Échéance AI Act dans 68 j','aujourd\'hui','info'],
          ].map((r, i) => (
            <tr key={i}>
              <td><input type="checkbox" style={{ accentColor: 'var(--navy-900)' }} /></td>
              <td><span className={`chip ${r[0]}`}><span className="dot"></span>{r[0] === 'crit' ? 'P1' : r[0] === 'warn' ? 'P2' : 'info'}</span></td>
              <td><span className="label" style={{ margin: 0 }}>{r[1]}</span></td>
              <td style={{ fontWeight: 600 }}>{r[2]}</td>
              <td>{r[3]}</td>
              <td style={{ color: 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[4]}</td>
              <td><span className="chip outline">{r[5]}</span></td>
              <td>
                <div className="row" style={{ gap: 4 }}>
                  <button className="btn ghost sm">Acquit.</button>
                  <button className="btn ghost sm">Ticket</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span className="label" style={{ margin: 0 }}>Intégrations actives</span>
      <span className="chip pos"><span className="dot"></span>Slack #ia-incidents</span>
      <span className="chip pos"><span className="dot"></span>Teams · DSI</span>
      <span className="chip pos"><span className="dot"></span>Jira · Service Desk</span>
      <span className="chip outline">ServiceNow (à venir)</span>
    </div>
  </div>
);

// ============================================================
// PI2 — Workflows
// ============================================================
const HFScreenPI2 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Piloter · Workflows · PI2"
      title="Automatisations & workflows."
      lead="Trigger → condition → action. Aucune action irréversible sans confirmation."
      actions={<>
        <button className="btn ghost">Bibliothèque de patterns</button>
        <button className="btn accent"><Icon name="plus" size={14} />Créer un workflow</button>
      </>}
    />

    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)' }}>
      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">12 workflows actifs</h3>
            <p className="card-subtitle">Triggers et exécutions sur 30 j.</p>
          </div>
          <div className="row" style={{ gap: 4 }}>
            <button className="filter-chip active">Actifs</button>
            <button className="filter-chip">Dry-run</button>
            <button className="filter-chip">Désactivés</button>
          </div>
        </div>
        <div className="col" style={{ gap: 8 }}>
          {[
            { n: 'Auto-suspension sur 3 violations P1 / 1 h', d: 'agent → suspendre + notifier RSSI', exec: '4×', s: 'pos' },
            { n: 'Notif COMEX si dépassement budget > 130 %', d: 'cost.throttle → email + Teams', exec: '2×', s: 'pos' },
            { n: 'Throttle sur pic coûts > 200 %', d: 'cost.spike → throttle 50 %', exec: '1×', s: 'pos' },
            { n: 'Création ticket Jira pour tout P1 sécurité', d: 'security.P1 → jira.create', exec: '11×', s: 'pos' },
            { n: 'Rappel DPIA expirée à T-7 j', d: 'dpia.expire → email propriétaire', exec: '8×', s: 'pos' },
            { n: 'Auto-classification AI Act à la déclaration', d: 'agent.new → classify [H]', exec: '18×', s: 'warn' },
          ].map((w, i) => (
            <div key={i} className="card" style={{ padding: 14, boxShadow: 'none', border: '1px solid var(--hairline)' }}>
              <div className="row between">
                <div>
                  <div className="row" style={{ gap: 8 }}>
                    <h4 style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)', fontWeight: 600, margin: 0 }}>{w.n}</h4>
                    {w.s === 'pos' ? <span className="chip pos"><span className="dot"></span>actif</span> : <span className="chip warn"><span className="dot"></span>dry-run</span>}
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)', marginTop: 4 }}>{w.d}</div>
                </div>
                <span className="mono" style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{w.exec} <span style={{ color: 'var(--fg-muted)' }}>30 j</span></span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="col" style={{ gap: 'var(--space-5)' }}>
        <div className="card">
          <span className="label">Éditeur visuel · aperçu</span>
          <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-md)', fontWeight: 600, margin: '4px 0 14px' }}>Trigger → Condition → Action</h4>
          <div className="col" style={{ gap: 10 }}>
            {[
              { l: 'Trigger', t: 'Évt : policy.violation ∧ sévérité = P1', n: '01' },
              { l: 'Condition', t: 'Si count(agent, 1h) ≥ 3', n: '02' },
              { l: 'Action', t: '1. agent.suspend()  ·  2. slack.notify  ·  3. jira.create', n: '03', accent: true },
            ].map((step, i) => (
              <React.Fragment key={i}>
                <div className="card" style={{
                  padding: 12, boxShadow: 'none',
                  border: step.accent ? '1px solid var(--accent)' : '1px dashed var(--hairline-strong)',
                  background: step.accent ? 'rgba(221,172,99,0.06)' : 'var(--bg-elevated)',
                }}>
                  <span className="label" style={{ margin: 0 }}>① {step.l}</span>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, marginTop: 4 }}>{step.t}</div>
                </div>
                {i < 2 && <div style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>↓</div>}
              </React.Fragment>
            ))}
          </div>
          <div className="row" style={{ gap: 6, marginTop: 14 }}>
            <button className="btn ghost sm">Tester dry-run</button>
            <button className="btn accent sm">Activer</button>
          </div>
        </div>

        <div className="card dark">
          <span className="label">Onglet YAML (avancés)</span>
          <pre style={{
            margin: 0, marginTop: 10,
            fontFamily: 'var(--font-mono)', fontSize: 10, lineHeight: 1.6,
            color: 'var(--fg-on-inverse)',
          }}>{`trigger: policy.violation
  severity: P1
when:
  count(agent, 1h) >= 3
do:
  - agent.suspend(reason: auto)
  - slack.notify("#ia-incidents")
  - jira.create(project: SEC)`}</pre>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// PI3 — Kill switch
// ============================================================
const HFScreenPI3 = () => (
  <div className="page">
    {/* Banner */}
    <div style={{
      background: 'rgba(232,155,142,0.06)',
      border: '1px solid rgba(232,155,142,0.25)',
      borderRadius: 'var(--radius-sm)',
      padding: '12px 16px',
      marginBottom: 'var(--space-6)',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <Icon name="lock" size={18} className="" />
      <span style={{ fontFamily: 'var(--font-standard)', fontSize: 'var(--text-sm)' }}>
        Toute suspension est tracée dans le journal infalsifiable et impose une justification.
      </span>
    </div>

    <PageHeader
      eyebrow="Piloter · Kill switch · PI3"
      title="Interventions manuelles."
      lead="Suspendre, redémarrer, rerouter — toujours accessible en 2 clics."
      actions={<button className="btn ghost">Historique des interventions</button>}
    />

    <div className="grid-3" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Agents en parc" value="142" />
      <MetricCard label="Suspendus" value="2" sub="agent-rh-screening · shadow-marketing-bot" variant="dark" />
      <MetricCard label="Reroutés (fallback)" value="3" sub="vers modèle conservateur" variant="gold" />
    </div>

    <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 'var(--space-6)' }}>
      <table className="tbl">
        <thead>
          <tr><th>Agent</th><th>Direction</th><th>Statut</th><th>Dernière activité</th><th>Santé</th><th>Action d'urgence</th></tr>
        </thead>
        <tbody>
          {[
            ['agent-rh-screening','RH','suspendu','—',42,'crit'],
            ['copilot-credit','Crédit','actif','il y a 8 s',71,'warn'],
            ['agent-fraud-alert','Sécurité','actif','il y a 1 s',85,'pos'],
            ['rag-juridique','Juridique','actif','il y a 14 s',68,'warn'],
            ['agent-cashflow','Trésorerie','rerouté','il y a 2 min',64,'warn'],
            ['copilot-treso','Trésorerie','actif','il y a 11 s',62,'warn'],
            ['agent-onboarding-kyc','Risques','actif','il y a 18 s',79,'pos'],
          ].map((r, i) => (
            <tr key={i}>
              <td><strong>{r[0]}</strong></td>
              <td style={{ color: 'var(--fg-muted)' }}>{r[1]}</td>
              <td>
                {r[2] === 'suspendu' ? <span className="chip crit"><span className="dot"></span>suspendu</span>
                  : r[2] === 'rerouté' ? <span className="chip gold"><span className="dot"></span>rerouté</span>
                  : <span className="chip pos"><span className="dot"></span>actif</span>}
              </td>
              <td className="mono" style={{ color: 'var(--fg-muted)' }}>{r[3]}</td>
              <td><span style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, fontFeatureSettings: '"tnum"' }}>{r[4]}</span></td>
              <td>
                <div className="row" style={{ gap: 6 }}>
                  {r[2] === 'suspendu'
                    ? <button className="btn primary sm">▶ Redémarrer</button>
                    : <button className="btn danger sm"><Icon name="power" size={12} />Suspendre</button>}
                  <button className="btn ghost sm">↻ Rerouter</button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    {/* Confirmation modal preview */}
    <div className="card gold-frame lg">
      <span className="label">Confirmation requise — aperçu modale</span>
      <h3 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, margin: '4px 0 8px' }}>Suspendre agent-rh-screening ?</h3>
      <p style={{ fontSize: 'var(--text-sm)', color: 'var(--fg-muted)', margin: '0 0 16px', lineHeight: 'var(--lh-relaxed)', maxWidth: 600 }}>
        Cette action stoppe immédiatement toute requête de l'agent. Toutes les sessions actives sont terminées proprement. L'action est tracée dans la piste d'audit.
      </p>
      <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 'var(--radius-sm)', marginBottom: 16 }}>
        <span className="label">Justification (obligatoire)</span>
        <div style={{ fontSize: 'var(--text-sm)', marginTop: 4 }}>Incident P1 · prompt injection + exfil tentée vers ext. · Léa M.</div>
      </div>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn">Annuler</button>
        <button className="btn danger"><Icon name="power" size={14} />Confirmer la suspension</button>
      </div>
    </div>
  </div>
);

// ============================================================
// PI4 — Revues & attestations
// ============================================================
const HFScreenPI4 = () => (
  <div className="page">
    <PageHeader
      eyebrow="Piloter · Revues & attestations · PI4"
      title="Revues périodiques."
      lead="Cycles de revue exigés par AI Act + bonne gouvernance interne."
      actions={<>
        <button className="btn ghost">Modèles d'attestation</button>
        <button className="btn accent"><Icon name="plus" size={14} />Lancer une revue</button>
      </>}
    />

    <div className="grid-4" style={{ marginBottom: 'var(--space-6)' }}>
      <MetricCard label="Revues planifiées" value="24" sub="T3 2026" />
      <MetricCard label="Complétées · T2" value="38" sub="sur 41 · 93 %" variant="gold" />
      <MetricCard label="En retard" value="3" />
      <MetricCard label="Attestations signées · 30 j" value="11" variant="dark" />
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 'var(--space-6)' }}>
      <div className="card">
        <div className="card-head"><h3 className="card-title">Calendrier T3 2026</h3></div>
        <div className="col" style={{ gap: 8 }}>
          {[
            { d: '01 juin', n: 'Revue trimestrielle · 11 agents C1', who: '5 propriétaires', s: '' },
            { d: '15 juin', n: 'Audit interne sécurité', who: 'RSSI + 2', s: '' },
            { d: '30 juin', n: 'Certification annuelle · rag-juridique', who: 'O. Petit', s: '' },
            { d: '15 juil.', n: 'Renouvellement DPIA · 8 agents', who: 'DPO', s: '' },
            { d: '01 août', n: 'Préparation jalon AI Act GPAI', who: 'DPO + Compliance', s: 'crit' },
          ].map((r, i) => (
            <div key={i} className="row between" style={{ padding: 12, border: '1px solid var(--hairline)', borderRadius: 'var(--radius-sm)' }}>
              <div style={{ flex: 1 }}>
                <span className="label" style={{ margin: 0 }}>{r.d}</span>
                <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600, marginTop: 4 }}>{r.n}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--fg-muted)', marginTop: 2 }}>↳ {r.who}</div>
              </div>
              {r.s === 'crit' ? <span className="chip crit"><span className="dot"></span>urgent</span> : <span className="chip outline">planifié</span>}
            </div>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3 className="card-title">Revues en cours · suivi</h3>
            <p className="card-subtitle">Complétion par responsable.</p>
          </div>
          <button className="btn ghost sm">Relancer retards</button>
        </div>
        <table className="tbl">
          <thead><tr><th>Revue</th><th>Responsable</th><th>Échéance</th><th>Complétion</th><th>Statut</th></tr></thead>
          <tbody>
            {[
              ['T2 · agent-rh-screening','C. Roche','retard 4 j','3/7','crit'],
              ['T2 · copilot-credit','N. Dubois','aujourd\'hui','6/7','warn'],
              ['T2 · rag-juridique','O. Petit','demain','7/7','pos'],
              ['T2 · chatbot-helpdesk','Helpdesk','+3 j','5/7','warn'],
              ['Audit annuel · fraud-alert','RSSI','+12 j','2/8',''],
              ['Certif. annuelle · cashflow','F. Lemoine','+18 j','1/6',''],
            ].map((r, i) => {
              const [n, d] = r[3].split('/');
              const pct = (parseInt(n) / parseInt(d)) * 100;
              return (
                <tr key={i}>
                  <td style={{ fontWeight: 600, fontSize: 'var(--text-xs)' }}>{r[0]}</td>
                  <td>{r[1]}</td>
                  <td style={{ color: r[4] === 'crit' ? 'var(--signal-critical)' : 'var(--fg-muted)', fontSize: 'var(--text-xs)' }}>{r[2]}</td>
                  <td>
                    <div className="row" style={{ gap: 8 }}>
                      <span className="mono" style={{ fontSize: 11 }}>{r[3]}</span>
                      <div style={{ width: 80, height: 5, background: 'var(--bg-sunken)', borderRadius: 3 }}>
                        <div style={{ width: `${pct}%`, height: '100%', background: r[4] === 'crit' ? 'var(--signal-critical)' : r[4] === 'pos' ? 'var(--signal-positive)' : 'var(--navy-700)', borderRadius: 3 }} />
                      </div>
                    </div>
                  </td>
                  <td>
                    {r[4] === 'crit' ? <span className="chip crit"><span className="dot"></span>retard</span>
                      : r[4] === 'warn' ? <span className="chip warn"><span className="dot"></span>imminent</span>
                      : r[4] === 'pos' ? <span className="chip pos"><span className="dot"></span>prête</span>
                      : <span className="chip"><span className="dot"></span>en cours</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>

    <div className="card gold-frame" style={{ marginTop: 'var(--space-6)' }}>
      <div className="row between" style={{ alignItems: 'flex-start' }}>
        <div>
          <span className="label"><Icon name="sparkle" size={11} /> Génération automatique</span>
          <h4 style={{ fontFamily: 'var(--font-accent)', fontSize: 'var(--text-xl)', fontWeight: 600, margin: '6px 0 6px' }}>Le rapport se construit tout seul depuis les données plateforme.</h4>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--fg-muted)', margin: 0, lineHeight: 'var(--lh-relaxed)', maxWidth: 600 }}>
            Synthèse santé + incidents + dérive + conformité + coûts sur la période. Le responsable n'a qu'à valider et signer.
          </p>
        </div>
        <button className="btn accent"><Icon name="fileText" size={14} />Voir un modèle</button>
      </div>
    </div>
  </div>
);

Object.assign(window, {
  HFScreenSE1, HFScreenSE2, HFScreenSE3, HFScreenSE4,
  HFScreenPI1, HFScreenPI2, HFScreenPI3, HFScreenPI4,
});