// pages/auth.jsx — Login + Register pages.
// Split screen: cinematic dark left (panther eyes, panther silhouette),
// paper card right with form.

const { useState: useSAuth, useEffect: useEAuth } = React;

function AuthPage({ mode = 'login' }){
  const [dark, setDark] = useSAuth(false);
  return (
    <PageShell active="home" dark={dark} hideNav={false} footer={false}>
      <section style={{
        padding: '24px 28px 48px', maxWidth: 1320, margin: '0 auto',
        minHeight: 'calc(100vh - 200px)',
      }}>
        <div className="pw-reveal" style={{
          display:'grid', gridTemplateColumns:'1fr 1fr',
          borderRadius: 32, overflow:'hidden',
          border:'1px solid var(--line-strong)',
          boxShadow:'0 30px 60px -25px rgba(48,37,22,.22)',
          minHeight: 600,
        }}>
          <AuthStage />
          <AuthForm mode={mode} />
        </div>
      </section>
      <button onClick={() => setDark(d => !d)} style={{
        position:'fixed', bottom: 18, right: 18, zIndex: 100,
        padding:'10px 16px', borderRadius: 999,
        background: dark ? '#fff7e6' : '#191714',
        color: dark ? '#191714' : '#fff7e6',
        border: 0,
        fontFamily:'JetBrains Mono, monospace',
        fontSize: 11, fontWeight: 800, letterSpacing:'.18em',
        textTransform:'uppercase', cursor:'pointer',
      }}>{dark ? '☀ Light' : '☾ Dark'}</button>
    </PageShell>
  );
}

// ──────────────────────────────────────────────────────────────────────
function AuthStage(){
  return (
    <div style={{
      position:'relative', overflow:'hidden',
      padding: '48px 40px',
      background:
        'radial-gradient(60% 80% at 80% 10%, rgba(216,106,145,.32), transparent 60%),' +
        'radial-gradient(50% 70% at 10% 90%, rgba(110,138,160,.28), transparent 60%),' +
        'linear-gradient(160deg, #0e0a08 0%, #1a1411 50%, #271a1e 100%)',
      color:'#fff7e6',
      display:'flex', flexDirection:'column', justifyContent:'space-between',
    }}>
      <PantherEyes x="6%"  y="58%" color="#e39b44" scale={1.1} side="l" />
      <PantherEyes x="78%" y="20%" color="#e39b44" scale={.7} side="r" />
      <span style={{
        position:'absolute', inset:0, opacity:.22, mixBlendMode:'overlay',
        backgroundImage:'var(--noise-svg)', pointerEvents:'none',
      }} />

      <div style={{ position:'relative', zIndex: 2 }}>
        <Folio dark>Vol. I · No. 01 · Welcome back</Folio>
        <h1 style={{
          marginTop: 18, fontSize: 'clamp(44px, 5vw, 72px)',
          lineHeight: .94, letterSpacing:'-.05em',
          fontFamily:'Fraunces, serif', color:'#fff7e6',
          fontVariationSettings:'"opsz" 144, "SOFT" 40',
          maxWidth: '12ch',
        }}>
          Step back<br/>
          into the <em style={{ fontStyle:'italic', color:'var(--gold)' }}>study.</em>
        </h1>
        <p style={{
          marginTop: 18, fontFamily:'Fraunces, serif', fontStyle:'italic',
          fontSize: 18, color:'rgba(255,247,230,.7)', maxWidth:'40ch',
          paddingLeft: 22, borderLeft:'2px solid var(--gold)',
          fontVariationSettings:'"opsz" 36, "SOFT" 50',
        }}>
          Maia is already there. Amigo is already there. The board is set up
          exactly as you left it.
        </p>
      </div>

      <div style={{ position:'relative', zIndex: 2, marginTop: 32 }}>
        {/* Floating instrument bits to remind you what's behind the door */}
        <div style={{
          padding: 18, borderRadius: 18,
          background:'rgba(255,247,230,.06)',
          border:'1px solid rgba(255,247,230,.12)',
          backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)',
        }}>
          <div style={{
            display:'flex', justifyContent:'space-between', alignItems:'center',
            fontFamily:'JetBrains Mono, monospace', fontSize: 10,
            fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
            color:'rgba(255,247,230,.6)',
          }}>
            <span>Your room · last visit</span>
            <span style={{ color:'var(--gold)' }}>11d streak</span>
          </div>
          <div style={{ marginTop: 12 }}>
            <BrassGauge label="Sight"  value={62} color="var(--gold)" dark delta={3} />
            <BrassGauge label="Calc"   value={48} color="var(--olive)" dark delta={1} />
            <BrassGauge label="Memory" value={71} color="var(--blue)" dark delta={-2} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
function AuthForm({ mode }){
  const [tab, setTab] = useSAuth(mode);
  const isLogin = tab === 'login';
  return (
    <div style={{
      padding: '48px 44px',
      background:'var(--paper-card)',
      display:'flex', flexDirection:'column', justifyContent:'center',
      position:'relative',
    }}>
      <div style={{ display:'flex', gap: 6, marginBottom: 28 }}>
        {['login','signup'].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: '8px 14px', borderRadius: 999,
            fontFamily:'JetBrains Mono, monospace', fontSize: 11,
            fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
            background: tab === t ? 'var(--ink)' : 'transparent',
            color: tab === t ? 'var(--paper-100)' : 'var(--ink-muted)',
            border: tab === t ? '0' : '1px solid var(--line)',
            cursor:'pointer',
          }}>{t === 'login' ? 'Log in' : 'Create account'}</button>
        ))}
      </div>

      <h2 style={{
        fontFamily:'Fraunces, serif', fontSize: 40, letterSpacing:'-.04em',
        lineHeight: 1,
        fontVariationSettings:'"opsz" 120, "SOFT" 40',
      }}>
        {isLogin
          ? <>Welcome <em style={{ fontStyle:'italic', color:'var(--gold)' }}>back.</em></>
          : <>Start <em style={{ fontStyle:'italic', color:'var(--gold)' }}>training.</em></>}
      </h2>
      <p style={{ marginTop: 8, color:'var(--ink-soft)', fontSize: 14.5 }}>
        {isLogin
          ? 'Your training, streak, and Maia rating are saved.'
          : 'Free forever. Daily caps, no card needed.'}
      </p>

      <form onSubmit={e => e.preventDefault()}
        style={{ marginTop: 24, display:'grid', gap: 14 }}>
        {!isLogin && <Field label="Display name" type="text" placeholder="What should Amigo call you?" />}
        <Field label="Email"    type="email"    placeholder="your@email.com" />
        <Field label="Password" type="password" placeholder="••••••••" />

        {isLogin && (
          <div style={{
            display:'flex', justifyContent:'space-between', alignItems:'center',
            fontSize: 12, color:'var(--ink-soft)',
          }}>
            <label style={{ display:'inline-flex', alignItems:'center', gap: 6, cursor:'pointer' }}>
              <input type="checkbox" /> Stay signed in
            </label>
            <a href="#" style={{
              color:'var(--gold)', fontWeight:700,
              borderBottom:'1px solid var(--gold)',
              paddingBottom: 1,
            }}>Forgot password</a>
          </div>
        )}

        <button type="submit" style={{
          marginTop: 6,
          padding:'14px 18px', borderRadius: 999,
          background:'var(--gold)', color:'#1a120a',
          fontWeight: 900, fontSize: 14, letterSpacing:'.02em',
          boxShadow:'0 12px 30px -10px rgba(227,155,68,.5)',
          border: 0, cursor:'pointer',
          display:'inline-flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <span>{isLogin ? 'Log in →' : 'Create account →'}</span>
          <span style={{
            fontFamily:'JetBrains Mono, monospace', fontSize: 11,
            fontWeight: 800, letterSpacing:'.14em', opacity:.5,
          }}>♞ ↵</span>
        </button>
      </form>

      <div style={{
        marginTop: 24, paddingTop: 18, borderTop:'1px dashed var(--line-strong)',
        display:'grid', gap: 8,
      }}>
        <button style={{
          padding:'11px 14px', borderRadius: 14,
          background:'var(--paper-200)', border:'1px solid var(--line)',
          fontWeight: 700, fontSize: 13.5, cursor:'pointer',
          display:'inline-flex', justifyContent:'center', gap: 8,
        }}>
          <Goog />Continue with Google
        </button>
        <button style={{
          padding:'11px 14px', borderRadius: 14,
          background:'var(--paper-200)', border:'1px solid var(--line)',
          fontWeight: 700, fontSize: 13.5, cursor:'pointer',
          display:'inline-flex', justifyContent:'center', gap: 8,
        }}>
          <span></span>Continue with Apple
        </button>
      </div>

      <p style={{
        marginTop: 22, color:'var(--ink-muted)', fontSize: 12, textAlign:'center',
        fontFamily:'JetBrains Mono, monospace', letterSpacing:'.08em',
      }}>
        {isLogin
          ? <>No account? <a href="#" onClick={e => { e.preventDefault(); setTab('signup'); }} style={{ color:'var(--gold)', borderBottom:'1px solid var(--gold)' }}>Create one</a></>
          : <>Already in? <a href="#" onClick={e => { e.preventDefault(); setTab('login'); }} style={{ color:'var(--gold)', borderBottom:'1px solid var(--gold)' }}>Log in</a></>}
      </p>
    </div>
  );
}

function Field({ label, type, placeholder }){
  return (
    <label style={{ display:'grid', gap: 6 }}>
      <span style={{
        fontFamily:'JetBrains Mono, monospace', fontSize: 10.5,
        fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
        color:'var(--ink-muted)',
      }}>{label}</span>
      <input type={type} placeholder={placeholder} style={{
        padding:'14px 16px', borderRadius: 14,
        background:'var(--paper-200)', border:'1px solid var(--line)',
        fontSize: 15, fontWeight: 500, color:'var(--ink)',
        outline:'none',
        transition: 'border-color .2s, background .2s',
      }} onFocus={e => { e.target.style.borderColor = 'var(--gold)'; e.target.style.background = 'var(--paper-card)'; }}
         onBlur ={e => { e.target.style.borderColor = 'var(--line)'; e.target.style.background = 'var(--paper-200)'; }} />
    </label>
  );
}

function Goog(){
  return (
    <svg width="16" height="16" viewBox="0 0 18 18">
      <path d="M16.51 8.18c0-.57-.05-1.11-.15-1.64H9v3.1h4.21c-.18.97-.73 1.79-1.57 2.34v1.94h2.54c1.49-1.37 2.33-3.4 2.33-5.74z" fill="#4285F4"/>
      <path d="M9 17c2.12 0 3.9-.7 5.2-1.9l-2.55-1.97c-.7.47-1.6.75-2.65.75-2.04 0-3.77-1.38-4.39-3.23H1.97v2.03A8 8 0 0 0 9 17z" fill="#34A853"/>
      <path d="M4.61 10.65a4.8 4.8 0 0 1 0-3.06V5.56H1.97a8 8 0 0 0 0 6.88l2.64-1.79z" fill="#FBBC05"/>
      <path d="M9 4.4c1.15 0 2.18.4 3 1.17l2.25-2.25C12.9 2.03 11.12 1.3 9 1.3a8 8 0 0 0-7.03 4.26l2.64 2.03C5.23 5.78 6.96 4.4 9 4.4z" fill="#EA4335"/>
    </svg>
  );
}

Object.assign(window, { AuthPage });