<?php
/**
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 * (parte do Premium Express BI - Fire Sistemas)
 *
 * Compras / Rastreador de Ruptura — Reposição Urgente.
 * O que você precisa comprar AGORA pra não perder venda.
 *
 * Reusa SugestaoCompraRepository::dadosRuptura() — zero SQL nova nesta tela,
 * só recorte/visualização/KPIs.
 */
?>
<div class="pbi-page-header">
  <h1 class="pbi-page-title">
    <i class="bi bi-exclamation-triangle-fill me-2" style="color:#dc2626"></i>
    Rastreador de Ruptura
    <span class="text-muted fw-normal" style="font-size:.95rem">— Reposição Urgente</span>
  </h1>
  <div class="text-muted small">O que você precisa comprar AGORA pra não perder venda</div>
</div>

<!-- ── Caixa de explicação ────────────────────────────────────────────────── -->
<div class="pbi-card mb-3" style="background:#fff7ed;border-left:4px solid #dc2626">
  <div style="padding:.75rem 1.25rem">
    <div class="mb-2"><strong>⚠️ O que mostra esta tela:</strong> os SKUs <strong>zerados que ainda vendem</strong> (ruptura efetiva, você está perdendo venda agora) + itens <strong>abaixo do mínimo com saída recente</strong> (vão zerar logo). Foco no que dá dinheiro perdido.</div>
    <div class="d-flex flex-wrap gap-3" style="font-size:.85rem">
      <div><span class="badge" style="background:#dc2626;color:#fff;font-size:.72rem">CRÍTICO</span> Zerado e vendendo</div>
      <div><span class="badge" style="background:#f97316;color:#fff;font-size:.72rem">ALTO</span> Vai acabar antes do lead time</div>
      <div><span class="badge" style="background:#eab308;color:#fff;font-size:.72rem">MÉDIO</span> Abaixo do mínimo vendendo</div>
      <div><span class="badge" style="background:#64748b;color:#fff;font-size:.72rem">BAIXO</span> Folga, monitorar</div>
    </div>
  </div>
</div>

<!-- ── Filtros ──────────────────────────────────────────────────────────────── -->
<div class="pbi-card">
  <div class="pbi-card-body">
    <form id="frm" class="row g-2 align-items-end" onsubmit="return false">
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">De (venda)</label>
        <input type="date" id="f_ini" class="form-control form-control-sm">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">Até</label>
        <input type="date" id="f_fim" class="form-control form-control-sm">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1" title="Quantos dias de venda o estoque deve cobrir">Cobertura-alvo (dias)</label>
        <input type="number" id="f_cob" class="form-control form-control-sm" value="30" min="1" max="365">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1" title="Lead time usado quando não há histórico do fornecedor">Lead padrão (dias)</label>
        <input type="number" id="f_lead" class="form-control form-control-sm" value="7" min="0" max="180">
      </div>
      <div class="col-12 col-md-auto">
        <button class="btn btn-sm btn-danger" id="btn-aplicar"><i class="bi bi-search me-1"></i>Atualizar</button>
        <button class="btn btn-sm btn-outline-secondary" id="btn-csv"><i class="bi bi-download me-1"></i>CSV</button>
        <button class="btn btn-sm btn-outline-secondary d-print-none" onclick="window.print()"><i class="bi bi-printer me-1"></i>Imprimir</button>
      </div>
    </form>
  </div>
</div>

<!-- ── KPIs (6 cartões do topo) ────────────────────────────────────────────── -->
<div class="row g-2 mb-2 mt-1" id="kpis">
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-x-octagon-fill me-1" style="color:#dc2626"></i>Itens em ruptura</div>
      <div class="h4 mb-0 fw-bold" id="k_rupt" style="color:#dc2626">—</div>
      <div class="small text-muted">SKUs zerados que vendem</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-cash-stack me-1" style="color:#dc2626"></i>Venda perdida/dia</div>
      <div class="h4 mb-0 fw-bold" id="k_perda" style="color:#dc2626">—</div>
      <div class="small text-muted">R$/dia em risco</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-speedometer me-1"></i>Cobertura média</div>
      <div class="h4 mb-0 fw-bold" id="k_cob">—</div>
      <div class="small text-muted">Top 50 SKUs por venda</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-star-fill me-1" style="color:#d97706"></i>Classe A em risco</div>
      <div class="h4 mb-0 fw-bold" id="k_a" style="color:#d97706">—</div>
      <div class="small text-muted">Cobertura &lt; lead time</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-clock-history me-1"></i>Lead time médio</div>
      <div class="h4 mb-0 fw-bold" id="k_lt">—</div>
      <div class="small text-muted">Dias entre compras</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-percent me-1"></i>% ruptura ativos</div>
      <div class="h4 mb-0 fw-bold" id="k_pct">—</div>
      <div class="small text-muted">Sobre SKUs com venda</div>
    </div></div>
  </div>
</div>

<!-- ── Gráficos ─────────────────────────────────────────────────────────────── -->
<div class="row g-2 mb-2">
  <div class="col-12 col-lg-6">
    <div class="pbi-card h-100">
      <div class="pbi-card-header"><i class="bi bi-bar-chart-line-fill me-2" style="color:#dc2626"></i>Top 20 itens — venda perdida (R$/dia)</div>
      <div class="pbi-card-body">
        <div id="ch_top" style="height:520px"></div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="pbi-card h-100">
      <div class="pbi-card-header"><i class="bi bi-tag-fill me-2" style="color:#3b82f6"></i>Ruptura por marca</div>
      <div class="pbi-card-body">
        <div id="ch_marca" style="height:520px"></div>
      </div>
    </div>
  </div>
</div>

<!-- ── Tabela principal ─────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card">
  <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span><i class="bi bi-list-ul me-2"></i>Itens críticos — ordem de urgência</span>
    <div style="position:relative;flex:1;min-width:180px;max-width:340px">
      <i class="bi bi-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.85rem"></i>
      <input type="text" id="f_busca" class="form-control form-control-sm" placeholder="Buscar por código, descrição ou marca…" style="padding-left:30px" autocomplete="off">
    </div>
    <small class="text-muted" id="badge"></small>
  </div>
  <div id="body">
    <p class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Calculando ruptura…</p>
  </div>
</div>

<script src="/assets/js/echarts.min.js"></script>
<script>
(function () {
'use strict';

var DATA = null;
var CH_TOP = null, CH_MARCA = null;

function $(id){ return document.getElementById(id); }
function fmtR(v){ return 'R$ ' + parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
function fmtN(v,d){ d=d===undefined?2:d; return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:d,maximumFractionDigits:d}); }
function esc(s){ var d=document.createElement('div'); d.textContent=(s==null?'':s); return d.innerHTML; }
function api(u){ return fetch(u,{credentials:'same-origin'}).then(function(r){
  if(!r.ok) return r.json().then(function(e){ throw new Error(e.erro||'HTTP '+r.status); });
  return r.json();
}); }

function qs(){
  var p = new URLSearchParams();
  p.set('data_ini', $('f_ini').value);
  p.set('data_fim', $('f_fim').value);
  p.set('cobertura', $('f_cob').value || 30);
  p.set('lead_padrao', $('f_lead').value || 7);
  return p.toString();
}

function setKpis(k){
  k = k || {};
  $('k_rupt').textContent = (k.qtd_ruptura||0).toLocaleString('pt-BR');
  $('k_perda').textContent = fmtR(k.venda_perdida_dia);
  var cob = parseFloat(k.cobertura_media||0);
  var elC = $('k_cob');
  elC.textContent = fmtN(cob,1) + ' d';
  elC.style.color = cob<7 ? '#dc2626' : (cob<15 ? '#d97706' : '#16a34a');
  $('k_a').textContent = (k.skus_a_risco||0).toLocaleString('pt-BR');
  $('k_lt').textContent = fmtN(k.lead_time_medio||0,1) + ' d';
  $('k_pct').textContent = fmtN(k.pct_ruptura||0,1) + '%';
}

// Cor por valor relativo (vermelho → azul, igual padrão dos Tops do projeto)
function gradColor(i, n){
  // Top = vermelho (#dc2626), cai pra azul (#3b82f6)
  var t = n <= 1 ? 0 : i/(n-1);
  var c1 = [220,38,38], c2 = [59,130,246];
  var r = Math.round(c1[0]+(c2[0]-c1[0])*t);
  var g = Math.round(c1[1]+(c2[1]-c1[1])*t);
  var b = Math.round(c1[2]+(c2[2]-c1[2])*t);
  return 'rgb('+r+','+g+','+b+')';
}

function renderTopChart(rows){
  if (!CH_TOP) CH_TOP = echarts.init($('ch_top'));
  rows = (rows||[]).slice().reverse();   // ECharts plota de baixo p/ cima
  if (!rows.length){
    CH_TOP.clear();
    CH_TOP.setOption({title:{text:'Sem rupturas no período 🎉', left:'center', top:'middle', textStyle:{color:'#16a34a',fontSize:14}}});
    return;
  }
  var names = rows.map(function(r){ return r.DESCRICAO || ('#'+r.COD_ITEM); });
  var vals  = rows.map(function(r){ return Math.round((r.VENDA_PERDIDA_DIA||0)*100)/100; });
  var n = rows.length;
  var colors = rows.map(function(_,i){ return gradColor(n-1-i, n); }); // reverter cores p/ casar com rows.reverse()
  CH_TOP.setOption({
    tooltip: {trigger:'axis', axisPointer:{type:'shadow'}, formatter: function(p){
      return '<strong>'+esc(p[0].name)+'</strong><br/>'+fmtR(p[0].value)+' / dia em risco';
    }},
    grid: {left:8, right:90, top:10, bottom:20, containLabel:true},
    xAxis: {type:'value', axisLabel:{formatter: function(v){ return 'R$ '+(v>=1000? (v/1000).toFixed(1)+'k' : v); }}},
    yAxis: {type:'category', data:names, axisLabel:{fontSize:11, width:240, overflow:'truncate'}},
    series: [{
      type:'bar', data: vals.map(function(v,i){ return {value:v, itemStyle:{color:colors[i], borderRadius:[0,4,4,0]}}; }),
      label:{show:true, position:'right', formatter: function(p){ return fmtR(p.value); }, fontSize:11}
    }]
  }, true);
}

function renderMarcaChart(rows){
  if (!CH_MARCA) CH_MARCA = echarts.init($('ch_marca'));
  rows = (rows||[]).slice().reverse();
  if (!rows.length){
    CH_MARCA.clear();
    CH_MARCA.setOption({title:{text:'Sem dados por marca', left:'center', top:'middle', textStyle:{color:'#94a3b8',fontSize:14}}});
    return;
  }
  var names = rows.map(function(r){ return r.MARCA || '(sem marca)'; });
  var vals  = rows.map(function(r){ return Math.round((r.VENDA_PERDIDA_DIA||0)*100)/100; });
  var itens = rows.map(function(r){ return r.ITENS||0; });
  var n = rows.length;
  var colors = rows.map(function(_,i){ return gradColor(n-1-i, n); });
  CH_MARCA.setOption({
    tooltip: {trigger:'axis', axisPointer:{type:'shadow'}, formatter: function(p){
      var idx = p[0].dataIndex;
      return '<strong>'+esc(p[0].name)+'</strong><br/>'
           + 'Perda: '+fmtR(p[0].value)+' / dia<br/>'
           + 'Itens críticos: '+itens[idx];
    }},
    grid: {left:8, right:90, top:10, bottom:20, containLabel:true},
    xAxis: {type:'value', axisLabel:{formatter: function(v){ return 'R$ '+(v>=1000? (v/1000).toFixed(1)+'k' : v); }}},
    yAxis: {type:'category', data:names, axisLabel:{fontSize:11, width:200, overflow:'truncate'}},
    series: [{
      type:'bar', data: vals.map(function(v,i){ return {value:v, itemStyle:{color:colors[i], borderRadius:[0,4,4,0]}}; }),
      label:{show:true, position:'right', formatter: function(p){ return fmtR(p.value); }, fontSize:11}
    }]
  }, true);
}

// Classificação de urgência (linhas da tabela)
function urgenciaInfo(c){
  if (c.EFETIVO_RUPTURA) return {lbl:'CRÍTICO', bg:'#dc2626', row:'#fee2e2'};
  var cb = c.COBERTURA_DIAS;
  var lt = c.LEAD_TIME || 7;
  if (cb !== null && cb < lt) return {lbl:'ALTO', bg:'#f97316', row:'#ffedd5'};
  if (c.MOTIVO_MINIMO && (c.VENDA_DIA||0) > 0) return {lbl:'MÉDIO', bg:'#eab308', row:'#fef9c3'};
  if (cb !== null && cb < 30) return {lbl:'BAIXO', bg:'#64748b', row:'#f1f5f9'};
  return {lbl:'BAIXO', bg:'#64748b', row:'#ffffff'};
}

function corEstoque(c){
  if ((c.ESTOQUE_ATUAL||0) <= 0) return '#fee2e2';
  var cb = c.COBERTURA_DIAS;
  if (cb === null) return '#ffffff';
  if (cb < 7)  return '#fef3c7';
  if (cb < 30) return '#ecfdf5';
  return '#f8fafc';
}

function abcBadge(cl){
  var st='font-size:.62rem;font-weight:700;padding:.1rem .35rem;border-radius:4px;';
  if(cl==='A') return '<span style="'+st+'background:#16a34a;color:#fff" title="Classe A — campeão de faturamento">A</span>';
  if(cl==='B') return '<span style="'+st+'background:#d97706;color:#fff" title="Classe B — importância média">B</span>';
  return '<span style="'+st+'background:#e2e8f0;color:#475569" title="Classe C — baixo impacto">C</span>';
}

function vendaTxt(v){ v=parseFloat(v||0); return (v>0 && v<0.1) ? '<0,1' : fmtN(v,1); }

function visiveis(){
  var rows = (DATA && DATA.linhas) ? DATA.linhas.slice() : [];
  var termo = ($('f_busca').value || '').trim().toLowerCase();
  if (termo){
    rows = rows.filter(function(c){
      return String(c.COD_ITEM).toLowerCase().indexOf(termo) >= 0
          || (c.DESCRICAO || '').toLowerCase().indexOf(termo) >= 0
          || (c.MARCA_NOME || '').toLowerCase().indexOf(termo) >= 0;
    });
  }
  return rows;
}

function renderTabela(){
  if (!DATA) return;
  var rows = visiveis();
  if (!rows.length){
    $('body').innerHTML = '<p class="text-center text-muted py-4">'
      + (DATA.linhas && DATA.linhas.length ? 'Nenhum item encontrado para a busca.' : 'Sem itens críticos. 🎉')
      + '</p>';
    return;
  }
  var h = '<div class="table-responsive"><table class="pbi-table">';
  h += '<thead><tr>'
     + '<th>Cl.</th><th>Código</th><th>Produto</th><th>Marca</th>'
     + '<th class="text-end">Estoque</th><th class="text-end">Mín.</th>'
     + '<th class="text-end">Venda/dia</th><th class="text-end">Cobertura</th>'
     + '<th class="text-end">Perda/dia</th>'
     + '<th>Fornecedor padrão</th><th class="text-end">Lead</th>'
     + '<th class="text-end">Comprar</th><th class="text-end">Valor</th>'
     + '<th class="text-center">Urgência</th>'
     + '</tr></thead><tbody>';
  rows.forEach(function(c){
    var u = urgenciaInfo(c);
    var bgLinha = corEstoque(c);
    var estTxt = fmtN(c.ESTOQUE_ATUAL, 0);
    if (c.ESTOQUE_SUSPEITO) estTxt = '<span class="text-danger" title="Estoque negativo no sistema">'+estTxt+' ⚠️</span>';
    var cb = c.COBERTURA_DIAS;
    var cbTxt = cb===null ? '<span class="text-muted">—</span>' : fmtN(Math.max(0,cb),1)+' d';
    h += '<tr style="background:'+bgLinha+'">'
       + '<td>'+abcBadge(c.CLASSE_ABC)+'</td>'
       + '<td class="fw-semibold">'+esc(c.COD_ITEM)+'</td>'
       + '<td>'+esc(c.DESCRICAO)+'</td>'
       + '<td>'+(c.MARCA_NOME ? esc(c.MARCA_NOME) : '<span class="text-muted">—</span>')+'</td>'
       + '<td class="text-end">'+estTxt+'</td>'
       + '<td class="text-end">'+fmtN(c.ESTOQ_MINIMO,0)+'</td>'
       + '<td class="text-end">'+vendaTxt(c.VENDA_DIA)+'</td>'
       + '<td class="text-end">'+cbTxt+'</td>'
       + '<td class="text-end fw-semibold" style="color:#dc2626">'+fmtR(c.VENDA_PERDIDA_DIA)+'</td>'
       + '<td>'+(c.FORNECEDOR_NOME ? esc(c.FORNECEDOR_NOME) : '<span class="text-muted">—</span>')+'</td>'
       + '<td class="text-end">'+(c.LEAD_TIME ? c.LEAD_TIME+' d' : '<span class="text-muted">—</span>')+'</td>'
       + '<td class="text-end fw-bold">'+fmtN(c.SUGESTAO_QTD,0)+' '+esc(c.COD_UNIDADE||'')+'</td>'
       + '<td class="text-end">'+fmtR(c.VALOR_SUGERIDO)+'</td>'
       + '<td class="text-center"><span class="badge" style="background:'+u.bg+';color:#fff;font-size:.7rem">'+u.lbl+'</span></td>'
       + '</tr>';
  });
  h += '</tbody></table></div>';
  $('body').innerHTML = h;
}

function carregar(){
  $('body').innerHTML = '<p class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Calculando ruptura…</p>';
  $('badge').textContent = '';
  api('/api/compras/ruptura?'+qs()).then(function(d){
    DATA = d;
    $('f_ini').value = d.dataIni; $('f_fim').value = d.dataFim;
    var n = (d.linhas||[]).length;
    $('badge').textContent = n+' itens críticos · período '+d.dataIni+' a '+d.dataFim+' ('+(d.dias||0)+'d)';
    setKpis(d.kpis);
    renderTopChart(d.topVendaPerdida);
    renderMarcaChart(d.porMarca);
    renderTabela();
  }).catch(function(e){
    $('body').innerHTML = '<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>Erro: '+esc(e.message)+'</div>';
  });
}

function csv(){
  if (!DATA || !DATA.linhas || !DATA.linhas.length) return;
  var head = ['Urgencia','Classe','Codigo','Produto','Marca','Estoque','Minimo','Venda_dia','Cobertura_dias','Perda_dia','Fornecedor','Lead_dias','Comprar_qtd','Valor_sugerido'];
  var linhas = [head.join(';')];
  visiveis().forEach(function(c){
    var u = urgenciaInfo(c);
    var r = [
      u.lbl, c.CLASSE_ABC||'', c.COD_ITEM,
      '"'+(c.DESCRICAO||'').replace(/"/g,'""')+'"',
      '"'+(c.MARCA_NOME||'').replace(/"/g,'""')+'"',
      fmtN(c.ESTOQUE_ATUAL,2).replace(/\./g,'').replace(',','.'),
      fmtN(c.ESTOQ_MINIMO,0),
      fmtN(c.VENDA_DIA,2).replace(/\./g,'').replace(',','.'),
      c.COBERTURA_DIAS===null?'':c.COBERTURA_DIAS,
      (c.VENDA_PERDIDA_DIA||0),
      '"'+(c.FORNECEDOR_NOME||'').replace(/"/g,'""')+'"',
      c.LEAD_TIME||'',
      fmtN(c.SUGESTAO_QTD,2).replace(/\./g,'').replace(',','.'),
      c.VALOR_SUGERIDO||0
    ];
    linhas.push(r.join(';'));
  });
  var blob = new Blob(["﻿"+linhas.join('\r\n')], {type:'text/csv;charset=utf-8'});
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'ruptura_'+DATA.dataIni+'_'+DATA.dataFim+'.csv';
  a.click();
}

window.addEventListener('resize', function(){
  if (CH_TOP)   CH_TOP.resize();
  if (CH_MARCA) CH_MARCA.resize();
});

$('btn-aplicar').addEventListener('click', carregar);
$('btn-csv').addEventListener('click', csv);
$('f_busca').addEventListener('input', renderTabela);

window.addEventListener('DOMContentLoaded', carregar);
})();
</script>
