<%# Prévia do PDF em POP-UP, com navegação entre as folhas no mesmo desenho do
    carrossel do motorista (setas grandes + contador "3 de 72").

    ── O ESTADO "ABERTA" MORA NA URL (?previa=1) ──────────────────────────────
    Foram três tentativas até aqui, e cada uma quebrou de um jeito:

      1. modal por JavaScript  → morreu junto com os assets 404 no servidor: o
         botão não fazia NADA e a tela abria normal, sem erro visível;
      2. <details> nativo      → funcionava, mas não é pop-up e não dava para
         navegar entre as folhas sem fechar;
      3. :target (#previa)     → abria com o JS fora do ar e parava de abrir
         quando ele voltava: o Turbo intercepta o clique, revisita a página e o
         hash se perde no caminho. Pior dos mundos — funcionava no ambiente
         quebrado e falhava no ambiente são.

    Com a prévia na query string nada disso se aplica: é uma página como outra
    qualquer, o Turbo trata como navegação normal, funciona sem JavaScript,
    sobrevive ao F5 e ao "voltar", e o link pode ser enviado para outra pessoa
    já com a folha aberta.

    Fechado, este partial não renderiza NADA: o iframe nem existe, então o
    servidor não monta um PDF que ninguém pediu (era o custo do desenho
    original, que montava o iframe a cada carregamento da tela).

    <iframe> e não <embed>/<object>: o CSP está enforcing com `object_src :none`
    e sem `frame_src`, então cai em `default_src :self` — o iframe de mesma
    origem passa, os outros dois não. %>
<% nomes    = @veiculos.map(&:veiculo) %>
<% posicao  = nomes.index(@veiculo) %>
<% anterior = posicao&.positive? ? nomes[posicao - 1] : nil %>
<% proximo  = posicao && posicao < nomes.size - 1 ? nomes[posicao + 1] : nil %>
<% fechar   = admin_romaneio_path(@romaneio, veiculo: @veiculo) %>

<div data-romaneio-target="overlay"
     class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6
            bg-black/80 backdrop-blur-sm">

  <%# O fundo escuro fecha ao ser clicado — um link cobrindo a área, atrás da
      caixa (que é `relative`). Sem isso, só o ✕ fecharia. %>
  <%= link_to '', fechar, tabindex: -1, 'aria-label': 'Fechar prévia',
              class: 'absolute inset-0' %>

  <div class="relative w-full max-w-6xl h-[92vh] flex flex-col gap-3">
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-white font-semibold truncate">
        Prévia — <span data-romaneio-target="tituloPreview"><%= @veiculo %></span>
      </h2>
      <div class="flex items-center gap-2 shrink-0">
        <%= link_to 'Abrir em outra aba',
                    pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
                    target: '_blank', rel: 'noopener',
                    class: 'text-sm text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-white/10' %>
        <%= link_to fechar, 'aria-label': 'Fechar prévia',
                    class: 'min-w-[48px] min-h-[48px] flex items-center justify-center rounded-xl
                            bg-[#1a1a1a] border border-white/10 text-white hover:bg-[#242424]' do %>
          ✕
        <% end %>
      </div>
    </div>

    <iframe data-romaneio-target="preview"
            src="<%= pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo) %>"
            class="flex-1 w-full rounded-xl border border-white/10 bg-white"
            title="Pré-visualização do romaneio"></iframe>

    <%# AVISO SEMPRE VISÍVEL, não um alerta que aparece só no erro: quando o
        navegador se recusa a desenhar o PDF, ele não avisa ninguém — o quadro
        fica branco e a leitura natural é "o sistema está quebrado". O navegador
        tem uma opção, ligada por padrão em algumas instalações, de BAIXAR PDF em
        vez de exibir; bloqueador de conteúdo (Brave Shields, uBlock) e bloqueio
        de pop-up derrubam o mesmo quadro. Como não dá para detectar isso de
        dentro da página (o iframe é opaco por segurança), a saída honesta é
        dizer onde fica a alternativa. %>
    <p class="text-xs text-gray-400 text-center">
      Quadro em branco? O navegador pode estar configurado para <strong>baixar</strong> PDF
      em vez de exibir, ou um bloqueador está barrando —
      <%= link_to 'abra em outra aba',
                  pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
                  target: '_blank', rel: 'noopener',
                  class: 'underline text-gray-300 hover:text-white' %>
      ou libere PDF para este site nas permissões (cadeado da barra de endereço).
    </p>

    <%# Controles no mesmo desenho do carrossel do motorista (redondos, 56px,
        próximo em laranja), mas como LINKS: cada folha é uma URL. Na ponta vira
        <span> apagado em vez de sumir — botão que some muda o layout no meio da
        conferência e o operador perde o alvo do clique. %>
    <div class="flex items-center justify-center gap-3">
      <% if anterior %>
        <%= link_to admin_romaneio_path(@romaneio, veiculo: anterior, previa: 1),
                    'aria-label': "Folha anterior (#{anterior})",
                    class: 'w-14 h-14 rounded-full flex items-center justify-center
                            bg-[#1a1a1a]/90 backdrop-blur border border-white/15 text-white
                            hover:border-orange-500 transition-colors' do %>
          <%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
        <% end %>
      <% else %>
        <span class="w-14 h-14 rounded-full flex items-center justify-center
                     bg-[#1a1a1a]/50 border border-white/10 text-gray-600 opacity-40">
          <%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
        </span>
      <% end %>

      <span class="bg-[#1a1a1a] border border-[#2a2a2a] text-gray-200 text-sm font-semibold
                   rounded-full px-4 py-2 whitespace-nowrap">
        <%= posicao ? posicao + 1 : 1 %> de <%= nomes.size %> · <%= @veiculo %>
      </span>

      <% if proximo %>
        <%= link_to admin_romaneio_path(@romaneio, veiculo: proximo, previa: 1),
                    'aria-label': "Próxima folha (#{proximo})",
                    class: 'w-14 h-14 rounded-full flex items-center justify-center
                            bg-orange-500/90 backdrop-blur border border-orange-400 text-black
                            hover:bg-orange-500 transition-colors' do %>
          <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
        <% end %>
      <% else %>
        <span class="w-14 h-14 rounded-full flex items-center justify-center
                     bg-orange-500/20 border border-orange-400/30 text-black/40 opacity-40">
          <%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
        </span>
      <% end %>
    </div>
  </div>
</div>
