function AuthShell({ title, subtitle, children, footer }) {
  const wide = useWide();
  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: 'calc(100vh - 57px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: wide ? '48px 32px' : '24px 16px' }}>
      <div style={{ width: '100%', maxWidth: 440, background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 36 : 24 }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 14 }}>§ {title.toUpperCase()}</div>
        <div style={{ fontFamily: TH.serif, fontSize: 32, letterSpacing: -1, lineHeight: 1.1, marginBottom: 8 }}>{subtitle}</div>
        <div style={{ fontFamily: TH.serif, fontSize: 14, color: TH.inkSoft, marginBottom: 24, lineHeight: 1.55 }}>
          Welcome. Let's get you set up — takes 30 seconds.
        </div>
        {children}
        {footer}
      </div>
    </div>
  );
}

function Field({ label, ...props }) {
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5, marginBottom: 6, textTransform: 'uppercase' }}>{label}</div>
      <input {...props} style={{
        width: '100%', padding: '12px 14px', background: TH.bg, border: `1px solid ${TH.rule}`,
        color: TH.ink, fontFamily: TH.mono, fontSize: 14, outline: 'none',
      }}
      onFocus={e => e.target.style.borderColor = TH.accent}
      onBlur={e => e.target.style.borderColor = TH.rule}/>
    </label>
  );
}

function Signup({ go, onAuth }) {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [name, setName] = React.useState('');
  const [walletState, setWalletState] = React.useState('idle'); // idle | connecting | connected
  const [wallet, setWallet] = React.useState(null);
  const submit = (e) => {
    e && e.preventDefault();
    if (!email || (!pw && !wallet)) return;
    onAuth({ name: name || email.split('@')[0], email, wallet });
    go('pricing');
  };
  const connect = () => {
    setWalletState('connecting');
    setTimeout(() => { setWallet('0x4A...9f2D'); setWalletState('connected'); }, 1100);
  };

  return (
    <AuthShell
      title="Create account"
      subtitle={<>Join the <span style={{ fontStyle: 'italic', color: TH.accent }}>desk.</span></>}
      footer={
        <div style={{ fontFamily: TH.sans, fontSize: 13, color: TH.inkSoft, textAlign: 'center', marginTop: 20 }}>
          Already a member? <span onClick={() => go('login')} style={{ color: TH.accent, cursor: 'pointer' }}>Log in</span>
        </div>
      }
    >
      <form onSubmit={submit}>
        <Field label="Display name (optional)" type="text" value={name} onChange={e => setName(e.target.value)} placeholder="How should we call you"/>
        <Field label="Email" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@domain.com"/>
        <Field label="Password" type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="At least 8 characters"/>

        <Btn primary type="submit" style={{ width: '100%', padding: 14 }}>Create account →</Btn>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '22px 0', fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>
          <div style={{ flex: 1, height: 1, background: TH.rule }}/> OR <div style={{ flex: 1, height: 1, background: TH.rule }}/>
        </div>

        {walletState === 'connected' ? (
          <div style={{ border: `1px solid ${TH.accent}`, padding: 14, background: TH.bg }}>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 1.5, marginBottom: 4 }}>WALLET CONNECTED</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: TH.mono, fontSize: 14, color: TH.ink }}>{wallet}</span>
              <Btn small ghost onClick={() => { setWallet(null); setWalletState('idle'); }}>Disconnect</Btn>
            </div>
          </div>
        ) : (
          <Btn ghost onClick={connect} style={{ width: '100%', padding: 14 }}>
            {walletState === 'connecting' ? <span style={{ color: TH.inkSoft }}>Connecting…</span> : <>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={TH.inkSoft} strokeWidth="2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
              Continue with wallet
            </>}
          </Btn>
        )}
      </form>
    </AuthShell>
  );
}

function Login({ go, onAuth }) {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const submit = (e) => { e.preventDefault(); if (!email) return; onAuth({ name: email.split('@')[0], email }); go('home'); };
  return (
    <AuthShell
      title="Log in"
      subtitle={<>Welcome <span style={{ fontStyle: 'italic', color: TH.accent }}>back.</span></>}
      footer={
        <div style={{ fontFamily: TH.sans, fontSize: 13, color: TH.inkSoft, textAlign: 'center', marginTop: 20 }}>
          New here? <span onClick={() => go('signup')} style={{ color: TH.accent, cursor: 'pointer' }}>Create account</span>
        </div>
      }
    >
      <form onSubmit={submit}>
        <Field label="Email" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@domain.com"/>
        <Field label="Password" type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••"/>
        <div style={{ textAlign: 'right', fontFamily: TH.sans, fontSize: 12, color: TH.accent, marginTop: -6, marginBottom: 18, cursor: 'pointer' }}>Forgot?</div>
        <Btn primary type="submit" style={{ width: '100%', padding: 14 }}>Log in →</Btn>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '22px 0', fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5 }}>
          <div style={{ flex: 1, height: 1, background: TH.rule }}/> OR <div style={{ flex: 1, height: 1, background: TH.rule }}/>
        </div>
        <Btn ghost onClick={() => { onAuth({ name: 'demo', email: 'demo@walkforward.xyz', wallet: '0x4A...9f2D' }); go('home'); }} style={{ width: '100%', padding: 14 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={TH.inkSoft} strokeWidth="2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
          Sign in with wallet
        </Btn>
      </form>
    </AuthShell>
  );
}

Object.assign(window, { Signup, Login });