// AXIS-10 — Account & authentication. Ported from the real SignUpLanding:
// brand hero + provider buttons (Apple / Google / email) + sign-in link.
// Apple/Google sign in as the demo user; "email" opens an inline form.
function AppleGlyph() {
  return (<svg width="18" height="20" viewBox="0 0 18 20" fill="currentColor"><path d="M14.6 10.7c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.6.9-.8 0-1.9-.9-3.2-.9C4.8 5.3 3 6.4 2 8.1c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.3 2.5 1.3-.1 1.8-.9 3.4-.9s2 .9 3.4.9c1.4 0 2.3-1.2 3.2-2.5.7-1 1.3-2 1.7-3.1-2.7-1-3.7-4-3.7-4.5zM12.1 3.6c.7-.9 1.2-2.1 1.1-3.3-1 .1-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.2 1.1.1 2.3-.6 3-1.5z"/></svg>);
}
function GoogleGlyph() {
  return (<svg width="18" height="18" viewBox="0 0 18 18"><path d="M17.6 9.2c0-.6-.1-1.2-.2-1.8H9v3.4h4.8c-.2 1.1-.8 2.1-1.8 2.7v2.2h2.9c1.7-1.6 2.7-3.9 2.7-6.5z" fill="#4285F4"/><path d="M9 18c2.4 0 4.5-.8 6-2.2l-2.9-2.2c-.8.5-1.8.9-3.1.9-2.4 0-4.4-1.6-5.1-3.8H.9v2.3C2.4 15.8 5.4 18 9 18z" fill="#34A853"/><path d="M3.9 10.7c-.2-.5-.3-1.1-.3-1.7s.1-1.2.3-1.7V5H.9C.3 6.2 0 7.5 0 9s.3 2.8.9 4l3-2.3z" fill="#FBBC05"/><path d="M9 3.6c1.3 0 2.5.5 3.5 1.4l2.6-2.6C13.5.9 11.4 0 9 0 5.4 0 2.4 2.2.9 5l3 2.3C4.6 5.2 6.6 3.6 9 3.6z" fill="#EA4335"/></svg>);
}
function EmailGlyph() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>);
}

function ProviderButton({ kind, recommended, onClick }) {
  const cfg = {
    apple:  { label: 'Continue with Apple',  fg: '#fff',  bg: '#000',         icon: <AppleGlyph /> },
    google: { label: 'Continue with Google', fg: M.ink,   bg: '#fff', border: M.rule, icon: <GoogleGlyph /> },
    email:  { label: 'Continue with email',  fg: M.ink,   bg: 'transparent', border: M.rule, icon: <EmailGlyph /> },
  }[kind];
  return (
    <div style={{ position: 'relative' }}>
      <button onClick={onClick} style={{
        width: '100%', height: 52, borderRadius: 12,
        background: cfg.bg, color: cfg.fg, border: cfg.border ? `1px solid ${cfg.border}` : 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        font: `500 15px/1 ${M.sans}`, letterSpacing: '-0.005em', cursor: 'pointer',
      }}>{cfg.icon}<span>{cfg.label}</span></button>
      {recommended && (
        <span style={{ position: 'absolute', top: -8, right: 12, padding: '2px 8px',
          background: M.axisSoft, color: M.axisDark, font: `500 10px/1 ${M.sans}`,
          letterSpacing: '0.08em', textTransform: 'uppercase', borderRadius: 999 }}>Recommended</span>
      )}
    </div>
  );
}

function LoginScreen({ onAuthed }) {
  const [view, setView] = React.useState('landing'); // landing | email
  const [mode, setMode] = React.useState('signin');  // signin | signup
  const [email, setEmail] = React.useState('demo@axisx.ai');
  const [password, setPassword] = React.useState('axis');
  const [error, setError] = React.useState(null);

  const demoIn = () => { try { onAuthed(window.AxisMock.signin('demo@axisx.ai', 'axis')); } catch (e) { setError(String(e.message || e)); } };
  const submit = () => {
    setError(null);
    try {
      const u = mode === 'signin' ? window.AxisMock.signin(email, password) : window.AxisMock.signup(email, password);
      onAuthed(u);
    } catch (e) { setError(e.message || String(e)); }
  };

  const Avatar = window.DSAxisAvatar || (() => <div style={{ width: 48, height: 48, borderRadius: 12, background: M.axis, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `500 24px/1 ${M.sans}` }}>A</div>);

  return (
    <div style={{ background: M.canvas, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, padding: '28px 24px 8px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: 32 }}><Avatar size={48} radius={12} /></div>
        <div style={{ font: `500 30px/1.1 ${M.sans}`, letterSpacing: '-0.02em', color: M.ink }}>
          A quiet space<br/>to think with<br/>your health.
        </div>
        <div style={{ font: `400 15px/1.5 ${M.sans}`, color: M.inkSoft, marginTop: 14, maxWidth: 320 }}>
          Axis is an assistant for personal health. It listens, surfaces patterns, and runs small experiments with you.
        </div>
        {error && <div style={{ marginTop: 18 }}><DSAlert tone="warn" title="Sign-in failed" body={error} /></div>}

        {view === 'email' && (
          <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', gap: 4, padding: 4, background: M.surfaceAlt, border: `1px solid ${M.rule}`, borderRadius: 11 }}>
              {[['signin', 'Sign in'], ['signup', 'Create account']].map(([id, lbl]) => (
                <button key={id} onClick={() => { setMode(id); setError(null); }} style={{
                  flex: 1, padding: '9px 0', border: 'none', cursor: 'pointer', borderRadius: 8,
                  background: mode === id ? M.surface : 'transparent', color: mode === id ? M.ink : M.inkMuted,
                  font: `500 13px/1 ${M.sans}`, boxShadow: mode === id ? '0 1px 2px rgba(14,18,32,0.08)' : 'none',
                }}>{lbl}</button>
              ))}
            </div>
            <DSTextInput label="Email" value={email} onChange={setEmail} placeholder="you@example.com" />
            <DSTextInput label="Password" value={password} onChange={setPassword} placeholder="••••••••" onSubmit={submit} />
            <DSButton full onClick={submit}>{mode === 'signin' ? 'Sign in' : 'Create account'}</DSButton>
            <button onClick={() => setView('landing')} style={{ background: 'transparent', border: 'none', cursor: 'pointer', font: `400 13px/1 ${M.sans}`, color: M.inkMuted, padding: 4 }}>← Back</button>
          </div>
        )}

        <div style={{ flex: 1 }} />
      </div>

      {view === 'landing' && (
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            <ProviderButton kind="apple" recommended onClick={demoIn} />
            <ProviderButton kind="google" onClick={demoIn} />
            <ProviderButton kind="email" onClick={() => { setView('email'); setError(null); }} />
          </div>
          <div style={{ textAlign: 'center', marginTop: 12, font: `400 14px/1 ${M.sans}`, color: M.inkSoft }}>
            Already have an account?{' '}
            <span onClick={() => { setView('email'); setMode('signin'); }} style={{ color: M.axis, fontWeight: 500, cursor: 'pointer' }}>Sign in</span>
          </div>
          <div style={{ textAlign: 'center', marginTop: 10, font: `400 11px/1.5 ${M.sans}`, color: M.inkFaint }}>
            Demo · Apple/Google sign in as <b style={{ fontWeight: 500 }}>demo@axisx.ai</b>. Admin: admin@axisx.ai / axis.
          </div>
          <div style={{ textAlign: 'center', marginTop: 8, font: `400 11px/1.5 ${M.sans}`, color: M.inkFaint }}>
            By continuing you agree to our <span style={{ color: M.axis, textDecoration: 'underline' }}>Terms</span> & <span style={{ color: M.axis, textDecoration: 'underline' }}>Privacy Policy</span>.
          </div>
        </div>
      )}
    </div>
  );
}
window.LoginScreen = LoginScreen;