/* ═══════════════════════════════════════════════════════════════════
   SecPage.jsx — Customer Security overview. v1.0.0 — ported from the
   Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/security-page.jsx) —
   port, not redesign. Posture row + workspace security (toggles + SSO
   gate) + active sessions + connected-site signals + audit log.
   SAFETY: no secrets, keys, or token values are rendered anywhere.
   Bare-global design refs rewritten to the app namespaces (WPSB.SecData
   / WPSB.SecCharts; WToggle + NoticeCard stay bare globals from the
   Wizard foundation) — the only port delta.
   Load order: THIRD of the four Sec modules.
   Registers: window.WPSB.SecPage = { SecurityOverview, SiteRow,
   AuditRow }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const { useState: useStateSc } = React;
const { SecChip, SecStat, MiniSignal, SecSettingRow, FauxSelect, ManagedBadge, SsoGate, SessionRow } = window.WPSB.SecCharts;
const { SEC_POSTURE, SEC_SESSIONS, SEC_SITES, SEC_AUDIT } = window.WPSB.SecData;

/* connected-site signals zebra table */
const SS_COLS = 'minmax(150px,1.5fr) 112px 92px 92px 104px 140px';
function SitesHead() {
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: SS_COLS, gap: 'var(--sp-3)', minWidth: 860,
    padding: '11px var(--sp-5)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' } },
    ['Site', 'Connection', '2FA', 'SSL', 'Scan', 'Status'].map((h, i) => React.createElement('span', { key: i, className: 'wiz-eyebrow', style: { fontSize: '.56rem', letterSpacing: '.1em' } }, h)));
}
function SiteRow({ row, idx }) {
  const [hover, setHover] = useStateSc(false);
  const zebra = idx % 2 === 1;
  const bg = hover ? 'var(--surface-3)' : (zebra ? 'var(--surface-2)' : 'var(--surface)');
  const cell = { display: 'flex', alignItems: 'center', minWidth: 0 };
  return React.createElement('div', { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { display: 'grid', gridTemplateColumns: SS_COLS, gap: 'var(--sp-3)', minWidth: 860, alignItems: 'center', padding: '12px var(--sp-5)', background: bg, borderBottom: '1px solid var(--border)' } },
    React.createElement('div', { style: { ...cell, gap: 9 } },
      React.createElement('span', { style: { width: 26, height: 26, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-3)', color: 'var(--muted)', border: '1px solid var(--border)' } }, React.createElement(WIcon, { name: 'globe', size: 13 })),
      React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.8rem', color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, row.site)),
    React.createElement('div', { style: cell }, React.createElement(MiniSignal, { kind: row.conn })),
    React.createElement('div', { style: cell }, React.createElement(MiniSignal, { kind: row.twofa })),
    React.createElement('div', { style: cell }, React.createElement(MiniSignal, { kind: row.ssl })),
    React.createElement('div', { style: cell }, React.createElement(MiniSignal, { kind: row.scan })),
    React.createElement('div', { style: cell }, React.createElement(SecChip, { signal: row.status, size: 'sm' })));
}

/* audit-log zebra table */
const AU_COLS = '86px minmax(108px,1fr) minmax(168px,1.7fr) minmax(120px,1.2fr) 124px';
function AuditHead() {
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: AU_COLS, gap: 'var(--sp-3)', minWidth: 760,
    padding: '11px var(--sp-5)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' } },
    ['Time', 'Member', 'Action', 'Subject', 'IP'].map((h, i) => React.createElement('span', { key: i, className: 'wiz-eyebrow', style: { fontSize: '.56rem', letterSpacing: '.1em' } }, h)));
}
function AuditRow({ row, idx }) {
  const zebra = idx % 2 === 1;
  const mono = { fontFamily: 'var(--font-mono)', fontSize: '.76rem', color: 'var(--text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: AU_COLS, gap: 'var(--sp-3)', minWidth: 760, alignItems: 'center', padding: '11px var(--sp-5)', background: zebra ? 'var(--surface-2)' : 'var(--surface)', borderBottom: '1px solid var(--border)' } },
    React.createElement('span', { style: { ...mono, color: 'var(--muted)' } }, row.t),
    React.createElement('span', { style: { ...mono, color: 'var(--text)' } }, row.who),
    React.createElement('span', { style: { fontSize: '.82rem', color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, row.action),
    React.createElement('span', { style: mono }, row.subject),
    React.createElement('span', { style: { ...mono, color: 'var(--dim)' } }, row.ip));
}

function SecurityOverview({ ssoConfigured, onToast }) {
  const [twofa, setTwofa] = useStateSc(true);
  const [ipAllow, setIpAllow] = useStateSc(true);
  const ssoCta = () => onToast(ssoConfigured ? { kind: 'success', text: 'Opening SSO configuration…' } : { kind: 'upsell', text: '→ Routing to checkout: Enterprise plan (SSO)' });

  return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-5)' } },
    // header
    React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap' } },
      React.createElement('div', null,
        React.createElement('div', { className: 'wiz-eyebrow', style: { marginBottom: 6 } }, 'Account · Security'),
        React.createElement('h1', { className: 'wiz-title', style: { margin: 0, fontSize: '1.6rem' } }, 'Security'),
        React.createElement('p', { style: { margin: '6px 0 0', color: 'var(--text-2)', fontSize: '.9rem' } }, 'How your workspace signs in, who has a session, and how your connected sites are protected')),
      React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: '.66rem', color: 'var(--muted)' } },
        React.createElement(WIcon, { name: 'clock', size: 13 }), 'Reviewed 2 days ago')),

    // posture row
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px,1fr))', gap: 'var(--sp-4)' } },
      SEC_POSTURE.map(p => React.createElement(SecStat, { key: p.key, icon: p.icon, label: p.label, value: p.value, signal: p.signal, gate: p.gate }))),

    // workspace security card
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', padding: 'var(--sp-5)' } },
      React.createElement('div', { style: { marginBottom: 'var(--sp-4)' } },
        React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Workspace security'),
        React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, 'Applies to everyone in this workspace')),
      // no-keys reassurance
      React.createElement('div', { style: { marginBottom: 'var(--sp-2)' } },
        React.createElement(window.NoticeCard, { accent: 'var(--beam)', icon: 'shield-check', title: 'No keys to copy or rotate',
          body: 'Connected sites authenticate with signed SSO/JWT handshakes — there are no API keys to store. Revoke access any time and every site re-handshakes automatically.' })),
      // setting rows
      React.createElement(SecSettingRow, { icon: 'smartphone', title: 'Two-factor authentication', desc: 'Required for every owner and admin sign-in · app-based codes.' },
        React.createElement(ManagedBadge, { label: 'Enforced' }),
        React.createElement(window.WToggle, { checked: twofa, onChange: setTwofa, label: 'Two-factor authentication' })),
      React.createElement(SecSettingRow, { icon: 'globe', title: 'IP allowlist', desc: 'Only sign-ins from approved networks · 3 ranges configured.' },
        React.createElement(FauxSelect, { value: '3 ranges', options: ['1 range', '2 ranges', '3 ranges', '5 ranges', 'Manage ranges…'] }),
        React.createElement(window.WToggle, { checked: ipAllow, onChange: setIpAllow, label: 'IP allowlist' })),
      React.createElement(SecSettingRow, { icon: 'clock', title: 'Session timeout', desc: 'Sign members out automatically after a period of inactivity.' },
        React.createElement(FauxSelect, { value: '8 hours', icon: 'clock', options: ['1 hour', '4 hours', '8 hours', '24 hours', '7 days'] })),
      React.createElement('div', { style: { borderBottom: 'none' } },
        React.createElement(SecSettingRow, { icon: 'file-text', title: 'Audit-log retention', desc: 'How long sign-in and admin activity is kept.' },
          React.createElement(FauxSelect, { value: '90 days', options: ['30 days', '90 days', '180 days', '1 year', '2 years'] }))),
      // SSO gate (generic locked-CTA slot, swappable copy)
      React.createElement('div', { style: { marginTop: 'var(--sp-4)' } },
        React.createElement(SsoGate, { configured: ssoConfigured, onCta: ssoCta,
          lockedBody: 'Let your team sign in through your identity provider (SAML 2.0) — centralized provisioning and instant off-boarding.',
          configuredBody: 'Your team signs in through Okta. New members are provisioned automatically; off-boarding revokes every session instantly.' }))),

    // active sessions
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', overflow: 'hidden' } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap', padding: 'var(--sp-5) var(--sp-5) var(--sp-4)' } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Active sessions'),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, SEC_SESSIONS.length + ' devices · you can revoke any but this one')),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-secondary wiz-focusable', style: { fontSize: '.72rem' }, onClick: () => onToast({ kind: 'success', text: 'Revoked all other sessions — other devices must sign in again.' }) },
          React.createElement(WIcon, { name: 'log-out', size: 14 }), 'Revoke all others')),
      SEC_SESSIONS.map((s, i) => React.createElement(SessionRow, { key: i, s, idx: i, onRevoke: (x) => onToast({ kind: 'success', text: 'Revoked ' + x.device + ' — it must sign in again.' }) }))),

    // connected-site security signals
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', overflow: 'hidden' } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap', padding: 'var(--sp-5) var(--sp-5) var(--sp-4)' } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Connected-site security'),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, '5 of 6 protected · connection, 2FA, SSL and malware scan')),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' }, onClick: () => onToast({ kind: 'success', text: 'Re-scanning all connected sites…' }) },
          React.createElement(WIcon, { name: 'refresh', size: 14 }), 'Re-scan')),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement(SitesHead),
        React.createElement('div', null, SEC_SITES.map((r, i) => React.createElement(SiteRow, { key: i, row: r, idx: i }))))),

    // audit log
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', overflow: 'hidden' } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap', padding: 'var(--sp-5) var(--sp-5) var(--sp-4)' } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Audit log'),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, 'Sign-ins and admin changes · kept 90 days')),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' }, onClick: () => onToast({ kind: 'success', text: 'Exporting audit log (CSV)…' }) },
          React.createElement(WIcon, { name: 'download', size: 14 }), 'Export')),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement(AuditHead),
        React.createElement('div', null, SEC_AUDIT.map((r, i) => React.createElement(AuditRow, { key: i, row: r, idx: i })))))
  );
}

window.WPSB = window.WPSB || {};
window.WPSB.SecPage = { SecurityOverview, SiteRow, AuditRow };
console.log('[WPSB] SecPage v1.0.0 loaded');
})();