// CursoLogin.jsx — acceso al curso. window.CursoLogin
// Modo NUBE (si ECCCloud.isEnabled): email + contraseña, sincroniza con Supabase.
// Modo LOCAL (sin claves): nombre + PIN, guardado en este dispositivo.
const { useState: useStateL } = React;

function traducirError(msg) {
  const m = (msg || '').toLowerCase();
  if (m.includes('invalid login')) return 'Email o contraseña incorrectos.';
  if (m.includes('already registered') || m.includes('already been registered') || m.includes('user already')) return 'Ese email ya tiene cuenta. Pulsa “Entrar”.';
  if (m.includes('password') && (m.includes('6') || m.includes('short') || m.includes('least') || m.includes('weak'))) return 'La contraseña debe tener al menos 6 caracteres.';
  if (m.includes('signup') && m.includes('disabled')) return 'El registro está desactivado en Supabase (Authentication → Sign In/Providers → activa Email).';
  if (m.includes('signups not allowed') || m.includes('not allowed')) return 'El registro está desactivado en Supabase. Actívalo en Authentication → Providers → Email.';
  if (m.includes('email') && m.includes('confirm')) return 'Confirma tu email desde el correo que te hemos enviado y vuelve a entrar.';
  if (m.includes('rate') || m.includes('security purposes') || m.includes('after')) return 'Demasiados intentos seguidos. Espera unos segundos y reintenta.';
  if (m.includes('unable to validate') || (m.includes('email') && m.includes('invalid'))) return 'Ese email no se acepta. Escríbelo bien y usa un correo real (gmail, etc.).';
  // Si no lo reconocemos, mostramos el mensaje real (sin ocultarlo) para poder diagnosticar.
  return 'Aviso de Supabase: ' + (msg || 'error desconocido');
}

function dobAge(dobStr) {
  if (!dobStr) return null;
  const d = new Date(dobStr); if (isNaN(d)) return null;
  const t = new Date(); let a = t.getFullYear() - d.getFullYear();
  const m = t.getMonth() - d.getMonth();
  if (m < 0 || (m === 0 && t.getDate() < d.getDate())) a--;
  return a;
}

function CursoLogin({ onLogin }) {
  const S = window.CourseStore;
  const cloud = !!(window.ECCCloud && window.ECCCloud.isEnabled());

  const [name, setName] = useStateL('');
  const [pin, setPin] = useStateL('');
  const [email, setEmail] = useStateL('');
  const [fullName, setFullName] = useStateL('');
  const [dob, setDob] = useStateL('');
  const [guardianEmail, setGuardianEmail] = useStateL('');
  const [guardianConsent, setGuardianConsent] = useStateL(false);
  const [privacyAccepted, setPrivacyAccepted] = useStateL(false);
  const [pwd, setPwd] = useStateL('');
  const [mode, setMode] = useStateL('signin'); // signin | signup
  const [err, setErr] = useStateL('');
  const [info, setInfo] = useStateL('');
  const [busy, setBusy] = useStateL(false);

  const submitLocal = (e) => {
    e.preventDefault();
    const r = S.login(name, pin);
    if (!r.ok) { setErr(r.error); return; }
    onLogin();
  };

  const submitCloud = async (e) => {
    e.preventDefault();
    setErr(''); setInfo(''); setBusy(true);
    try {
      const C = window.ECCCloud;
      const mail = email.trim().toLowerCase();
      let meta;
      if (mode === 'signup') {
        if (!privacyAccepted) { setErr('Debes aceptar la política de privacidad.'); setBusy(false); return; }
        if (!dob) { setErr('Indica tu fecha de nacimiento.'); setBusy(false); return; }
        const age = dobAge(dob);
        const minor = age !== null && age < 14;
        if (minor) {
          if (!guardianEmail.trim()) { setErr('Indica el email de tu madre/padre/tutor.'); setBusy(false); return; }
          if (!guardianConsent) { setErr('Falta la autorización de tu madre/padre/tutor.'); setBusy(false); return; }
        }
        meta = {
          full_name: fullName.trim(),
          dob: dob,
          is_minor: minor,
          guardian_email: minor ? guardianEmail.trim().toLowerCase() : '',
          guardian_consent: minor ? true : false,
          privacy_accepted: true,
          consent_ts: new Date().toISOString(),
        };
      }
      const r = mode === 'signup' ? await C.signUp(mail, pwd, meta) : await C.signIn(mail, pwd);
      if (!r.ok) { setErr(traducirError(r.error)); setBusy(false); return; }
      if (r.needsConfirm) { setInfo('Te hemos enviado un correo para confirmar tu cuenta. Confírmalo y pulsa “Entrar”.'); setBusy(false); return; }
      let display = fullName.trim();
      if (!display) { try { const u = await C.currentUser(); display = (u && u.user_metadata && u.user_metadata.full_name) || ''; } catch (e) {} }
      S.loginExternal(mail, display);
      try { const data = await C.pull(); if (data) S.importUser(data); } catch (e) {}
      setBusy(false);
      onLogin();
    } catch (e) { setErr('Error de conexión. Revisa tu internet e inténtalo de nuevo.'); setBusy(false); }
  };

  const inputStyle = { width: '100%', padding: '11px 14px', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', font: 'var(--type-body)', color: 'var(--ink)', background: 'var(--bg-surface)', marginBottom: 14 };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{ width: 'min(420px, 100%)' }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <img src="assets/wordmark.svg" alt="estudia con carol" style={{ height: 40 }} />
        </div>
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: '28px 26px', boxShadow: 'var(--shadow-hover)' }}>
          <div style={{ font: 'var(--type-label)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Curso · Matemáticas 4º ESO</div>

          {cloud ? (
            <React.Fragment>
              <h1 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-tight)', margin: '6px 0 6px' }}>{mode === 'signup' ? 'Crear cuenta' : 'Entrar al curso'}</h1>
              <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: '0 0 20px' }}>Entra con tu email para que tu progreso te siga en el móvil, la tablet y el ordenador.</p>
              <form onSubmit={submitCloud}>
                {mode === 'signup' && (
                  <React.Fragment>
                    <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Nombre <span style={{ color: 'var(--ink-3)' }}>(opcional)</span></label>
                    <input value={fullName} onChange={e => setFullName(e.target.value)} placeholder="Como quieres que te llamemos" style={inputStyle} />
                    <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Fecha de nacimiento</label>
                    <input type="date" value={dob} onChange={e => { setDob(e.target.value); setErr(''); }} style={inputStyle} required />
                  </React.Fragment>
                )}
                <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Email</label>
                <input type="email" value={email} onChange={e => { setEmail(e.target.value); setErr(''); }} placeholder="tucorreo@ejemplo.com" style={inputStyle} required />
                <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Contraseña</label>
                <input type="password" value={pwd} onChange={e => { setPwd(e.target.value); setErr(''); }} placeholder="Mínimo 6 caracteres" style={inputStyle} required />
                {err && <div style={{ font: 'var(--type-body-sm)', color: 'var(--danger)', marginBottom: 12 }}>{err}</div>}
                {info && <div style={{ font: 'var(--type-body-sm)', color: 'var(--success)', marginBottom: 12 }}>{info}</div>}
                {mode === 'signup' && dobAge(dob) !== null && dobAge(dob) < 14 && (
                  <div style={{ background: 'var(--bg-muted)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '12px 14px', marginBottom: 14 }}>
                    <div style={{ font: 'var(--type-ui-sm)', color: 'var(--ink)', marginBottom: 8 }}>Eres menor de 14 años: necesitamos el permiso de tu madre, padre o tutor.</div>
                    <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Email del padre/madre/tutor</label>
                    <input type="email" value={guardianEmail} onChange={e => { setGuardianEmail(e.target.value); setErr(''); }} placeholder="correo del adulto responsable" style={Object.assign({}, inputStyle, { marginBottom: 10 })} />
                    <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', font: 'var(--type-body-sm)', color: 'var(--ink-2)' }}>
                      <input type="checkbox" checked={guardianConsent} onChange={e => { setGuardianConsent(e.target.checked); setErr(''); }} style={{ marginTop: 3 }} />
                      <span>Mi madre/padre/tutor conoce y autoriza mi registro y el tratamiento de mis datos para el curso.</span>
                    </label>
                  </div>
                )}
                {mode === 'signup' && (
                  <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', font: 'var(--type-body-sm)', color: 'var(--ink-2)', marginBottom: 14 }}>
                    <input type="checkbox" checked={privacyAccepted} onChange={e => { setPrivacyAccepted(e.target.checked); setErr(''); }} style={{ marginTop: 3 }} />
                    <span>He leído y acepto la <a href="legal/privacidad.html" target="_blank" rel="noopener">política de privacidad</a>.</span>
                  </label>
                )}
                <button type="submit" disabled={busy} style={{ width: '100%', background: 'var(--terracotta)', color: '#fff', border: 0, borderRadius: 'var(--r-md)', padding: '13px', font: 'var(--type-ui)', cursor: busy ? 'default' : 'pointer', opacity: busy ? 0.7 : 1 }}>
                  {busy ? 'Un momento…' : (mode === 'signup' ? 'Crear cuenta →' : 'Entrar →')}
                </button>
              </form>
              <div style={{ textAlign: 'center', marginTop: 14, font: 'var(--type-ui-sm)', color: 'var(--ink-2)' }}>
                {mode === 'signup'
                  ? <span>¿Ya tienes cuenta? <a href="#" onClick={e => { e.preventDefault(); setMode('signin'); setErr(''); setInfo(''); }}>Entrar</a></span>
                  : <span>¿Primera vez? <a href="#" onClick={e => { e.preventDefault(); setMode('signup'); setErr(''); setInfo(''); }}>Crear cuenta</a></span>}
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <h1 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-tight)', margin: '6px 0 6px' }}>Entrar al curso</h1>
              <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: '0 0 20px' }}>Escribe tu nombre para empezar o continuar. Si es la primera vez, se crea tu acceso.</p>
              <form onSubmit={submitLocal}>
                <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>Tu nombre</label>
                <input value={name} onChange={e => { setName(e.target.value); setErr(''); }} placeholder="p. ej. Carol" style={inputStyle} />
                <label style={{ display: 'block', font: 'var(--type-ui-sm)', color: 'var(--ink-2)', marginBottom: 6 }}>PIN (opcional)</label>
                <input value={pin} onChange={e => { setPin(e.target.value); setErr(''); }} placeholder="Un número que recuerdes" type="password" inputMode="numeric" style={inputStyle} />
                {err && <div style={{ font: 'var(--type-body-sm)', color: 'var(--danger)', marginBottom: 12 }}>{err}</div>}
                <button type="submit" style={{ width: '100%', background: 'var(--terracotta)', color: '#fff', border: 0, borderRadius: 'var(--r-md)', padding: '13px', font: 'var(--type-ui)', cursor: 'pointer' }}>Entrar →</button>
              </form>
            </React.Fragment>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <a href="index.html" style={{ font: 'var(--type-ui-sm)', color: 'var(--terracotta-deep)' }}>← Volver a la biblioteca abierta</a>
          <span style={{ font: 'var(--type-meta)', color: 'var(--ink-3)' }}>{cloud ? 'Tu progreso se sincroniza en todos tus dispositivos.' : 'Prototipo: tu progreso se guarda en este dispositivo.'}</span>
        </div>
      </div>
    </div>
  );
}

window.CursoLogin = CursoLogin;