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

function RegistroPage({ onNavigate, onRegistrado }) {
  const [nombre, setNombre] = React.useState('');
  const [telefonoLocal, setTelefonoLocal] = React.useState('');
  const [correo, setCorreo] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [passwordConfirmacion, setPasswordConfirmacion] = React.useState('');
  const [acepta, setAcepta] = React.useState(false);
  const [error, setError] = React.useState('');
  const [cargando, setCargando] = React.useState(false);

  const enviar = async (e) => {
    e.preventDefault();
    setError('');
    if (!nombre.trim()) return setError('Escribe tu nombre.');
    if (!telefonoLocalValido(telefonoLocal)) return setError('Ingresa un teléfono de 10 dígitos, sin el indicativo.');
    if (correo.trim() && !/^\S+@\S+\.\S+$/.test(correo.trim())) return setError('El correo no es válido.');
    if (password.length < 8) return setError('La contraseña debe tener al menos 8 caracteres.');
    if (password !== passwordConfirmacion) return setError('Las contraseñas no coinciden.');
    if (!acepta) return setError('Acepta los términos y condiciones para continuar.');

    setCargando(true);
    try {
      const recaptchaToken = await obtenerTokenRecaptcha('registro');
      const cliente = await registrarCliente({
        nombre: nombre.trim(),
        telefono: telefonoE164(telefonoLocal),
        correo: correo.trim(),
        password,
        passwordConfirmacion,
        recaptchaToken,
      });
      onRegistrado(cliente);
    } catch (err) {
      setError(err.message);
    } finally {
      setCargando(false);
    }
  };

  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 480 }}>
        <div className="eyebrow">Cuenta</div>
        <h1 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>Crea tu cuenta</h1>
        <Card padding="var(--space-6)">
          <form onSubmit={enviar} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Field label="Nombre" htmlFor="reg-nombre">
              <Input id="reg-nombre" placeholder="Ana Ruiz" value={nombre} onChange={(e) => setNombre(e.target.value)} />
            </Field>
            <Field label="Teléfono" htmlFor="reg-tel" hint={`Se guarda como ${PHONE_COUNTRY_CODE} ${telefonoLocal || '...'}`}>
              <Input id="reg-tel" placeholder="316 000 0000" value={telefonoLocal} onChange={(e) => setTelefonoLocal(e.target.value)} />
            </Field>
            <Field label="Correo (opcional)" htmlFor="reg-correo">
              <Input id="reg-correo" placeholder="nombre@correo.com" value={correo} onChange={(e) => setCorreo(e.target.value)} />
            </Field>
            <Field label="Contraseña" htmlFor="reg-pw1">
              <Input id="reg-pw1" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </Field>
            <Field label="Confirmar contraseña" htmlFor="reg-pw2">
              <Input id="reg-pw2" type="password" value={passwordConfirmacion} onChange={(e) => setPasswordConfirmacion(e.target.value)} />
            </Field>
            <Checkbox checked={acepta} onChange={(e) => setAcepta(e.target.checked)} label="Acepto los términos y condiciones" />
            <p style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)', marginTop: -10 }}>
              Puedes leerlos <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('terminos'); }}>aquí</a>.
            </p>
            {error && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{error}</p>}
            <Button size="lg" type="submit" disabled={cargando}>{cargando ? 'Creando cuenta…' : 'Crear cuenta'}</Button>
          </form>
        </Card>
        <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-5)' }}>
          ¿Ya tienes cuenta? <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('login'); }}>Inicia sesión</a>.
        </p>
        <p style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)', marginTop: 'var(--space-3)' }}>
          Este sitio está protegido por reCAPTCHA. Aplican la{' '}
          <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Política de privacidad</a>
          {' '}y los <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Términos de servicio</a> de Google.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { RegistroPage });