// Login — Pantalla de inicio de sesión (UI) para usuarios que ya tienen cuenta.
// A juego con SignUp.jsx. Métodos: Google · iCloud (Apple) · Correo + contraseña.
// Al iniciar sesión, entra directo a la app (sin volver a la pantalla de libros).

const { useState: liS } = React;

// Glifos de proveedores (idénticos a SignUp para consistencia visual)
const GoogleGlyphL = () => (
  <svg width="20" height="20" viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.6 2.4 30.2 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.3 17.7 9.5 24 9.5z"/>
    <path fill="#4285F4" d="M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.1 5.3-4.6 6.9l7.1 5.5C43.4 37.5 46.1 31.6 46.1 24.5z"/>
    <path fill="#FBBC05" d="M10.5 28.3c-.5-1.4-.8-2.9-.8-4.3s.3-3 .8-4.3l-7.9-6.1C1 16.7 0 20.2 0 24s1 7.3 2.6 10.4l7.9-6.1z"/>
    <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.1-5.5c-2 1.3-4.6 2.1-8.8 2.1-6.3 0-11.6-3.8-13.5-9.3l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/>
  </svg>
);
const AppleGlyphL = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M16.4 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9s-1.8-.8-3-.8c-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.7 2.2 1.1 0 1.5-.7 2.8-.7s1.7.7 2.8.7c1.2 0 1.9-1.1 2.6-2.1.8-1.2 1.2-2.3 1.2-2.4-.1 0-2.3-.9-2.3-3.5zM14.3 5.2c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.6-.9 2.6 1 0 2-.5 2.6-1.2z"/>
  </svg>
);
const MailGlyphL = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg>
);

const LOGIN_POINTS = [
  { t: 'Retoma donde lo dejaste', d: 'Tus casos, planes y diagnósticos siguen justo como los guardaste.' },
  { t: 'Tu suscripción, siempre lista', d: 'Tu plan de CynamonSup te reconoce al entrar — sin volver a configurar nada.' },
  { t: 'En todos tus dispositivos', d: 'Inicia sesión desde la web, Android o iOS con la misma cuenta.' },
];

const Login = ({ setView, onLogin }) => {
  const [method, setMethod] = liS('email');   // 'google' | 'apple' | 'email'
  const [form, setForm] = liS({ email: '', pass: '' });
  const [error, setError] = liS('');
  const [loading, setLoading] = liS(false);
  const [mode, setMode] = liS('login');       // 'login' | 'recover'
  const [sent, setSent] = liS(false);

  const recover = () => {
    if (!/\S+@\S+\.\S+/.test(form.email)) { setError('Escribe tu correo para enviarte el enlace.'); return; }
    setError(''); setSent(true);
  };

  const emailOk = /\S+@\S+\.\S+/.test(form.email);
  const ready = method === 'google' || method === 'apple' ||
    (method === 'email' && emailOk && form.pass.length >= 6);

  const handleLogin = () => {
    if (!ready) {
      setError('Escribe tu correo y contraseña para entrar.');
      return;
    }
    setError('');
    setLoading(true);
    // UI: simula la validación de la cuenta. Aquí, más adelante, irá Supabase Auth.
    setTimeout(() => {
      setLoading(false);
      onLogin?.({
        method,
        email: method === 'email' ? form.email : (method === 'google' ? 'cuenta de Google' : 'cuenta de iCloud'),
      });
    }, 650);
  };

  return (
    <main className="auth-page fade-in" data-screen-label="Cuenta — Iniciar sesión">
      <div className="container auth-layout">
        {/* Panel de bienvenida */}
        <aside className="auth-aside">
          <div className="auth-aside-eyebrow">CynamonSup · Bienvenida de vuelta</div>
          <h1 className="auth-aside-title">Inicia sesión en <em>Cynamonurs</em>.</h1>
          <p className="auth-aside-lead">
            Entra a tu perfil profesional para continuar con tus planes de cuidado y tu suscripción de CynamonSup.
          </p>
          <ul className="auth-benefits">
            {LOGIN_POINTS.map((b, i) => (
              <li key={i}>
                <span className="auth-benefit-check">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                </span>
                <div>
                  <div className="auth-benefit-t">{b.t}</div>
                  <div className="auth-benefit-d">{b.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </aside>

        {/* Tarjeta de inicio de sesión */}
        <div className="auth-card">
          <button className="auth-back" onClick={() => { setView('landing'); window.scrollTo({ top: 0 }); }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
            Volver
          </button>

          {mode === 'recover' ? (
            <div className="fade-in">
              <h2 className="auth-title">Recuperar contraseña</h2>
              <p className="auth-sub">Te enviaremos un enlace a tu correo para crear una nueva contraseña.</p>
              {sent ? (
                <div className="auth-terms-note" style={{ marginTop: 18 }}>
                  <strong>Revisa tu correo.</strong> Si <em>{form.email}</em> tiene una cuenta, te llegará un enlace
                  para restablecer tu contraseña en unos minutos. Recuerda revisar tu carpeta de spam.
                </div>
              ) : (
                <div className="auth-form">
                  <div className="auth-field">
                    <label>Correo electrónico</label>
                    <input type="email" placeholder="tucorreo@ejemplo.com" value={form.email}
                      onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                      onKeyDown={e => { if (e.key === 'Enter') recover(); }}/>
                  </div>
                </div>
              )}
              {error && <div className="auth-error">{error}</div>}
              {!sent && (
                <button className="btn-primary auth-submit" onClick={recover}>
                  Enviar enlace de recuperación
                </button>
              )}
              <div className="auth-foot">
                <button className="auth-terms-link" onClick={() => { setMode('login'); setSent(false); setError(''); }}>← Volver a iniciar sesión</button>
              </div>
            </div>
          ) : (
          <>
          <h2 className="auth-title">Iniciar sesión</h2>
          <p className="auth-sub">Bienvenida de nuevo. Entra con tu cuenta para continuar.</p>

          {/* Métodos sociales */}
          <div className="auth-methods">
            <button className={'auth-method ' + (method === 'google' ? 'on' : '')} onClick={() => { setMethod('google'); setError(''); }}>
              <GoogleGlyphL/>
              <span>Continuar con Google</span>
              {method === 'google' && <span className="auth-method-tick">✓</span>}
            </button>
            <button className={'auth-method ' + (method === 'apple' ? 'on' : '')} onClick={() => { setMethod('apple'); setError(''); }}>
              <AppleGlyphL/>
              <span>Continuar con iCloud (Apple)</span>
              {method === 'apple' && <span className="auth-method-tick">✓</span>}
            </button>
          </div>

          {/* Separador */}
          <div className="auth-or"><span>o con tu correo</span></div>

          {/* Formulario de correo + contraseña */}
          <div className="auth-form">
            <div className="auth-field">
              <label>Correo electrónico</label>
              <input
                type="email"
                placeholder="tucorreo@ejemplo.com"
                value={form.email}
                onChange={e => { setForm(f => ({ ...f, email: e.target.value })); setMethod('email'); }}
                onFocus={() => setMethod('email')}
              />
            </div>
            <div className="auth-field">
              <div className="auth-field-row">
                <label>Contraseña</label>
                <button className="auth-terms-link sm" onClick={() => { setMode('recover'); setError(''); }}>¿Olvidaste tu contraseña?</button>
              </div>
              <input
                type="password"
                placeholder="Tu contraseña"
                value={form.pass}
                onChange={e => { setForm(f => ({ ...f, pass: e.target.value })); setMethod('email'); }}
                onFocus={() => setMethod('email')}
                onKeyDown={e => { if (e.key === 'Enter') handleLogin(); }}
              />
            </div>
          </div>

          {error && <div className="auth-error">{error}</div>}

          <button
            className="btn-primary auth-submit"
            onClick={handleLogin}
            disabled={!ready || loading}
            style={{ opacity: (ready && !loading) ? 1 : 0.55, cursor: (ready && !loading) ? 'pointer' : 'not-allowed' }}
          >
            {loading ? 'Entrando…' : 'Iniciar sesión'}
            {!loading && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>}
          </button>

          <div className="auth-foot">¿Aún no tienes cuenta? <button className="auth-terms-link" onClick={() => { setView('signup'); window.scrollTo({ top: 0 }); }}>Crear cuenta</button></div>
          </>
          )}
        </div>
      </div>
    </main>
  );
};

Object.assign(window, { Login });