// Limites.jsx — Plan gratuito vs. Enfermería Premium.
//
// DÓNDE ESTÁ LA VERDAD
//   El plan y el consumo NO se guardan aquí: se leen de Supabase (mi_plan y
//   mi_uso, en sql/suscripciones.sql). Antes el plan vivía en localStorage y
//   bastaba una línea en la consola del navegador para volverse premium gratis.
//   Este archivo solo DIBUJA lo que el servidor responde.
//
//   Eso implica que el conteo exige sesión iniciada: sin cuenta no hay a quién
//   contarle el uso, y el límite se saltaría abriendo una ventana de incógnito.

const { useState: useLiS, useEffect: useLiE, useCallback: useLiC, useRef: useLiR } = React;

// Límites del plan GRATUITO. Premium no tiene ninguno.
const LIMITES = {
  planes: 3,          // diagnósticos de enfermería que se pueden armar
  pdfs: 3,            // descargas totales…
  pdfPorPlan: 1,      // …y cada plan solo una vez
  bot: 3,             // consultas a Cynamoncita IA
  revisionesLibro: 3, // consultas de detalle en CADA libro (dx · obj · int)
  // Las calculadoras son ILIMITADAS también en el plan gratuito.
};

const PRECIO = { importe: 89, moneda: 'MXN', periodo: 'mes' };

// ── Estado compartido ────────────────────────────────────────
const LimitesStore = {
  state: { cargando: true, premium: false, venceEn: null, uso: null, sesion: false },
  listeners: new Set(),
  set(patch) {
    this.state = { ...this.state, ...patch };
    this.listeners.forEach(fn => fn(this.state));
  },
  async refrescar() {
    const sb = window.cynaAuth && window.cynaAuth.client;
    const hayUsuario = !!window.__cynaUser;
    if (!sb || !hayUsuario) {
      this.set({ cargando: false, premium: false, uso: null, sesion: false });
      return;
    }
    try {
      const [plan, uso] = await Promise.all([sb.rpc('mi_plan'), sb.rpc('mi_uso')]);
      const p = plan && plan.data && plan.data[0];
      const u = uso && uso.data && uso.data[0];
      const estado = (p && p.estado) || 'free';
      this.set({
        cargando: false,
        sesion: true,
        estado,                                   // 'free' | 'prueba' | 'premium'
        // Durante la prueba gratuita NO se aplica ningún límite: es justo el
        // sentido de la prueba, que se conozca la herramienta completa.
        premium: estado === 'premium' || estado === 'prueba',
        enPrueba: estado === 'prueba',
        diasRestantes: p ? p.dias_restantes : null,
        venceEn: p ? p.vence_en : null,
        uso: u || null,
      });
    } catch (e) {
      // Ante la duda NO regalamos premium, pero tampoco bloqueamos la app:
      // se trata como plan gratuito con el consumo desconocido.
      console.error('[Cynamonurs] No se pudo leer el plan:', e);
      this.set({ cargando: false, sesion: true, premium: false, uso: null });
    }
  },
};

function useLimites() {
  const [s, setS] = useLiS(LimitesStore.state);
  useLiE(() => {
    const fn = (st) => setS({ ...st });
    LimitesStore.listeners.add(fn);
    if (LimitesStore.state.cargando) LimitesStore.refrescar();
    return () => LimitesStore.listeners.delete(fn);
  }, []);
  return s;
}

// Se recalcula al iniciar/cerrar sesión y cuando se registra una acción.
if (typeof window !== 'undefined') {
  window.addEventListener('cyna-session', () => LimitesStore.refrescar());
  window.addEventListener('cyna-uso', () => LimitesStore.refrescar());

  // El pago con Stripe ahora se abre en OTRA pestaña (src/stripe.js), así que
  // esta pestaña se queda con la sesión abierta mientras la persona paga. Al
  // volver aquí —cambiar de pestaña, o de app en el móvil y regresar— se
  // vuelve a consultar el plan solo, sin que nadie tenga que recargar a
  // ciegas para saber si ya se activó.
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') LimitesStore.refrescar();
  });
  window.addEventListener('focus', () => LimitesStore.refrescar());
}

// ── Consulta de disponibilidad ───────────────────────────────
// Devuelve { ok, restantes, motivo }. `ok:false` → hay que ofrecer la suscripción.
function revisarLimite(clave) {
  const s = LimitesStore.state;
  if (s.premium) return { ok: true, restantes: Infinity };
  if (!s.sesion) return { ok: false, restantes: 0, motivo: 'sesion' };
  if (!s.uso) return { ok: true, restantes: null };   // aún sin datos: no bloqueamos

  const u = s.uso;
  const mapa = {
    planes:   [Number(u.planes_creados || 0),   LIMITES.planes],
    pdfs:     [Number(u.pdfs_descargados || 0), LIMITES.pdfs],
    bot:      [Number(u.consultas_bot || 0),    LIMITES.bot],
    rev_dx:   [Number(u.revisiones_dx || 0),    LIMITES.revisionesLibro],
    rev_obj:  [Number(u.revisiones_obj || 0),   LIMITES.revisionesLibro],
    rev_int:  [Number(u.revisiones_int || 0),   LIMITES.revisionesLibro],
  };
  const par = mapa[clave];
  if (!par) return { ok: true, restantes: null };
  const [usado, tope] = par;
  return { ok: usado < tope, restantes: Math.max(0, tope - usado), motivo: 'limite' };
}

// ¿Ya se descargó el PDF de este plan concreto?
async function yaDescargado(firma) {
  if (LimitesStore.state.premium) return false;
  const sb = window.cynaAuth && window.cynaAuth.client;
  if (!sb || !window.__cynaUser) return false;
  try {
    const { data } = await sb.rpc('ya_descargado', { p_plan: firma });
    return data === true;
  } catch (e) { return false; }
}

// ── Aviso de límite (la «leyenda de información») ─────────────
function LimiteAviso({ clave, etiqueta, compacto }) {
  const s = useLimites();
  if (s.cargando) return null;

  // Prueba gratuita: sin límites, pero conviene decir que termina — y cuándo.
  // Presentarlo como «Premium» a secas haría creer que ya se pagó, y el corte
  // llegaría por sorpresa.
  if (s.enPrueba) {
    const d = s.diasRestantes;
    return (
      <div className={'lim-aviso prueba' + (compacto ? ' mini' : '')}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
          <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
        </svg>
        <span>
          <strong>Prueba gratuita</strong> · acceso completo sin límites
          {d != null && <> · te {d === 1 ? 'queda' : 'quedan'} <strong>{d} día{d === 1 ? '' : 's'}</strong></>}
        </span>
        <button className="lim-cta" onClick={() => window.__cynaAbrirPremium && window.__cynaAbrirPremium()}>
          Ver suscripción
        </button>
      </div>
    );
  }

  if (s.premium) {
    return (
      <div className={'lim-aviso premium' + (compacto ? ' mini' : '')}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>
        </svg>
        <span><strong>Premium</strong> · {etiqueta || 'uso ilimitado'}</span>
      </div>
    );
  }

  const r = revisarLimite(clave);

  if (!s.sesion) {
    return (
      <div className={'lim-aviso' + (compacto ? ' mini' : '')}>
        <span>Inicia sesión para usar esta función. El plan gratuito incluye {LIMITES[clave === 'bot' ? 'bot' : 'planes']} usos.</span>
        <button className="lim-cta" onClick={() => window.__cynaGoLogin && window.__cynaGoLogin()}>Iniciar sesión</button>
      </div>
    );
  }

  const agotado = !r.ok;
  return (
    <div className={'lim-aviso' + (agotado ? ' agotado' : '') + (compacto ? ' mini' : '')}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
        <circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/>
      </svg>
      <span>
        {agotado
          ? <>Has usado tus {etiqueta || 'usos'} gratuitos.</>
          : <>Te {r.restantes === 1 ? 'queda' : 'quedan'} <strong>{r.restantes}</strong> de {etiqueta || 'uso gratuito'}.</>}
        {' '}Con <strong>Enfermería Premium</strong> es ilimitado.
      </span>
      <button className="lim-cta" onClick={() => window.__cynaAbrirPremium && window.__cynaAbrirPremium()}>
        Ver suscripción
      </button>
    </div>
  );
}

// ── Ventana de suscripción ───────────────────────────────────
function PremiumModal({ onClose }) {
  const s = useLimites();
  const ir = () => {
    if (window.cynaPay && window.cynaPay.checkout) window.cynaPay.checkout('premium');
  };

  return (
    <div className="cta-modal-scrim" onClick={onClose}>
      <div className="cta-modal" onClick={e => e.stopPropagation()}>
        <div className="cta-modal-head">
          <h3>Enfermería Premium</h3>
          <button className="cta-modal-close" onClick={onClose} aria-label="Cerrar">×</button>
        </div>
        <div className="cta-modal-body">
          <div className="lim-precio">
            <strong>${PRECIO.importe}</strong> <span>{PRECIO.moneda} / {PRECIO.periodo}</span>
          </div>

          <ul className="lim-lista">
            <li><b>Diagnósticos ilimitados</b> — sin tope de {LIMITES.planes}</li>
            <li><b>Descargas en PDF ilimitadas</b> — y las veces que quieras por plan</li>
            <li><b>Cynamoncita IA sin límite</b> — no solo {LIMITES.bot} consultas</li>
            <li><b>Los tres libros completos</b> — sin tope de {LIMITES.revisionesLibro} consultas por libro</li>
            <li><b>Sin publicidad</b></li>
            <li>Calculadoras y escalas — <i>ya son ilimitadas en el plan gratuito</i></li>
          </ul>

          <p className="lim-legal">
            Se renueva automáticamente cada mes hasta que decidas cancelarla. Puedes
            cancelar cuando quieras para evitar cobros futuros; la cancelación evita la
            siguiente renovación pero no implica el reembolso del periodo ya pagado.
            Consulta los <button className="lim-link" onClick={() => { onClose(); window.__cynaGoLegal && window.__cynaGoLegal(); }}>Términos y condiciones</button> antes de contratar.
          </p>

          {s.enPrueba && (
            <div className="lim-ya prueba">
              Estás en tu <strong>prueba gratuita</strong>
              {s.diasRestantes != null && <> · quedan {s.diasRestantes} día{s.diasRestantes === 1 ? '' : 's'}</>}.
              Si te suscribes ahora no pierdes nada: el acceso continúa sin cortes.
            </div>
          )}
          {s.estado === 'premium' && (
            <div className="lim-ya">Ya tienes la suscripción activa. ¡Gracias!</div>
          )}
        </div>
        <div className="cta-modal-foot">
          <button className="btn-secondary" onClick={onClose}>Ahora no</button>
          {/* Se compara con el ESTADO, no con `premium`: durante la prueba
              `premium` es true (no hay límites), pero ahí es justo cuando más
              sentido tiene ofrecer la suscripción. */}
          {s.estado !== 'premium' && <button className="btn-primary" onClick={ir}>Suscribirme</button>}
        </div>
      </div>
    </div>
  );
}

// Detecta el momento EXACTO en que la suscripción pasa de no-premium a
// premium (p. ej. al volver de pagar en la otra pestaña) para mostrar una
// confirmación clara. Solo se dispara ante una transición real observada en
// esta sesión — no al cargar la página ya siendo premium — para no mostrar el
// aviso de "recién activada" a alguien que lo es desde hace tiempo.
function useSuscripcionActivada() {
  const s = useLimites();
  const anterior = useLiR(null);
  const [activada, setActivada] = useLiS(false);
  useLiE(() => {
    if (s.cargando) return;
    if (anterior.current === false && s.premium === true) setActivada(true);
    anterior.current = s.premium;
  }, [s.cargando, s.premium]);
  return [activada, () => setActivada(false)];
}

function PremiumHost() {
  const [abierto, setAbierto] = useLiS(false);
  const [activada, cerrarActivada] = useSuscripcionActivada();
  useLiE(() => {
    window.__cynaAbrirPremium = () => setAbierto(true);
    return () => { delete window.__cynaAbrirPremium; };
  }, []);
  return (
    <React.Fragment>
      {activada && (
        <div className="cyna-update-banner cyna-update-banner-ok" role="status">
          <span className="cyna-update-text">
            ¡Tu suscripción Enfermería Premium ya está activa! Si alguna pantalla no lo
            refleja todavía, fuerza la recarga de la página.
          </span>
          <button type="button" className="cyna-update-btn" onClick={() => window.location.reload()}>Recargar ahora</button>
          <button type="button" className="cyna-update-x" onClick={cerrarActivada} aria-label="Cerrar">&times;</button>
        </div>
      )}
      {abierto && <PremiumModal onClose={() => setAbierto(false)}/>}
    </React.Fragment>
  );
}

Object.assign(window, {
  LIMITES, PRECIO, LimitesStore, useLimites, revisarLimite, yaDescargado,
  LimiteAviso, PremiumHost,
});