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

// Guarda resultado anónimo pendiente (si hay) al API después del login
async function savePendingResult() {
  const raw = localStorage.getItem('sd_pending_result');
  if (!raw) return;
  try {
    const pending = JSON.parse(raw);
    const tok = localStorage.getItem('sd_token');
    if (!tok) return;
    const BASE = window.API_BASE || '/simuladordocente/api';
    await fetch(`${BASE}/resultados/anonimo`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${tok}`, 'Content-Type': 'application/json' },
      body: JSON.stringify(pending),
    });
    localStorage.removeItem('sd_pending_result');
  } catch {}
}

window.AuthPages.Login = function Login({ navigate, store }) {
  const [email,   setEmail]   = React.useState('');
  const [pass,    setPass]    = React.useState('');
  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);
      // Guardar resultado anónimo pendiente si existe
      await savePendingResult();
      navigate('/dashboard');
    } catch (ex) {
      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" required placeholder="tu@correo.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <label className="label">Contraseña</label>
          <input className="input" type="password" required placeholder="Tu contraseña"
            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>
    </AuthShell>
  );
};

window.AuthPages.Registro = function Registro({ navigate }) {
  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 [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (data.pass.length < 8) { setErr('La contraseña debe tener al menos 8 caracteres.'); return; }
    setLoading(true);
    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'); setLoading(false); return; }
      setStep(2);
    } catch {
      setErr('No se pudo conectar al servidor. Intenta de nuevo.');
    }
    setLoading(false);
  };

  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>.
        </p>
        <p className="muted" style={{ fontSize: 13, lineHeight: 1.6 }}>
          Haz clic en el enlace del correo para activar tu cuenta. Revisa también la carpeta de spam.
        </p>
        <div style={{ marginTop: 20, padding: '14px 18px', background: 'var(--bg-2)', borderRadius: 10, fontSize: 13 }}>
          <div style={{ fontWeight: 600, marginBottom: 6 }}>¿No llegó el correo?</div>
          <ul style={{ margin: 0, padding: '0 0 0 16px', color: 'var(--ink-soft)', lineHeight: 1.8 }}>
            <li>Revisa la carpeta de <strong>spam / correo no deseado</strong></li>
            <li>El enlace expira en <strong>24 horas</strong></li>
            <li>Verifica que el correo sea correcto</li>
          </ul>
        </div>
        {localStorage.getItem('sd_pending_result') && (
          <div style={{ marginTop: 14, padding: '10px 14px', background: 'var(--teal-soft)', borderRadius: 8, fontSize: 12, color: 'var(--teal-2)' }}>
            ✓ Tu resultado del diagnóstico se guardará automáticamente al iniciar sesión <strong>en este mismo navegador</strong>.
          </div>
        )}
        <button className="btn btn-ghost btn-block" style={{ marginTop: 20 }} onClick={() => navigate('/login')}>
          Ya confirmé mi cuenta → Iniciar sesión
        </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 placeholder="Ej. María García López"
            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 placeholder="tu@correo.com"
            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={8}
            placeholder="Mínimo 8 caracteres"
            value={data.pass} onChange={(e) => setData({...data, pass: e.target.value})} />
          <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>
            Usa letras, números y al menos un símbolo (Ej. <code>Mi.Clave2024!</code>)
          </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" disabled={loading}>
          {loading ? 'Creando cuenta…' : '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} 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>$150</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>
  );
}