/* global React */
function AuthPage({ mode = 'login', go, onLogin }) {
  const [tab, setTab] = React.useState(mode);
  const [email, setEmail] = React.useState('');
  const [name, setName] = React.useState('');
  const [pwd, setPwd] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
      onLogin({
        name: name || email.split('@')[0] || 'TRADER',
        email: email || 'demo@expert4forex.io',
        balance: 12832.45
      });
      go('dashboard');
    }, 900);
  }

  return (
    <div style={{ minHeight: 'calc(100vh - 72px)', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      {/* Left side — branding */}
      <div style={{ padding: '64px 48px', position: 'relative', borderRight: '1px solid var(--line)', background: 'radial-gradient(ellipse at top left, rgba(0,229,255,0.08), transparent 70%)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <Logo size={48} />
        <div>
          <span className="eyebrow">ACCESS · TIER OPERATOR</span>
          <h1 className="mt-4" style={{ fontSize: 48, lineHeight: 1.05 }}>
            Welcome to the<br />
            <span className="gradient-text">command deck</span>
          </h1>
          <p className="mt-6 text-muted" style={{ fontSize: 16, maxWidth: 420 }}>
            Your EA library, your AI Agent, your downloads — all in one place. Sign in to deploy your first EA in 4 minutes.
          </p>

          <div className="mt-12 grid grid-3" style={{ maxWidth: 420 }}>
            <div><div className="display text-cyan" style={{ fontSize: 24 }}>7.3k</div><div className="text-xs text-muted">Traders</div></div>
            <div><div className="display text-green" style={{ fontSize: 24 }}>99.9%</div><div className="text-xs text-muted">Uptime</div></div>
            <div><div className="display" style={{ fontSize: 24, color: 'var(--magenta)' }}>24/7</div><div className="text-xs text-muted">Support</div></div>
          </div>
        </div>
        <div className="font-mono text-xs text-muted">
          <span style={{ color: 'var(--green)' }}>●</span> SYSTEM ONLINE · 99.94% UPTIME ·
        </div>
      </div>

      {/* Right side — form */}
      <div style={{ display: 'grid', placeItems: 'center', padding: 48 }}>
        <div style={{ width: '100%', maxWidth: 420 }}>
          <div className="flex gap-2 mb-8" style={{ background: 'rgba(255,255,255,0.03)', padding: 4, borderRadius: 8, border: '1px solid var(--line)' }}>
            {['login', 'signup'].map((t) =>
            <button key={t} className="btn btn-sm" style={{
              flex: 1, background: tab === t ? 'var(--cyan)' : 'transparent', color: tab === t ? '#000' : 'var(--text-3)'
            }} onClick={() => setTab(t)}>{t === 'login' ? 'Sign In' : 'Create Account'}</button>
            )}
          </div>

          <h2 style={{ fontSize: 28 }}>{tab === 'login' ? 'Authenticate' : 'Initialize account'}</h2>
          <p className="text-muted text-sm mt-2">
            {tab === 'login' ? 'Enter your credentials to access your terminal.' : 'Create your operator profile in under 30 seconds.'}
          </p>

          <form className="mt-8 flex-col gap-4" onSubmit={submit}>
            {tab === 'signup' &&
            <div className="field">
                <label>USER NAME</label>
                <input className="input" placeholder="e.g. ALPHA_OPERATOR" value={name} onChange={(e) => setName(e.target.value)} />
              </div>
            }
            <div className="field">
              <label>Email</label>
              <input className="input" type="email" placeholder="operator@domain.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
            </div>
            <div className="field">
              <label>Password</label>
              <input className="input" type="password" placeholder="••••••••••••" value={pwd} onChange={(e) => setPwd(e.target.value)} required />
            </div>

            {tab === 'login' &&
            <div className="flex-between text-xs">
                <label className="flex gap-2" style={{ alignItems: 'center', cursor: 'pointer' }}>
                  <input type="checkbox" style={{ accentColor: 'var(--cyan)' }} />
                  <span className="text-muted">Remember session</span>
                </label>
                <a className="text-cyan" style={{ cursor: 'pointer' }}>Forgot password?</a>
              </div>
            }

            <button className="btn btn-primary btn-block btn-lg btn-sheen mt-4" type="submit" disabled={loading}>
              {loading ? <span className="typing"><span /><span /><span /></span> : tab === 'login' ? 'Sign In →' : 'Create Account →'}
            </button>
          </form>

          <div className="flex-center mt-6 gap-3">
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            <span className="text-xs text-muted font-mono">OR</span>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          </div>

          <button className="btn btn-ghost btn-block btn-lg mt-6" onClick={() => window.fb?.signInWithGoogle?.()} style={{ gap: 12 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M22.5 12.3c0-.9-.1-1.7-.2-2.5H12v4.8h5.9c-.3 1.4-1 2.6-2.2 3.4v2.8h3.6c2.1-2 3.2-4.8 3.2-8.5z" /><path d="M12 23c2.9 0 5.4-1 7.2-2.6l-3.6-2.8c-1 .7-2.3 1.1-3.6 1.1-2.8 0-5.2-1.9-6-4.4H2.3v2.8C4.1 20.5 7.8 23 12 23z" /></svg>
            Continue with Google
          </button>
        </div>
      </div>
    </div>);

}

window.AuthPage = AuthPage;