// SSO & Access screen — provider selector + roles + access requests.

const SSO_PROVIDERS = [
  { id: 'okta',     name: 'Okta',             tone: '#007dc1', mono: 'Ok', active: true },
  { id: 'azure-ad', name: 'Azure AD',         tone: '#0078d4', mono: 'Az', active: false },
  { id: 'google',   name: 'Google Workspace', tone: '#ea4335', mono: 'Gw', active: false },
  { id: 'saml',     name: 'Custom SAML',      tone: '#6b6a64', mono: 'Sa', active: false },
];

const ROLES = [
  { id: 'admin',   label: 'Workspace admin', desc: 'Full access; manage connectors, users, billing', count: 4 },
  { id: 'analyst', label: 'Analyst',         desc: 'Ask questions, export results, save searches',   count: 142 },
  { id: 'viewer',  label: 'Viewer',          desc: 'Read-only across configured sources',           count: 87 },
];

const PENDING_REQUESTS = [
  { who: 'Lina M.',  email: 'lina.m@bankcorp.com',  team: 'Risk Ops',     wants: 'Add fraud_alerts schema', when: '2 hr ago' },
  { who: 'Bayu T.',  email: 'bayu.t@bankcorp.com',  team: 'Procurement',  wants: 'Access to Coupa connector', when: '1 day ago' },
  { who: 'Maya S.',  email: 'maya.s@bankcorp.com',  team: 'Compliance',   wants: 'Promote to Admin', when: '2 days ago' },
];

const ScreenSSO = () => {
  const [active, setActive] = React.useState('okta');
  const [autoProvision, setAutoProvision] = React.useState(true);
  const [scim, setScim] = React.useState(true);
  const [enforceMFA, setEnforceMFA] = React.useState(true);

  return (
    <div className="nx-page" style={{
      padding: '24px 32px 40px',
      maxWidth: 1080, margin: '0 auto',
    }}>
      <div style={{ marginBottom: 20 }}>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>
          SSO & Access
        </h1>
        <div style={{ marginTop: 4, color: 'var(--ink-3)', fontSize: 13.5 }}>
          Configure single sign-on, role mapping, and review access requests.
        </div>
      </div>

      {/* Provider picker */}
      <div className="nx-card" style={{ padding: 18, marginBottom: 16 }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
          Identity provider
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 16 }}>
          {SSO_PROVIDERS.map(p => (
            <button key={p.id}
              onClick={() => setActive(p.id)}
              style={{
                display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8,
                padding: 12, borderRadius: 9,
                background: active === p.id ? 'var(--accent-soft)' : 'var(--bg-elev)',
                border: `0.5px solid ${active === p.id ? 'var(--accent)' : 'var(--line)'}`,
                cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit',
                position: 'relative',
              }}
            >
              <ConnectorTile c={p} size={28} radius={6} />
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 550, color: 'var(--ink)' }}>{p.name}</div>
                <div style={{ fontSize: 11, color: p.active ? 'var(--ok)' : 'var(--ink-4)', marginTop: 1 }}>
                  {p.active ? '● Active' : 'Configure'}
                </div>
              </div>
            </button>
          ))}
        </div>

        {/* Active provider config */}
        <div style={{
          padding: 14, background: 'var(--bg-sunken)',
          borderRadius: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
        }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
              ACS URL
            </div>
            <div className="nx-mono" style={{
              fontSize: 11.5, color: 'var(--ink-2)',
              padding: '8px 10px', background: 'var(--bg-elev)',
              borderRadius: 6, border: '0.5px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 8,
              overflow: 'hidden',
            }}>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
                https://auth.nalarx.io/saml/bankcorp/acs
              </span>
              <Icon name="external" size={12} style={{ color: 'var(--ink-4)', flexShrink: 0, cursor: 'pointer' }} />
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
              Entity ID
            </div>
            <div className="nx-mono" style={{
              fontSize: 11.5, color: 'var(--ink-2)',
              padding: '8px 10px', background: 'var(--bg-elev)',
              borderRadius: 6, border: '0.5px solid var(--line)',
            }}>
              urn:nalarx:bankcorp
            </div>
          </div>
          <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 10, paddingTop: 4 }}>
            <button className="nx-btn sm"><Icon name="doc" size={12} /> Download metadata XML</button>
            <button className="nx-btn sm ghost"><Icon name="refresh" size={12} /> Test login</button>
            <div style={{ flex: 1 }} />
            <span className="nx-chip ok"><Icon name="check" size={11} /> Last login verified · 3 min ago</span>
          </div>
        </div>
      </div>

      {/* Two column */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 16 }}>
        {/* Roles */}
        <div className="nx-card" style={{ padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
              Roles & SCIM mapping
            </div>
            <button className="nx-btn sm ghost" style={{ color: 'var(--ink-3)' }}>
              <Icon name="plus" size={12} /> Custom role
            </button>
          </div>
          <div>
            {ROLES.map(r => (
              <div key={r.id} style={{
                display: 'grid', gridTemplateColumns: '1fr auto auto',
                gap: 12, alignItems: 'center',
                padding: '12px 0', borderTop: '0.5px solid var(--line)',
              }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 550 }}>{r.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 1 }}>{r.desc}</div>
                </div>
                <div className="nx-mono" style={{
                  fontSize: 11.5, color: 'var(--ink-3)',
                  padding: '4px 8px', background: 'var(--bg-sunken)', borderRadius: 5,
                }}>
                  okta:group/nalarx-{r.id}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', minWidth: 60, textAlign: 'right' }}>
                  <Icon name="users" size={12} style={{ verticalAlign: '-2px', marginRight: 4 }} />
                  {r.count}
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 18, paddingTop: 16, borderTop: '0.5px solid var(--line)' }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
              Provisioning policy
            </div>
            <PolicyRow label="Auto-provision new users from IdP"
              desc="Create NalarX accounts on first SSO login"
              value={autoProvision} onChange={setAutoProvision} />
            <PolicyRow label="SCIM 2.0 sync"
              desc="Real-time group & profile updates from Okta"
              value={scim} onChange={setScim} />
            <PolicyRow label="Enforce MFA at IdP"
              desc="Block users without 2FA enabled"
              value={enforceMFA} onChange={setEnforceMFA} />
          </div>
        </div>

        {/* Pending access */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="nx-card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
                Pending access ({PENDING_REQUESTS.length})
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {PENDING_REQUESTS.map((r, i) => (
                <div key={i} style={{ padding: 10, background: 'var(--bg-sunken)', borderRadius: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <div style={{
                      width: 22, height: 22, borderRadius: 50,
                      background: 'oklch(0.78 0.06 240)', color: 'white',
                      fontWeight: 600, fontSize: 10.5,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{r.who[0]}</div>
                    <div style={{ fontSize: 12.5, fontWeight: 550, flex: 1 }}>{r.who}</div>
                    <span style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{r.when}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 6, paddingLeft: 30 }}>
                    {r.team} · wants: <b style={{ color: 'var(--ink-2)' }}>{r.wants}</b>
                  </div>
                  <div style={{ display: 'flex', gap: 5, paddingLeft: 30 }}>
                    <button className="nx-btn sm primary" style={{ height: 24, fontSize: 11.5 }}><Icon name="check" size={11} /> Approve</button>
                    <button className="nx-btn sm ghost" style={{ height: 24, fontSize: 11.5, color: 'var(--ink-3)' }}>Decline</button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="nx-card" style={{ padding: 16 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 10 }}>
              Permissions inheritance
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 10 }}>
              NalarX honors source-system permissions on every query. A user only sees results from data they can already access.
            </div>
            <div className="nx-chip ok" style={{ height: 'auto', padding: '4px 8px' }}>
              <Icon name="shield-check" size={11} />
              ACL re-checked at query time
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const PolicyRow = ({ label, desc, value, onChange }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '10px 0',
  }}>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-4)', marginTop: 1 }}>{desc}</div>
    </div>
    <button onClick={() => onChange(!value)}
      style={{
        position: 'relative', width: 32, height: 18,
        border: 0, borderRadius: 999,
        background: value ? 'var(--accent)' : 'var(--ink-5)',
        cursor: 'pointer', padding: 0, transition: 'background .15s',
      }}>
      <i style={{
        position: 'absolute', top: 2, left: value ? 16 : 2,
        width: 14, height: 14, borderRadius: 50, background: 'white',
        boxShadow: '0 1px 2px rgba(0,0,0,.2)', transition: 'left .15s',
        display: 'block',
      }} />
    </button>
  </div>
);

window.ScreenSSO = ScreenSSO;