// Login / forgot-password page — matches dark glassmorphism theme
function AuthPage() {
  const { useState: useS, useEffect: useE } = React;
  const [mode, setMode]       = useS('login');  // 'login' | 'forgot'
  const [email, setEmail]     = useS('');
  const [password, setPass]   = useS('');
  const [loading, setLoading] = useS(false);
  const [error, setError]     = useS('');
  const [sent, setSent]       = useS(false);

  async function handleLogin(e) {
    e.preventDefault();
    setLoading(true); setError('');
    const { error: err } = await window.SUPABASE.auth.signInWithPassword({ email, password });
    setLoading(false);
    if (err) setError(err.message);
  }

  async function handleForgot(e) {
    e.preventDefault();
    setLoading(true); setError('');
    const { error: err } = await window.SUPABASE.auth.resetPasswordForEmail(email, {
      redirectTo: window.location.origin,
    });
    setLoading(false);
    if (err) setError(err.message);
    else setSent(true);
  }

  return (
    <div style={{ height:'100vh', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(900px 600px at 50% 40%, rgba(91,140,255,0.12), transparent 60%)',
      }}/>

      <div style={{ width:400, position:'relative', zIndex:1 }}>
        {/* Logo */}
        <div style={{ textAlign:'center', marginBottom:32 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:10, marginBottom:12 }}>
            <img src="/logo.png" alt="Kyoudai" style={{ width:48, height:48, borderRadius:13, boxShadow:'0 0 30px rgba(91,140,255,0.4)' }}/>
            <span style={{ fontSize:22, fontWeight:700, letterSpacing:'-0.03em' }}>Kyoudai</span>
          </div>
          <p style={{ margin:0, fontSize:13, color:'var(--sub)' }}>
            {mode === 'login' ? 'Sign in to your seller account' : 'Reset your password'}
          </p>
        </div>

        <div className="glass-strong" style={{ padding:28, borderRadius:16 }}>

          {/* ── LOGIN FORM ─────────────────────────────────── */}
          {mode === 'login' && (
            <form onSubmit={handleLogin} style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div>
                <label style={{ fontSize:12, color:'var(--sub)', display:'block', marginBottom:6 }}>Email</label>
                <input className="field" type="email" required autoFocus
                  value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@example.com" style={{ width:'100%' }}
                />
              </div>
              <div>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                  <label style={{ fontSize:12, color:'var(--sub)' }}>Password</label>
                  <button type="button"
                    onClick={() => { setMode('forgot'); setError(''); }}
                    style={{ background:'none', border:'none', fontSize:11, color:'var(--primary)', cursor:'pointer', padding:0 }}>
                    Forgot password?
                  </button>
                </div>
                <input className="field" type="password" required
                  value={password} onChange={e => setPass(e.target.value)}
                  placeholder="••••••••" style={{ width:'100%' }}
                />
              </div>
              {error && (
                <div style={{
                  padding:'10px 12px', borderRadius:8,
                  background:'rgba(255,107,138,0.08)', border:'1px solid rgba(255,107,138,0.25)',
                  fontSize:12, color:'#FF8FA5',
                }}>{error}</div>
              )}
              <button className="btn btn-primary" type="submit" disabled={loading}
                style={{ height:42, fontSize:14, justifyContent:'center', marginTop:4 }}>
                {loading ? 'Signing in…' : 'Sign in →'}
              </button>
            </form>
          )}

          {/* ── FORGOT FORM ────────────────────────────────── */}
          {mode === 'forgot' && !sent && (
            <form onSubmit={handleForgot} style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <p style={{ margin:0, fontSize:13, color:'var(--sub)', lineHeight:1.5 }}>
                Enter your email and we'll send you a password reset link.
              </p>
              <div>
                <label style={{ fontSize:12, color:'var(--sub)', display:'block', marginBottom:6 }}>Email</label>
                <input className="field" type="email" required autoFocus
                  value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@example.com" style={{ width:'100%' }}
                />
              </div>
              {error && (
                <div style={{
                  padding:'10px 12px', borderRadius:8,
                  background:'rgba(255,107,138,0.08)', border:'1px solid rgba(255,107,138,0.25)',
                  fontSize:12, color:'#FF8FA5',
                }}>{error}</div>
              )}
              <button className="btn btn-primary" type="submit" disabled={loading}
                style={{ height:42, fontSize:14, justifyContent:'center' }}>
                {loading ? 'Sending…' : 'Send reset link'}
              </button>
              <button type="button"
                onClick={() => { setMode('login'); setError(''); }}
                style={{ background:'none', border:'none', fontSize:12, color:'var(--sub)', cursor:'pointer' }}>
                ← Back to sign in
              </button>
            </form>
          )}

          {/* ── SENT CONFIRMATION ──────────────────────────── */}
          {mode === 'forgot' && sent && (
            <div style={{ textAlign:'center', padding:'8px 0' }}>
              <div style={{ fontSize:36, marginBottom:14 }}>📬</div>
              <div style={{ fontSize:14, fontWeight:600, marginBottom:8 }}>Check your inbox</div>
              <p style={{ fontSize:12, color:'var(--sub)', margin:'0 0 20px', lineHeight:1.5 }}>
                Reset link sent to <span style={{ color:'var(--text)' }}>{email}</span>
              </p>
              <button type="button"
                onClick={() => { setMode('login'); setSent(false); }}
                style={{ background:'none', border:'none', fontSize:12, color:'var(--primary)', cursor:'pointer' }}>
                ← Back to sign in
              </button>
            </div>
          )}
        </div>

        <p style={{ textAlign:'center', fontSize:12, color:'var(--dim)', marginTop:20 }}>
          New to Kyoudai? Contact admin to request access.
        </p>
      </div>
    </div>
  );
}

window.AuthPage = AuthPage;