@php
  $anosCenario = range(config('reforma_tributaria.ano_min', 2026), config('reforma_tributaria.ano_max', 2033));
  $anoAplicado = (int) ($anoCenario ?? config('reforma_tributaria.default_ano', 2026));
@endphp

<div id="reforma-cenario-bar" class="cons-cenario-bar mb-4 mt-3">
  <div class="cons-cenario-bar-inner position-relative">
    <div id="reformaCenarioLoading" class="cons-cenario-loading d-none" aria-live="polite">
      <span class="spinner-border spinner-border-sm text-warning" role="status"></span>
      <span class="cons-cenario-loading-text">Recalculando este mês…</span>
    </div>
    <div class="app-cenario-toggle d-none d-md-flex"
         id="reformaCenarioToggle"
         role="group"
         data-applied="{{ $anoAplicado }}"
         data-apply-url="{{ route('admin.simulacoes.reforma.aplicar-cenario-mes', $simId) }}"
         data-csrf="{{ csrf_token() }}"
         data-detalhe="{{ $detalhe ? '1' : '0' }}">
      <span class="app-cenario-toggle-label">
        Ano da simulação
        <x-card-help.button key="consolidado.cenario_grupo" context-type="simulacao" :context-id="$simId" class="d-inline-flex ms-1 align-middle app-card-help-btn--inline" />
      </span>
      @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 class="app-cenario-toggle app-cenario-toggle--mobile d-md-none w-100"
         id="reformaCenarioToggleMobile"
         role="group"
         data-applied="{{ $anoAplicado }}"
         data-apply-url="{{ route('admin.simulacoes.reforma.aplicar-cenario-mes', $simId) }}"
         data-csrf="{{ csrf_token() }}"
         data-detalhe="{{ $detalhe ? '1' : '0' }}">
      <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> a simulação deste mês com as alíquotas da reforma naquele ano.
    </p>
  </div>
</div>

@push('js')
<script>
(function () {
  const bar = document.getElementById('reforma-cenario-bar');
  const loadingEl = document.getElementById('reformaCenarioLoading');
  const loadingText = loadingEl?.querySelector('.cons-cenario-loading-text');
  const toggles = [document.getElementById('reformaCenarioToggle'), document.getElementById('reformaCenarioToggleMobile')].filter(Boolean);
  if (!bar || !toggles.length) 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 com regras de ' + ano + '…';
    bar.classList.toggle('is-applying', on);
    document.querySelectorAll('#reforma-cenario-bar .app-cenario-year-btn').forEach((btn) => { btn.disabled = on; });
  }

  function redirectAfterApply(data) {
    const raw = (data.redirect || window.location.pathname + window.location.search).split('#')[0];
    const url = new URL(raw, window.location.origin);
    url.searchParams.set('_cyc', String(Date.now()));
    url.hash = 'reforma-zone-sim';
    window.location.href = url.toString();
  }

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

    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,
          detalhe: root.dataset.detalhe === '1',
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.message || 'Erro ao recalcular (' + res.status + ')');
      clearTimeout(timeout);
      redirectAfterApply(data);
    } catch (e) {
      clearTimeout(timeout);
      alert(e.message || 'Não foi possível aplicar o ano.');
      applying = false;
      setLoading(ano, false);
    }
  }

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

  if (window.location.hash === '#reforma-zone-sim' || window.location.hash === '#reforma-cenario-bar') {
    setTimeout(() => {
      const target = document.getElementById('reforma-cenario-bar') || document.getElementById('reforma-zone-sim');
      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      const u = new URL(window.location.href);
      if (u.searchParams.has('_cyc')) {
        u.searchParams.delete('_cyc');
        history.replaceState(null, '', u.toString());
      }
    }, 350);
  }
})();
</script>
@endpush