import json

# Carregar todos os produtos parados
with open("D:/Evolução categorias/.worktrees/comissao/all_produtos_parados.json", encoding="utf-8") as f:
    all_prod = json.load(f)

prod_js = json.dumps(all_prod, ensure_ascii=False, separators=(',',':'))

# Ler dashboard
with open("D:/Evolução categorias/.worktrees/comissao/dashboard_estoque.html", encoding="utf-8") as f:
    html = f.read()

# 1. Substituir top_produtos_parados pelo array completo
old_prod_block_start = "  top_produtos_parados: ["
old_prod_block_end   = "  ]\n};"

idx_start = html.find(old_prod_block_start)
idx_end   = html.find(old_prod_block_end, idx_start) + len(old_prod_block_end)
old_prod_block = html[idx_start:idx_end]

new_prod_block = f"  top_produtos_parados: {prod_js}\n}};"
html = html[:idx_start] + new_prod_block + html[idx_end:]

# 2. Atualizar toolbar da tab produtos — adicionar paginação
old_toolbar = """    <div class="table-toolbar">
      <input type="text" class="tbl-search" id="sProd" placeholder="Filtrar produto, fornecedor ou grupo…" oninput="renderProd()">
      <button class="sort-btn active" id="sortProdBtn" onclick="cycleSortProd()">Ordenar: Vlr Estoque ↓</button>
      <div class="tbl-count" id="countProd">Exibindo <span>0</span> produtos</div>
    </div>"""
new_toolbar = """    <div class="table-toolbar">
      <input type="text" class="tbl-search" id="sProd" placeholder="Filtrar produto, fornecedor ou grupo…" oninput="prodPage=1;renderProd()">
      <button class="sort-btn active" id="sortProdBtn" onclick="cycleSortProd()">Ordenar: Vlr Estoque ↓</button>
      <div style="display:flex;align-items:center;gap:6px;margin-left:auto;">
        <button class="sort-btn" id="btnProdPrev" onclick="prodPage=Math.max(1,prodPage-1);renderProd()">‹ Ant</button>
        <span id="prodPageInfo" style="font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap">1/1</span>
        <button class="sort-btn" id="btnProdNext" onclick="prodPage++;renderProd()">Próx ›</button>
        <select id="prodPageSize" class="filter-select" style="width:90px;padding:4px 8px;font-size:11px" onchange="prodPage=1;renderProd()">
          <option value="25">25 / pág</option>
          <option value="50">50 / pág</option>
          <option value="100">100 / pág</option>
          <option value="9999">Todos</option>
        </select>
        <div class="tbl-count" id="countProd">Total: <span>0</span></div>
      </div>
    </div>"""
html = html.replace(old_toolbar, new_toolbar, 1)

# 3. Adicionar variável de página antes do bloco de sort de produtos
old_let = "let sortProd  = {key:'vl_est',    asc:false};"
new_let = "let prodPage = 1;\nlet sortProd  = {key:'vl_est',    asc:false};"
html = html.replace(old_let, new_let, 1)

# 4. Substituir renderProd para suportar paginação
old_render = """function renderProd(){
  const q=document.getElementById('sProd').value.toLowerCase();
  let data=filteredProd().filter(r=>!q||(r.nome+r.fornecedor+r.grupo).toLowerCase().includes(q));
  data.sort((a,b)=>{
    const av=a[sortProd.key]??9999, bv=b[sortProd.key]??9999;
    return sortProd.asc?(av>bv?1:-1):(av<bv?1:-1);
  });
  const tbody=document.getElementById('tbody-prod');
  document.querySelector('#countProd span').textContent=data.length;
  if(!data.length){tbody.innerHTML='<tr><td colspan="8" class="no-results">Nenhum produto encontrado com os filtros aplicados.</td></tr>';return;}
  tbody.innerHTML=data.map((r,i)=>`
    <tr>
      <td class="td-mono">${i+1}</td>
      <td class="td-nome" title="${r.nome}">${r.nome}</td>
      <td class="td-nome" style="max-width:150px;color:var(--dim)">${r.fornecedor}</td>
      <td><span class="badge badge-blue">${r.grupo}</span></td>
      <td class="td-mono">${fmtN(r.estoque)}</td>
      <td class="td-mono">${fmtR(r.custo)}</td>
      <td class="td-mono" style="color:var(--danger);font-weight:700">${fmtR(r.vl_est)}</td>
      <td>${diasBadge(r.dias)}</td>
    </tr>`).join('');
}"""
new_render = """function renderProd(){
  const q=document.getElementById('sProd').value.toLowerCase();
  let data=filteredProd().filter(r=>!q||(r.nome+r.fornecedor+r.grupo).toLowerCase().includes(q));
  data.sort((a,b)=>{
    const av=a[sortProd.key]??9999, bv=b[sortProd.key]??9999;
    return sortProd.asc?(av>bv?1:-1):(av<bv?1:-1);
  });
  const total=data.length;
  document.querySelector('#countProd span').textContent=total;
  const pageSize=+document.getElementById('prodPageSize').value;
  const totalPages=Math.max(1,Math.ceil(total/pageSize));
  prodPage=Math.min(Math.max(1,prodPage),totalPages);
  document.getElementById('prodPageInfo').textContent=pageSize>=9999?'pág 1/1':`${prodPage}/${totalPages}`;
  document.getElementById('btnProdPrev').disabled=prodPage<=1;
  document.getElementById('btnProdNext').disabled=prodPage>=totalPages;
  const slice=pageSize>=9999?data:data.slice((prodPage-1)*pageSize,prodPage*pageSize);
  const offset=pageSize>=9999?0:(prodPage-1)*pageSize;
  const tbody=document.getElementById('tbody-prod');
  if(!slice.length){tbody.innerHTML='<tr><td colspan="8" class="no-results">Nenhum produto encontrado com os filtros aplicados.</td></tr>';return;}
  tbody.innerHTML=slice.map((r,i)=>`
    <tr>
      <td class="td-mono">${offset+i+1}</td>
      <td class="td-nome" title="${r.nome}">${r.nome}</td>
      <td class="td-nome" style="max-width:150px;color:var(--dim)">${r.fornecedor}</td>
      <td><span class="badge badge-blue">${r.grupo}</span></td>
      <td class="td-mono">${fmtN(r.estoque)}</td>
      <td class="td-mono">${fmtR(r.custo)}</td>
      <td class="td-mono" style="color:var(--danger);font-weight:700">${fmtR(r.vl_est)}</td>
      <td>${diasBadge(r.dias)}</td>
    </tr>`).join('');
}"""
html = html.replace(old_render, new_render, 1)

# 5. cycleSortProd deve resetar prodPage
old_cycle = """function cycleSortProd(){
  sortProdCycleIdx=(sortProdCycleIdx+1)%sortProdCycle.length;
  sortProd.key=sortProdCycle[sortProdCycleIdx];
  sortProd.asc=false;
  const labels={vl_est:'Vlr Estoque ↓',custo:'Custo Unit ↓',estoque:'Qtd Estoque ↓',dias:'Dias s/ Entrada ↓'};
  document.getElementById('sortProdBtn').textContent='Ordenar: '+labels[sortProd.key];
  renderProd();
}"""
new_cycle = """function cycleSortProd(){
  sortProdCycleIdx=(sortProdCycleIdx+1)%sortProdCycle.length;
  sortProd.key=sortProdCycle[sortProdCycleIdx];
  sortProd.asc=false;
  prodPage=1;
  const labels={vl_est:'Vlr Estoque ↓',custo:'Custo Unit ↓',estoque:'Qtd Estoque ↓',dias:'Dias s/ Entrada ↓'};
  document.getElementById('sortProdBtn').textContent='Ordenar: '+labels[sortProd.key];
  renderProd();
}"""
html = html.replace(old_cycle, new_cycle, 1)

# 6. setSortProd deve resetar prodPage
old_set = """function setSortProd(key){
  if(sortProd.key===key) sortProd.asc=!sortProd.asc; else{sortProd.key=key;sortProd.asc=false;}
  renderProd();
}"""
new_set = """function setSortProd(key){
  if(sortProd.key===key) sortProd.asc=!sortProd.asc; else{sortProd.key=key;sortProd.asc=false;}
  prodPage=1;
  renderProd();
}"""
html = html.replace(old_set, new_set, 1)

with open("D:/Evolução categorias/.worktrees/comissao/dashboard_estoque.html","w",encoding="utf-8") as f:
    f.write(html)

print(f"Concluído. Produtos embarcados: {len(all_prod)}")
print(f"Tamanho do arquivo: {len(html)/1024:.0f} KB")