@php
  use App\Support\ConfrontoSubetapa;

  $painel = $confrontoPainel ?? [];
  $pendencias = $painel['pendencias'] ?? collect();
  $cadastro = $painel['cadastro_resumo'] ?? [];
  $grupo = $painel['grupo_resumo'] ?? [];
  $semCadastro = $painel['sem_cadastro'] ?? [];
  $unidadesDiv = $painel['unidades_divergentes'] ?? [];
  $ncmSemPreencher = $painel['ncm_sem_preencher'] ?? [];
  $ncmCorrecoes = $painel['ncm_correcoes'] ?? [];
  $ncmQtdSugestao = $painel['ncm_qtd_sugestao'] ?? 0;
  $classTribPainel = $painel['classtrib_painel'] ?? [];
  $classTribPendentes = $classTribPainel['pendentes'] ?? [];
  $classTribDefinidos = $classTribPainel['definidos'] ?? [];
  $classTribQtdPendentes = $classTribPainel['qtd_pendentes'] ?? 0;
  $classTribQtdAmbiguos = $classTribPainel['qtd_ambiguos'] ?? 0;
  $classTribQtdAcionaveis = $classTribPainel['qtd_acionaveis'] ?? 0;
  $classTribGrupos = $classTribPainel['grupos_cst'] ?? [];
  $classTribTabelaVazia = $classTribPainel['tabela_vazia'] ?? false;
  $confrontoSecao = ConfrontoSubetapa::normalizar(request('confronto'));
  $confrontoSubInfo = ConfrontoSubetapa::info($confrontoSecao);
  $spedAlertas = $painel['sped_alertas'] ?? ($spedQualidade['alertas'] ?? []);
  $porRegra = $painel['pendencias_por_regra'] ?? collect();
  $pront = $painel['prontidao'] ?? ($prontidao ?? null);
  $regraLabels = \App\Services\ConfrontoRegrasCatalog::labels();
  $fmtNcm = function (?string $ncm) {
    $d = preg_replace('/\D/', '', (string) $ncm);
    if (strlen($d) === 8) {
      return substr($d, 0, 4) . '.' . substr($d, 4, 2) . '.' . substr($d, 6, 2);
    }
    return $ncm ?: '—';
  };
@endphp

@include('admin.simulacoes._confronto_fluxo', [
  'sim' => $sim,
  'pendencias' => $pendencias,
  'fluxoPosImport' => $fluxoPosImport ?? false,
  'dashboardUrl' => $dashboardUrl ?? null,
])

<div class="app-page-header mb-4">
  <div>
    <h2 class="h5 mb-1">
      <span class="badge bg-light text-dark border font-monospace me-2">{{ $confrontoSubInfo['rotulo'] }}</span>
      {{ $confrontoSecao === 'resumo' ? 'Conferência de dados — Visão geral' : $confrontoSubInfo['titulo'] }}
    </h2>
    <p class="app-page-subtitle mb-0">
      @if($confrontoSecao === 'resumo')
        Identifique o que impede simular, corrija cadastros e acompanhe a prontidão desta análise.
      @else
        {{ $confrontoSubInfo['subtitulo'] }}
      @endif
    </p>
  </div>
  <div class="app-page-actions d-flex gap-2 flex-wrap" data-tour="confronto-acoes-topo">
    <form method="POST" action="{{ route('admin.simulacoes.confronto.recalcular', $sim->idsimulacao) }}" class="d-inline-block" data-tour="confronto-recalcular">
      @csrf
      <button type="submit" class="btn btn-app-primary btn-sm">
        <i class="fas fa-sync-alt me-1"></i> Recalcular conferência
      </button>
    </form>
    @if($sim->idpessoa)
      <a href="{{ route('admin.clientes.pendencias', ['idpessoa' => $sim->idpessoa, 'return' => request()->fullUrl()]) }}" class="btn btn-outline-dark btn-sm">
        <i class="fas fa-list me-1"></i> Painel global
      </a>
    @endif
  </div>
</div>

@if($confrontoSecao === 'resumo')
  @include('admin.simulacoes._etapa_guia', [
    'dataTour' => 'confronto-guia',
    'titulo' => 'Como usar este painel',
    'icone' => 'fa-compass',
    'passos' => [
      'Siga as <strong>sub-etapas ao lado</strong> (2.1 Visão geral, 2.2 NCM, 2.3 Classificação, 2.4 Cadastro) — uma tarefa por vez.',
      '<strong>NCM</strong> — corrija códigos ausentes; use sugestões de meses anteriores quando disponíveis.',
      '<strong>Classificação</strong> — escolha o cClassTrib produto por produto (ou use o atalho em lote quando todos compartilham o mesmo CST).',
      '<strong>Recalcular conferência</strong> no topo após correções em massa.',
    ],
  ])
@endif

@if($pront)
  <div class="alert {{ $pront->badgeClass() }} bg-opacity-10 border mb-4" data-tour="confronto-prontidao">
    <div class="d-flex justify-content-between flex-wrap gap-2 align-items-center">
      <div>
        <strong>Prontidão para simular:</strong>
        @include('components.prontidao-badge', ['prontidao' => $pront])
        <span class="text-xs text-muted ms-2">
          {{ $pront->pendencias_bloqueantes }} bloqueante(s) · {{ $pront->pendencias_ressalva }} ressalva(s)
        </span>
      </div>
      @if(($pront->criterios_json['pct_vinculado'] ?? null) !== null)
        <span class="text-xs"></span>
      @endif
    </div>
  </div>
@endif

@if($confrontoSecao === 'resumo')
  @include('admin.simulacoes._confronto_resumo', compact(
    'sim', 'spedAlertas', 'ncmSemPreencher', 'ncmQtdSugestao', 'classTribQtdPendentes',
    'classTribQtdAmbiguos', 'classTribQtdAcionaveis', 'semCadastro', 'unidadesDiv',
    'cadastro', 'grupo', 'pendencias'
  ))

@elseif($confrontoSecao === 'ncm')
@push('css')
<style>
  #ncm-pendencias-table .ncm-sel-col {
    width: 3.25rem;
    text-align: center;
    vertical-align: middle;
  }
  #ncm-pendencias-table .ncm-sel-col-label {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
  }
  #ncm-pendencias-table .ncm-table-check {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border: 2px solid #64748b;
    border-radius: 0.25rem;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }
  #ncm-pendencias-table .ncm-table-check:hover {
    border-color: #334155;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
  }
  #ncm-pendencias-table .ncm-table-check:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  }
  #ncm-pendencias-table .ncm-table-check:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 0.85rem;
    background-position: center;
    background-repeat: no-repeat;
  }
  #ncm-pendencias-table .ncm-table-check:indeterminate {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M4 10a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
    background-size: 0.85rem;
    background-position: center;
    background-repeat: no-repeat;
  }
  #ncm-pendencias-table td.ncm-sel-col {
    text-align: center;
    vertical-align: middle;
    background-color: #f8fafc;
  }
  #ncm-pendencias-table thead .ncm-sel-col {
    background-color: #f1f5f9;
  }
</style>
@endpush
  <div class="app-card mb-4" id="confronto-ncm" data-tour="confronto-ncm"
       data-ncm-save-url="{{ route('admin.simulacoes.confronto.correcao-ncm', $sim->idsimulacao) }}"
       data-ncm-lote-url="{{ route('admin.simulacoes.confronto.correcao-ncm.lote', $sim->idsimulacao) }}"
       data-csrf="{{ csrf_token() }}">
    <div class="card-header bg-transparent">
      <h6 class="mb-0"><i class="fas fa-barcode me-1"></i> Correção interna de NCM</h6>
      <p class="text-xs text-muted mb-0 mt-1">
        Marque os produtos, informe o NCM e clique em <strong>Aplicar</strong> — ou digite/cole o NCM direto na linha (salva automaticamente).
        Quando terminar, clique em <strong>Recalcular conferência</strong> no topo para atualizar simulações e projeções.
        A correção vale para <strong>todo o cliente</strong>
        (todas as simulações, meses e projeções 2026–2033) — o arquivo SPED original não é alterado.
      </p>
    </div>
  @if(count($ncmSemPreencher) > 0)
    <div class="card-body border-bottom py-3" id="ncm-lote-toolbar">
      <div class="row g-2 align-items-end">
        <div class="col-lg-4">
          <label class="text-xs text-muted mb-1">Buscar na lista</label>
          <input type="search" class="form-control form-control-sm" id="ncm-filtro" placeholder="Código ou descrição…">
        </div>
        <div class="col-lg-8">
          <div class="d-flex flex-wrap gap-2 align-items-end">
          @if($ncmQtdSugestao > 0)
            <form method="POST" action="{{ route('admin.simulacoes.confronto.correcao-ncm.sugestoes', $sim->idsimulacao) }}" class="d-inline"
                  onsubmit="return confirm('Aplicar NCM sugerido de meses anteriores para {{ $ncmQtdSugestao }} produto(s)?');">
              @csrf
              <button type="submit" class="btn btn-sm btn-success">
                <i class="fas fa-magic me-1"></i> Aplicar {{ $ncmQtdSugestao }} sugestão(ões)
              </button>
            </form>
          @endif
          <form method="POST" action="{{ route('admin.simulacoes.confronto.correcao-ncm.lote', $sim->idsimulacao) }}" id="ncm-lote-form" class="row g-2 align-items-end flex-grow-1">
            @csrf
            <div id="ncm-lote-hidden-codigos"></div>
            <div class="col-md-4">
              <label class="text-xs text-muted mb-1">NCM para selecionados</label>
              <input type="text" name="ncm" class="form-control form-control-sm font-monospace js-ncm-mask" placeholder="0000.00.00" required>
            </div>
            <div class="col-md-8 d-flex gap-2 flex-wrap align-items-end">
              <button type="submit" class="btn btn-sm btn-app-primary" id="ncm-lote-submit" disabled>
                <span class="ncm-lote-btn-label">Aplicar NCM aos <span id="ncm-sel-count">0</span> selecionados</span>
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="ncm-sel-visiveis" title="Marca só os itens visíveis após filtro">
                Selecionar visíveis
              </button>
            </div>
          </form>
          </div>
        </div>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table app-table mb-0" id="ncm-pendencias-table">
        <thead>
          <tr>
            <th class="ncm-sel-col">
              <span class="ncm-sel-col-label d-block mb-1">Sel.</span>
              <input type="checkbox" class="ncm-table-check" id="ncm-check-all" title="Selecionar todos">
            </th>
            <th>Código SPED</th>
            <th>Descrição</th>
            <th>Reg.</th>
            <th class="text-end" title="Ordenado do maior para o menor">Valor total <i class="fas fa-sort-amount-down text-muted ms-1" style="font-size:.65rem"></i></th>
            <th class="text-end">Volume total</th>
            <th class="text-end">Preço médio unit.</th>
            <th>Sugestão</th>
            <th>NCM <span class="text-danger" title="Obrigatório">*</span></th>
          </tr>
        </thead>
        <tbody>
          @foreach($ncmSemPreencher as $item)
            <tr class="ncm-pend-row" data-cod="{{ $item['cod_item'] }}" data-search="{{ strtolower($item['cod_item'].' '.($item['descr_item'] ?? '')) }}">
              <td class="ncm-sel-col">
                <input type="checkbox" class="ncm-table-check ncm-row-check" value="{{ $item['cod_item'] }}" aria-label="Selecionar {{ $item['cod_item'] }}">
              </td>
              <td class="text-xs font-monospace">{{ $item['cod_item'] }}</td>
              <td class="text-xs">{{ Str::limit($item['descr_item'] ?? '', 50) }}</td>
              <td class="text-xs">{{ $item['reg'] ?? '—' }}</td>
              <td class="text-xs text-end font-monospace">
                R$ {{ number_format((float) ($item['valor_total'] ?? 0), 2, ',', '.') }}
              </td>
              <td class="text-xs text-end">
                @if(!empty($item['volume_total']))
                  {{ number_format((float) $item['volume_total'], 2, ',', '.') }}
                  <span class="text-muted">{{ $item['unidade'] ?? '' }}</span>
                @else
                  <span class="text-muted">—</span>
                @endif
              </td>
              <td class="text-xs text-end font-monospace">
                @if(!empty($item['preco_medio']))
                  R$ {{ number_format((float) $item['preco_medio'], 2, ',', '.') }}
                @else
                  <span class="text-muted">—</span>
                @endif
              </td>
              <td class="text-xs">
                @if(!empty($item['ncm_sugerido']))
                  <div class="d-flex flex-column gap-1">
                    <span class="font-monospace">{{ $fmtNcm($item['ncm_sugerido']) }}</span>
                    <span class="text-muted" style="font-size:.65rem">mês {{ $item['ncm_sugerido_periodo'] ?? '—' }}</span>
                    <button type="button" class="btn btn-xs btn-outline-success js-ncm-usar-sugestao py-0 px-1 align-self-start"
                            data-ncm="{{ $item['ncm_sugerido'] }}">
                      Usar
                    </button>
                  </div>
                @else
                  <span class="text-muted">—</span>
                @endif
              </td>
              <td>
                <div class="d-flex align-items-center gap-2">
                  <input type="text"
                         class="form-control form-control-sm font-monospace js-ncm-mask js-ncm-row-input"
                         data-cod-item="{{ $item['cod_item'] }}"
                         @if(!empty($item['ncm_sugerido'])) data-ncm-sugerido="{{ $item['ncm_sugerido'] }}" @endif
                         aria-required="true"
                         title="NCM com 8 dígitos — salva ao completar">
                  <span class="ncm-row-status text-xs text-muted" aria-live="polite"></span>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    <div class="card-body border-top py-2 d-flex flex-wrap justify-content-between align-items-center gap-2" id="ncm-paginacao">
      <span class="text-xs text-muted" id="ncm-pag-info">—</span>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-secondary" id="ncm-pag-prev" disabled>Anterior</button>
        <button type="button" class="btn btn-outline-secondary" id="ncm-pag-next">Próxima</button>
      </div>
    </div>
  @else
    <div class="card-body py-3">
      <p class="text-xs text-muted mb-0">Nenhum produto pendente de NCM.</p>
    </div>
  @endif
  @if(count($ncmCorrecoes) > 0)
    <div class="card-header bg-transparent border-top">
      <h6 class="mb-0 text-sm">Correções salvas para este cliente</h6>
    </div>
    <div class="table-responsive">
      <table class="table app-table mb-0">
        <thead>
          <tr>
            <th>Código</th>
            <th>Descrição</th>
            <th>NCM</th>
            <th>Observação</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach($ncmCorrecoes as $c)
            <tr>
              <td class="text-xs font-monospace">{{ $c['cod_item'] }}</td>
              <td class="text-xs">{{ Str::limit($c['descr_item'] ?? '', 50) }}</td>
              <td class="text-xs font-monospace">{{ $fmtNcm($c['ncm'] ?? '') }}</td>
              <td class="text-xs text-muted">{{ Str::limit($c['observacao'] ?? '', 40) }}</td>
              <td>
                <form method="POST" action="{{ route('admin.simulacoes.confronto.correcao-ncm.remover', $sim->idsimulacao) }}" class="d-inline" onsubmit="if(!confirm('Remover correção de NCM deste código?'))return false;var b=this.querySelector('button');if(b){b.disabled=true;b.textContent='Removendo…';}return true;">
                  @csrf
                  <input type="hidden" name="cod_item_sped" value="{{ $c['cod_item'] }}">
                  <button type="submit" class="btn btn-link btn-sm p-0 text-danger">Remover</button>
                </form>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  @endif
  </div>
  @include('admin.simulacoes._ncm_mask')

@elseif($confrontoSecao === 'classtrib')
  @include('admin.simulacoes._classtrib', [
    'sim' => $sim,
    'grupos' => $classTribGrupos,
    'pendentes' => $classTribPendentes,
    'definidos' => $classTribDefinidos,
    'tabelaVazia' => $classTribTabelaVazia,
    'alerta' => $classTribPainel['alerta'] ?? null,
  ])

@elseif($confrontoSecao === 'cadastro')
  @include('admin.simulacoes._confronto_cadastro', compact('sim', 'semCadastro', 'unidadesDiv'))

@endif

@push('js')
<script>
(function() {
  if (!document.querySelector('.conv-produto')) return;
  function metricasMap(card) {
    var raw = card.getAttribute('data-metricas');
    var list = raw ? JSON.parse(raw) : [];
    var map = {};
    list.forEach(function(m) { map[String(m.unid).toUpperCase()] = m; });
    return map;
  }

  function sugerirFator(map, padrao, outra) {
    var mp = map[String(padrao).toUpperCase()];
    var mo = map[String(outra).toUpperCase()];
    if (!mp || !mo || !(mp.volume > 0) || !(mo.volume > 0)) return '';
    return Math.round((mo.volume / mp.volume) * 10000) / 10000;
  }

  function rebuildLinhas(card) {
    var padrao = card.querySelector('.conv-padrao-select').value;
    var map = metricasMap(card);
    var convRaw = card.getAttribute('data-conversoes');
    var conv = convRaw ? JSON.parse(convRaw) : {};
    var wrap = card.querySelector('.conv-linhas');
    if (!wrap) return;

    wrap.querySelectorAll('.conv-linha-form').forEach(function(form) {
      var outra = form.getAttribute('data-unidade-outra');
      if (String(outra).toUpperCase() === String(padrao).toUpperCase()) {
        form.classList.add('d-none');
        form.classList.remove('d-flex');
        return;
      }
      form.classList.remove('d-none');
      form.classList.add('d-flex');

      form.querySelector('.conv-origem-input').value = outra;
      form.querySelector('.conv-destino-input').value = padrao;
      form.querySelector('.conv-padrao-badge').textContent = padrao;

      var fatorInput = form.querySelector('.conv-fator-input');
      var saved = conv[String(outra).toUpperCase()];
      var sug = sugerirFator(map, padrao, outra);
      if (saved) {
        fatorInput.value = saved;
      } else if (sug !== '') {
        fatorInput.value = sug;
      }

      var sugEl = form.querySelector('.conv-sugestao');
      if (sugEl && sug !== '') {
        var mo = map[String(outra).toUpperCase()];
        var mp = map[String(padrao).toUpperCase()];
        sugEl.textContent = 'SPED: ' + Math.round(mo.volume).toLocaleString('pt-BR') +
          ' ÷ ' + Math.round(mp.volume).toLocaleString('pt-BR');
        sugEl.style.display = '';
      } else if (sugEl) {
        sugEl.style.display = 'none';
      }
    });

    card.querySelectorAll('.conv-units-table tbody tr').forEach(function(tr) {
      var u = tr.getAttribute('data-unid');
      var tipo = tr.getAttribute('data-tipo');
      var ehPadrao = String(u).toUpperCase() === String(padrao).toUpperCase();
      tr.classList.toggle('table-primary', ehPadrao || (tipo === 'sigla' && String(u).toUpperCase() === String(padrao).toUpperCase()));
    });
  }

  document.querySelectorAll('.conv-produto').forEach(function(card) {
    var sel = card.querySelector('.conv-padrao-select');
    if (!sel) return;
    sel.addEventListener('change', function() { rebuildLinhas(card); });
    rebuildLinhas(card);
  });
})();
</script>
@endpush