/* ═══════════════════════════════════════════════════════════════════
   SecCharts.jsx — net-new presentational bits for Customer Security.
   v1.0.0 — ported from the Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/security-charts.jsx) —
   port, not redesign. SecChip, GateTag, SecStat, MiniSignal,
   SecSettingRow, FauxSelect, ManagedBadge, SsoGate (generic locked-CTA
   slot, swappable copy), SessionRow. Status reads by icon+label+color
   (never color alone). No secrets/keys/tokens are ever rendered.
   Bare-global design refs (SEC_SIGNAL, SEC_CELL) rewritten to the app
   namespace — the only port delta besides the namespacing.
   Load order: SECOND of the four Sec modules (after SecData).
   Registers: window.WPSB.SecCharts = { SecChip, GateTag, SecStat,
   MiniSignal, SecSettingRow, FauxSelect, ManagedBadge, SsoGate,
   SessionRow }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const { SEC_SIGNAL, SEC_CELL } = window.WPSB.SecData;

/* security status chip */
function SecChip({ signal, size = 'md' }) {
  const v = SEC_SIGNAL[signal];
  const sm = size === 'sm';
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: sm ? 5 : 6,
    padding: sm ? '3px 9px 3px 8px' : '4px 11px 4px 9px', borderRadius: 999, whiteSpace: 'nowrap',
    background: 'color-mix(in oklch, ' + v.cf + ' 13%, transparent)', color: v.c,
    border: '1px solid color-mix(in oklch, ' + v.cf + ' 34%, transparent)',
    fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-tag)', fontSize: sm ? '.58rem' : '.64rem', letterSpacing: '.04em' } },
    React.createElement(WIcon, { name: v.icon, size: sm ? 12 : 13 }), v.label);
}

/* cyan gate tag — the gating axis (Enterprise) reads as beam/cyan so it is
   visibly distinct from the green/amber/red status traffic-lights. */
function GateTag({ label }) {
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: '4px 11px 4px 9px', borderRadius: 999, whiteSpace: 'nowrap', color: 'var(--beam)',
    background: 'var(--beam-dim)', border: '1px solid color-mix(in oklch, var(--beam) 38%, transparent)',
    fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-tag)', fontSize: '.62rem', letterSpacing: '.04em' } },
    React.createElement(WIcon, { name: 'lock', size: 11 }), label);
}

/* posture stat card — consistent layout for all tiles: header, big value,
   then the status chip (or cyan gate tag) bottom-left under the value. */
function SecStat({ icon, label, value, signal, gate }) {
  const v = SEC_SIGNAL[signal];
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '16px 18px', display: 'flex', flexDirection: 'column' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 } },
      React.createElement('span', { style: { width: 28, height: 28, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: gate ? 'var(--beam-dim)' : 'color-mix(in oklch, ' + v.c + ' 14%, transparent)', color: gate ? 'var(--beam)' : v.c, border: '1px solid ' + (gate ? 'color-mix(in oklch, var(--beam) 28%, transparent)' : 'color-mix(in oklch, ' + v.c + ' 28%, transparent)') } },
        React.createElement(WIcon, { name: icon, size: 15 })),
      React.createElement('span', { className: 'wiz-eyebrow', style: { fontSize: '.58rem', flex: 1 } }, label)),
    React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.5rem', color: 'var(--text)', lineHeight: 1, marginBottom: 'var(--sp-3)' } }, value),
    React.createElement('div', { style: { display: 'flex' } }, gate ? React.createElement(GateTag, { label: gate }) : React.createElement(SecChip, { signal, size: 'sm' })));
}

/* compact signal for table cells — icon + short label */
function MiniSignal({ kind }) {
  const cell = SEC_CELL[kind];
  const v = SEC_SIGNAL[cell.signal];
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, title: v.label },
    React.createElement('span', { style: { color: v.c, display: 'flex', flex: 'none' } }, React.createElement(WIcon, { name: v.icon, size: 14 })),
    React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--text-2)' } }, cell.label),
    React.createElement('span', { className: 'sr-only' }, v.label));
}

/* generic settings row: icon + title/desc + a control slot on the right */
function SecSettingRow({ icon, title, desc, children, accent = 'var(--beam)' }) {
  return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-4)', padding: 'var(--sp-4) 0', borderBottom: '1px solid var(--border)' } },
    React.createElement('span', { style: { width: 38, height: 38, borderRadius: 'var(--r)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'color-mix(in oklch, ' + accent + ' 12%, transparent)', color: accent, border: '1px solid color-mix(in oklch, ' + accent + ' 26%, transparent)' } },
      React.createElement(WIcon, { name: icon, size: 19 })),
    React.createElement('div', { style: { flex: 1, minWidth: 0 } },
      React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '.9rem', color: 'var(--text)' } }, title),
      React.createElement('div', { style: { fontSize: '.82rem', color: 'var(--text-2)', marginTop: 2, lineHeight: 1.4 } }, desc)),
    React.createElement('div', { style: { flex: 'none', display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' } }, children));
}

/* working select (timeout / retention / ranges) — opens a small popover */
function FauxSelect({ value, icon, options }) {
  const [open, setOpen] = React.useState(false);
  const [val, setVal] = React.useState(value);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);
  const opts = options && options.length ? options : [val];
  return React.createElement('div', { ref, style: { position: 'relative', flex: 'none' } },
    React.createElement('button', { type: 'button', className: 'wiz-focusable', 'aria-haspopup': 'listbox', 'aria-expanded': open ? 'true' : 'false',
      onClick: () => setOpen(o => !o),
      style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 'var(--r-sm)', border: '1px solid ' + (open ? 'color-mix(in oklch, var(--beam) 45%, transparent)' : 'var(--border-2)'),
        background: open ? 'var(--beam-dim)' : 'var(--surface)', color: 'var(--text)', font: 'inherit', fontFamily: 'var(--font-mono)', fontSize: '.78rem', cursor: 'pointer', whiteSpace: 'nowrap' } },
      icon && React.createElement(WIcon, { name: icon, size: 14, style: { color: 'var(--muted)' } }),
      val, React.createElement(WIcon, { name: 'chevron-down', size: 14, style: { color: 'var(--muted)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 150ms ease' } })),
    open && React.createElement('div', { role: 'listbox',
      style: { position: 'absolute', top: 'calc(100% + 6px)', right: 0, minWidth: '100%', zIndex: 50, background: 'var(--surface-3)', border: '1px solid var(--border-2)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow-lg)', padding: 5 } },
      opts.map(o => {
        const sel = o === val;
        return React.createElement('button', { key: o, type: 'button', role: 'option', 'aria-selected': sel ? 'true' : 'false',
          onClick: () => { setVal(o); setOpen(false); }, className: 'wiz-focusable',
          style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, width: '100%', padding: '7px 10px', borderRadius: 6, border: 'none', cursor: 'pointer', textAlign: 'left',
            background: sel ? 'var(--beam-dim)' : 'transparent', color: sel ? 'var(--beam)' : 'var(--text)', font: 'inherit', fontFamily: 'var(--font-mono)', fontSize: '.78rem', whiteSpace: 'nowrap' },
          onMouseEnter: (e) => { if (!sel) e.currentTarget.style.background = 'var(--surface-2)'; },
          onMouseLeave: (e) => { if (!sel) e.currentTarget.style.background = 'transparent'; } },
          o, sel && React.createElement(WIcon, { name: 'check', size: 14, stroke: 3 }));
      })));
}

/* a "managed / on" status used by rows that aren't a toggle */
function ManagedBadge({ label = 'Enforced', accent = 'var(--green)' }) {
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: '.64rem', letterSpacing: '.05em', textTransform: 'uppercase',
    color: accent, background: 'color-mix(in oklch, ' + accent + ' 13%, transparent)', border: '1px solid color-mix(in oklch, ' + accent + ' 32%, transparent)', borderRadius: 999, padding: '5px 11px' } },
    React.createElement(WIcon, { name: 'check', size: 12, stroke: 3 }), label);
}

/* ── generic gate slot (locked-CTA pattern, swappable copy) ───────────
   Used for the SSO/Enterprise section. configured=true flips it to a
   success "configured" state; otherwise it's a tier-gated upgrade card. */
function SsoGate({ configured, tierLabel = 'Enterprise', icon = 'key',
                   lockedTitle = 'Single sign-on (SAML)', lockedBody, ctaLabel = 'Upgrade to Enterprise', onCta,
                   configuredTitle = 'Single sign-on is active', configuredBody, idp = 'Okta' }) {
  if (configured) {
    return React.createElement('div', { className: 'wiz-card', style: { background: 'color-mix(in oklch, var(--green) 8%, var(--surface))', border: '1px solid color-mix(in oklch, var(--green) 32%, transparent)',
      borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)', display: 'flex', alignItems: 'center', gap: 'var(--sp-4)', flexWrap: 'wrap' } },
      React.createElement('span', { style: { width: 44, height: 44, borderRadius: 'var(--r)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'color-mix(in oklch, var(--green) 16%, transparent)', color: 'var(--green)', border: '1px solid color-mix(in oklch, var(--green) 30%, transparent)' } },
        React.createElement(WIcon, { name: 'shield-check', size: 22 })),
      React.createElement('div', { style: { flex: 1, minWidth: 220 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 4 } },
          React.createElement('span', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, configuredTitle),
          React.createElement(ManagedBadge, { label: 'Active' })),
        React.createElement('p', { style: { margin: 0, fontSize: '.86rem', color: 'var(--text-2)', lineHeight: 1.45 } }, configuredBody || ('Your team signs in through ' + idp + '. New members are provisioned automatically; off-boarding revokes access instantly.'))),
      React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-secondary wiz-focusable', style: { fontSize: '.72rem', padding: '8px 14px' }, onClick: onCta },
        React.createElement(WIcon, { name: 'sliders', size: 14 }), 'Manage'));
  }
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--beam-dim)', border: '1px solid color-mix(in oklch, var(--beam) 30%, transparent)',
    borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)', display: 'flex', alignItems: 'center', gap: 'var(--sp-4)', flexWrap: 'wrap' } },
    React.createElement('span', { style: { width: 44, height: 44, borderRadius: 'var(--r)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'color-mix(in oklch, var(--beam) 16%, transparent)', color: 'var(--beam)', border: '1px solid color-mix(in oklch, var(--beam) 30%, transparent)' } },
      React.createElement(WIcon, { name: icon, size: 22 })),
    React.createElement('div', { style: { flex: 1, minWidth: 220 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 4 } },
        React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } },
          React.createElement(WIcon, { name: 'lock', size: 15, style: { color: 'var(--beam)' } }), lockedTitle),
        React.createElement(GateTag, { label: tierLabel })),
      React.createElement('p', { style: { margin: 0, fontSize: '.86rem', color: 'var(--text-2)', lineHeight: 1.45 } }, lockedBody || 'Let your team sign in with your identity provider (SAML 2.0). Centralized provisioning and instant off-boarding.')),
    React.createElement('button', { type: 'button', className: 'wiz-btn wiz-focusable', onClick: onCta,
      style: { padding: '10px 18px', flex: 'none', background: 'color-mix(in oklch, var(--beam) 14%, transparent)', color: 'var(--beam)', border: '1px solid color-mix(in oklch, var(--beam) 40%, transparent)' } },
      React.createElement(WIcon, { name: 'arrow-up-right', size: 15 }), ctaLabel));
}

/* active-session row (masked — device + location + last seen, no tokens) */
function SessionRow({ s, idx, onRevoke }) {
  const [hover, setHover] = React.useState(false);
  const zebra = idx % 2 === 1;
  const bg = hover ? 'var(--surface-3)' : (zebra ? 'var(--surface-2)' : 'var(--surface)');
  return React.createElement('div', { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-4)', padding: '13px var(--sp-5)', background: bg, borderBottom: '1px solid var(--border)' } },
    React.createElement('span', { style: { width: 36, height: 36, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: s.current ? 'var(--beam-dim)' : 'var(--surface-3)', color: s.current ? 'var(--beam)' : 'var(--muted)', border: '1px solid var(--border)' } },
      React.createElement(WIcon, { name: s.device.includes('iPhone') ? 'smartphone' : s.device.includes('Mac') ? 'gauge' : 'server', size: 17 })),
    React.createElement('div', { style: { flex: 1, minWidth: 0 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
        React.createElement('span', { style: { fontWeight: 'var(--fw-medium)', fontSize: '.88rem', color: 'var(--text)' } }, s.device),
        React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--muted)' } }, s.agent),
        s.current && React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.58rem', letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--beam)', background: 'var(--beam-dim)', border: '1px solid color-mix(in oklch, var(--beam) 32%, transparent)', borderRadius: 999, padding: '2px 8px' } }, 'This device')),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 3, fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)' } },
        React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5 } }, React.createElement(WIcon, { name: 'map-pin', size: 12 }), s.loc),
        React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5, color: s.flag ? 'var(--v-warn)' : 'var(--muted)' } }, React.createElement(WIcon, { name: 'clock', size: 12 }), s.last))),
    s.current
      ? React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--dim)', flex: 'none' } }, 'Current')
      : React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-secondary wiz-focusable', style: { fontSize: '.7rem', padding: '6px 12px', flex: 'none' },
          onClick: () => onRevoke && onRevoke(s) }, React.createElement(WIcon, { name: 'log-out', size: 13 }), 'Revoke'));
}

window.WPSB = window.WPSB || {};
window.WPSB.SecCharts = { SecChip, GateTag, SecStat, MiniSignal, SecSettingRow, FauxSelect, ManagedBadge, SsoGate, SessionRow };
console.log('[WPSB] SecCharts v1.0.0 loaded');
})();