import json

# Carregar dados de alto giro
with open("D:/Evolução categorias/.worktrees/comissao/alto_giro.json", encoding="utf-8") as f:
    alto = json.load(f)

receita_total = sum(r['receita'] for r in alto)
lucro_total   = sum(r['lucro']   for r in alto)
margem_media  = round(sum(r['margem'] for r in alto if r['receita']>0) / len([r for r in alto if r['receita']>0]), 1)
n_total       = len(alto)

alto_js = json.dumps(alto, ensure_ascii=False, separators=(',',':'))

with open("D:/Evolução categorias/.worktrees/comissao/dashboard_estoque.html", encoding="utf-8") as f:
    html = f.read()

# ── 1. Adicionar botão de aba ────────────────────────────────
html = html.replace(
    '  <button class="tab" onclick="showTab(\'tab-grupos\',this)">Por Grupo</button>',
    '  <button class="tab" onclick="showTab(\'tab-grupos\',this)">Por Grupo</button>\n  <button class="tab" onclick="showTab(\'tab-altogiro\',this)">⚡ Alto Giro</button>'
)

# ── 2. Adicionar HTML da aba antes do fechamento /wrap ────────
tab_html = """
<!-- TAB ALTO GIRO -->
<div id="tab-altogiro" class="tab-pane">
  <div class="card" style="padding:0;">
    <!-- KPIs rápidos da aba -->
    <div style="display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface2);border-radius:16px 16px 0 0;">
      <div style="flex:1;min-width:120px;">
        <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px;">Produtos</div>
        <div style="font-family:var(--display);font-size:22px;color:#3B82F6;">""" + f"{n_total:,}".replace(",",".") + """</div>
      </div>
      <div style="flex:1;min-width:140px;">
        <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px;">Receita Total</div>
        <div style="font-family:var(--display);font-size:22px;color:#10B981;">R$""" + (f"{receita_total/1e6:.1f}M" if receita_total>=1e6 else f"{receita_total/1e3:.0f}K") + """</div>
      </div>
      <div style="flex:1;min-width:140px;">
        <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px;">Lucro Bruto</div>
        <div style="font-family:var(--display);font-size:22px;color:#34D399;">R$""" + (f"{lucro_total/1e6:.1f}M" if lucro_total>=1e6 else f"{lucro_total/1e3:.0f}K") + """</div>
      </div>
      <div style="flex:1;min-width:120px;">
        <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px;">Margem Média</div>
        <div style="font-family:var(--display);font-size:22px;color:#F97316;">""" + f"{margem_media:.1f}%" + """</div>
      </div>
      <div style="flex:1;min-width:160px;display:flex;align-items:center;gap:8px;">
        <span style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;">Giro mín:</span>
        <input type="range" id="agGiroMin" min="1" max="20" value="1" step="0.5"
          oninput="document.getElementById('agGiroMinVal').textContent=this.value+'x'; agPage=1; renderAltoGiro()"
          style="flex:1;">
        <span id="agGiroMinVal" style="font-family:var(--mono);font-size:11px;color:var(--accent);min-width:28px;">1x</span>
      </div>
    </div>
    <div class="table-toolbar">
      <input type="text" class="tbl-search" id="sAltoGiro" placeholder="Filtrar produto, fornecedor ou grupo…" oninput="agPage=1;renderAltoGiro()">
      <button class="sort-btn active" id="sortAgBtn" onclick="cycleSortAg()">Ordenar: Receita ↓</button>
      <div style="display:flex;align-items:center;gap:6px;margin-left:auto;">
        <button class="sort-btn" id="btnAgPrev" onclick="agPage=Math.max(1,agPage-1);renderAltoGiro()">‹ Ant</button>
        <span id="agPageInfo" style="font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap">1/1</span>
        <button class="sort-btn" id="btnAgNext" onclick="agPage++;renderAltoGiro()">Próx ›</button>
        <select id="agPageSize" class="filter-select" style="width:90px;padding:4px 8px;font-size:11px" onchange="agPage=1;renderAltoGiro()">
          <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="countAg">Total: <span>0</span></div>
      </div>
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th onclick="setAgSort('rank')">#</th>
            <th onclick="setAgSort('nome')">Produto</th>
            <th onclick="setAgSort('fornecedor')">Fornecedor</th>
            <th onclick="setAgSort('grupo')">Grupo</th>
            <th onclick="setAgSort('receita')">Receita (R$)</th>
            <th onclick="setAgSort('lucro')">Lucro (R$)</th>
            <th onclick="setAgSort('margem')">Margem</th>
            <th onclick="setAgSort('giro')">Giro</th>
            <th onclick="setAgSort('qtd_vend')">Qtd Vendida</th>
            <th onclick="setAgSort('cobertura')">Cobertura</th>
            <th onclick="setAgSort('estoque')">Estoque Atual</th>
          </tr>
        </thead>
        <tbody id="tbody-altogiro"></tbody>
      </table>
    </div>
  </div>
</div>

"""
html = html.replace('\n</div><!-- /wrap -->', tab_html + '\n</div><!-- /wrap -->')

# ── 3. Adicionar dados no RAW ────────────────────────────────
html = html.replace(
    '  top_produtos_parados:',
    f'  alto_giro: {alto_js},\n  top_produtos_parados:'
)

# ── 4. Adicionar JS da aba ───────────────────────────────────
ag_js = """
// ── ABA ALTO GIRO ─────────────────────────────────────────
let agPage = 1;
let agSort = {key:'receita', asc:false};
const agSortCycle = ['receita','lucro','margem','giro','qtd_vend','estoque'];
let agSortIdx = 0;

function filteredAltoGiro(){
  const q   = document.getElementById('sAltoGiro').value.toLowerCase();
  const giroMin = +document.getElementById('agGiroMin').value;
  const fs  = F.search;
  const fg  = F.grupo;
  const ff  = F.fornecedor;
  return RAW.alto_giro.filter(r=>{
    if(r.giro < giroMin) return false;
    if(q  && !(r.nome+r.fornecedor+r.grupo).toLowerCase().includes(q)) return false;
    if(fs && !(r.nome+r.fornecedor+r.grupo).toLowerCase().includes(fs)) return false;
    if(fg && r.grupo    !== fg) return false;
    if(ff && r.fornecedor !== ff) return false;
    return true;
  });
}

function renderAltoGiro(){
  let data = filteredAltoGiro();
  data.sort((a,b)=>{
    const av=a[agSort.key]??0, bv=b[agSort.key]??0;
    return agSort.asc?(av>bv?1:-1):(av<bv?1:-1);
  });
  const total = data.length;
  document.querySelector('#countAg span').textContent = total;
  const pageSize   = +document.getElementById('agPageSize').value;
  const totalPages = Math.max(1, Math.ceil(total/pageSize));
  agPage = Math.min(Math.max(1,agPage), totalPages);
  document.getElementById('agPageInfo').textContent = pageSize>=9999 ? 'pág 1/1' : `${agPage}/${totalPages}`;
  document.getElementById('btnAgPrev').disabled = agPage<=1;
  document.getElementById('btnAgNext').disabled = agPage>=totalPages;
  const slice  = pageSize>=9999 ? data : data.slice((agPage-1)*pageSize, agPage*pageSize);
  const offset = pageSize>=9999 ? 0 : (agPage-1)*pageSize;
  const tbody = document.getElementById('tbody-altogiro');
  if(!slice.length){
    tbody.innerHTML='<tr><td colspan="11" class="no-results">Nenhum produto encontrado.</td></tr>';
    return;
  }
  tbody.innerHTML = slice.map((r,i) => {
    const giroColor = r.giro>=10?'#34d399':r.giro>=5?'#60a5fa':r.giro>=2?'#fbbf24':'#94a3b8';
    const covColor  = r.cobertura<=1?'#34d399':r.cobertura<=3?'#60a5fa':r.cobertura<=6?'#fbbf24':'#f97316';
    const margColor = r.margem>=40?'#34d399':r.margem>=20?'#fbbf24':r.margem>=10?'#fb923c':'#f87171';
    return `<tr>
      <td class="td-mono" style="color:var(--muted)">${offset+i+1}</td>
      <td class="td-nome" title="${r.nome}" style="max-width:240px">${r.nome}</td>
      <td class="td-nome" style="max-width:160px;color:var(--dim)">${r.fornecedor}</td>
      <td><span class="badge badge-blue">${r.grupo}</span></td>
      <td class="td-mono" style="color:#10B981;font-weight:700">${fmtR(r.receita)}</td>
      <td class="td-mono" style="color:#34D399">${fmtR(r.lucro)}</td>
      <td style="font-family:var(--mono);font-size:12px;font-weight:700;color:${margColor}">${r.margem.toFixed(1)}%</td>
      <td style="font-family:var(--display);font-size:18px;color:${giroColor};letter-spacing:1px">${r.giro.toFixed(1)}x</td>
      <td class="td-mono">${fmtN(r.qtd_vend)}</td>
      <td style="font-family:var(--mono);font-size:12px;color:${covColor}">${r.cobertura>0?r.cobertura.toFixed(1)+'m':'–'}</td>
      <td class="td-mono">${fmtN(r.estoque)}</td>
    </tr>`;
  }).join('');
}

function cycleSortAg(){
  agSortIdx=(agSortIdx+1)%agSortCycle.length;
  agSort.key=agSortCycle[agSortIdx]; agSort.asc=false; agPage=1;
  const labels={receita:'Receita ↓',lucro:'Lucro ↓',margem:'Margem ↓',giro:'Giro ↓',qtd_vend:'Qtd Vendida ↓',estoque:'Estoque ↓'};
  document.getElementById('sortAgBtn').textContent='Ordenar: '+labels[agSort.key];
  renderAltoGiro();
}
function setAgSort(key){
  if(agSort.key===key) agSort.asc=!agSort.asc; else{agSort.key=key;agSort.asc=false;}
  agPage=1; renderAltoGiro();
}
"""

# Inserir antes de // ── INIT
html = html.replace('// ── INIT ──', ag_js + '\n// ── INIT ──')

# ── 5. Chamar renderAltoGiro no applyFilters ─────────────────
html = html.replace(
    '  renderForn();\n  renderProd();\n  renderGrupos();',
    '  renderForn();\n  renderProd();\n  renderGrupos();\n  renderAltoGiro();'
)

# ── 6. Chamar renderAltoGiro no INIT ─────────────────────────
html = html.replace(
    'populateSelects();\napplyFilters();\nrebuildChartFornReceita();',
    'populateSelects();\napplyFilters();\nrebuildChartFornReceita();\nrenderAltoGiro();'
)

with open("D:/Evolução categorias/.worktrees\comissao/dashboard_estoque.html","w",encoding="utf-8") as f:
    f.write(html)

print(f"Aba Alto Giro adicionada. {n_total} produtos, receita R${receita_total:,.0f}")
