const { useState } = React;

function AuthPage({ onNavigate }) {
  const [tab, setTab] = useState('login');
  const [form, setForm] = useState({ username: '', email: '', password: '', confirm: '' });
  const [errors, setErrors] = useState({});
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  function validate() {
    const errs = {};
    if (tab === 'register' && !form.username.trim()) errs.username = 'Usuário obrigatório';
    if (!form.email.includes('@')) errs.email = 'Email inválido';
    if (form.password.length < 6) errs.password = 'Mínimo 6 caracteres';
    if (tab === 'register' && form.password !== form.confirm) errs.confirm = 'Senhas não coincidem';
    return errs;
  }

  function submit(e) {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setLoading(true);
    setTimeout(() => { setLoading(false); setSuccess(true); }, 1800);
  }

  const inputStyle = (err) => ({
    width: '100%', background: '#2a2a2a', border: `1px solid ${err ? '#ff4444' : 'rgba(168,255,0,0.2)'}`,
    color: '#fff', fontFamily: 'Rajdhani', fontWeight: 500, fontSize: 15,
    padding: '13px 16px', outline: 'none', marginBottom: 6,
    transition: 'border-color 0.2s',
  });

  if (success) return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '5vw' }}>
      <div style={{ textAlign: 'center', maxWidth: 400 }}>
        <div style={{ fontSize: 48, marginBottom: 20, color: '#a8ff00', fontFamily: 'Share Tech Mono' }}>✓</div>
        <h2 style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 32, textTransform: 'uppercase', marginBottom: 12 }}>
          {tab === 'login' ? 'Acesso Concedido' : 'Conta Criada'}
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 32, fontSize: 14 }}>
          {tab === 'login' ? 'Bem-vindo de volta, Sobrevivente.' : 'Sua jornada começa agora. Boa sorte lá fora.'}
        </p>
        <button onClick={() => onNavigate('profile')} style={{
          background: '#a8ff00', color: '#111', fontFamily: 'Rajdhani', fontWeight: 700,
          fontSize: 14, letterSpacing: '0.12em', padding: '14px 32px', border: 'none',
          cursor: 'pointer', textTransform: 'uppercase',
          clipPath: 'polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))',
        }}>VER PERFIL</button>
      </div>
    </div>
  );

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '5vw', position: 'relative', overflow: 'hidden',
    }}>
      {/* bg grid pattern */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.03,
        backgroundImage: 'repeating-linear-gradient(0deg, #a8ff00 0px, #a8ff00 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, #a8ff00 0px, #a8ff00 1px, transparent 1px, transparent 40px)',
        pointerEvents: 'none',
      }} />

      <div style={{ width: '100%', maxWidth: 420, position: 'relative', zIndex: 1 }}>
        {/* Logo */}
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <img src="uploads/genz-logo-trans.png" alt="Z" style={{ width: 56, height: 56, objectFit: 'contain', filter: 'drop-shadow(0 0 12px #a8ff00)' }} />
          <div style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 18, letterSpacing: '0.15em', marginTop: 8, textTransform: 'uppercase' }}>PROJECT GEN Z</div>
        </div>

        {/* Tab switcher */}
        <div style={{ display: 'flex', marginBottom: 32, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          {['login', 'register'].map(t => (
            <button key={t} onClick={() => { setTab(t); setErrors({}); setForm({ username:'',email:'',password:'',confirm:'' }); }} style={{
              flex: 1, background: 'none', border: 'none', padding: '14px 0',
              fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 14, letterSpacing: '0.12em',
              textTransform: 'uppercase', cursor: 'pointer',
              color: tab === t ? '#a8ff00' : 'rgba(255,255,255,0.35)',
              borderBottom: `2px solid ${tab === t ? '#a8ff00' : 'transparent'}`,
              marginBottom: -1, transition: 'color 0.2s',
            }}>
              {t === 'login' ? 'ENTRAR' : 'CADASTRAR'}
            </button>
          ))}
        </div>

        {/* Steam button */}
        <button style={{
          width: '100%', background: '#1b2838', border: '1px solid rgba(255,255,255,0.1)',
          color: '#fff', fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 14,
          padding: '13px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center',
          justifyContent: 'center', gap: 12, marginBottom: 24, letterSpacing: '0.05em',
          transition: 'border-color 0.2s, background 0.2s',
        }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(168,255,0,0.3)'; e.currentTarget.style.background = '#243447'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; e.currentTarget.style.background = '#1b2838'; }}
        >
          <svg width="20" height="20" viewBox="0 0 48 48" fill="none">
            <circle cx="24" cy="24" r="24" fill="#1b2838"/>
            <path d="M24 8C15.163 8 8 15.163 8 24c0 7.418 4.818 13.72 11.5 15.95L22 32.5c0-1.1.9-2 2-2s2 .9 2 2v.5l2.5 7.45C35.182 37.72 40 31.418 40 24c0-8.837-7.163-16-16-16zm0 4c6.627 0 12 5.373 12 12 0 3.5-1.5 6.659-3.9 8.9L30 26c.6-1.8 0-3.8-1.5-5-2-1.6-5-1.3-6.6.7L16 26.5C14 23.5 14 19.5 16 16.5 18 13.5 21 12 24 12z" fill="#c7d5e0"/>
          </svg>
          Continuar com Steam
        </button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.08)' }} />
          <span style={{ fontFamily: 'Share Tech Mono', fontSize: 10, color: 'rgba(255,255,255,0.3)' }}>ou use seu email</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.08)' }} />
        </div>

        <form onSubmit={submit}>
          {tab === 'register' && (
            <div style={{ marginBottom: 12 }}>
              <input
                style={inputStyle(errors.username)}
                placeholder="Nome de usuário"
                value={form.username}
                onChange={set('username')}
                onFocus={e => e.target.style.borderColor = '#a8ff00'}
                onBlur={e => e.target.style.borderColor = errors.username ? '#ff4444' : 'rgba(168,255,0,0.2)'}
              />
              {errors.username && <div style={{ color: '#ff4444', fontSize: 11, marginBottom: 4, fontFamily: 'Share Tech Mono' }}>{errors.username}</div>}
            </div>
          )}

          <div style={{ marginBottom: 12 }}>
            <input
              style={inputStyle(errors.email)}
              type="email" placeholder="Email"
              value={form.email} onChange={set('email')}
              onFocus={e => e.target.style.borderColor = '#a8ff00'}
              onBlur={e => e.target.style.borderColor = errors.email ? '#ff4444' : 'rgba(168,255,0,0.2)'}
            />
            {errors.email && <div style={{ color: '#ff4444', fontSize: 11, marginBottom: 4, fontFamily: 'Share Tech Mono' }}>{errors.email}</div>}
          </div>

          <div style={{ marginBottom: 12 }}>
            <input
              style={inputStyle(errors.password)}
              type="password" placeholder="Senha"
              value={form.password} onChange={set('password')}
              onFocus={e => e.target.style.borderColor = '#a8ff00'}
              onBlur={e => e.target.style.borderColor = errors.password ? '#ff4444' : 'rgba(168,255,0,0.2)'}
            />
            {errors.password && <div style={{ color: '#ff4444', fontSize: 11, marginBottom: 4, fontFamily: 'Share Tech Mono' }}>{errors.password}</div>}
          </div>

          {tab === 'register' && (
            <div style={{ marginBottom: 12 }}>
              <input
                style={inputStyle(errors.confirm)}
                type="password" placeholder="Confirmar senha"
                value={form.confirm} onChange={set('confirm')}
                onFocus={e => e.target.style.borderColor = '#a8ff00'}
                onBlur={e => e.target.style.borderColor = errors.confirm ? '#ff4444' : 'rgba(168,255,0,0.2)'}
              />
              {errors.confirm && <div style={{ color: '#ff4444', fontSize: 11, marginBottom: 4, fontFamily: 'Share Tech Mono' }}>{errors.confirm}</div>}
            </div>
          )}

          {tab === 'login' && (
            <div style={{ textAlign: 'right', marginBottom: 20 }}>
              <a href="#" style={{ fontFamily: 'Rajdhani', fontSize: 13, color: 'rgba(255,255,255,0.35)', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.color = '#a8ff00'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.35)'}
              >Esqueci minha senha</a>
            </div>
          )}

          <button type="submit" disabled={loading} style={{
            width: '100%', marginTop: 8,
            background: loading ? 'rgba(168,255,0,0.5)' : '#a8ff00',
            color: '#111', fontFamily: 'Rajdhani', fontWeight: 700,
            fontSize: 15, letterSpacing: '0.12em', padding: '15px', border: 'none',
            cursor: loading ? 'wait' : 'pointer', textTransform: 'uppercase',
            clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
            transition: 'background 0.2s',
          }}>
            {loading ? 'VERIFICANDO...' : (tab === 'login' ? 'ENTRAR' : 'CRIAR CONTA')}
          </button>
        </form>

        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.3)', fontFamily: 'Rajdhani' }}>
            {tab === 'login' ? 'Não tem conta? ' : 'Já tem conta? '}
          </span>
          <button onClick={() => setTab(tab === 'login' ? 'register' : 'login')} style={{
            background: 'none', border: 'none', color: '#a8ff00', fontFamily: 'Rajdhani',
            fontWeight: 700, fontSize: 13, cursor: 'pointer',
          }}>
            {tab === 'login' ? 'Cadastrar agora' : 'Fazer login'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthPage });