// SSO landing page — pre-auth view.

const Login = ({ onLogin }) => {
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const [hovered, setHovered] = React.useState(null);

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--apm-bg)',
      display: 'flex', alignItems: 'stretch',
    }}>
      {/* Left rail — brand */}
      <div style={{
        flex: '0 0 44%', minWidth: 420,
        background: 'var(--apm-bg-2)',
        borderRight: '1px solid var(--apm-line)',
        padding: '64px 56px', display: 'flex', flexDirection: 'column',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* deco */}
        <svg width="540" height="540" viewBox="0 0 540 540" style={{
          position: 'absolute', right: -120, bottom: -160, opacity: 0.08, pointerEvents: 'none',
        }}>
          <defs>
            <pattern id="dot" width="14" height="14" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1.4" fill="var(--apm-ink)"/>
            </pattern>
          </defs>
          <circle cx="270" cy="270" r="260" fill="none" stroke="var(--apm-line-strong)" strokeWidth="1"/>
          <circle cx="270" cy="270" r="180" fill="none" stroke="var(--apm-line-strong)" strokeWidth="1"/>
          <circle cx="270" cy="270" r="100" fill="url(#dot)"/>
        </svg>

        {/* logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'var(--apm-ink)', color: 'var(--apm-bg-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--apm-font-display)', fontSize: 22, fontWeight: 600,
            letterSpacing: '-0.02em',
          }}>p</div>
          <div>
            <div style={{ fontFamily: 'var(--apm-font-display)', fontSize: 22, lineHeight: 1, letterSpacing: '-0.01em' }}>portfolio</div>
            <div style={{ fontSize: 11, color: 'var(--apm-muted)', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 4 }}>Application Portfolio Mgmt</div>
          </div>
        </div>

        {/* hero quote */}
        <div style={{ marginTop: 'auto', position: 'relative' }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--apm-muted)', marginBottom: 16 }}>The single ledger for everything we ship</div>
          <div style={{
            fontFamily: 'var(--apm-font-display)',
            fontSize: 42, lineHeight: 1.1, letterSpacing: '-0.02em',
            color: 'var(--apm-ink)', maxWidth: 460, textWrap: 'balance',
          }}>
            Ideas, projects, components, and tickets — moving through one set of gates,
            visible to the people who own them.
          </div>
          <div style={{ marginTop: 32, display: 'flex', gap: 28, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--apm-font-display)', fontSize: 24, color: 'var(--apm-ink)' }}>12</div>
              <div style={{ fontSize: 11, color: 'var(--apm-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Projects in flight</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--apm-font-display)', fontSize: 24, color: 'var(--apm-ink)' }}>4</div>
              <div style={{ fontSize: 11, color: 'var(--apm-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Strategic initiatives</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--apm-font-display)', fontSize: 24, color: 'var(--apm-ink)' }}>11</div>
              <div style={{ fontSize: 11, color: 'var(--apm-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Phase gates</div>
            </div>
          </div>
        </div>
      </div>

      {/* Right — sign-in */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 64,
      }}>
        <div style={{ width: '100%', maxWidth: 380 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--apm-muted)' }}>Sign in</div>
          <h1 style={{
            margin: '8px 0 6px', fontFamily: 'var(--apm-font-display)', fontWeight: 400,
            fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1.15,
          }}>Welcome back.</h1>
          <p style={{ color: 'var(--apm-muted)', fontSize: 14, margin: '0 0 28px' }}>
            Continue with your Earlens identity provider. New here? Ask your manager to add you to a workspace.
          </p>

          <button onClick={() => setPickerOpen(true)} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            width: '100%', padding: '14px 16px',
            background: 'var(--apm-card)', border: '1px solid var(--apm-line-2)',
            borderRadius: 'var(--apm-radius-lg)', cursor: 'pointer',
            fontFamily: 'var(--apm-font-body)', textAlign: 'left',
            transition: 'border-color .12s, box-shadow .12s',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--apm-ink)'; e.currentTarget.style.boxShadow = 'var(--apm-shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--apm-line-2)'; e.currentTarget.style.boxShadow = 'none'; }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: '#0F1B2D', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 14,
            }}>O</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>Continue with Okta</div>
              <div style={{ fontSize: 12, color: 'var(--apm-muted)' }}>earlens.okta.com</div>
            </div>
            <Icon name="arrow_right" size={16} style={{ color: 'var(--apm-muted)' }} />
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0', color: 'var(--apm-muted)', fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.14em' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--apm-line)' }} />
            or
            <div style={{ flex: 1, height: 1, background: 'var(--apm-line)' }} />
          </div>

          <button onClick={() => setPickerOpen(true)} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            width: '100%', padding: '11px 14px',
            background: 'transparent', border: '1px solid var(--apm-line-2)',
            borderRadius: 'var(--apm-radius)', cursor: 'pointer',
            fontFamily: 'var(--apm-font-body)', fontSize: 13.5, color: 'var(--apm-ink-2)',
            justifyContent: 'center',
          }}>
            <Icon name="lock" size={14} />
            Use Microsoft Entra ID instead
          </button>

          <div style={{ marginTop: 36, paddingTop: 20, borderTop: '1px solid var(--apm-line)', fontSize: 11.5, color: 'var(--apm-muted)', lineHeight: 1.6 }}>
            By signing in, you agree to Earlens&rsquo;s acceptable-use policy.
            All actions in portfolio are logged for SOC 2 compliance.
          </div>
        </div>
      </div>

      {/* Persona picker — proxies for SSO */}
      {pickerOpen && (
        <Modal open onClose={() => setPickerOpen(false)} width={680}>
          <div style={{ padding: 28, borderBottom: '1px solid var(--apm-line)' }}>
            <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--apm-muted)' }}>Demo</div>
            <div style={{ fontFamily: 'var(--apm-font-display)', fontSize: 22, marginTop: 4, letterSpacing: '-0.01em' }}>Pick an identity to sign in as</div>
            <div style={{ fontSize: 13, color: 'var(--apm-muted)', marginTop: 6 }}>
              Each role sees a different home view, different available actions, and different gates. You can switch later from the sidebar.
            </div>
          </div>
          <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {APM_PEOPLE.map(p => (
              <button key={p.id} onClick={() => onLogin(p.id)}
                onMouseEnter={() => setHovered(p.id)} onMouseLeave={() => setHovered(null)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '12px 12px', textAlign: 'left',
                  background: hovered === p.id ? 'var(--apm-bg-sunken)' : 'transparent',
                  border: '1px solid ' + (hovered === p.id ? 'var(--apm-line-2)' : 'var(--apm-line)'),
                  borderRadius: 'var(--apm-radius)', cursor: 'pointer',
                  fontFamily: 'var(--apm-font-body)',
                }}>
                <Avatar person={p} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.2 }}>{p.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--apm-muted)', marginTop: 2 }}>{APM_ROLES[p.role].label}</div>
                </div>
              </button>
            ))}
          </div>
        </Modal>
      )}
    </div>
  );
};

const LoginPage = Login;
Object.assign(window, { Login, LoginPage });