// WMS Analytics - renderização e autoatualização (pt-BR, dd-mm-yyyy HH:mm, inteiros)
(function(){
  const el = {
    kpiRec: document.getElementById('kpiRec'),
    kpiShip: document.getElementById('kpiShip'),
    lastGen: document.getElementById('lastGen'),
    statusMsg: document.getElementById('statusMsg'),
    periodInfo: document.getElementById('periodInfo'),
    fallbackBadge: document.getElementById('fallbackBadge'),
    rec7: document.getElementById('rec7'),
    ship7: document.getElementById('ship7'),
    events: document.getElementById('events'),
    alerts: document.getElementById('alerts'),
    refresh: document.getElementById('refresh'),
    btnLast7: document.getElementById('btnLast7'),
    btnClear: document.getElementById('btnClear'),
    fDe: document.getElementById('fDe'),
    fAte: document.getElementById('fAte'),
    fCat: document.getElementById('fCat'),
    fTipo: document.getElementById('fTipo'),
  };

  function fmtDateTime(dt){ try { const d = new Date(dt); const pad = (n)=> String(n).padStart(2,'0'); return `${pad(d.getDate())}-${pad(d.getMonth()+1)}-${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`; } catch(_){ return String(dt); } }
  function fmtDateYMDToBR(s){ try { const d = new Date(s); const pad=(n)=> String(n).padStart(2,'0'); return `${pad(d.getDate())}-${pad(d.getMonth()+1)}-${d.getFullYear()}`; } catch(_){ return String(s||''); } }

  function formatYMD(d){ const pad=(n)=> String(n).padStart(2,'0'); return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`; }
  function setLast7(){ const today = new Date(); const start = new Date(Date.now() - 6*24*60*60*1000); if(el.fDe) el.fDe.value = formatYMD(start); if(el.fAte) el.fAte.value = formatYMD(today); }

  function qs(){
    const p = new URLSearchParams();
    const de = el.fDe?.value?.trim(); if (de) p.set('de', de);
    const ate = el.fAte?.value?.trim(); if (ate) p.set('ate', ate);
    const cat = el.fCat?.value?.trim(); if (cat) p.set('categoria', cat);
    const tipo = el.fTipo?.value; if (tipo) p.set('tipo', tipo);
    const q = p.toString();
    return q ? `?${q}` : '';
  }

  function updatePeriodInfo(){
    const de = el.fDe?.value?.trim();
    const ate = el.fAte?.value?.trim();
    if (el.periodInfo){
      if (de || ate){
        el.periodInfo.textContent = `Período: ${de||'início'} até ${ate||'hoje'}`;
      } else {
        el.periodInfo.textContent = 'Período: hoje';
      }
    }
  }

  let autoFallbackUsed = false;
  async function loadOverview(){
    let data = null; let res = null;
    try{
      res = await fetch('/api/wms/bi/overview' + qs(), { credentials: 'include' });
    }catch(e){ if(el.statusMsg) el.statusMsg.textContent = `Erro de rede ao carregar dados: ${e.message}`; return; }
    if(!res.ok){ if(el.statusMsg) el.statusMsg.textContent = `Erro ao carregar (${res.status}). Verifique sessão/login.`; return; }
    try{ data = await res.json(); }catch(_){ if(el.statusMsg) el.statusMsg.textContent = 'Resposta inválida do servidor.'; return; }
    updatePeriodInfo();
    el.kpiRec.textContent = parseInt(data?.totais_hoje?.recebimento||0,10);
    el.kpiShip.textContent = parseInt(data?.totais_hoje?.expedicao||0,10);
    el.lastGen.textContent = `Gerado em ${fmtDateTime(data?.gerado_em||'')}`;

    // Progresso: Recebimento vs meta; Expedição vs Recebimento
    const rec = parseInt(data?.totais_hoje?.recebimento||0,10);
    const ship = parseInt(data?.totais_hoje?.expedicao||0,10);
    const metaRec = parseInt(data?.metas?.recebimento_meta||100,10);
    const pctRec = Math.max(0, Math.min(100, Math.round((rec / Math.max(1, metaRec)) * 100)));
    const pctShip = Math.max(0, Math.min(100, rec > 0 ? Math.round((ship / rec) * 100) : 0));
    const progRec = document.getElementById('progRec');
    const progShip = document.getElementById('progShip');
    if (progRec) progRec.style.width = pctRec + '%';
    if (progShip) progShip.style.width = pctShip + '%';

    const recRows = (data?.serie_7dias?.recebimento||[]).map(r=> `<tr><td>${fmtDateYMDToBR(r.dia)}</td><td>${parseInt(r.quantidade||0,10)}</td></tr>`).join('');
    const shipRows = (data?.serie_7dias?.expedicao||[]).map(r=> `<tr><td>${fmtDateYMDToBR(r.dia)}</td><td>${parseInt(r.quantidade||0,10)}</td></tr>`).join('');
    el.rec7.innerHTML = recRows || '<tr><td colspan="2" class="muted">Sem dados</td></tr>';
    el.ship7.innerHTML = shipRows || '<tr><td colspan="2" class="muted">Sem dados</td></tr>';

    // Gráficos simples de barras (inline) para 7 dias
    function renderBars(containerId, series){
      const cont = document.getElementById(containerId);
      if (!cont) return;
      const vals = series.map(s=> parseInt(s.quantidade||0,10));
      const max = Math.max(...vals, 1);
      cont.innerHTML = series.map((s, i)=> {
        const h = Math.round((vals[i]/max) * 100);
        const label = fmtDateYMDToBR(s.dia);
        return `<div style="width:12%; min-width:36px; text-align:center;">
                  <div style="background:#6c757d; height:${h}%; border-radius:4px;"></div>
                  <div class="muted" style="font-size:11px; margin-top:2px;">${label}</div>
                </div>`;
      }).join('');
    }
    renderBars('rec7Chart', data?.serie_7dias?.recebimento||[]);
    renderBars('ship7Chart', data?.serie_7dias?.expedicao||[]);

    // Gestor Coletor — barras por tipo (percentual 24h)
    const barsCont = document.getElementById('collectorBars');
    const infoCont = document.getElementById('collectorInfo');
    const totalEv = parseInt(data?.coletor_resumo?.total||0,10);
    const tipos = data?.coletor_resumo?.por_tipo||[];
    if (barsCont) {
      barsCont.innerHTML = tipos.map(t => {
        const pct = parseInt(t.percentual||0,10);
        const name = String(t.tipo||'');
        return `<div style="flex:1 1 220px;">
                  <div class="muted">${name} (${pct}% / ${t.count})</div>
                  <div class="progress" style="height:12px; background:#eee; border-radius:6px; overflow:hidden;">
                    <div style="height:12px; width:${pct}%; background:#20c997;"></div>
                  </div>
                </div>`;
      }).join('');
    }
    if (infoCont) infoCont.textContent = totalEv > 0 ? `Total de eventos nas últimas 24h: ${totalEv}` : 'Sem eventos nas últimas 24h';

    const evRows = (data?.ultimos_eventos||[]).map(ev=> `<tr><td>${ev.quando}</td><td>${ev.tipo}</td><td class="mono">${escapeHtml(JSON.stringify(ev.payload))}</td></tr>`).join('');
    el.events.innerHTML = evRows || '<tr><td colspan="3" class="muted">Sem eventos</td></tr>';

    // Fallback automático quando não houver eventos/dados no período
    const emptyTotals = (parseInt(data?.totais_hoje?.recebimento||0,10)===0) && (parseInt(data?.totais_hoje?.expedicao||0,10)===0);
    const emptySeries = (!data?.serie_7dias?.recebimento?.length) && (!data?.serie_7dias?.expedicao?.length);
    const emptyEvents = (!data?.ultimos_eventos || data.ultimos_eventos.length===0);
    if(emptyTotals && emptySeries && emptyEvents){
      if(!autoFallbackUsed){
        autoFallbackUsed = true; setLast7(); if(el.statusMsg) el.statusMsg.textContent = 'Sem dados no período selecionado. Mostrando últimos 7 dias.';
        if (el.fallbackBadge) el.fallbackBadge.style.display = 'inline-block';
        await refresh(); return;
      } else {
        if(el.statusMsg) el.statusMsg.textContent = 'Sem dados nos últimos 7 dias.';
        if (el.fallbackBadge) el.fallbackBadge.style.display = 'inline-block';
      }
    } else {
      if(el.statusMsg) el.statusMsg.textContent = '';
      if (el.fallbackBadge) el.fallbackBadge.style.display = 'none';
    }
  }

  async function loadAlerts(){
    const res = await fetch('/api/wms/bi/alerts', { credentials: 'include' }); if(!res.ok) return;
    const data = await res.json();
    const items = (data?.alertas||[]).map(a=> `<li><strong>[${a.nivel}]</strong> ${a.mensagem} — <span class="mono">${JSON.stringify(a)}</span></li>`).join('');
    el.alerts.innerHTML = items || '<li class="muted">Nenhum alerta</li>';
  }

  function escapeHtml(s){ return String(s).replace(/[&<>]/g, c=> ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }

  async function refresh(){ await loadOverview(); await loadAlerts(); }

  el.refresh?.addEventListener('click', refresh);
  el.btnLast7?.addEventListener('click', ()=> { setLast7(); refresh(); });
  el.btnClear?.addEventListener('click', ()=> { if(el.fDe) el.fDe.value=''; if(el.fAte) el.fAte.value=''; if(el.fCat) el.fCat.value=''; if(el.fTipo) el.fTipo.value=''; updatePeriodInfo(); refresh(); });
  ['change','keyup'].forEach(evt => {
    el.fDe?.addEventListener(evt, refresh);
    el.fAte?.addEventListener(evt, refresh);
    el.fCat?.addEventListener(evt, refresh);
    el.fTipo?.addEventListener(evt, refresh);
  });
  refresh();
  setInterval(refresh, 30000);
})();