const { Card, Button, Field, Input, Divider } = window.PilatesLifeStudioDesignSystem_f49721;

function LoginPage({ onNavigate, onLoggedIn }) {
  const [identificador, setIdentificador] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [cargando, setCargando] = React.useState(false);

  const [mostrarRecuperar, setMostrarRecuperar] = React.useState(false);
  const [pasoRecuperar, setPasoRecuperar] = React.useState('identificador');
  const [identificadorRecuperar, setIdentificadorRecuperar] = React.useState('');
  const [codigoRecuperar, setCodigoRecuperar] = React.useState('');
  const [passwordRecuperar, setPasswordRecuperar] = React.useState('');
  const [passwordRecuperarConfirmacion, setPasswordRecuperarConfirmacion] = React.useState('');
  const [mensajeRecuperar, setMensajeRecuperar] = React.useState('');
  const [errorRecuperar, setErrorRecuperar] = React.useState('');
  const [cargandoRecuperar, setCargandoRecuperar] = React.useState(false);

  const enviar = async (e) => {
    e.preventDefault();
    setError('');
    if (!identificador.trim() || !password) {
      setError('Ingresa tu teléfono o correo y tu contraseña.');
      return;
    }
    setCargando(true);
    try {
      const cliente = await iniciarSesion(normalizarIdentificador(identificador), password);
      onLoggedIn(cliente);
    } catch (err) {
      setError(err.message);
    } finally {
      setCargando(false);
    }
  };

  const solicitarCodigo = async (e) => {
    e.preventDefault();
    setMensajeRecuperar('');
    setErrorRecuperar('');
    if (!identificadorRecuperar.trim()) return;
    setCargandoRecuperar(true);
    try {
      const datos = await solicitarRecuperarPassword(normalizarIdentificador(identificadorRecuperar));
      setMensajeRecuperar(datos.message);
      setPasoRecuperar('codigo');
    } catch (err) {
      setErrorRecuperar(err.message);
    } finally {
      setCargandoRecuperar(false);
    }
  };

  const confirmarCodigo = async (e) => {
    e.preventDefault();
    setErrorRecuperar('');
    if (!/^\d{6}$/.test(codigoRecuperar.trim())) {
      setErrorRecuperar('El código tiene 6 dígitos.');
      return;
    }
    if (passwordRecuperar.length < 8) {
      setErrorRecuperar('La contraseña debe tener al menos 8 caracteres.');
      return;
    }
    if (passwordRecuperar !== passwordRecuperarConfirmacion) {
      setErrorRecuperar('Las contraseñas no coinciden.');
      return;
    }
    setCargandoRecuperar(true);
    try {
      const cliente = await restablecerPassword({
        identificador: normalizarIdentificador(identificadorRecuperar),
        codigo: codigoRecuperar.trim(),
        password: passwordRecuperar,
        passwordConfirmacion: passwordRecuperarConfirmacion,
      });
      onLoggedIn(cliente);
    } catch (err) {
      setErrorRecuperar(err.message);
    } finally {
      setCargandoRecuperar(false);
    }
  };

  const cerrarRecuperar = () => {
    setMostrarRecuperar(false);
    setPasoRecuperar('identificador');
    setIdentificadorRecuperar('');
    setCodigoRecuperar('');
    setPasswordRecuperar('');
    setPasswordRecuperarConfirmacion('');
    setMensajeRecuperar('');
    setErrorRecuperar('');
  };

  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 420 }}>
        <div className="eyebrow">Cuenta</div>
        <h1 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>Inicia sesión</h1>
        <Card padding="var(--space-6)">
          <form onSubmit={enviar} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Field label="Teléfono o correo" htmlFor="login-id">
              <Input id="login-id" placeholder="316 000 0000 o nombre@correo.com" value={identificador} onChange={(e) => setIdentificador(e.target.value)} />
            </Field>
            <Field label="Contraseña" htmlFor="login-pw">
              <Input id="login-pw" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </Field>
            {error && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{error}</p>}
            <Button size="lg" type="submit" disabled={cargando}>{cargando ? 'Entrando…' : 'Iniciar sesión'}</Button>
          </form>

          <Divider style={{ margin: 'var(--space-5) 0' }} />

          {!mostrarRecuperar ? (
            <button type="button" onClick={() => setMostrarRecuperar(true)}
              style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-link)', cursor: 'pointer', fontSize: 'var(--size-body-sm)' }}>
              ¿Olvidaste tu contraseña?
            </button>
          ) : pasoRecuperar === 'identificador' ? (
            <form onSubmit={solicitarCodigo} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <Field label="Teléfono o correo de tu cuenta" htmlFor="login-recuperar">
                <Input id="login-recuperar" placeholder="316 000 0000 o nombre@correo.com" value={identificadorRecuperar} onChange={(e) => setIdentificadorRecuperar(e.target.value)} />
              </Field>
              {errorRecuperar && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{errorRecuperar}</p>}
              <Button variant="ghost" type="submit" disabled={cargandoRecuperar}>
                {cargandoRecuperar ? 'Enviando…' : 'Enviar código por WhatsApp'}
              </Button>
              <p style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)' }}>
                Si te registraste solo con correo (sin teléfono), contáctanos directamente para restablecerla.
              </p>
            </form>
          ) : (
            <form onSubmit={confirmarCodigo} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {mensajeRecuperar && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>{mensajeRecuperar}</p>}
              <Field label="Código de 6 dígitos" htmlFor="login-codigo">
                <Input id="login-codigo" inputMode="numeric" placeholder="123456" value={codigoRecuperar} onChange={(e) => setCodigoRecuperar(e.target.value)} />
              </Field>
              <Field label="Contraseña nueva" htmlFor="login-recuperar-pw1">
                <Input id="login-recuperar-pw1" type="password" value={passwordRecuperar} onChange={(e) => setPasswordRecuperar(e.target.value)} />
              </Field>
              <Field label="Confirmar contraseña" htmlFor="login-recuperar-pw2">
                <Input id="login-recuperar-pw2" type="password" value={passwordRecuperarConfirmacion} onChange={(e) => setPasswordRecuperarConfirmacion(e.target.value)} />
              </Field>
              {errorRecuperar && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{errorRecuperar}</p>}
              <Button size="lg" type="submit" disabled={cargandoRecuperar}>{cargandoRecuperar ? 'Guardando…' : 'Cambiar contraseña'}</Button>
              <button type="button" onClick={cerrarRecuperar}
                style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-link)', cursor: 'pointer', fontSize: 'var(--size-body-sm)' }}>
                Cancelar
              </button>
            </form>
          )}
        </Card>
        <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-5)' }}>
          ¿No tienes cuenta? <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('registro'); }}>Regístrate aquí</a>.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { LoginPage });