// AUTH — login, registro, recuperar, confirmar email
window.AuthPages = {};

window.AuthPages.Login = function Login({ navigate, store }) {
  const [email,   setEmail]   = React.useState('maria.lopez@ejemplo.mx');
  const [pass,    setPass]    = React.useState('demo1234');
  const [err,     setErr]     = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (!email.includes('@') || pass.length < 4) { setErr('Verifica tu correo y contraseña.'); return; }
    setLoading(true);
    try {
      await store.login(email, pass);
      navigate('/dashboard');
    } catch (ex) {
      if (ex.message && ex.message.toLowerCase().includes('fetch')) {
        store.loginDemo(email); navigate('/dashboard');  // API no disponible → demo
      } else {
        setErr(ex.message || 'Credenciales incorrectas');
      }
    } finally { setLoading(false); }
  };
  return (
    <AuthShell navigate={navigate}>
      <h2 style={{ fontSize: 28 }}>Inicia sesión</h2>
      <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>Accede a tu panel y simuladores.</p>
      <form onSubmit={submit} style={{ marginTop: 24 }}>
        <div className="field">
          <label className="label">Correo electrónico</label>
          <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <label className="label">Contraseña</label>
          <input className="input" type="password" value={pass} onChange={(e) => setPass(e.target.value)} />
        </div>
        {err && <div style={{ color: 'var(--red)', fontSize: 13, marginBottom: 10 }}>{err}</div>}
        <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={loading}>{loading ? 'Entrando…' : 'Entrar'}</button>
      </form>
      <div className="row" style={{ justifyContent: 'space-between', marginTop: 18, fontSize: 13 }}>
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('/recuperar');}} className="muted">¿Olvidaste tu contraseña?</a>
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('/registro');}}>Crear cuenta</a>
      </div>
      <div className="auth-demo-note">
        <strong>Demo:</strong> usa cualquier correo y contraseña ≥ 4 caracteres.
      </div>
    </AuthShell>
  );
};

window.AuthPages.Registro = function Registro({ navigate, store }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({ nombre: '', email: '', pass: '' });
  const [err,  setErr]  = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    try {
      const r = await fetch(`${BASE}/auth/registro`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nombre: data.nombre, email: data.email, password: data.pass }),
      });
      const d = await r.json();
      if (!r.ok) { setErr(d.error || 'Error al registrarse'); return; }
    } catch {}   // Si API falla, igual avanzamos (demo mode)
    setStep(2);
  };
  if (step === 2) {
    return (
      <AuthShell navigate={navigate}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>📬</div>
        <h2 style={{ fontSize: 26 }}>Revisa tu correo</h2>
        <p className="muted" style={{ marginTop: 10, fontSize: 14, lineHeight: 1.6 }}>
          Enviamos un enlace de confirmación a <strong style={{color:'var(--ink)'}}>{data.email}</strong>.
          Confirma tu correo para poder realizar pagos y desbloquear simuladores completos.
        </p>
        <button className="btn btn-teal btn-block btn-lg" style={{ marginTop: 22 }} onClick={() => setStep(3)}>
          Simular confirmación de email →
        </button>
        <button className="btn btn-link" style={{ marginTop: 10 }} onClick={() => setStep(1)}>← Volver</button>
      </AuthShell>
    );
  }
  if (step === 3) {
    return (
      <AuthShell navigate={navigate}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>✅</div>
        <h2 style={{ fontSize: 26 }}>¡Cuenta confirmada!</h2>
        <p className="muted" style={{ marginTop: 10, fontSize: 14 }}>Ya puedes acceder a tu panel y probar las muestras gratuitas.</p>
        <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 22 }} onClick={() => { store.login(data.email); navigate('/dashboard'); }}>
          Ir a mi panel
        </button>
      </AuthShell>
    );
  }
  return (
    <AuthShell navigate={navigate}>
      <h2 style={{ fontSize: 28 }}>Crea tu cuenta</h2>
      <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>Empieza con muestras gratis. Pago solo cuando estés listo.</p>
      <form onSubmit={submit} style={{ marginTop: 24 }}>
        <div className="field">
          <label className="label">Nombre completo</label>
          <input className="input" required value={data.nombre} onChange={(e) => setData({...data, nombre: e.target.value})} />
        </div>
        <div className="field">
          <label className="label">Correo electrónico</label>
          <input className="input" type="email" required value={data.email} onChange={(e) => setData({...data, email: e.target.value})} />
        </div>
        <div className="field">
          <label className="label">Contraseña</label>
          <input className="input" type="password" required minLength={4} value={data.pass} onChange={(e) => setData({...data, pass: e.target.value})} />
          <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>Mínimo 8 caracteres recomendado.</div>
        </div>
        {err && <div style={{ color: 'var(--red)', fontSize: 13, marginBottom: 10 }}>{err}</div>}
        <button className="btn btn-primary btn-block btn-lg" type="submit">Crear cuenta</button>
      </form>
      <div style={{ marginTop: 18, fontSize: 13, textAlign: 'center' }} className="muted">
        ¿Ya tienes cuenta? <a href="#" onClick={(e)=>{e.preventDefault();navigate('/login');}} style={{color:'var(--ink)', fontWeight: 600}}>Inicia sesión</a>
      </div>
    </AuthShell>
  );
};

window.AuthPages.Recuperar = function Recuperar({ navigate }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const [sent,    setSent]    = React.useState(false);
  const [email,   setEmail]   = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await fetch(`${BASE}/auth/recuperar`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
    } catch {}
    setLoading(false);
    setSent(true);
  };

  if (sent) {
    return (
      <AuthShell navigate={navigate}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>📨</div>
        <h2 style={{ fontSize: 26 }}>Enlace enviado</h2>
        <p className="muted" style={{ marginTop: 10, fontSize: 14, lineHeight: 1.6 }}>
          Si <strong style={{color:'var(--ink)'}}>{email}</strong> existe en nuestro sistema,
          recibirás un correo con el enlace para restablecer tu contraseña.
        </p>
        <p className="muted" style={{ fontSize: 13 }}>Revisa también tu carpeta de spam.</p>
        <button className="btn btn-ghost btn-block" style={{ marginTop: 22 }} onClick={() => navigate('/login')}>← Volver al login</button>
      </AuthShell>
    );
  }
  return (
    <AuthShell navigate={navigate}>
      <h2 style={{ fontSize: 28 }}>Recupera tu contraseña</h2>
      <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>Te enviaremos un enlace para crear una nueva contraseña.</p>
      <form onSubmit={submit} style={{ marginTop: 24 }}>
        <div className="field">
          <label className="label">Correo electrónico</label>
          <input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={loading}>
          {loading ? 'Enviando…' : 'Enviar enlace'}
        </button>
      </form>
      <div style={{ marginTop: 18, fontSize: 13, textAlign: 'center' }} className="muted">
        <a href="#" onClick={(e)=>{e.preventDefault();navigate('/login');}} style={{color:'var(--ink)', fontWeight: 600}}>← Volver</a>
      </div>
    </AuthShell>
  );
};

// Página: restablecer contraseña (llegó desde el link del email)
window.AuthPages.Reset = function Reset({ navigate, token }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const [pass,    setPass]    = React.useState('');
  const [pass2,   setPass2]   = React.useState('');
  const [msg,     setMsg]     = React.useState('');
  const [ok,      setOk]      = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (pass !== pass2) { setMsg('Las contraseñas no coinciden.'); return; }
    if (pass.length < 4) { setMsg('Mínimo 4 caracteres.'); return; }
    setLoading(true); setMsg('');
    try {
      const r = await fetch(`${BASE}/auth/reset`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, password: pass }),
      });
      const d = await r.json();
      if (!r.ok) { setMsg(d.error || 'Error al restablecer.'); }
      else        { setOk(true); }
    } catch { setMsg('Error de conexión.'); }
    setLoading(false);
  };

  if (ok) {
    return (
      <AuthShell navigate={navigate}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>✅</div>
        <h2 style={{ fontSize: 26 }}>Contraseña actualizada</h2>
        <p className="muted" style={{ marginTop: 10, fontSize: 14 }}>Ya puedes iniciar sesión con tu nueva contraseña.</p>
        <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 22 }} onClick={() => navigate('/login')}>
          Ir al login
        </button>
      </AuthShell>
    );
  }

  return (
    <AuthShell navigate={navigate}>
      <h2 style={{ fontSize: 28 }}>Nueva contraseña</h2>
      <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>Elige una contraseña segura para tu cuenta.</p>
      <form onSubmit={submit} style={{ marginTop: 24 }}>
        <div className="field">
          <label className="label">Nueva contraseña</label>
          <input className="input" type="password" required minLength={4} value={pass} onChange={e => setPass(e.target.value)} />
        </div>
        <div className="field">
          <label className="label">Confirmar contraseña</label>
          <input className="input" type="password" required minLength={4} value={pass2} onChange={e => setPass2(e.target.value)} />
        </div>
        {msg && <div style={{ color:'var(--red)', fontSize:13, marginBottom:10 }}>{msg}</div>}
        <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={loading}>
          {loading ? 'Guardando…' : 'Guardar nueva contraseña'}
        </button>
      </form>
    </AuthShell>
  );
};

// Página: cuenta confirmada (redirige aquí el backend)
window.AuthPages.Confirmado = function Confirmado({ navigate, error }) {
  if (error) {
    return (
      <AuthShell navigate={navigate}>
        <div style={{ fontSize: 56, marginBottom: 8 }}>❌</div>
        <h2 style={{ fontSize: 26 }}>Enlace inválido</h2>
        <p className="muted" style={{ marginTop: 10, fontSize: 14 }}>
          El enlace de confirmación es inválido o ya expiró. Intenta registrarte de nuevo.
        </p>
        <button className="btn btn-primary btn-block" style={{ marginTop: 22 }} onClick={() => navigate('/registro')}>
          Registrarme
        </button>
      </AuthShell>
    );
  }
  return (
    <AuthShell navigate={navigate}>
      <div style={{ fontSize: 56, marginBottom: 8 }}>✅</div>
      <h2 style={{ fontSize: 26 }}>¡Cuenta confirmada!</h2>
      <p className="muted" style={{ marginTop: 10, fontSize: 14 }}>
        Tu correo ha sido verificado. Ya puedes acceder a tu panel.
      </p>
      <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 22 }} onClick={() => navigate('/login')}>
        Iniciar sesión
      </button>
    </AuthShell>
  );
};

function AuthShell({ children, navigate }) {
  return (
    <div className="auth-page">
      <div className="auth-side">
        <div className="auth-side-inner">
          <a href="#/" onClick={(e)=>{e.preventDefault();navigate('/');}}>
            <window.Logo size={32} color="#fff" accent="var(--teal-soft)" dark={true} />
          </a>
          <div style={{ marginTop: 'auto' }}>
            <h2 style={{ color: '#fff', fontSize: 32, lineHeight: 1.2 }}>
              Practica como en el examen real.
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.75)', marginTop: 16, fontSize: 15, lineHeight: 1.6, maxWidth: 380 }}>
              Simuladores construidos con la estructura, dificultad y bloques temáticos del examen USICAMM.
              Pago único por materia, acceso permanente.
            </p>
            <div className="auth-side-stats">
              <div><strong>13</strong> simuladores</div>
              <div><strong>$149</strong> por materia</div>
              <div><strong>∞</strong> intentos</div>
            </div>
          </div>
        </div>
      </div>
      <div className="auth-form-wrap">
        <div className="auth-form-box">{children}</div>
      </div>
    </div>
  );
}