<div class="card" id="rel-estoque">
  <h1>Relatórios de Estoque</h1>
  <p>Movimentação de estoque por período, produto e tipo de movimento.</p>

  <div class="form-grid" style="display:grid;grid-template-columns:repeat(2, minmax(220px, 1fr));gap:12px;align-items:end;">
    <div class="form-group">
      <label>Início</label>
      <input id="f-start" type="date" />
    </div>
    <div class="form-group">
      <label>Fim</label>
      <input id="f-end" type="date" />
    </div>
    <div class="form-group">
      <label>Produto (SKU)</label>
      <input id="f-sku" type="text" placeholder="Código/SKU" />
    </div>
    <div class="form-group">
      <label>Tipo</label>
      <select id="f-tipo">
        <option value="">Todos</option>
        <option value="entrada">Entrada</option>
        <option value="saida">Saída</option>
      </select>
    </div>
    <div class="form-group" style="grid-column:1/-1;">
      <button id="btn-aplicar" class="btn">Aplicar filtros</button>
    </div>
  </div>

  <hr />

  <h2>Movimentação</h2>
  <p id="mov-feedback" style="font-size:0.9em;color:#555;">Aguardando filtros…</p>
  <div style="overflow:auto;">
    <table id="tbl-movimentos" class="table">
      <thead>
        <tr>
          <th>Data</th>
          <th>Produto</th>
          <th>Tipo</th>
          <th>Quantidade</th>
          <th>Antes</th>
          <th>Depois</th>
          <th>Motivo</th>
          <th>Origem</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div style="margin:8px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
    <label for="mov-per" class="muted">Itens por página</label>
    <select id="mov-per" style="padding:0.4rem;">
      <option value="20">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <button id="mov-prev" class="btn">Anterior</button>
    <span id="mov-page-label" class="muted">Página 1 de 1</span>
    <button id="mov-next" class="btn">Próxima</button>
    <span class="muted" style="margin-left:auto;">Exportação:</span>
    <label for="f-sep" class="muted">Separador</label>
    <select id="f-sep" style="padding:0.4rem;">
      <option value=";">;</option>
      <option value=",">,</option>
      <option value="\t">Tabulação</option>
    </select>
    <a id="btn-export-mov" class="btn" href="/api/estoque/movimentos/export.csv" target="_blank">Exportar CSV</a>
  </div>

  <hr />

  <h2>Produtos fora dos limites</h2>
  <div class="grid" style="display:grid;grid-template-columns:repeat(2, minmax(280px, 1fr));gap:12px;">
    <div>
      <h3>Abaixo do mínimo</h3>
      <table id="tbl-below" class="table">
        <thead>
          <tr>
            <th>SKU</th>
            <th>Nome</th>
            <th>Estoque</th>
            <th>Mínimo</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div>
      <h3>Acima do máximo</h3>
      <table id="tbl-above" class="table">
        <thead>
          <tr>
            <th>SKU</th>
            <th>Nome</th>
            <th>Estoque</th>
            <th>Máximo</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    (function(){
      let movPage = 1;
      let movPer = 20;
      let movTotal = 0;
      let movTotalPages = 1;
      const fmtDate = (s) => {
        try { const d = new Date(s); return d.toLocaleDateString(); } catch(e){ return s; }
      };
      const byText = (el, t) => (el.textContent = t, el);
      async function api(url){
        const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
        return { ok: res.ok, json: res.ok ? await res.json() : null };
      }
      function getFilters(){
        const start = document.getElementById('f-start').value.trim();
        const end = document.getElementById('f-end').value.trim();
        const sku = document.getElementById('f-sku').value.trim();
        const tipoSel = document.getElementById('f-tipo').value.trim().toLowerCase();
        // Mapear valores da UI para API (in/out)
        const type = tipoSel === 'entrada' ? 'in' : (tipoSel === 'saida' ? 'out' : '');
        const params = {};
        if (start) params.start = start;
        if (end) params.end = end;
        if (sku) params.q = sku;
        if (type) params.type = type;
        params.page = movPage;
        params.per_page = movPer;
        return params;
      }
      function renderMov(rows){
        const tb = document.querySelector('#tbl-movimentos tbody'); tb.innerHTML = '';
        if (!rows || rows.length === 0) {
          const tr = document.createElement('tr');
          tr.innerHTML = `<td colspan="8" class="muted" style="text-align:center;">Nenhum movimento encontrado</td>`;
          tb.appendChild(tr);
          return;
        }
        rows.forEach(r => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${fmtDate(r.created_at||r.data||'')}</td>
            <td>${r.product_code||r.product_id||''}</td>
            <td>${r.tipo||r.type||''}</td>
            <td>${r.quantidade||r.quantity||''}</td>
            <td>${r.stock_before??''}</td>
            <td>${r.stock_after??''}</td>
            <td>${r.motivo||''}</td>
            <td>${r.origin_number||r.origin_type||''}</td>
          `;
          tb.appendChild(tr);
        });
      }
      function renderThresholds(rep){
        const belowTb = document.querySelector('#tbl-below tbody'); belowTb.innerHTML='';
        const aboveTb = document.querySelector('#tbl-above tbody'); aboveTb.innerHTML='';
        (rep.below_min||[]).forEach(r=>{
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${r.codigo||r.product_id}</td>
            <td>${r.descricao||''}</td>
            <td>${r.level??''}</td>
            <td>${r.min??''}</td>
          `; belowTb.appendChild(tr);
        });
        (rep.above_max||[]).forEach(r=>{
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${r.codigo||r.product_id}</td>
            <td>${r.descricao||''}</td>
            <td>${r.level??''}</td>
            <td>${r.max??''}</td>
          `; aboveTb.appendChild(tr);
        });
      }
      function toQuery(params){
        const usp = new URLSearchParams(params);
        return usp.toString();
      }
      async function loadReports(){
        const fb = document.getElementById('mov-feedback'); byText(fb, 'Carregando movimentações…');
        try{
          const params = getFilters();
          const qs = toQuery(params);
          const movUrl = qs ? `/api/estoque/movimentos?${qs}` : '/api/estoque/movimentos';
          const m = await api(movUrl);
          const rows = (m.json && m.json.data) || [];
          renderMov(rows);
          movTotal = (m.json && m.json.total) || rows.length;
          movPer = (m.json && m.json.per_page) || movPer;
          movTotalPages = Math.max(1, Math.ceil(movTotal / movPer));
          byText(fb, `${movTotal} movimentos encontrados.`);
          const lbl = document.getElementById('mov-page-label');
          lbl.textContent = `Página ${movPage} de ${movTotalPages}`;
          document.getElementById('mov-prev').disabled = (movPage <= 1);
          document.getElementById('mov-next').disabled = (movPage >= movTotalPages);
          // Atualizar link de exportação com mesmos filtros
          const exp = document.getElementById('btn-export-mov');
          const baseExp = '/api/estoque/movimentos/export.csv';
          const sep = document.getElementById('f-sep').value || ';';
          const expParams = new URLSearchParams(params);
          expParams.set('sep', sep);
          exp.href = `${baseExp}?${expParams.toString()}`;
        } catch(e){ byText(fb, 'Falha ao carregar movimentações'); }

        try{
          const t = await api('/api/estoque/thresholds/report');
          const rep = (t.json && t.json.data) || { below_min: [], above_max: [] };
          renderThresholds(rep);
        } catch(e){ /* silencioso */ }
      }

      document.getElementById('btn-aplicar').addEventListener('click', function(){ movPage = 1; loadReports(); });
      document.getElementById('mov-prev').addEventListener('click', function(){ if(movPage > 1){ movPage--; loadReports(); } });
      document.getElementById('mov-next').addEventListener('click', function(){ if(movPage < movTotalPages){ movPage++; loadReports(); } });
      document.getElementById('mov-per').addEventListener('change', function(){ const v = parseInt(this.value, 10); movPer = isNaN(v) ? 20 : v; movPage = 1; loadReports(); });
      document.getElementById('f-sep').addEventListener('change', function(){ /* o link será atualizado na próxima carga */ });
      // Carregar ao entrar na página
      setTimeout(loadReports, 10);
    })();
  </script>
</div>