<?php
require_once(dirname(__DIR__) . '/config/db.php');
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);

$cdempresa = $_SESSION['cdempresa'] ?? 1;

// Exercícios disponíveis
$stmt = $pdo->prepare("
  SELECT cdexercicio, anoref
    FROM back.exercicio
   WHERE cdempresa = :emp AND flativo = 0
   ORDER BY anoref ASC
");
$stmt->execute([':emp' => $cdempresa]);
$exercicios = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Centros de custo
$stmt = $pdo->prepare("
  SELECT cdcentrocusto, dscentro
    FROM back.centro_custo
   WHERE flativo = 0 AND cdcentropai IS NOT NULL
   ORDER BY dscentro
");
$stmt->execute();
$centros = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Moeda da empresa
$stmt = $pdo->prepare("
  SELECT m.simbolo, m.formato
    FROM back.empresa e
    LEFT JOIN back.moeda m ON m.cdmoeda = e.cdmoeda
   WHERE e.cdempresa = :emp
");
$stmt->execute([':emp' => $cdempresa]);
$moeda = $stmt->fetch(PDO::FETCH_ASSOC) ?? ['simbolo' => 'R$', 'formato' => 'decimal'];

$anoAtual = (int)date('Y');
$mesAtual = (int)date('n');
$triAtual = (int)ceil($mesAtual / 3);
$semAtual = $mesAtual <= 6 ? 1 : 2;
$mesesCurto = ['','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
?>

<h4 class="mb-3"><i class="bi bi-arrow-left-right"></i> Comparativo de Realizado</h4>
<hr>

<div class="d-flex flex-column gap-3">

  <!-- Filtros -->
  <div class="card border-0 shadow-sm">
    <div class="card-body py-3">

      <!-- Granularidade (pills) -->
      <div class="d-flex align-items-center gap-2 mb-3">
        <span class="small fw-semibold text-secondary">Granularidade:</span>
        <div class="btn-group btn-group-sm" role="group">
          <input type="radio" class="btn-check" name="granularidade" id="granMes" value="mes">
          <label class="btn btn-outline-primary" for="granMes">Mês</label>
          <input type="radio" class="btn-check" name="granularidade" id="granTri" value="trimestre" checked>
          <label class="btn btn-outline-primary" for="granTri">Trimestre</label>
          <input type="radio" class="btn-check" name="granularidade" id="granSem" value="semestre">
          <label class="btn btn-outline-primary" for="granSem">Semestre</label>
          <input type="radio" class="btn-check" name="granularidade" id="granAno" value="ano">
          <label class="btn btn-outline-primary" for="granAno">Ano</label>
        </div>
      </div>

      <div class="row g-3">
        <!-- Período A -->
        <div class="col-md-5">
          <div class="card bg-light border-0">
            <div class="card-body py-2 px-3">
              <div class="small fw-semibold text-primary mb-2"><i class="bi bi-calendar3"></i> Período A</div>
              <div class="row g-2">
                <div class="col">
                  <label class="small">Ano</label>
                  <select class="form-select form-select-sm" id="anoA">
                    <?php foreach ($exercicios as $ex): ?>
                      <option value="<?= (int)$ex['anoref'] ?>" <?= (int)$ex['anoref'] === ($anoAtual - 1) ? 'selected' : '' ?>>
                        <?= htmlspecialchars($ex['anoref']) ?>
                      </option>
                    <?php endforeach; ?>
                  </select>
                </div>
                <div class="col-12 filtro-mes" style="display:none;">
                  <label class="small d-block mb-1">Meses</label>
                  <div class="d-flex flex-wrap gap-1">
                    <?php for ($i = 1; $i <= 12; $i++): ?>
                    <div>
                      <input type="checkbox" class="btn-check mesA-check" value="<?= $i ?>" id="mesA<?= $i ?>" <?= $i === $mesAtual ? 'checked' : '' ?> autocomplete="off">
                      <label class="btn btn-outline-primary btn-sm py-0 px-2" for="mesA<?= $i ?>"><?= $mesesCurto[$i] ?></label>
                    </div>
                    <?php endfor; ?>
                  </div>
                </div>
                <div class="col filtro-tri">
                  <label class="small">Trimestre</label>
                  <select class="form-select form-select-sm" id="triA">
                    <option value="1" <?= $triAtual === 1 ? 'selected' : '' ?>>T1 (Jan-Mar)</option>
                    <option value="2" <?= $triAtual === 2 ? 'selected' : '' ?>>T2 (Abr-Jun)</option>
                    <option value="3" <?= $triAtual === 3 ? 'selected' : '' ?>>T3 (Jul-Set)</option>
                    <option value="4" <?= $triAtual === 4 ? 'selected' : '' ?>>T4 (Out-Dez)</option>
                  </select>
                </div>
                <div class="col filtro-sem" style="display:none;">
                  <label class="small">Semestre</label>
                  <select class="form-select form-select-sm" id="semA">
                    <option value="1" <?= $semAtual === 1 ? 'selected' : '' ?>>S1 (Jan-Jun)</option>
                    <option value="2" <?= $semAtual === 2 ? 'selected' : '' ?>>S2 (Jul-Dez)</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- VS divider -->
        <div class="col-md-2 d-flex align-items-center justify-content-center">
          <span class="badge bg-secondary fs-6 px-3 py-2">VS</span>
        </div>

        <!-- Período B -->
        <div class="col-md-5">
          <div class="card bg-light border-0">
            <div class="card-body py-2 px-3">
              <div class="small fw-semibold text-info mb-2"><i class="bi bi-calendar3"></i> Período B</div>
              <div class="row g-2">
                <div class="col">
                  <label class="small">Ano</label>
                  <select class="form-select form-select-sm" id="anoB">
                    <?php foreach ($exercicios as $ex): ?>
                      <option value="<?= (int)$ex['anoref'] ?>" <?= (int)$ex['anoref'] === $anoAtual ? 'selected' : '' ?>>
                        <?= htmlspecialchars($ex['anoref']) ?>
                      </option>
                    <?php endforeach; ?>
                  </select>
                </div>
                <div class="col-12 filtro-mes" style="display:none;">
                  <label class="small d-block mb-1">Meses</label>
                  <div class="d-flex flex-wrap gap-1">
                    <?php for ($i = 1; $i <= 12; $i++): ?>
                    <div>
                      <input type="checkbox" class="btn-check mesB-check" value="<?= $i ?>" id="mesB<?= $i ?>" <?= $i === $mesAtual ? 'checked' : '' ?> autocomplete="off">
                      <label class="btn btn-outline-info btn-sm py-0 px-2" for="mesB<?= $i ?>"><?= $mesesCurto[$i] ?></label>
                    </div>
                    <?php endfor; ?>
                  </div>
                </div>
                <div class="col filtro-tri">
                  <label class="small">Trimestre</label>
                  <select class="form-select form-select-sm" id="triB">
                    <option value="1" <?= $triAtual === 1 ? 'selected' : '' ?>>T1 (Jan-Mar)</option>
                    <option value="2" <?= $triAtual === 2 ? 'selected' : '' ?>>T2 (Abr-Jun)</option>
                    <option value="3" <?= $triAtual === 3 ? 'selected' : '' ?>>T3 (Jul-Set)</option>
                    <option value="4" <?= $triAtual === 4 ? 'selected' : '' ?>>T4 (Out-Dez)</option>
                  </select>
                </div>
                <div class="col filtro-sem" style="display:none;">
                  <label class="small">Semestre</label>
                  <select class="form-select form-select-sm" id="semB">
                    <option value="1" <?= $semAtual === 1 ? 'selected' : '' ?>>S1 (Jan-Jun)</option>
                    <option value="2" <?= $semAtual === 2 ? 'selected' : '' ?>>S2 (Jul-Dez)</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Filtros adicionais + Ações -->
      <div class="row g-2 mt-2 align-items-end">
        <div class="col-md-2">
          <label class="small">Centro de Custo</label>
          <select class="form-select form-select-sm" id="filtroCentro">
            <option value="">Todos</option>
            <?php foreach ($centros as $c): ?>
              <option value="<?= (int)$c['cdcentrocusto'] ?>"><?= htmlspecialchars($c['dscentro']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>

        <div class="col-md-2">
          <label class="small">Tipo Movimento</label>
          <select class="form-select form-select-sm" id="filtroTpMov">
            <option value="">Todos (C-D)</option>
            <option value="C">Crédito (C)</option>
            <option value="D">Débito (D)</option>
          </select>
        </div>

        <div class="col-md-2">
          <label class="small">Pesquisar conta</label>
          <input type="text" class="form-control form-control-sm" id="filtroConta" placeholder="Nome ou código..." disabled>
        </div>

        <div class="col-md-6 d-flex gap-2 flex-wrap align-items-end">
          <button class="btn btn-primary btn-sm" id="btnComparar">
            <i class="bi bi-arrow-left-right"></i> Comparar
          </button>
          <button class="btn btn-outline-secondary btn-sm" id="btnExportCSV" disabled>
            <i class="bi bi-download"></i> Exportar CSV
          </button>
          <div class="vr mx-1 d-none d-md-block"></div>
          <span class="small text-muted">Atalhos:</span>
          <button class="btn btn-outline-info btn-sm" data-atalho="mes-anterior" title="Mesmo mês, ano anterior">
            <i class="bi bi-skip-backward"></i> Mês ant.
          </button>
          <button class="btn btn-outline-info btn-sm" data-atalho="tri-anterior" title="Mesmo trimestre, ano anterior">
            <i class="bi bi-skip-backward-fill"></i> Tri ant.
          </button>
          <button class="btn btn-outline-info btn-sm" data-atalho="ytd" title="Acumulado do ano vs ano anterior">
            <i class="bi bi-calendar-range"></i> YTD
          </button>
        </div>
      </div>

    </div>
  </div>

  <!-- KPIs -->
  <div class="row g-3" id="kpiContainer" style="display:none;">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-3 text-center">
          <div class="small text-muted mb-1" id="kpiLabelA">Período A</div>
          <div class="fs-5 fw-bold" id="kpiValorA">-</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-3 text-center">
          <div class="small text-muted mb-1" id="kpiLabelB">Período B</div>
          <div class="fs-5 fw-bold" id="kpiValorB">-</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-3 text-center">
          <div class="small text-muted mb-1">Variação</div>
          <div class="fs-5 fw-bold"><span id="kpiVariacao">-</span> <span id="kpiVariacaoPct" class="small">-</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Ordenação + Visualização -->
  <div class="d-flex gap-2 align-items-center flex-wrap" id="ordenacaoContainer" style="display:none;">
    <span class="small text-muted">Ordenar:</span>
    <div class="btn-group btn-group-sm">
      <button class="btn btn-outline-secondary active" data-sort="conta">
        <i class="bi bi-sort-alpha-down"></i> Conta
      </button>
      <button class="btn btn-outline-success" data-sort="melhor">
        <i class="bi bi-graph-up-arrow"></i> Melhor Desempenho
      </button>
      <button class="btn btn-outline-danger" data-sort="pior">
        <i class="bi bi-graph-down-arrow"></i> Pior Desempenho
      </button>
      <button class="btn btn-outline-primary" data-sort="maior-valor">
        <i class="bi bi-currency-dollar"></i> Maior Valor
      </button>
    </div>
    <div class="vr mx-1 d-none d-md-block"></div>
    <span class="small text-muted">Visão:</span>
    <div class="btn-group btn-group-sm">
      <input type="radio" class="btn-check" name="viewMode" id="viewArvore" value="arvore" checked>
      <label class="btn btn-outline-secondary" for="viewArvore"><i class="bi bi-diagram-3"></i> Árvore</label>
      <input type="radio" class="btn-check" name="viewMode" id="viewLista" value="lista">
      <label class="btn btn-outline-secondary" for="viewLista"><i class="bi bi-list-ul"></i> Lista</label>
    </div>
    <div class="vr mx-1 d-none d-md-block"></div>
    <span class="small text-muted">Valores:</span>
    <div class="d-flex gap-1">
      <button type="button" class="comp-numerico-btn active" data-exibicao="compacta" title="Valores compactos (K, M)">$</button>
      <button type="button" class="comp-numerico-btn" data-exibicao="completa" title="Valores completos">$$</button>
    </div>
  </div>

  <!-- Tabela comparativa -->
  <div class="card border-0 shadow-sm" id="tabelaContainer" style="display:none;">
    <div class="card-body p-0">
      <div style="overflow-x: auto;">
        <table class="table table-hover align-middle mb-0" style="font-size: 0.93rem;" id="tabelaComparativo">
          <thead id="tabelaHead" style="position: sticky; top: 0; background: #f8f9fa; z-index: 10; border-bottom: 2px solid #dee2e6;">
          </thead>
          <tbody id="tabelaBody">
          </tbody>
          <tfoot id="tabelaFoot" style="font-weight: 700; background: #f0f4f8; border-top: 2px solid #dee2e6;">
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Mensagem vazia -->
  <div class="text-center text-muted py-5" id="msgVazio">
    <i class="bi bi-arrow-left-right" style="font-size: 2.5rem; opacity: 0.3;"></i>
    <p class="mt-2">Selecione dois períodos e clique em <strong>Comparar</strong> para visualizar a análise.</p>
  </div>

</div>

<!-- Modal Detalhe Lançamentos -->
<div class="modal fade" id="modalDetalheComp" tabindex="-1" style="z-index: 1065;">
  <div class="modal-dialog modal-lg" style="max-width: 90vw;">
    <div class="modal-content" style="max-height: 90vh;">
      <div class="modal-header bg-white py-3" style="border-bottom: 1px solid #dee2e6;">
        <h5 class="modal-title text-dark"><i class="bi bi-list-ul me-2"></i> Detalhe dos Lançamentos</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0" style="flex:1; overflow:hidden; display:flex; flex-direction:column;">
        <div class="p-3 border-bottom" style="background:#f8f9fa;">
          <div class="small text-muted mb-2" id="detalheCompContaInfo"></div>
          <div class="row g-2 align-items-end">
            <div class="col-md-3">
              <label class="small fw-semibold">Data Inicial</label>
              <input type="date" class="form-control form-control-sm" id="detalheCompDataIni">
            </div>
            <div class="col-md-3">
              <label class="small fw-semibold">Data Final</label>
              <input type="date" class="form-control form-control-sm" id="detalheCompDataFim">
            </div>
            <div class="col-md-2">
              <button class="btn btn-primary btn-sm" id="btnFiltrarDetalheComp"><i class="bi bi-search"></i> Filtrar</button>
            </div>
          </div>
        </div>
        <div class="p-2 border-bottom" style="background:#ffffff;">
          <div class="small" id="detalheCompTotaisResumo"></div>
        </div>
        <div style="flex:1; overflow-y:auto;">
          <table class="table table-hover align-middle mb-0" style="font-size:0.95rem;">
            <thead style="position:sticky; top:0; background:#f8f9fa; z-index:100;">
              <tr>
                <th>Conta</th>
                <th style="width:120px;">Data</th>
                <th>Descrição</th>
                <th style="width:90px;" class="text-center">Tipo</th>
                <th style="width:140px;" class="text-end">Valor</th>
              </tr>
            </thead>
            <tbody id="tbDetalheComp"></tbody>
            <tfoot style="background:#f8f9fa; position:sticky; bottom:0;">
              <tr>
                <th colspan="4" class="text-end">Total</th>
                <th class="text-end" id="detalheCompTotalValor">0,00</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<style>
.comp-numerico-btn {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #475569;
    background: #fff;
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
    font-family: monospace;
}
.comp-numerico-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.comp-numerico-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
</style>
<script>
(function() {
  const SIMBOLO = <?= json_encode($moeda['simbolo']) ?>;
  const MOEDA_FORMATO = <?= json_encode($moeda['formato'] ?? 'decimal') ?>;
  const MESES_NOME = ['','Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
  const TRI_MESES = {1:[1,2,3], 2:[4,5,6], 3:[7,8,9], 4:[10,11,12]};
  const TRI_NOME = {1:'T1 (Jan-Mar)', 2:'T2 (Abr-Jun)', 3:'T3 (Jul-Set)', 4:'T4 (Out-Dez)'};
  const SEM_MESES = {1:[1,2,3,4,5,6], 2:[7,8,9,10,11,12]};
  const SEM_NOME = {1:'S1 (Jan-Jun)', 2:'S2 (Jul-Dez)'};
  const MESES_NOME_CURTO = ['','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

  let dadosAtuais = null;
  let sortCol = 'conta';
  let sortAsc = true;
  let expandedNodes = new Set();
  let viewMode = 'arvore'; // 'arvore' ou 'lista'
  let detalheCompAtual = null;
  let modalDetalheComp = null;
  let exibicaoValor = 'compacta'; // 'compacta' ou 'completa'

  // ============================
  // GRANULARIDADE
  // ============================
  document.querySelectorAll('input[name="granularidade"]').forEach(radio => {
    radio.addEventListener('change', function() {
      const v = this.value;
      document.querySelectorAll('.filtro-mes').forEach(el => el.style.display = v === 'mes' ? '' : 'none');
      document.querySelectorAll('.filtro-tri').forEach(el => el.style.display = v === 'trimestre' ? '' : 'none');
      document.querySelectorAll('.filtro-sem').forEach(el => el.style.display = v === 'semestre' ? '' : 'none');
    });
  });

  // ============================
  // ATALHOS
  // ============================
  document.querySelectorAll('[data-atalho]').forEach(btn => {
    btn.addEventListener('click', function() {
      const tipo = this.dataset.atalho;
      const anoAtual = <?= $anoAtual ?>;
      const mesAtual = <?= $mesAtual ?>;

      if (tipo === 'mes-anterior') {
        document.getElementById('granMes').checked = true;
        document.getElementById('granMes').dispatchEvent(new Event('change'));
        document.getElementById('anoA').value = anoAtual - 1;
        document.querySelectorAll('.mesA-check').forEach(cb => cb.checked = (parseInt(cb.value) === mesAtual));
        document.getElementById('anoB').value = anoAtual;
        document.querySelectorAll('.mesB-check').forEach(cb => cb.checked = (parseInt(cb.value) === mesAtual));
      } else if (tipo === 'tri-anterior') {
        const triAtual = Math.ceil(mesAtual / 3);
        document.getElementById('granTri').checked = true;
        document.getElementById('granTri').dispatchEvent(new Event('change'));
        document.getElementById('anoA').value = anoAtual - 1;
        document.getElementById('triA').value = triAtual;
        document.getElementById('anoB').value = anoAtual;
        document.getElementById('triB').value = triAtual;
      } else if (tipo === 'ytd') {
        // YTD: meses 1 até mesAtual de cada ano
        document.getElementById('granMes').checked = true;
        document.getElementById('granMes').dispatchEvent(new Event('change'));
        document.getElementById('anoA').value = anoAtual - 1;
        document.getElementById('anoB').value = anoAtual;
        document.querySelectorAll('.mesA-check').forEach(cb => cb.checked = (parseInt(cb.value) <= mesAtual));
        document.querySelectorAll('.mesB-check').forEach(cb => cb.checked = (parseInt(cb.value) <= mesAtual));
      }

      executarComparacao(tipo === 'ytd' ? 'ytd' : null);
    });
  });

  // ============================
  // COMPARAR
  // ============================
  document.getElementById('btnComparar').addEventListener('click', () => executarComparacao());

  function getMesesSelecionados(modoOverride) {
    const gran = document.querySelector('input[name="granularidade"]:checked').value;

    if (modoOverride === 'ytd') {
      const mesAtual = <?= $mesAtual ?>;
      const meses = [];
      for (let i = 1; i <= mesAtual; i++) meses.push(i);
      return { mesesA: meses, mesesB: [...meses] };
    }

    if (gran === 'mes') {
      return {
        mesesA: [...document.querySelectorAll('.mesA-check:checked')].map(cb => parseInt(cb.value)),
        mesesB: [...document.querySelectorAll('.mesB-check:checked')].map(cb => parseInt(cb.value)),
      };
    } else if (gran === 'trimestre') {
      return {
        mesesA: TRI_MESES[parseInt(document.getElementById('triA').value)],
        mesesB: TRI_MESES[parseInt(document.getElementById('triB').value)],
      };
    } else if (gran === 'semestre') {
      return {
        mesesA: SEM_MESES[parseInt(document.getElementById('semA').value)],
        mesesB: SEM_MESES[parseInt(document.getElementById('semB').value)],
      };
    } else { // ano
      return {
        mesesA: [1,2,3,4,5,6,7,8,9,10,11,12],
        mesesB: [1,2,3,4,5,6,7,8,9,10,11,12],
      };
    }
  }

  function getLabelPeriodo(ano, meses) {
    if (meses.length === 12) return `Ano ${ano}`;
    if (meses.length === 6) {
      const sem = Object.entries(SEM_MESES).find(([k, v]) => JSON.stringify(v) === JSON.stringify(meses));
      if (sem) return `${SEM_NOME[sem[0]]} ${ano}`;
    }
    if (meses.length === 3) {
      const tri = Object.entries(TRI_MESES).find(([k, v]) => JSON.stringify(v) === JSON.stringify(meses));
      if (tri) return `${TRI_NOME[tri[0]]} ${ano}`;
    }
    if (meses.length === 1) return `${MESES_NOME[meses[0]]}/${ano}`;
    // Multi-meses (YTD ou custom)
    return `${MESES_NOME[meses[0]]}-${MESES_NOME[meses[meses.length-1]]}/${ano}`;
  }

  async function executarComparacao(modoOverride) {
    const anoA = document.getElementById('anoA').value;
    const anoB = document.getElementById('anoB').value;
    const { mesesA, mesesB } = getMesesSelecionados(modoOverride || null);
    const cc = document.getElementById('filtroCentro').value;
    const tpmov = document.getElementById('filtroTpMov').value;

    const params = new URLSearchParams();
    params.set('m', 'comparativo_realizado_actions');
    params.set('ajax', 'comparar_periodos');
    params.set('ano_a', anoA);
    params.set('ano_b', anoB);
    mesesA.forEach(m => params.append('meses_a[]', m));
    mesesB.forEach(m => params.append('meses_b[]', m));
    if (cc) params.set('cdcentrocusto', cc);
    if (tpmov) params.set('tpmovimento', tpmov);

    document.getElementById('btnComparar').disabled = true;
    document.getElementById('btnComparar').innerHTML = '<span class="spinner-border spinner-border-sm"></span> Comparando...';

    try {
      const resp = await fetch('?' + params.toString());
      const data = await resp.json();

      if (!data.ok) {
        alert(data.msg || 'Erro ao comparar períodos.');
        return;
      }

      // Labels
      const labelA = getLabelPeriodo(anoA, mesesA);
      const labelB = getLabelPeriodo(anoB, mesesB);

      dadosAtuais = { ...data, labelA, labelB, anoA, anoB, mesesA, mesesB };
      expandedNodes = new Set();
      sortCol = 'conta';
      sortAsc = true;

      renderKPIs(data.totais, labelA, labelB);
      renderTabela(data.dados, data.totais, labelA, labelB);

      document.getElementById('kpiContainer').style.display = '';
      document.getElementById('ordenacaoContainer').style.display = '';
      document.getElementById('tabelaContainer').style.display = '';
      document.getElementById('msgVazio').style.display = 'none';
      document.getElementById('btnExportCSV').disabled = false;
      document.getElementById('filtroConta').disabled = false;

    } catch (e) {
      alert('Erro de comunicação: ' + e.message);
    } finally {
      document.getElementById('btnComparar').disabled = false;
      document.getElementById('btnComparar').innerHTML = '<i class="bi bi-arrow-left-right"></i> Comparar';
    }
  }

  // ============================
  // FORMATAÇÃO
  // ============================
  function fmtNumCompleto(abs) {
    return abs.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  function fmtNumCompacto(abs) {
    const isInteiro = (MOEDA_FORMATO === 'inteiro');
    if (abs >= 1e9) return (abs / 1e9).toFixed(3).replace('.', ',') + (isInteiro ? 'MM' : 'B');
    if (abs >= 1e6) return (abs / 1e6).toFixed(3).replace('.', ',') + 'M';
    if (abs >= 1e3) return (abs / 1e3).toFixed(2).replace('.', ',') + 'K';
    return abs.toFixed(isInteiro ? 0 : 2).replace('.', ',');
  }

  function fmtNum(abs) {
    return exibicaoValor === 'compacta' ? fmtNumCompacto(abs) : fmtNumCompleto(abs);
  }

  function fmtValor(v) {
    const abs = Math.abs(v);
    const tipo = v >= 0 ? 'C' : 'D';
    return `${SIMBOLO} ${fmtNum(abs)} (${tipo})`;
  }

  function fmtValorComCor(v) {
    const texto = fmtValor(v);
    const cor = v >= 0 ? 'var(--bs-success, #10b981)' : 'var(--bs-danger, #ef4444)';
    return `<span style="color:${cor}">${texto}</span>`;
  }

  function fmtPct(v) {
    return v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '%';
  }

  // nat='D' inverte sinal/cor para despesas: aumento = (+) vermelho, redução = (-) verde
  function varDisplay(v, nat) {
    return (nat === 'D') ? -v : v;
  }

  function fmtVariacao(v, nat) {
    const d = varDisplay(v, nat);
    const sinal = d > 0 ? '+' : '';
    const abs = Math.abs(d);
    return `${sinal}${SIMBOLO} ${fmtNum(abs)}`;
  }

  function fmtVariacaoPct(v, nat) {
    const d = varDisplay(v, nat);
    const sinal = d > 0 ? '+' : '';
    const icon = d > 0 ? '↑' : d < 0 ? '↓' : '';
    return `${sinal}${d.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}% ${icon}`;
  }

  function corVariacao(v, nat) {
    const d = varDisplay(v, nat);
    if (nat === 'D') {
      // Despesa: diminuição (-) = verde, aumento (+) = vermelho
      if (d > 0) return 'var(--bs-danger, #ef4444)';
      if (d < 0) return 'var(--bs-success, #10b981)';
    } else {
      if (d > 0) return 'var(--bs-success, #10b981)';
      if (d < 0) return 'var(--bs-danger, #ef4444)';
    }
    return 'var(--bs-secondary, #64748b)';
  }

  // ============================
  // KPIs
  // ============================
  function badgeResultado(v) {
    if (v >= 0) return ' <span class="badge bg-success" style="font-size:0.7rem; vertical-align:middle;">Lucro</span>';
    return ' <span class="badge bg-danger" style="font-size:0.7rem; vertical-align:middle;">Prejuízo</span>';
  }

  function renderKPIs(totais, labelA, labelB) {
    document.getElementById('kpiLabelA').textContent = labelA;
    document.getElementById('kpiValorA').innerHTML = fmtValorComCor(totais.total_a) + badgeResultado(totais.total_a);
    document.getElementById('kpiLabelB').textContent = labelB;
    document.getElementById('kpiValorB').innerHTML = fmtValorComCor(totais.total_b) + badgeResultado(totais.total_b);

    const varEl = document.getElementById('kpiVariacao');
    varEl.innerHTML = `<span style="color:${corVariacao(totais.variacao_abs)}">${fmtVariacao(totais.variacao_abs)}</span>`;
    const varPctEl = document.getElementById('kpiVariacaoPct');
    varPctEl.innerHTML = `<span style="color:${corVariacao(totais.variacao_pct)}">${fmtVariacaoPct(totais.variacao_pct)}</span>`;
  }

  // ============================
  // TABELA
  // ============================
  function buildTree(dados) {
    const map = {};
    const roots = [];

    // Index por cdconta
    dados.forEach(d => { map[d.cdconta] = { ...d, children: [] }; });

    // Montar árvore
    dados.forEach(d => {
      const node = map[d.cdconta];
      if (d.cdcontapai && map[d.cdcontapai]) {
        map[d.cdcontapai].children.push(node);
      } else {
        roots.push(node);
      }
    });

    return { roots, map };
  }

  function flattenTree(nodes, level, filtro) {
    let result = [];
    for (const node of nodes) {
      const matchFiltro = !filtro ||
        node.cdconta.toLowerCase().includes(filtro) ||
        node.dsconta.toLowerCase().includes(filtro);

      const childrenFlat = node.children.length > 0
        ? flattenTree(node.children, level + 1, filtro)
        : [];

      // Mostrar se match ou se algum filho faz match
      if (matchFiltro || childrenFlat.length > 0) {
        const expanded = expandedNodes.has(node.cdconta);
        result.push({ ...node, level, hasChildren: node.children.length > 0, expanded });
        if (expanded || filtro) {
          result = result.concat(childrenFlat);
        }
      }
    }
    return result;
  }

  function sortDados(dados) {
    const sorted = [...dados];
    const dir = sortAsc ? 1 : -1;

    sorted.sort((a, b) => {
      switch (sortCol) {
        case 'conta':       return dir * a.cdconta.localeCompare(b.cdconta);
        case 'valor_a':     return dir * (a.valor_a - b.valor_a);
        case 'valor_b':     return dir * (a.valor_b - b.valor_b);
        case 'pct_a':       return dir * (a.pct_a - b.pct_a);
        case 'pct_b':       return dir * (a.pct_b - b.pct_b);
        case 'variacao_abs':return dir * (a.variacao_abs - b.variacao_abs);
        case 'variacao_pct':return dir * (a.variacao_pct - b.variacao_pct);
        default:            return 0;
      }
    });
    return sorted;
  }

  // Helper: soma meses selecionados de um objeto {mesref: valor}
  function sumMeses(mesesObj, months) {
    if (!mesesObj) return 0;
    return months.reduce((acc, m) => acc + (parseFloat(mesesObj[m]) || 0), 0);
  }

  function calcVarPct(va, vb) {
    if (va !== 0) return ((vb - va) / Math.abs(va)) * 100;
    return vb !== 0 ? 100 : 0;
  }

  // Retorna sub-períodos para detalhamento (trimestre → meses, ano → trimestres)
  function getColumnGroups() {
    if (!dadosAtuais) return [];
    const gran = document.querySelector('input[name="granularidade"]:checked').value;
    if (gran === 'mes') return [];
    if (gran === 'trimestre') {
      return dadosAtuais.mesesA.map(m => ({ label: MESES_NOME_CURTO[m], meses: [m] }));
    }
    // ano: trimestres
    return [
      { label: 'T1 (Jan-Mar)', meses: [1,2,3] },
      { label: 'T2 (Abr-Jun)', meses: [4,5,6] },
      { label: 'T3 (Jul-Set)', meses: [7,8,9] },
      { label: 'T4 (Out-Dez)', meses: [10,11,12] },
    ];
  }

  function renderTabela(dados, totais, labelA, labelB) {
    const filtro = document.getElementById('filtroConta').value.toLowerCase().trim();
    const sorted = sortDados(dados);
    const groups = getColumnGroups();
    const isDetalhado = groups.length > 0;

    // --- Flat rows ---
    let flat;
    if (viewMode === 'lista') {
      // Modo lista: apenas contas analíticas (fltipo='A'), flat, sem hierarquia
      flat = sorted.filter(row => {
        if (row.fltipo !== 'A') return false;
        if (!filtro) return true;
        return row.cdconta.toLowerCase().includes(filtro) || row.dsconta.toLowerCase().includes(filtro);
      }).map(row => ({ ...row, level: 0, hasChildren: false, expanded: false }));
    } else {
      const { roots } = buildTree(sorted);
      flat = flattenTree(roots, 0, filtro);
    }

    // --- Recalcular totais a partir dos itens filtrados ---
    let useTotais = totais;
    if (filtro) {
      // Somar apenas as contas analíticas presentes no flat
      const filteredLeafs = flat.filter(r => r.fltipo === 'A');
      let ft_a = 0, ft_b = 0;
      const ft_meses_a = {}, ft_meses_b = {};
      filteredLeafs.forEach(r => {
        ft_a += r.valor_a;
        ft_b += r.valor_b;
        if (r.meses_a) Object.entries(r.meses_a).forEach(([m, v]) => { ft_meses_a[m] = (ft_meses_a[m] || 0) + (parseFloat(v) || 0); });
        if (r.meses_b) Object.entries(r.meses_b).forEach(([m, v]) => { ft_meses_b[m] = (ft_meses_b[m] || 0) + (parseFloat(v) || 0); });
      });
      const ft_var_abs = ft_b - ft_a;
      const ft_var_pct = ft_a !== 0 ? ((ft_b - ft_a) / Math.abs(ft_a)) * 100 : (ft_b !== 0 ? 100 : 0);
      useTotais = {
        total_a: ft_a, total_b: ft_b,
        variacao_abs: ft_var_abs, variacao_pct: ft_var_pct,
        meses_a: ft_meses_a, meses_b: ft_meses_b
      };
    }

    // Atualizar KPIs com totais (filtrados ou originais)
    renderKPIs(useTotais, labelA, labelB);

    // --- Headers ---
    const thead = document.getElementById('tabelaHead');
    thead.innerHTML = '';

    if (isDetalhado) {
      // Duas linhas: grupo + detalhe
      const tr1 = document.createElement('tr');
      tr1.innerHTML = '<th rowspan="2" style="padding:10px 14px; min-width:250px; position:sticky; left:0; background:#f8f9fa; z-index:11;">Conta</th>';
      groups.forEach(g => {
        tr1.innerHTML += `<th colspan="3" class="text-center" style="padding:8px 4px; border-left:2px solid #dee2e6;">${escHtml(g.label)}</th>`;
      });
      tr1.innerHTML += '<th colspan="3" class="text-center" style="padding:8px 4px; border-left:2px solid #495057; background:#e9ecef;">Total</th>';
      thead.appendChild(tr1);

      const tr2 = document.createElement('tr');
      for (let i = 0; i <= groups.length; i++) {
        const isTotal = i === groups.length;
        const bl = isTotal ? 'border-left:2px solid #495057;' : 'border-left:2px solid #dee2e6;';
        const bgH = isTotal ? ' background:#e9ecef;' : '';
        tr2.innerHTML += `<th class="text-end" style="padding:6px 6px; min-width:110px; font-size:0.8rem; ${bl}${bgH}">${escHtml(labelA)}</th>`;
        tr2.innerHTML += `<th class="text-end" style="padding:6px 6px; min-width:110px; font-size:0.8rem;${bgH}">${escHtml(labelB)}</th>`;
        tr2.innerHTML += `<th class="text-end" style="padding:6px 6px; min-width:80px; font-size:0.8rem;${bgH}">Δ%</th>`;
      }
      thead.appendChild(tr2);
    } else {
      // Cabeçalho simples (mês)
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <th style="padding:12px 14px; min-width:250px; cursor:pointer;" data-col="conta">Conta <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:130px; cursor:pointer;" data-col="valor_a">${escHtml(labelA)} <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:80px; cursor:pointer;" data-col="pct_a">% <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:130px; cursor:pointer;" data-col="valor_b">${escHtml(labelB)} <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:80px; cursor:pointer;" data-col="pct_b">% <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:130px; cursor:pointer;" data-col="variacao_abs">Variação (${SIMBOLO}) <i class="bi bi-chevron-expand text-muted"></i></th>
        <th class="text-end" style="padding:12px 10px; min-width:100px; cursor:pointer;" data-col="variacao_pct">Variação (%) <i class="bi bi-chevron-expand text-muted"></i></th>
      `;
      thead.appendChild(tr);
      // Bind header click sorting (simples)
      tr.querySelectorAll('th[data-col]').forEach(th => {
        th.addEventListener('click', function() {
          const col = this.dataset.col;
          if (sortCol === col) { sortAsc = !sortAsc; } else { sortCol = col; sortAsc = col === 'conta'; }
          updateSortButtons();
          if (dadosAtuais) renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
        });
      });
    }

    // --- Body ---
    const tbody = document.getElementById('tabelaBody');
    tbody.innerHTML = '';
    const colCount = isDetalhado ? 1 + (groups.length + 1) * 3 : 7;

    if (flat.length === 0) {
      tbody.innerHTML = `<tr><td colspan="${colCount}" class="text-center py-4 text-muted">Nenhuma conta encontrada.</td></tr>`;
      document.getElementById('tabelaFoot').innerHTML = '';
      return;
    }

    flat.forEach(row => {
      const tr = document.createElement('tr');
      const isSintetica = row.fltipo === 'S';
      const indent = row.level * 20;
      const fw = isSintetica ? 'fw-semibold' : '';
      const bg = isSintetica && row.level === 0 ? 'background:#f8fafc;' : '';

      const dscontaAttr = (row.dsconta || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
      const lupaHtml = `<span class="ms-1 text-primary detalhe-comp-btn" data-cdconta="${row.cdconta}" data-cdcontacontabil="${row.cdcontacontabil || ''}" data-dsconta="${dscontaAttr}" data-fltipo="${row.fltipo}" style="cursor:pointer;" title="Ver lançamentos"><i class="bi bi-search" style="font-size:0.8rem;"></i></span>`;

      let contaHtml = '';
      if (row.hasChildren) {
        const icon = row.expanded ? 'bi-dash-square' : 'bi-plus-square';
        contaHtml = `<span style="margin-left:${indent}px;"><a href="#" class="text-decoration-none toggle-conta" data-cdconta="${row.cdconta}"><i class="bi ${icon}"></i></a> <span class="${isSintetica ? 'fw-bold' : ''}">${escHtml(row.dsconta)} (${escHtml(row.cdconta)})</span>${lupaHtml}</span>`;
      } else {
        contaHtml = `<span style="margin-left:${indent + 20}px;" class="${isSintetica ? 'fw-bold' : ''}">${escHtml(row.dsconta)} (${escHtml(row.cdconta)})${lupaHtml}</span>`;
      }

      tr.style.cssText = bg;

      if (isDetalhado) {
        let cells = `<td style="padding:10px 14px; white-space:nowrap; position:sticky; left:0; background:${bg || '#fff'}; z-index:1;">${contaHtml}</td>`;
        const nat = row.flnatureza;
        groups.forEach(g => {
          const va = sumMeses(row.meses_a, g.meses);
          const vb = sumMeses(row.meses_b, g.meses);
          const vp = calcVarPct(va, vb);
          cells += `<td class="text-end ${fw}" style="padding:8px 6px; border-left:2px solid #dee2e6;">${fmtValorComCor(va)}</td>`;
          cells += `<td class="text-end ${fw}" style="padding:8px 6px;">${fmtValorComCor(vb)}</td>`;
          cells += `<td class="text-end ${fw}" style="padding:8px 6px; color:${corVariacao(vp, nat)}">${fmtVariacaoPct(vp, nat)}</td>`;
        });
        // Total
        cells += `<td class="text-end ${fw}" style="padding:8px 6px; border-left:2px solid #495057; background:#f0f4f8;">${fmtValorComCor(row.valor_a)}</td>`;
        cells += `<td class="text-end ${fw}" style="padding:8px 6px; background:#f0f4f8;">${fmtValorComCor(row.valor_b)}</td>`;
        cells += `<td class="text-end ${fw}" style="padding:8px 6px; background:#f0f4f8; color:${corVariacao(row.variacao_pct, nat)}">${fmtVariacaoPct(row.variacao_pct, nat)}</td>`;
        tr.innerHTML = cells;
      } else {
        tr.innerHTML = `
          <td style="padding:10px 14px;">${contaHtml}</td>
          <td class="text-end ${fw}" style="padding:10px;">${fmtValorComCor(row.valor_a)}</td>
          <td class="text-end text-muted" style="padding:10px; font-size:0.85rem;">${fmtPct(row.pct_a)}</td>
          <td class="text-end ${fw}" style="padding:10px;">${fmtValorComCor(row.valor_b)}</td>
          <td class="text-end text-muted" style="padding:10px; font-size:0.85rem;">${fmtPct(row.pct_b)}</td>
          <td class="text-end ${fw}" style="padding:10px; color:${corVariacao(row.variacao_abs, row.flnatureza)}">${fmtVariacao(row.variacao_abs, row.flnatureza)}</td>
          <td class="text-end ${fw}" style="padding:10px; color:${corVariacao(row.variacao_pct, row.flnatureza)}">${fmtVariacaoPct(row.variacao_pct, row.flnatureza)}</td>
        `;
      }
      tbody.appendChild(tr);
    });

    // --- Footer ---
    const tfoot = document.getElementById('tabelaFoot');
    if (isDetalhado) {
      let cells = '<td style="padding:12px 14px; position:sticky; left:0; background:#e2e6ea; z-index:1;">TOTAL GERAL</td>';
      groups.forEach(g => {
        const va = sumMeses(useTotais.meses_a, g.meses);
        const vb = sumMeses(useTotais.meses_b, g.meses);
        const vp = calcVarPct(va, vb);
        cells += `<td class="text-end" style="padding:12px 6px; border-left:2px solid #dee2e6; background:#e2e6ea;">${fmtValorComCor(va)}</td>`;
        cells += `<td class="text-end" style="padding:12px 6px; background:#e2e6ea;">${fmtValorComCor(vb)}</td>`;
        cells += `<td class="text-end" style="padding:12px 6px; background:#e2e6ea; color:${corVariacao(vp)}">${fmtVariacaoPct(vp)}</td>`;
      });
      cells += `<td class="text-end" style="padding:12px 6px; border-left:2px solid #495057; background:#d5dae0;">${fmtValorComCor(useTotais.total_a)}</td>`;
      cells += `<td class="text-end" style="padding:12px 6px; background:#d5dae0;">${fmtValorComCor(useTotais.total_b)}</td>`;
      cells += `<td class="text-end" style="padding:12px 6px; background:#d5dae0; color:${corVariacao(useTotais.variacao_pct)}">${fmtVariacaoPct(useTotais.variacao_pct)}</td>`;
      tfoot.innerHTML = `<tr>${cells}</tr>`;
    } else {
      tfoot.innerHTML = `
        <tr>
          <td style="padding:12px 14px;">TOTAL GERAL</td>
          <td class="text-end" style="padding:12px 10px;">${fmtValorComCor(useTotais.total_a)}</td>
          <td class="text-end" style="padding:12px 10px;"></td>
          <td class="text-end" style="padding:12px 10px;">${fmtValorComCor(useTotais.total_b)}</td>
          <td class="text-end" style="padding:12px 10px;"></td>
          <td class="text-end" style="padding:12px 10px; color:${corVariacao(useTotais.variacao_abs)}">${fmtVariacao(useTotais.variacao_abs)}</td>
          <td class="text-end" style="padding:12px 10px; color:${corVariacao(useTotais.variacao_pct)}">${fmtVariacaoPct(useTotais.variacao_pct)}</td>
        </tr>
      `;
    }

    // Bind toggle
    tbody.querySelectorAll('.toggle-conta').forEach(a => {
      a.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const cd = this.dataset.cdconta;
        if (expandedNodes.has(cd)) expandedNodes.delete(cd);
        else expandedNodes.add(cd);
        renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
      });
    });

    // Bind detalhe (lupa)
    tbody.querySelectorAll('.detalhe-comp-btn').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        abrirDetalheComp(
          this.dataset.cdconta,
          this.dataset.cdcontacontabil,
          this.dataset.dsconta,
          this.dataset.fltipo === 'S'
        );
      });
    });
  }

  function escHtml(s) {
    const div = document.createElement('div');
    div.textContent = s;
    return div.innerHTML;
  }

  // Botões de ordenação rápida
  document.querySelectorAll('[data-sort]').forEach(btn => {
    btn.addEventListener('click', function() {
      const tipo = this.dataset.sort;
      if (tipo === 'conta')       { sortCol = 'conta'; sortAsc = true; }
      else if (tipo === 'melhor') { sortCol = 'variacao_pct'; sortAsc = false; }
      else if (tipo === 'pior')   { sortCol = 'variacao_pct'; sortAsc = true; }
      else if (tipo === 'maior-valor') { sortCol = 'valor_a'; sortAsc = false; }

      // Auto-switch para lista ao ordenar por desempenho/valor
      if (tipo !== 'conta' && viewMode === 'arvore') {
        viewMode = 'lista';
        document.getElementById('viewLista').checked = true;
      }

      updateSortButtons();
      if (dadosAtuais) renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
    });
  });

  // Toggle de modo de visualização (Árvore / Lista)
  document.querySelectorAll('input[name="viewMode"]').forEach(radio => {
    radio.addEventListener('change', function() {
      viewMode = this.value;
      if (dadosAtuais) renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
    });
  });

  function updateSortButtons() {
    document.querySelectorAll('[data-sort]').forEach(b => b.classList.remove('active'));
    const active = {
      'conta': 'conta',
      'variacao_pct': sortAsc ? 'pior' : 'melhor',
      'valor_a': 'maior-valor',
    }[sortCol];
    if (active) {
      const btn = document.querySelector(`[data-sort="${active}"]`);
      if (btn) btn.classList.add('active');
    }
  }

  let viewModeBeforeSearch = 'arvore'; // guarda modo antes da pesquisa

  // ============================
  // FILTRO DE CONTA (tempo real)
  // ============================
  let filtroTimeout;
  document.getElementById('filtroConta').addEventListener('input', function() {
    clearTimeout(filtroTimeout);
    const val = this.value.trim();
    filtroTimeout = setTimeout(() => {
      if (!dadosAtuais) return;
      if (val.length > 0 && viewMode === 'arvore') {
        viewModeBeforeSearch = 'arvore';
        viewMode = 'lista';
        document.getElementById('viewLista').checked = true;
      } else if (val.length === 0 && viewModeBeforeSearch === 'arvore') {
        viewMode = 'arvore';
        document.getElementById('viewArvore').checked = true;
      }
      renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
    }, 300);
  });

  // ============================
  // EXPORT CSV
  // ============================
  document.getElementById('btnExportCSV').addEventListener('click', function() {
    if (!dadosAtuais) return;

    const params = new URLSearchParams();
    params.set('m', 'comparativo_realizado_actions');
    params.set('ajax', 'export_comparativo_csv');
    params.set('ano_a', dadosAtuais.anoA);
    params.set('ano_b', dadosAtuais.anoB);
    dadosAtuais.mesesA.forEach(m => params.append('meses_a[]', m));
    dadosAtuais.mesesB.forEach(m => params.append('meses_b[]', m));
    params.set('label_a', dadosAtuais.labelA);
    params.set('label_b', dadosAtuais.labelB);

    const cc = document.getElementById('filtroCentro').value;
    if (cc) params.set('cdcentrocusto', cc);

    const tpmov = document.getElementById('filtroTpMov').value;
    if (tpmov) params.set('tpmovimento', tpmov);

    window.location.href = '?' + params.toString();
  });

  // ============================
  // DETALHE DE LANÇAMENTOS (drill-down)
  // ============================
  function getModalDetalheComp() {
    if (!modalDetalheComp) {
      modalDetalheComp = new bootstrap.Modal(document.getElementById('modalDetalheComp'));
    }
    return modalDetalheComp;
  }

  document.getElementById('btnFiltrarDetalheComp').addEventListener('click', () => carregarDetalheComp());

  function abrirDetalheComp(cdconta, cdcontacontabil, dsconta, ehSintetica) {
    if (!dadosAtuais) return;
    detalheCompAtual = { cdconta, cdcontacontabil, dsconta, ehSintetica };

    // Período default: apenas período B da granularidade selecionada
    const anoB = parseInt(dadosAtuais.anoB);
    const mesesB = dadosAtuais.mesesB.sort((a,b) => a-b);
    const minMesB = mesesB[0];
    const maxMesB = mesesB[mesesB.length - 1];

    const dtIni = `${anoB}-${String(minMesB).padStart(2,'0')}-01`;
    const lastDay = new Date(anoB, maxMesB, 0).getDate();
    const dtFim = `${anoB}-${String(maxMesB).padStart(2,'0')}-${String(lastDay).padStart(2,'0')}`;

    document.getElementById('detalheCompDataIni').value = dtIni;
    document.getElementById('detalheCompDataFim').value = dtFim;
    document.getElementById('detalheCompContaInfo').innerHTML =
      `<strong>Conta:</strong> ${escHtml(cdconta)} - ${escHtml(dsconta)}`;
    document.getElementById('tbDetalheComp').innerHTML =
      '<tr><td colspan="5" class="text-center py-3 text-muted">Carregando...</td></tr>';
    document.getElementById('detalheCompTotalValor').textContent = '0,00';
    document.getElementById('detalheCompTotaisResumo').innerHTML = '';

    getModalDetalheComp().show();
    carregarDetalheComp();
  }

  async function carregarDetalheComp() {
    if (!detalheCompAtual) return;
    const { cdconta, cdcontacontabil, ehSintetica } = detalheCompAtual;
    const dtIni = document.getElementById('detalheCompDataIni').value;
    const dtFim = document.getElementById('detalheCompDataFim').value;

    const params = new URLSearchParams();
    params.set('m', 'comparativo_realizado_actions');
    params.set('ajax', 'detalhe_lancamentos');
    params.set('cdconta', cdconta);
    if (cdcontacontabil && !ehSintetica) params.set('cdcontacontabil', cdcontacontabil);
    if (dtIni) params.set('dtinicio', dtIni);
    if (dtFim) params.set('dtfim', dtFim);

    const cc = document.getElementById('filtroCentro').value;
    if (cc) params.set('cdcentrocusto', cc);
    const tpmov = document.getElementById('filtroTpMov').value;
    if (tpmov) params.set('tpmovimento', tpmov);

    try {
      const resp = await fetch('?' + params.toString());
      const data = await resp.json();
      if (!data.ok) {
        document.getElementById('tbDetalheComp').innerHTML =
          `<tr><td colspan="5" class="text-center py-3 text-danger">${escHtml(data.msg || 'Erro')}</td></tr>`;
        return;
      }
      renderDetalheComp(data.lancamentos, ehSintetica, data.truncado);
    } catch (e) {
      document.getElementById('tbDetalheComp').innerHTML =
        `<tr><td colspan="5" class="text-center py-3 text-danger">Erro de comunicação: ${escHtml(e.message)}</td></tr>`;
    }
  }

  function renderDetalheComp(lancamentos, ehSintetica, truncado) {
    const tbody = document.getElementById('tbDetalheComp');
    tbody.innerHTML = '';

    if (truncado) {
      const trW = document.createElement('tr');
      trW.innerHTML = '<td colspan="5" class="text-center py-2 text-warning small" style="background:#fff3cd;"><i class="bi bi-exclamation-triangle me-1"></i>Exibindo os primeiros 5.000 lançamentos. Use o filtro de datas para refinar.</td>';
      tbody.appendChild(trW);
    }

    if (!lancamentos || lancamentos.length === 0) {
      tbody.innerHTML = '<tr><td colspan="5" class="text-center py-3 text-muted">Nenhum lançamento encontrado no período.</td></tr>';
      document.getElementById('detalheCompTotalValor').textContent = '0,00';
      document.getElementById('detalheCompTotaisResumo').innerHTML = '';
      return;
    }

    let totalDeb = 0, totalCred = 0;

    if (ehSintetica) {
      // Agrupar por conta filha (padrão realizado)
      const contasMap = {};
      lancamentos.forEach(l => {
        const chave = l.cdplanocontabil || l.cdconta || 'sem_conta';
        if (!contasMap[chave]) {
          contasMap[chave] = {
            cdplanocontabil: l.cdplanocontabil,
            cdconta: l.cdconta,
            dsconta: l.dsconta,
            lancamentos: [],
            totalDeb: 0,
            totalCred: 0
          };
        }
        contasMap[chave].lancamentos.push(l);
        const valor = Number(l.valor || 0);
        if (l.tpmovimento === 'C') {
          contasMap[chave].totalCred += valor;
          totalCred += valor;
        } else if (l.tpmovimento === 'D') {
          contasMap[chave].totalDeb += valor;
          totalDeb += valor;
        }
      });

      const contas = Object.values(contasMap).sort((a, b) => {
        return (a.cdconta || '').localeCompare(b.cdconta || '');
      });

      contas.forEach((conta, idx) => {
        const saldoConta = conta.totalCred - conta.totalDeb;
        const absSaldoConta = Math.abs(saldoConta);
        const naturezaConta = saldoConta === 0 ? '' : (saldoConta > 0 ? ' (C)' : ' (D)');
        const idConta = 'comp_conta_' + (conta.cdplanocontabil || idx);

        // Cabeçalho da conta filha (colapsado por padrão)
        const trCab = document.createElement('tr');
        trCab.style.cssText = 'background: #f8f9fa; font-weight: 600; border-left: 3px solid #6c757d; cursor: pointer;';
        trCab.classList.add('grupo-header');
        trCab.innerHTML = `
          <td colspan="5" style="padding: 12px 16px;">
            <i class="bi bi-plus-square me-2 icone-expandir" style="color: #6c757d;"></i>
            <strong style="color: #212529;">${escHtml(conta.cdconta)}</strong>
            <span style="color: #6c757d;">- ${escHtml(conta.dsconta || '')}</span>
            <span class="float-end">
              <small class="text-muted me-3">D: ${SIMBOLO} ${fmtValorSimples(conta.totalDeb)} | C: ${SIMBOLO} ${fmtValorSimples(conta.totalCred)}</small>
              <span class="${saldoConta > 0 ? 'badge bg-success' : (saldoConta < 0 ? 'badge bg-danger' : 'badge bg-secondary')}">
                ${SIMBOLO} ${fmtValorSimples(absSaldoConta)}${naturezaConta}
              </span>
            </span>
          </td>`;
        trCab.addEventListener('click', function() {
          const icone = this.querySelector('.icone-expandir');
          const expandido = icone.classList.contains('bi-dash-square');
          if (expandido) {
            icone.classList.replace('bi-dash-square', 'bi-plus-square');
            document.querySelectorAll('.' + idConta).forEach(r => r.style.display = 'none');
          } else {
            icone.classList.replace('bi-plus-square', 'bi-dash-square');
            document.querySelectorAll('.' + idConta).forEach(r => r.style.display = '');
          }
        });
        tbody.appendChild(trCab);

        // Lançamentos individuais (ocultos por padrão)
        conta.lancamentos.sort((a, b) => (a.dtmovimento || '').localeCompare(b.dtmovimento || ''));
        conta.lancamentos.forEach(l => {
          const valor = Number(l.valor || 0);
          const classeValor = l.tpmovimento === 'D' ? 'text-danger' : 'text-success';
          const tr = document.createElement('tr');
          tr.className = idConta;
          tr.style.cssText = 'background: #ffffff; display: none; border-bottom: 1px solid #f0f0f0;';
          tr.innerHTML = `
            <td style="padding-left: 40px; color: #6c757d; font-size: 0.9rem;">
              <i class="bi bi-arrow-return-right me-1" style="font-size: 0.75rem; color: #adb5bd;"></i>
              ${escHtml(conta.cdconta)}
            </td>
            <td style="font-size: 0.9rem; color: #495057;">${fmtData(l.dtmovimento)}</td>
            <td style="font-size: 0.9rem; color: #495057;">${escHtml(l.dscomplemento || '')}</td>
            <td class="text-center" style="font-size: 0.9rem;">
              <span class="badge ${l.tpmovimento === 'D' ? 'bg-danger' : 'bg-success'} badge-sm">${l.tpmovimento}</span>
            </td>
            <td class="text-end ${classeValor}" style="font-size: 0.9rem; font-weight: 500;">${fmtValorSimples(valor)}</td>
          `;
          tbody.appendChild(tr);
        });

        // Subtotal da conta (oculto por padrão)
        const trSub = document.createElement('tr');
        trSub.className = idConta;
        trSub.style.cssText = 'background: #f8f9fa; font-weight: 600; border-bottom: 1px solid #dee2e6; border-top: 1px solid #dee2e6; display: none;';
        trSub.innerHTML = `
          <td colspan="4" class="text-end" style="padding: 8px 16px; font-size: 0.9rem; color: #495057;">
            <i class="bi bi-calculator me-1"></i> Subtotal ${escHtml(conta.dsconta || conta.cdconta)}
          </td>
          <td class="text-end ${saldoConta > 0 ? 'text-success' : (saldoConta < 0 ? 'text-danger' : 'text-muted')}" style="padding: 8px 16px; font-size: 0.95rem; font-weight: 600;">
            ${SIMBOLO} ${fmtValorSimples(absSaldoConta)}${naturezaConta}
          </td>`;
        tbody.appendChild(trSub);

        // Espaçamento entre grupos
        if (idx < contas.length - 1) {
          const trSpace = document.createElement('tr');
          trSpace.style.cssText = 'height: 16px; background: #fff;';
          trSpace.innerHTML = '<td colspan="5"></td>';
          tbody.appendChild(trSpace);
        }
      });

    } else {
      // Flat (conta analítica)
      lancamentos.forEach(l => {
        const valor = Number(l.valor || 0);
        if (l.tpmovimento === 'C') totalCred += valor;
        else if (l.tpmovimento === 'D') totalDeb += valor;

        const contaInfo = l.dsconta ? `${escHtml(l.cdconta)} - ${escHtml(l.dsconta)}` : escHtml(l.cdconta || '');
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${contaInfo}</td>
          <td>${fmtData(l.dtmovimento)}</td>
          <td>${escHtml(l.dscomplemento || '')}</td>
          <td class="text-center"><span class="badge ${l.tpmovimento === 'D' ? 'bg-danger' : 'bg-success'}">${l.tpmovimento === 'D' ? 'D' : (l.tpmovimento === 'C' ? 'C' : '')}</span></td>
          <td class="text-end">${fmtValorSimples(valor)}</td>
        `;
        tbody.appendChild(tr);
      });
    }

    const saldo = totalCred - totalDeb;
    const absSaldo = Math.abs(saldo);
    const natureza = saldo === 0 ? '' : (saldo > 0 ? ' (C)' : ' (D)');
    document.getElementById('detalheCompTotalValor').innerHTML =
      `<span style="color:${saldo >= 0 ? 'var(--bs-success)' : 'var(--bs-danger)'}">${SIMBOLO} ${fmtValorSimples(absSaldo)}${natureza}</span>`;
    document.getElementById('detalheCompTotaisResumo').innerHTML =
      `<strong>Débito:</strong> ${SIMBOLO} ${fmtValorSimples(totalDeb)} (D) &nbsp;|&nbsp; ` +
      `<strong>Crédito:</strong> ${SIMBOLO} ${fmtValorSimples(totalCred)} (C) &nbsp;|&nbsp; ` +
      `<strong>Saldo (Crédito − Débito):</strong> ${SIMBOLO} ${fmtValorSimples(absSaldo)}${natureza}`;
  }

  function fmtData(dt) {
    if (!dt) return '-';
    const parts = dt.split('-');
    if (parts.length === 3) return `${parts[2]}/${parts[1]}/${parts[0]}`;
    return dt;
  }

  function fmtValorSimples(v) {
    return fmtNum(Math.abs(v));
  }

  // ============================
  // TOGGLE EXIBIÇÃO VALORES
  // ============================
  document.querySelectorAll('.comp-numerico-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelectorAll('.comp-numerico-btn').forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      exibicaoValor = this.dataset.exibicao;
      if (dadosAtuais) {
        renderKPIs(dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
        renderTabela(dadosAtuais.dados, dadosAtuais.totais, dadosAtuais.labelA, dadosAtuais.labelB);
      }
    });
  });

})();
</script>
