@php
  $anosCenario = range(config('reforma_tributaria.ano_min', 2026), config('reforma_tributaria.ano_max', 2033));
  $cenarioNav = $consolidacao['cenario_reforma'] ?? null;
  $anoAplicado = (int) ($cenarioNav['ano'] ?? config('reforma_tributaria.default_ano', 2026));
  $projLinhas = $projecao['linhas'] ?? [];
@endphp

<div id="cons-cenario-bar" class="cons-cenario-bar mb-4 mt-3">
  <div class="cons-cenario-bar-inner position-relative">
    <div id="consCenarioLoading" class="cons-cenario-loading d-none" aria-live="polite" aria-busy="true">
      <span class="spinner-border spinner-border-sm text-warning" role="status"></span>
      <span class="cons-cenario-loading-text">Recalculando jan–dez…</span>
    </div>
    <div class="app-cenario-toggle d-none d-md-flex"
         id="appCenarioToggle"
         role="group"
         aria-label="Ano da simulação reforma"
         data-applied="{{ $anoAplicado }}"
         data-apply-url="{{ route('admin.simulacoes.reforma.aplicar-cenario-grupo', $sim->idsimulacao) }}"
         data-csrf="{{ csrf_token() }}">
      <span class="app-cenario-toggle-label" title="Recalcula jan–dez com as alíquotas da reforma naquele ano">
        Ano da simulação
        <x-card-help.button key="consolidado.cenario_grupo" context-type="simulacao" :context-id="$sim->idsimulacao" class="d-inline-flex ms-1 align-middle" />
      </span>
      @foreach($anosCenario as $y)
        <button type="button"
                class="app-cenario-year-btn {{ $anoAplicado === $y ? 'is-active is-saved' : '' }}"
                data-ano="{{ $y }}"
                title="Usar regras de {{ $y }} em todos os meses">
          {{ $y }}
          @if($y === 2026)<span class="app-cenario-dot" aria-hidden="true" title="Fase teste"></span>@endif
          @if($y === 2033)<span class="app-cenario-dot app-cenario-dot--pleno" aria-hidden="true" title="Reforma plena"></span>@endif
        </button>
      @endforeach
    </div>

    <div class="app-cenario-toggle app-cenario-toggle--mobile d-md-none w-100"
         id="appCenarioToggleMobile"
         role="group"
         data-applied="{{ $anoAplicado }}"
         data-apply-url="{{ route('admin.simulacoes.reforma.aplicar-cenario-grupo', $sim->idsimulacao) }}"
         data-csrf="{{ csrf_token() }}">
      <span class="app-cenario-toggle-label">Ano da simulação</span>
      <div class="app-cenario-years-scroll">
        @foreach($anosCenario as $y)
          <button type="button"
                  class="app-cenario-year-btn {{ $anoAplicado === $y ? 'is-active is-saved' : '' }}"
                  data-ano="{{ $y }}">{{ $y }}</button>
        @endforeach
      </div>
    </div>

    <p class="cons-cenario-bar-hint mb-0 text-xs text-muted">
      Clique no ano para <strong>recalcular e salvar</strong> jan–dez com as alíquotas da reforma naquele ano.
      O ano laranja é o que vale em cards, gráficos e tabela mensal.
    </p>
  </div>
</div>

@push('js')
<script>
(function () {
  const bar = document.getElementById('cons-cenario-bar');
  const loadingEl = document.getElementById('consCenarioLoading');
  const loadingText = loadingEl?.querySelector('.cons-cenario-loading-text');
  const toggles = [document.getElementById('appCenarioToggle'), document.getElementById('appCenarioToggleMobile')].filter(Boolean);
  if (!toggles.length || !bar) return;

  const root = toggles[0];
  const appliedAno = Number(root.dataset.applied || 2026);
  let applying = false;

  function setLoading(ano, on) {
    if (loadingEl) loadingEl.classList.toggle('d-none', !on);
    if (loadingText && on) loadingText.textContent = 'Recalculando jan–dez com regras de ' + ano + '…';
    bar.classList.toggle('is-applying', on);
    document.querySelectorAll('.app-cenario-year-btn').forEach((btn) => { btn.disabled = on; });
  }

  function redirectAfterApply(data) {
    const raw = (data.redirect || (window.location.pathname + '?tab=consolidado')).split('#')[0];
    const url = new URL(raw, window.location.origin);
    url.searchParams.set('tab', 'consolidado');
    url.searchParams.set('_cyc', String(Date.now()));
    url.hash = 'cons-cenario-bar';
    window.location.href = url.toString();
  }

  async function applyYear(ano) {
    ano = Number(ano);
    if (applying || ano === appliedAno) return;

    applying = true;
    setLoading(ano, true);

    document.querySelectorAll('.app-cenario-year-btn').forEach((btn) => {
      btn.classList.toggle('is-pending', Number(btn.dataset.ano) === ano);
    });

    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 120000);

    try {
      const res = await fetch(root.dataset.applyUrl, {
        method: 'POST',
        signal: controller.signal,
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': root.dataset.csrf,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify({ ano_cenario: ano }),
      });

      clearTimeout(timeout);

      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.message || 'Erro ao recalcular (' + res.status + ')');

      redirectAfterApply(data);
    } catch (e) {
      clearTimeout(timeout);
      const msg = e.name === 'AbortError'
        ? 'A operação demorou demais. Tente novamente.'
        : (e.message || 'Não foi possível aplicar o ano.');
      alert(msg);
      applying = false;
      setLoading(ano, false);
      document.querySelectorAll('.app-cenario-year-btn').forEach((btn) => btn.classList.remove('is-pending'));
    }
  }

  function bindToggle(el) {
    el.querySelectorAll('.app-cenario-year-btn').forEach((btn) => {
      btn.addEventListener('click', () => applyYear(Number(btn.dataset.ano)));
    });
  }

  toggles.forEach(bindToggle);

  function scrollToCenarioBar() {
    const target = document.getElementById('cons-cenario-bar');
    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  const hash = window.location.hash.replace('#', '');
  if (hash === 'cons-cenario-bar' || hash === 'cons-zone-sim') {
    const run = () => {
      scrollToCenarioBar();
      const u = new URL(window.location.href);
      if (u.searchParams.has('_cyc')) {
        u.searchParams.delete('_cyc');
        history.replaceState(null, '', u.toString());
      }
    };
    setTimeout(run, 350);
  }
})();
</script>
@endpush