// js/components/common/OfflineIndicator.jsx
// ════════════════════════════════════════════════════════════════════════════
// RG7 PWA Offline Queue — Chip header + Modal queue (v218.16 ONDA-N3)
// ════════════════════════════════════════════════════════════════════════════
// Renderiza chip no header:
//   - online + queue=0: invisível (return null)
//   - online + queue>0: chip amarelo "📤 Sincronizando N..."
//   - offline + queue=0: chip cinza "🔌 Offline"
//   - offline + queue>0: chip vermelho "🔌 Offline · N pendente"
//
// Click no chip → abre OfflineQueueModal (lista + retry manual).
//
// Regras aplicadas:
//   - regra_state_id_vs_objeto (state guarda count, lookup fresh ao abrir modal)
//   - regra_falha_silenciosa_proibida (visual SEMPRE quando queue>0)
// ════════════════════════════════════════════════════════════════════════════

(function(){
  'use strict';
  const { useState, useEffect, useCallback } = React;

  function OfflineIndicator(){
    const [online, setOnline] = useState(typeof navigator==='undefined' ? true : navigator.onLine !== false);
    const [count, setCount] = useState(0);
    const [failedCount, setFailedCount] = useState(0);
    const [modalOpen, setModalOpen] = useState(false);

    // Atualiza contagem a cada 5s
    const refresh = useCallback(async () => {
      if(!window.znxOfflineQueue || !window.znxOfflineQueue.isAvailable()) return;
      try{
        const [pending, failed] = await Promise.all([
          window.znxOfflineQueue.count('pending'),
          window.znxOfflineQueue.count('failed')
        ]);
        setCount(pending);
        setFailedCount(failed);
      }catch(_){/**/}
    }, []);

    useEffect(() => {
      refresh();
      const interval = setInterval(refresh, 5000);
      const onOnline = () => { setOnline(true); refresh(); };
      const onOffline = () => { setOnline(false); refresh(); };
      window.addEventListener('online', onOnline);
      window.addEventListener('offline', onOffline);
      return () => {
        clearInterval(interval);
        window.removeEventListener('online', onOnline);
        window.removeEventListener('offline', onOffline);
      };
    }, [refresh]);

    // Esconde se tudo OK
    if(online && count === 0 && failedCount === 0) return null;

    // Decide cor/texto
    let bg, fg, icon, text;
    if(failedCount > 0){
      bg = '#7F1D1D'; fg = '#FECACA'; icon = '🚨';
      text = failedCount + ' falharam · ' + (count>0 ? count+' pendente' : 'ver detalhes');
    } else if(!online){
      bg = '#7C2D12'; fg = '#FED7AA'; icon = '🔌';
      text = count > 0 ? 'Offline · ' + count + ' pendente' : 'Offline';
    } else {
      // online + count>0
      bg = '#78350F'; fg = '#FEF3C7'; icon = '📤';
      text = 'Sincronizando ' + count + '...';
    }

    return React.createElement('div', {
      onClick: () => setModalOpen(true),
      title: 'Clique pra ver fila offline',
      style: {
        display:'inline-flex', alignItems:'center', gap:6,
        padding:'4px 10px', borderRadius:999,
        background:bg, color:fg, fontSize:12, fontWeight:600,
        cursor:'pointer', userSelect:'none',
        border:'1px solid '+fg+'33'
      }
    },
      React.createElement('span', null, icon),
      React.createElement('span', null, text),
      modalOpen && window.OfflineQueueModal
        ? React.createElement(window.OfflineQueueModal, {
            isOpen: modalOpen,
            onClose: () => { setModalOpen(false); refresh(); }
          })
        : null
    );
  }

  window.OfflineIndicator = OfflineIndicator;
})();