// push-notifications.jsx — UI para pedir permiso + subscribe a push notifications
// Se monta una vez en home cuando hay vendedora logueada.

(function () {
  // Helpers
  function urlBase64ToUint8Array(b64) {
    const padding = '='.repeat((4 - b64.length % 4) % 4);
    const base64 = (b64 + padding).replace(/-/g, '+').replace(/_/g, '/');
    const raw = atob(base64);
    const arr = new Uint8Array(raw.length);
    for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
    return arr;
  }

  async function subscribeToPush(vendedora) {
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
      return { ok: false, reason: 'no-support' };
    }
    // Obtener VAPID public key
    const r = await fetch('/api/push/vapid-public-key');
    const { key } = await r.json();
    if (!key) return { ok: false, reason: 'no-vapid' };

    const reg = await navigator.serviceWorker.ready;
    let sub = await reg.pushManager.getSubscription();
    if (!sub) {
      sub = await reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(key),
      });
    }
    // Enviar al backend
    const sj = sub.toJSON();
    const res = await fetch('/api/push/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        vendedora_id: vendedora.id,
        endpoint: sj.endpoint,
        p256dh: sj.keys.p256dh,
        auth: sj.keys.auth,
        user_agent: navigator.userAgent.slice(0, 200),
      }),
    });
    if (!res.ok) return { ok: false, reason: 'backend-err' };
    return { ok: true };
  }

  function PushPermissionPrompt({ vendedora }) {
    const T = window.T;
    const { Icon } = window;
    const [permission, setPermission] = React.useState(
      typeof Notification !== 'undefined' ? Notification.permission : 'denied'
    );
    const [dismissed, setDismissed] = React.useState(() => {
      try { return localStorage.getItem('inova-push-dismissed') === '1'; } catch { return false; }
    });
    const [submitting, setSubmitting] = React.useState(false);

    // Auto-subscribe si ya hay permiso granted (en cada visit)
    React.useEffect(() => {
      if (permission === 'granted' && vendedora?.id) {
        subscribeToPush(vendedora).catch(() => {});
      }
    }, [permission, vendedora?.id]);

    if (typeof Notification === 'undefined') return null;
    if (permission === 'granted') return null; // ya está, no mostrar
    if (permission === 'denied') return null;  // bloqueado, no insistir
    if (dismissed) return null;

    async function handleEnable() {
      setSubmitting(true);
      try {
        const result = await Notification.requestPermission();
        setPermission(result);
        if (result === 'granted' && vendedora?.id) {
          await subscribeToPush(vendedora);
        }
      } catch (e) { console.error(e); }
      setSubmitting(false);
    }

    function dismiss() {
      try { localStorage.setItem('inova-push-dismissed', '1'); } catch {}
      setDismissed(true);
    }

    return (
      <div style={{ padding: '0 24px', marginBottom: 14 }}>
        <div style={{
          padding: '14px 16px', borderRadius: 16,
          background: 'oklch(0.96 0.04 80)',
          border: '1.5px solid oklch(0.82 0.08 80)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ fontSize: 26, flexShrink: 0 }}>🔔</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: T.serif, fontSize: 15, color: T.ink, lineHeight: 1.25,
              marginBottom: 4,
            }}>
              Activa los recordatorios
            </div>
            <div style={{ fontFamily: T.sans, fontSize: 12, color: T.inkSoft, lineHeight: 1.35 }}>
              Te avisamos cuando se acerca el día de pagar una cuota. Sin spam, sin promociones.
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flexShrink: 0 }}>
            <button onClick={handleEnable} disabled={submitting} style={{
              padding: '8px 14px', borderRadius: 999,
              background: T.accent || '#E89B6E', color: '#fff',
              border: 'none', cursor: submitting ? 'wait' : 'pointer',
              fontFamily: T.sans, fontSize: 12, fontWeight: 600,
              whiteSpace: 'nowrap',
            }}>
              {submitting ? '...' : 'Activar'}
            </button>
            <button onClick={dismiss} style={{
              padding: '4px 8px', borderRadius: 999,
              background: 'transparent', color: T.inkSoft,
              border: 'none', cursor: 'pointer',
              fontFamily: T.sans, fontSize: 10,
            }}>Después</button>
          </div>
        </div>
      </div>
    );
  }

  window.PushPermissionPrompt = PushPermissionPrompt;
  window.subscribeToPush = subscribeToPush;
})();