@php
  $serie = $consolidacao['serie_mensal'] ?? collect();
  $regimeAnual = $consolidacao['regime_anual'] ?? ['total' => 0, 'tributos' => []];
  $reformaAnual = $consolidacao['reforma_anual'] ?? ['total_atual' => 0, 'total_reforma' => 0, 'diff' => 0, 'atual' => [], 'reforma' => []];
  $ano = $consolidacao['ano'] ?? substr($sim->mesano, 0, 4);
  $cenario = $consolidacao['cenario_reforma'] ?? null;
  $mesExemplo = $consolidacao['mes_exemplo'] ?? null;
  $projecao = $consolidacao['projecao_transicao'] ?? null;
  $analise = $consolidacao['analise'] ?? [];
  $qualidade = $consolidacao['qualidade_dado'] ?? [];
  $anosCenario = range(config('reforma_tributaria.ano_min', 2026), config('reforma_tributaria.ano_max', 2033));
  $anoSel = (int) ($cenario['ano'] ?? 2026);
  $pct = $reformaAnual['total_atual'] != 0
    ? round(($reformaAnual['diff'] / $reformaAnual['total_atual']) * 100, 2)
    : 0;
  $nomeCliente = optional($sim->pessoa)->razaosocial ?? optional($sim->snapshot)->nome ?? 'Cliente';
  $regimeLabel = ucfirst(str_replace('_', ' ', $sim->regime ?? ''));
  $fmt = fn ($v) => 'R$ ' . number_format((float) $v, 2, ',', '.');
  $fmt0 = fn ($v) => 'R$ ' . number_format((float) $v, 0, ',', '.');
@endphp

{{-- ── Cabeçalho ── --}}
<div class="cons-hero card mb-4 border-0 shadow-sm" data-tour="consolidado-resumo">
  <div class="card-body p-4">
    <div class="d-flex justify-content-between flex-wrap gap-3 align-items-start">
      <div class="flex-grow-1">
        <h4 class="mb-2">{{ $nomeCliente }}</h4>
        <p class="text-muted mb-0 text-sm">
          {{ $serie->count() }} meses SPED · {{ $regimeLabel }}
          @if(($analise['qtd_filiais'] ?? 0) > 1) · {{ $analise['qtd_filiais'] }} filiais @endif
        </p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <a href="{{ route('admin.simulacoes.consolidado.export.excel', $sim->idsimulacao) }}" class="btn btn-sm btn-success">
          <i class="fas fa-file-excel me-1"></i> Excel
        </a>
        <a href="{{ route('admin.simulacoes.consolidado.export.pdf', $sim->idsimulacao) }}" class="btn btn-sm btn-outline-dark" target="_blank">
          <i class="fas fa-file-pdf me-1"></i> PDF
        </a>
      </div>
    </div>
  </div>
</div>

@if(!empty($qualidade['prontidao']))
  <div class="card mb-4 border-0 shadow-sm">
    <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
      <div>
        <h6 class="mb-1">Qualidade do dado</h6>
        @include('components.prontidao-badge', ['prontidao' => $qualidade['prontidao']])
        <span class="text-sm text-muted ms-2">{{ $qualidade['pct_simulavel'] ?? 0 }}% produtos com origem definida</span>
      </div>
      @if(!empty($qualidade['evolucao']['delta_score']))
        <span class="badge {{ $qualidade['evolucao']['delta_score'] >= 0 ? 'bg-success' : 'bg-danger' }}">
          Evolução score: {{ $qualidade['evolucao']['delta_score'] >= 0 ? '+' : '' }}{{ $qualidade['evolucao']['delta_score'] }} pts
        </span>
      @endif
      @if($sim->idpessoa)
        <x-pendencias-button
          :href="route('admin.clientes.pendencias', $sim->idpessoa)"
          :count="$qualidade['pendencias_abertas'] ?? 0"
          class="ms-1"
        />
        <a href="{{ route('admin.simulacoes.edit', ['idsimulacao' => $sim->idsimulacao, 'tab' => 'confronto']) }}"
           class="btn btn-sm btn-outline-dark ms-1">
          <i class="fas fa-tasks me-1"></i> Confronto
        </a>
      @endif
    </div>
  </div>
@endif

{{-- ── Duas histórias: real × simulação ── --}}
<div class="row g-3 mb-4 cons-dual-explainer">
  <div class="col-md-6">
    <div class="cons-dual-card cons-dual-card--real h-100">
      <span class="cons-pill cons-pill--real"><i class="fas fa-check-circle me-1"></i> Dado real · SPED {{ $ano }}</span>
      <h6 class="mt-2 mb-2">O que aconteceu de verdade</h6>
      <p class="text-sm text-muted mb-2">
        Tributos e receita lidos dos arquivos que o cliente entregou (EFD + PIS/Cofins).
        É o ponto de partida — <strong>não muda</strong> ao clicar nos anos da reforma.
      </p>
      <ul class="text-xs text-muted mb-0 ps-3">
        <li>Receita, CFOP, NCM, produtos</li>
        <li>Colunas “Regime Atual” e “Legado SPED” na tabela mensal</li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <div class="cons-dual-card cons-dual-card--sim h-100">
      <span class="cons-pill cons-pill--sim"><i class="fas fa-chart-line me-1"></i> Simulação · 2026–2033</span>
      <h6 class="mt-2 mb-2">O que a reforma pode trazer</h6>
      <p class="text-sm text-muted mb-2">
        Estimativa sobre a mesma operação, aplicando regras da LC 214 ano a ano.
        <strong>Indicativo</strong> — para planejamento, não substitui contador.
      </p>
      <ul class="text-xs text-muted mb-0 ps-3">
        <li>Projeção, impacto e gráficos laranja abaixo</li>
        <li>Escolha o ano da reforma na seção Simulação — recalcula e salva nos 12 meses</li>
      </ul>
    </div>
  </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     ZONA 1 — DADO REAL (SPED {{ $ano }})
     ═══════════════════════════════════════════════════════════ --}}
<section class="cons-zone cons-zone--real mb-5" aria-labelledby="cons-zone-real-title">
  @include('admin.simulacoes._consolidado_zone_heading', ['tipo' => 'real', 'ano' => $ano])

  <div class="row g-4 mb-4 mt-3">
    <div class="col-md-6 col-lg">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'real', 'icon' => 'fa-coins', 'color' => '#82d616',
        'label' => 'Receita SPED ' . $ano, 'value' => $fmt($analise['receita_total'] ?? 0),
        'sub' => 'Faturamento total das operações importadas', 'helpKey' => 'consolidado.kpi_receita', 'simId' => $sim->idsimulacao,
      ])
    </div>
    <div class="col-md-6 col-lg">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'real', 'icon' => 'fa-file-invoice-dollar', 'color' => '#344767',
        'label' => 'Tributos consumo (SPED)', 'value' => $fmt($reformaAnual['total_atual']),
        'sub' => 'PIS + Cofins + ICMS + ISS — referência “hoje”', 'helpKey' => 'consolidado.cbs_atual_anual', 'simId' => $sim->idsimulacao,
      ])
    </div>
    <div class="col-md-6 col-lg">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'real', 'icon' => 'fa-calculator', 'color' => '#17c1e8',
        'label' => 'Regime operacional', 'value' => $fmt($regimeAnual['total']),
        'sub' => 'Apuração ICMS/PIS (aba Regime Atual)', 'helpKey' => 'consolidado.regime_anual', 'simId' => $sim->idsimulacao,
      ])
    </div>
    <div class="col-md-6 col-lg">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'real', 'icon' => 'fa-boxes', 'color' => '#7928ca',
        'label' => 'Produtos no SPED', 'value' => number_format($analise['total_produtos'] ?? 0, 0, ',', '.'),
        'sub' => ($analise['total_operacoes'] ?? 0) . ' operações agregadas', 'helpKey' => 'consolidado.kpi_produtos', 'simId' => $sim->idsimulacao,
      ])
    </div>
    <div class="col-md-6 col-lg">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'real', 'icon' => 'fa-folder-open', 'color' => '#8392ab',
        'label' => 'Arquivos SPED', 'value' => number_format($consolidacao['total_imports'] ?? 0, 0, ',', '.'),
        'sub' => $serie->count() . ' meses importados',
        'helpKey' => 'consolidado.kpi_arquivos', 'simId' => $sim->idsimulacao,
      ])
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-lg-5">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_legado_sped" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent d-flex align-items-center gap-2">
          <span class="cons-pill cons-pill--real cons-pill--xs">Real</span>
          <h6 class="mb-0">Tributos lidos do SPED {{ $ano }}</h6>
        </div>
        <div class="card-body pt-0">
          <canvas id="chartLegadoReal" height="200"></canvas>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_origem" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent d-flex align-items-center gap-2">
          <span class="cons-pill cons-pill--real cons-pill--xs">Real</span>
          <h6 class="mb-0">Receita por origem (SPED)</h6>
        </div>
        <div class="card-body pt-0">
          <div style="position:relative;height:250px;width:100%">
            <canvas id="chartOrigem"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-lg-4">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_mensal" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent">
          <span class="cons-pill cons-pill--real cons-pill--xs">Real</span>
          <h6 class="mb-0 mt-1">Evolução mensal — tributos SPED</h6>
        </div>
        <div class="card-body pt-0">
          @if($serie->isEmpty())
            <p class="text-muted text-sm mb-0">Sem dados mensais.</p>
          @else
            <canvas id="chartConsolidadoMensal" height="180"></canvas>
          @endif
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_cfop" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent d-flex justify-content-between">
          <div><span class="cons-pill cons-pill--real cons-pill--xs">Real</span><h6 class="mb-0 mt-1 d-inline"> Top CFOPs</h6></div>
        </div>
        <div class="card-body pt-0"><canvas id="chartCfop" height="200"></canvas></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_ncm" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent">
          <span class="cons-pill cons-pill--real cons-pill--xs">Real</span>
          <h6 class="mb-0 mt-1">Top NCMs</h6>
        </div>
        <div class="card-body pt-0"><canvas id="chartNcm" height="200"></canvas></div>
      </div>
    </div>
  </div>

  @if(!empty($analise['filiais']) && count($analise['filiais']) > 1)
  <div class="row g-4 mb-4">
    <div class="col-lg-6">
      <div class="card border h-100 app-metric-card cons-card--real">
        <x-card-help.button key="consolidado.chart_filiais" context-type="simulacao" :context-id="$sim->idsimulacao" />
        <div class="card-header bg-transparent"><span class="cons-pill cons-pill--real cons-pill--xs">Real</span><h6 class="mb-0 mt-1 d-inline"> Receita por filial</h6></div>
        <div class="card-body pt-0"><canvas id="chartFiliais" height="160"></canvas></div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card border h-100 app-metric-card cons-card--real">
        <div class="card-header bg-transparent d-flex align-items-center justify-content-between gap-2">
          <h6 class="mb-0">Multi-filial (SPED)</h6>
          <x-card-help.button key="consolidado.chart_filiais" context-type="simulacao" :context-id="$sim->idsimulacao" class="app-card-help-btn--inline flex-shrink-0" />
        </div>
        <div class="card-body table-responsive p-0">
          <table class="table table-sm mb-0">
            <thead class="bg-light"><tr><th class="ps-3">UF</th><th>CNPJ</th><th>Receita</th><th>Itens</th></tr></thead>
            <tbody>
              @foreach($analise['filiais'] as $f)
                <tr>
                  <td class="ps-3 fw-bold">{{ $f['uf'] }}</td>
                  <td class="text-xs">{{ $f['cnpj'] }}</td>
                  <td>{{ $fmt($f['valor']) }}</td>
                  <td>{{ $f['itens'] }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  @endif

  @if(!empty($analise['top_produtos']))
  <div class="card mb-4 app-metric-card cons-card--real">
    <div class="card-header bg-transparent d-flex justify-content-between flex-wrap gap-2">
      <div class="d-flex align-items-center flex-wrap gap-2">
        <span class="cons-pill cons-pill--real cons-pill--xs">Real</span>
        <h6 class="mb-0">Principais produtos SPED (Top 30)</h6>
        <x-card-help.button key="consolidado.top_produtos" context-type="simulacao" :context-id="$sim->idsimulacao" class="app-card-help-btn--inline" />
      </div>
      <input type="search" class="form-control form-control-sm cons-prod-search" placeholder="Filtrar…" style="max-width:220px">
    </div>
    <div class="card-body table-responsive p-0">
      <table class="table table-sm align-middle mb-0 cons-prod-table">
        <thead class="bg-light">
          <tr>
            <th class="ps-3">Cód.</th><th>Descrição</th><th>NCM</th><th>CFOP</th><th>Origem</th><th>UF</th>
            <th class="text-end">Receita</th><th class="pe-3 text-end">Ops</th>
          </tr>
        </thead>
        <tbody>
          @foreach($analise['top_produtos'] as $prod)
            <tr data-search="{{ strtolower($prod['cod_item'] . ' ' . $prod['descr'] . ' ' . $prod['ncm'] . ' ' . $prod['cfop']) }}">
              <td class="ps-3 fw-semibold text-xs">{{ $prod['cod_item'] }}</td>
              <td class="text-xs">{{ Str::limit($prod['descr'], 50) }}</td>
              <td class="text-xs">{{ $prod['ncm'] }}</td>
              <td><span class="badge bg-light text-dark">{{ $prod['cfop'] }}</span></td>
              <td class="text-xs">{{ $prod['origem'] }}</td>
              <td>{{ $prod['uf'] }}</td>
              <td class="text-end fw-semibold">{{ $fmt($prod['valor']) }}</td>
              <td class="pe-3 text-end text-muted">{{ $prod['ops'] }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif
</section>

{{-- ═══════════════════════════════════════════════════════════
     ZONA 2 — SIMULAÇÃO REFORMA (2026–2033)
     ═══════════════════════════════════════════════════════════ --}}
<section id="cons-zone-sim" class="cons-zone cons-zone--sim mb-5" aria-labelledby="cons-zone-sim-title">
  @include('admin.simulacoes._consolidado_zone_heading', ['tipo' => 'sim', 'ano' => $ano])

  @include('admin.simulacoes._cenario_nav_toggle', [
    'sim' => $sim,
    'consolidacao' => $consolidacao,
    'projecao' => $projecao,
  ])

  @php
    $impactColor = $reformaAnual['diff'] >= 0 ? '#ea0606' : '#82d616';
    $impactIcon = $reformaAnual['diff'] >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
  @endphp
  <div class="row g-4 mb-4">
    <div class="col-md-4">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'sim', 'icon' => 'fa-exchange-alt', 'color' => '#e88024',
        'label' => 'Transição · ano <span class="cons-ano-preview">' . $anoSel . '</span>',
        'value' => '<span class="cons-kpi-transicao-val">' . $fmt($reformaAnual['total_reforma']) . '</span>',
        'sub' => 'CBS + IBS + legado residual naquele ano',
        'helpKey' => 'consolidado.cbs_reforma_anual', 'simId' => $sim->idsimulacao,
      ])
    </div>
    <div class="col-md-4">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'sim', 'icon' => $impactIcon, 'color' => $impactColor,
        'label' => 'Impacto vs. SPED ' . $ano,
        'value' => '<span class="cons-impact-value">' . ($reformaAnual['diff'] >= 0 ? '+' : '') . $fmt($reformaAnual['diff']) . '</span>',
        'sub' => '<span class="cons-impact-pct">' . ($pct >= 0 ? '+' : '') . $pct . '%</span> sobre tributos reais do SPED',
        'helpKey' => 'consolidado.impacto_anual', 'simId' => $sim->idsimulacao,
        'valueClass' => $reformaAnual['diff'] >= 0 ? 'text-danger' : 'text-success',
        'cardClass' => 'cons-impact-kpi ' . ($reformaAnual['diff'] >= 0 ? 'cons-impact-up' : 'cons-impact-down'),
      ])
    </div>
    <div class="col-md-4">
      @include('admin.simulacoes._consolidado_kpi_card', [
        'zone' => 'sim', 'icon' => 'fa-layer-group', 'color' => '#fb6340',
        'label' => 'Base CBS / IBS',
        'value' => $fmt($analise['receita_tributavel'] ?? 0),
        'sub' => 'Receita SPED excl. exportação (CFOP 7xxx)',
        'helpKey' => 'consolidado.kpi_base', 'simId' => $sim->idsimulacao,
      ])
    </div>
  </div>

@if($cenario && ($cenario['fase_teste'] ?? false))
  <div class="alert alert-warning border-warning mb-4 py-2 text-sm" role="alert">
    Ano <strong>2026</strong> = fase teste LC 214. Compare com <strong>2033</strong> na projeção.
  </div>
@endif

{{-- ── Gráficos simulação ── --}}
<div class="row g-4 mb-4">
  <div class="col-lg-6">
    <div class="card border h-100 app-metric-card cons-card--sim">
      <x-card-help.button key="consolidado.chart_composicao" context-type="simulacao" :context-id="$sim->idsimulacao" />
      <div class="card-header bg-transparent d-flex align-items-center gap-2 flex-wrap">
        <span class="cons-pill cons-pill--sim cons-pill--xs">Simulação</span>
        <h6 class="mb-0">SPED {{ $ano }} × transição <span class="cons-ano-preview">{{ $anoSel }}</span></h6>
      </div>
      <div class="card-body pt-0">
        <canvas id="chartComposicao" height="200"></canvas>
        <p class="cons-chart-note text-xxs text-muted mt-3 mb-0">
          <span class="cons-pill cons-pill--real cons-pill--xs">Real</span> barras escuras = SPED {{ $ano }} ·
          <span class="cons-pill cons-pill--sim cons-pill--xs">Sim</span> barras vermelhas = reforma no ano selecionado
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card border h-100 app-metric-card cons-card--sim">
      <x-card-help.button key="consolidado.projecao_transicao" context-type="simulacao" :context-id="$sim->idsimulacao" />
      <div class="card-header bg-transparent">
        <span class="cons-pill cons-pill--sim cons-pill--xs">Simulação</span>
        <h6 class="mb-0 mt-1">Projeção 2026–2033</h6>
        <small class="text-muted">Linha tracejada = tributos reais SPED {{ $ano }} (referência)</small>
      </div>
      <div class="card-body pt-0">
        <canvas id="chartProjecao" height="180"></canvas>
      </div>
    </div>
  </div>
</div>

@if($projecao && !empty($projecao['linhas']))
<div class="card mb-4 app-metric-card app-metric-card--table cons-card--sim">
  <div class="card-header bg-transparent d-flex align-items-start justify-content-between gap-2">
    <div>
      <span class="cons-pill cons-pill--sim cons-pill--xs">Simulação</span>
      <h6 class="mb-0 mt-1 d-inline">Tabela ano a ano (2026–2033)</h6>
      <small class="d-block text-muted">Referência “vs. hoje” = tributos reais SPED {{ $ano }} ({{ $fmt($projecao['total_atual_ref']) }})</small>
    </div>
    <x-card-help.button key="consolidado.projecao_tabela" context-type="simulacao" :context-id="$sim->idsimulacao" class="app-card-help-btn--inline flex-shrink-0" />
  </div>
  <div class="card-body table-responsive p-0">
    <table class="table table-sm align-middle mb-0">
      <thead class="bg-light">
        <tr>
          <th>Ano</th>
          <th>CBS / IBS (alíq. ref.)</th>
          <th>Legado residual</th>
          <th>CBS</th>
          <th>IBS</th>
          <th>PIS/Cof</th>
          <th>ICMS/ISS</th>
          <th>Total</th>
          <th>vs. hoje</th>
        </tr>
      </thead>
      <tbody>
        @foreach($projecao['linhas'] as $linha)
          @php
            $isSel = $anoSel == $linha['ano'];
            $cfgAno = config("reforma_tributaria.cenarios.{$linha['ano']}", []);
            $aliqCbs = round((float) ($cfgAno['aliq_cbs'] ?? 0) * 100, 2);
            $aliqIbs = round(((float) ($cfgAno['aliq_ibs_uf'] ?? 0) + (float) ($cfgAno['aliq_ibs_mun'] ?? 0)) * 100, 2);
          @endphp
          <tr class="{{ $isSel ? 'table-info' : '' }}" data-projecao-row="{{ $linha['ano'] }}">
            <td class="ps-3 fw-bold">
              {{ $linha['ano'] }}
              @if($linha['ano'] === 2026)<span class="badge bg-warning text-dark ms-1">teste</span>@endif
              @if($linha['ano'] === 2033)<span class="badge bg-success ms-1">pleno</span>@endif
              @if($isSel)<span class="badge bg-secondary ms-1">gravado nos meses</span>@endif
            </td>
            <td class="text-xs">CBS {{ number_format($aliqCbs, 2, ',', '.') }}% · IBS {{ number_format($aliqIbs, 2, ',', '.') }}      </td>
            <td class="text-xs text-muted">
              PIS/Cof {{ $linha['legado_pis_cofins_pct'] }}% · ICMS/ISS {{ $linha['legado_icms_iss_pct'] }}%
            </td>
            <td>{{ $fmt0($linha['cbs']) }}</td>
            <td>{{ $fmt0($linha['ibs']) }}</td>
            <td>{{ $fmt0($linha['pis'] + $linha['cofins']) }}</td>
            <td>{{ $fmt0($linha['icms'] + $linha['iss']) }}</td>
            <td class="fw-bold">{{ $fmt0($linha['total_transicao']) }}</td>
            <td class="{{ $linha['diff'] >= 0 ? 'text-danger' : 'text-success' }}">{{ $fmt0($linha['diff']) }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  <div class="card-footer text-muted text-xs">
    Coluna “vs. hoje” compara cada ano simulado com os tributos <strong>reais</strong> do SPED {{ $ano }}.
  </div>
</div>
@endif

</section>

{{-- ═══════════════════════════════════════════════════════════
     Conferência mensal (real + simulação lado a lado)
     ═══════════════════════════════════════════════════════════ --}}
<section class="cons-zone cons-zone--mixed mb-4">
  <div class="cons-zone-heading cons-zone-heading--mixed mb-3">
    <div class="cons-zone-heading-badge"><i class="fas fa-calendar-alt me-1"></i> Conferência</div>
    <div>
      <h5 class="mb-1">Detalhamento mês a mês</h5>
      <p class="mb-0 text-sm text-muted">Colunas à esquerda = <strong>SPED {{ $ano }} real</strong> · à direita = <strong>simulação</strong> gravada no mês</p>
    </div>
  </div>

<div class="card mb-0 border app-metric-card app-metric-card--table" data-tour="consolidado-meses">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2 bg-light">
    <span class="text-xs text-muted">{{ $consolidacao['total_produtos'] ?? 0 }} produtos · {{ $consolidacao['total_imports'] ?? 0 }} SPEDs</span>
    <x-card-help.button key="consolidado.tabela_mensal" context-type="simulacao" :context-id="$sim->idsimulacao" class="app-card-help-btn--inline flex-shrink-0" />
  </div>
  <div class="card-body table-responsive p-0">
    <table class="table table-sm align-middle mb-0 cons-table-mixed">
      <thead>
        <tr class="cons-thead-group">
          <th rowspan="2" class="ps-3 align-middle bg-white">Mês</th>
          <th colspan="2" class="text-center cons-th-real">Dado real · SPED {{ $ano }}</th>
          <th colspan="2" class="text-center cons-th-sim">Simulação reforma</th>
          <th rowspan="2" class="align-middle bg-white">Prod.</th>
          <th rowspan="2" class="pe-3 text-end align-middle bg-white">Detalhe</th>
        </tr>
        <tr class="cons-thead-sub">
          <th class="cons-th-real">Regime Atual</th>
          <th class="cons-th-real">Tributos SPED</th>
          <th class="cons-th-sim">Transição (<span class="cons-ano-meses-aplicado">{{ $anoSel }}</span>)</th>
          <th class="cons-th-sim">Diff</th>
        </tr>
      </thead>
      <tbody>
        @forelse($serie as $m)
          <tr>
            <td class="ps-3 fw-bold">{{ $m['periodo'] }}</td>
            <td class="cons-td-real">{{ $fmt($m['total_regime']) }}</td>
            <td class="cons-td-real">{{ $fmt($m['total_atual']) }}</td>
            <td class="cons-td-sim">{{ $fmt($m['total_reforma']) }}</td>
            <td class="cons-td-sim {{ $m['diff'] >= 0 ? 'text-danger' : 'text-success' }}">{{ $fmt($m['diff']) }}</td>
            <td>{{ $m['produtos'] }}</td>
            <td class="pe-3 text-end">
              <a href="{{ route('admin.simulacoes.edit', ['idsimulacao' => $m['idsimulacao'], 'detalhe' => 1, 'tab' => 'reforma']) }}"
                 class="btn btn-sm btn-outline-primary">
                <i class="fas fa-search me-1"></i> Ver CBS/IBS
              </a>
            </td>
          </tr>
        @empty
          <tr><td colspan="7" class="text-center p-4 text-muted">Nenhum mês vinculado.</td></tr>
        @endforelse
      </tbody>
      @if($serie->isNotEmpty())
        <tfoot class="bg-light fw-bold">
          <tr>
            <td class="ps-3">Total {{ $ano }}</td>
            <td class="cons-td-real">{{ $fmt($regimeAnual['total']) }}</td>
            <td class="cons-td-real">{{ $fmt($reformaAnual['total_atual']) }}</td>
            <td class="cons-td-sim">{{ $fmt($reformaAnual['total_reforma']) }}</td>
            <td class="cons-td-sim {{ $reformaAnual['diff'] >= 0 ? 'text-danger' : 'text-success' }}">{{ $fmt($reformaAnual['diff']) }}</td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      @endif
    </table>
  </div>
</div>
</section>

@push('js')
<script>
(function () {
  const brl = (v) => 'R$ ' + Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
  const brlFull = (v) => 'R$ ' + Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const brlCompact = (v) => {
    const n = Number(v);
    if (n >= 1e9) return 'R$ ' + (n / 1e9).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + ' bi';
    if (n >= 1e6) return 'R$ ' + (n / 1e6).toLocaleString('pt-BR', { maximumFractionDigits: 0 }) + ' mi';
    if (n >= 1e3) return 'R$ ' + (n / 1e3).toLocaleString('pt-BR', { maximumFractionDigits: 0 }) + ' mil';
    return brl(n);
  };

  const palette = ['#344767', '#17c1e8', '#82d616', '#fbcf33', '#ea0606', '#7928ca', '#ff667c', '#8392ab'];
  const doughnutLabelColors = { '#344767': '#fff', '#17c1e8': '#344767', '#82d616': '#344767', '#fbcf33': '#344767', '#ea0606': '#fff' };

  function loadChart(cb) {
    const afterPlugins = () => {
      if (typeof Chart !== 'undefined' && typeof ChartDataLabels !== 'undefined') {
        try { Chart.register(ChartDataLabels); } catch (e) { /* já registrado */ }
        Chart.defaults.set('plugins.datalabels', { display: false });
      }
      cb();
    };

    const loadDatalabels = (next) => {
      if (typeof ChartDataLabels !== 'undefined') { next(); return; }
      const s = document.createElement('script');
      s.src = 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js';
      s.onload = next;
      document.head.appendChild(s);
    };

    const loadChartJs = (next) => {
      if (typeof Chart !== 'undefined') { next(); return; }
      const s = document.createElement('script');
      s.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js';
      s.onload = next;
      document.head.appendChild(s);
    };

    loadChartJs(() => loadDatalabels(afterPlugins));
  }

  const chartData = {
    composicaoAtual: @json($analise['composicao_atual'] ?? []),
    composicaoReforma: @json($analise['composicao_reforma'] ?? []),
    porOrigem: @json($analise['por_origem'] ?? []),
    porCfop: @json($analise['por_cfop'] ?? []),
    porNcm: @json($analise['por_ncm'] ?? []),
    porUf: @json($analise['por_uf'] ?? []),
    projecao: @json(array_values($projecao['linhas'] ?? [])),
    refHoje: @json($projecao['total_atual_ref'] ?? $reformaAnual['total_atual']),
    serie: {
      labels: @json($serie->pluck('periodo')),
      regime: @json($serie->pluck('total_regime')),
      atual: @json($serie->pluck('total_atual')),
      reforma: @json($serie->pluck('total_reforma')),
    },
  };

  function hBar(id, labels, values, color) {
    const el = document.getElementById(id);
    if (!el || !labels.length) return;
    new Chart(el, {
      type: 'bar',
      data: {
        labels,
        datasets: [{ data: values, backgroundColor: color || '#344767', borderRadius: 4 }],
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          x: { ticks: { callback: (v) => brl(v) } },
        },
      },
    });
  }

  function renderAll() {
    const elLegado = document.getElementById('chartLegadoReal');
    if (elLegado && chartData.composicaoAtual.length) {
      new Chart(elLegado, {
        type: 'bar',
        data: {
          labels: chartData.composicaoAtual.map(x => x.label),
          datasets: [{ label: 'SPED {{ $ano }}', data: chartData.composicaoAtual.map(x => x.valor), backgroundColor: '#344767', borderRadius: 4 }],
        },
        options: {
          responsive: true,
          plugins: { legend: { display: false }, tooltip: { callbacks: { label: (c) => brlFull(c.raw) } } },
          scales: { y: { ticks: { callback: brl } } },
        },
      });
    }

    const elComp = document.getElementById('chartComposicao');
    if (elComp) {
      const tribOrder = ['PIS', 'COFINS', 'ICMS', 'ISS', 'IPI', 'CBS', 'IBS'];
      const mapAtual = Object.fromEntries(chartData.composicaoAtual.map(x => [x.label, x.valor]));
      const mapRef = Object.fromEntries(chartData.composicaoReforma.map(x => [x.label, x.valor]));
      const labels = tribOrder.filter(t => (mapAtual[t] || 0) > 0 || (mapRef[t] || 0) > 0);
      new Chart(elComp, {
        type: 'bar',
        data: {
          labels,
          datasets: [
            { label: 'SPED {{ $ano }} (real)', data: labels.map(t => mapAtual[t] || 0), backgroundColor: '#344767', borderRadius: 4 },
            { label: 'Simulação {{ $anoSel }}', data: labels.map(t => mapRef[t] || 0), backgroundColor: '#ea0606', borderRadius: 4 },
          ],
        },
        options: {
          responsive: true,
          plugins: {
            legend: { position: 'bottom' },
            tooltip: { callbacks: { label: (c) => c.dataset.label + ': ' + brlFull(c.raw) } },
          },
          scales: { y: { ticks: { callback: brl } } },
        },
      });
      window.consChartComposicao = Chart.getChart(elComp);
      document.dispatchEvent(new CustomEvent('cons:charts-ready'));
    }

    const elOrig = document.getElementById('chartOrigem');
    if (elOrig && chartData.porOrigem.length) {
      const origColors = chartData.porOrigem.map((_, i) => palette[i % palette.length]);
      new Chart(elOrig, {
        type: 'doughnut',
        data: {
          labels: chartData.porOrigem.map(x => x.label),
          datasets: [{
            data: chartData.porOrigem.map(x => x.valor),
            backgroundColor: origColors,
            borderWidth: 2,
            borderColor: '#fff',
          }],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          layout: { padding: 4 },
          plugins: {
            datalabels: {
              display: (ctx) => chartData.porOrigem[ctx.dataIndex].pct >= 5,
              color: (ctx) => doughnutLabelColors[origColors[ctx.dataIndex]] || '#344767',
              font: { weight: 'bold', size: 11 },
              formatter: (_, ctx) => chartData.porOrigem[ctx.dataIndex].pct + '%',
            },
            legend: {
              position: 'right',
              labels: {
                boxWidth: 14,
                font: { size: 13, weight: '500' },
                padding: 12,
                generateLabels(chart) {
                  return chart.data.labels.map((label, i) => {
                    const item = chartData.porOrigem[i];
                    return {
                      text: `${label} · ${item.pct}% · ${brlCompact(item.valor)}`,
                      fillStyle: origColors[i],
                      strokeStyle: '#fff',
                      lineWidth: 1,
                      hidden: false,
                      index: i,
                    };
                  });
                },
              },
            },
            tooltip: {
              callbacks: {
                label: (c) => chartData.porOrigem[c.dataIndex].label + ': ' + brlFull(c.raw)
                  + ' (' + chartData.porOrigem[c.dataIndex].pct + '%)',
              },
            },
          },
        },
      });
    }

    const elProj = document.getElementById('chartProjecao');
    if (elProj && chartData.projecao.length) {
      const anos = chartData.projecao.map(x => x.ano);
      const totais = chartData.projecao.map(x => x.total_transicao);
      const refLine = anos.map(() => chartData.refHoje);
      new Chart(elProj, {
        type: 'line',
        data: {
          labels: anos,
          datasets: [
            { label: 'Simulação reforma', data: totais, borderColor: '#ea0606', backgroundColor: 'rgba(234,6,6,0.08)', fill: true, tension: 0.3 },
            { label: 'SPED {{ $ano }} (real)', data: refLine, borderColor: '#344767', borderDash: [6, 4], tension: 0, pointRadius: 0 },
          ],
        },
        options: {
          responsive: true,
          plugins: { legend: { position: 'bottom' } },
          scales: { y: { ticks: { callback: brl } } },
        },
      });
    }

    const elMes = document.getElementById('chartConsolidadoMensal');
    if (elMes && chartData.serie.labels.length) {
      new Chart(elMes, {
        type: 'line',
        data: {
          labels: chartData.serie.labels,
          datasets: [
            { label: 'Tributos SPED {{ $ano }}', data: chartData.serie.atual, borderColor: '#344767', backgroundColor: 'rgba(52,71,103,0.08)', fill: true, tension: 0.2 },
          ],
        },
        options: {
          responsive: true,
          plugins: {
            legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } },
          },
          scales: { y: { ticks: { callback: brl } } },
        },
      });
    }

    hBar('chartCfop', chartData.porCfop.map(x => x.label + ' (' + x.pct + '%)'), chartData.porCfop.map(x => x.valor));
    hBar('chartNcm', chartData.porNcm.map(x => x.label + ' (' + x.pct + '%)'), chartData.porNcm.map(x => x.valor));

    const elFil = document.getElementById('chartFiliais');
    if (elFil && chartData.porUf.length) {
      new Chart(elFil, {
        type: 'bar',
        data: {
          labels: chartData.porUf.map(x => x.label),
          datasets: [{ data: chartData.porUf.map(x => x.valor), backgroundColor: '#344767', borderRadius: 4 }],
        },
        options: {
          responsive: true,
          plugins: { legend: { display: false } },
          scales: { y: { ticks: { callback: brl } } },
        },
      });
    }
  }

  loadChart(renderAll);

  const search = document.querySelector('.cons-prod-search');
  if (search) {
    search.addEventListener('input', function () {
      const q = this.value.toLowerCase().trim();
      document.querySelectorAll('.cons-prod-table tbody tr').forEach((tr) => {
        tr.style.display = !q || (tr.dataset.search || '').includes(q) ? '' : 'none';
      });
    });
  }
})();
</script>
@endpush