<%# app/views/consolidacoes/show.html.erb %>
<% content_for :title, @consolidacao.nome %>
<% formas_pagamento = [['PIX', 'pix'], ['Transferência', 'transferencia'], ['Dinheiro', 'dinheiro']] %>
<% pode_pagar = @consolidacao.finalizada? && policy(@consolidacao).registrar_pagamento? %>

<div class="max-w-4xl mx-auto">

  <div class="mb-6">
    <%= link_to '← Consolidações', consolidacoes_path, class: 'text-gray-500 hover:text-orange-500 text-sm' %>
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mt-2">
      <div>
        <div class="flex items-center gap-3 flex-wrap">
          <h1 class="text-2xl font-bold text-white"><%= @consolidacao.nome %></h1>
          <%= badge_status(@consolidacao.status) %>
          <% if @consolidacao.finalizada? %><%= badge_pagamento(@consolidacao.status_pagamento) %><% end %>
        </div>
        <p class="text-gray-400 text-sm mt-1">
          <%= icone :calendario %> <%= l @consolidacao.data_inicio, format: :short %> <%= icone :avancar, tamanho: 'w-3.5 h-3.5' %> <%= l @consolidacao.data_fim, format: :short %>
          · Criada por <%= @consolidacao.criador.nome_display %>
          <% if @consolidacao.finalizada? %>
            · Finalizada por <%= @consolidacao.finalizador&.nome_display %> em <%= l @consolidacao.finalizado_em, format: :short %>
          <% end %>
        </p>
        <% if @consolidacao.operacoes.present? %>
          <p class="text-gray-400 text-sm mt-1">
            <%= icone :pasta %> Operação:
            <% @consolidacao.operacoes_label.each do |op| %>
              <span class="inline-block bg-[#2a2a2a] text-gray-200 rounded-full px-2.5 py-0.5 text-xs"><%= op %></span>
            <% end %>
          </p>
        <% end %>
      </div>
      <div class="flex gap-2">
        <% if @consolidacao.rascunho? %>
          <%= link_to rotulo(:editar, 'Continuar validação', cor: nil), wizard_consolidacao_path(@consolidacao),
              class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg min-h-[48px] flex items-center' %>
        <% end %>
        <%= link_to rotulo(:dashboard, 'Relatório financeiro', cor: nil), gerar_pdf_financeiro_consolidacao_path(@consolidacao),
            data: { turbo: false },
            class: 'bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-orange-500 font-semibold px-4 py-3 rounded-lg min-h-[48px] flex items-center' %>
        <% if policy(@consolidacao).destroy? && !@consolidacao.arquivada? %>
          <%= button_to arquivar_consolidacao_path(@consolidacao), method: :post,
              form: { data: { turbo_confirm: 'Arquivar esta consolidação? Ela não será excluída, apenas movida para o arquivo.' } },
              class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center gap-2' do %>
            <%= icone :arquivar, cor: nil, tamanho: 'w-5 h-5' %> Arquivar
          <% end %>
        <% end %>
      </div>
    </div>

    <%# ── Pagamento da operação inteira ─────────────────────── %>
    <% if pode_pagar %>
      <div class="flex flex-col sm:flex-row sm:items-center gap-2 mt-4 bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-4">
        <span class="text-gray-400 text-sm font-medium mr-1"><%= icone :pagamento %> Operação inteira:</span>
        <% if @consolidacao.status_pagamento != :pago %>
          <%# Form único (id) — os inputs de NF e os botões "Marcar pago" de cada
              linha se associam a ele via atributo HTML5 form=, evitando <form> aninhado. %>
          <%= form_with url: registrar_pagamento_consolidacao_path(@consolidacao), method: :post,
              id: 'form-pagar-tudo', class: 'flex items-center gap-2' do |f| %>
            <%= f.select :forma_pagamento, options_for_select(formas_pagamento, 'pix'),
                {}, class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 text-sm' %>
            <%= f.button type: :submit,
                data: { turbo_confirm: 'Marcar TODOS os motoristas pendentes desta consolidação como PAGOS? Confirme que a Nota Fiscal de cada um foi preenchida.' },
                class: 'bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2.5 rounded-lg text-sm cursor-pointer min-h-[44px] inline-flex items-center gap-2' do %>
              <%= icone :dinheiro, cor: nil, tamanho: 'w-5 h-5' %> Marcar tudo como pago
            <% end %>
          <% end %>
        <% end %>
        <% if @consolidacao.status_pagamento != :pendente %>
          <%= button_to cancelar_pagamento_consolidacao_path(@consolidacao), method: :post,
              form: { data: { turbo_confirm: 'Estornar o pagamento de TODOS os motoristas?' } },
              class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-2.5 rounded-lg text-sm min-h-[44px] inline-flex items-center gap-2' do %>
            <%= icone :estornar, cor: nil, tamanho: 'w-5 h-5' %> Estornar tudo
          <% end %>
        <% end %>
      </div>
    <% end %>
  </div>

  <%# Total geral %>
  <div class="bg-[#1a1a1a] border border-orange-500 rounded-xl p-6 mb-6 text-center">
    <p class="text-gray-400 text-sm">Valor total da consolidação</p>
    <p class="text-orange-500 font-black text-4xl"><%= moeda(@consolidacao.valor_total) %></p>
  </div>

  <%# Motoristas + botões de PDF %>
  <h2 class="text-white font-bold text-lg mb-3 flex items-center gap-2"><%= icone :usuarios, espaco: false %> Motoristas</h2>
  <div class="space-y-3">
    <% @motoristas.each do |cm| %>
      <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <div class="flex items-center gap-2 flex-wrap">
              <p class="text-white font-bold text-lg"><%= cm.motorista_nome %></p>
              <% if @consolidacao.finalizada? %>
                <%= badge_pagamento(cm.pago? ? :pago : :pendente) %>
              <% end %>
            </div>
            <p class="text-orange-500 font-black text-xl"><%= moeda(cm.valor_total) %></p>
            <%# Breakdown por veículo (consolidados / abertos). Informativo — o
                pagamento continua sendo do motorista inteiro. %>
            <% veiculos = @veiculos_por_motorista[cm.motorista_nome] %>
            <% if veiculos.present? %>
              <div class="flex flex-wrap gap-1.5 mt-1">
                <% veiculos.each do |cv| %>
                  <span class="text-xs px-2 py-0.5 rounded border <%= cv.fechado? ? 'border-green-500/50 text-green-400' : 'border-[#2a2a2a] text-gray-400' %>">
                    <%= cv.fechado? ? icone(:travado, cor: nil, tamanho: 'w-3.5 h-3.5') : icone(:ponto_vazio, cor: nil, tamanho: 'w-3.5 h-3.5') %> <%= cv.vehicle %> · <%= moeda(cv.valor_total) %>
                  </span>
                <% end %>
              </div>
            <% end %>
            <% if cm.pago? %>
              <p class="text-green-400 text-xs mt-1">
                <%= icone :dinheiro, cor: nil %> Pago em <%= l cm.pago_em, format: :short %>
                <% if cm.forma_pagamento.present? %>via <%= cm.forma_pagamento.humanize %><% end %>
                <% if cm.pagador.present? %>por <%= cm.pagador.nome_display %><% end %>
              </p>
              <% if cm.nota_fiscal.present? %>
                <p class="text-gray-300 text-xs mt-0.5"><%= icone :nota_fiscal %> NF <%= cm.nota_fiscal %></p>
              <% end %>
            <% end %>

            <% if pode_pagar %>
              <div class="mt-2">
                <% if cm.pago? %>
                  <%= button_to cancelar_pagamento_consolidacao_path(@consolidacao, consolidacao_motorista_id: cm.id), method: :post,
                      form: { data: { turbo_confirm: "Estornar o pagamento de #{cm.motorista_nome}?" } },
                      class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
                    <%= icone :estornar, cor: nil, tamanho: 'w-4 h-4' %> Estornar pagamento
                  <% end %>
                <% else %>
                  <%# Inputs/botão associados ao form único #form-pagar-tudo via atributo form=. %>
                  <div class="flex items-center gap-2 flex-wrap">
                    <%= text_field_tag "notas_fiscais[#{cm.id}]", nil, form: 'form-pagar-tudo',
                        placeholder: 'Nº Nota Fiscal',
                        class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-2 py-2 text-xs w-36' %>
                    <%= button_tag type: :submit, form: 'form-pagar-tudo',
                        name: 'consolidacao_motorista_id', value: cm.id,
                        data: { turbo_confirm: "Marcar #{cm.motorista_nome} como pago?" },
                        class: 'bg-green-600 hover:bg-green-700 text-white font-bold px-3 py-2 rounded-lg text-xs cursor-pointer min-h-[40px] inline-flex items-center gap-1.5' do %>
                      <%= icone :dinheiro, cor: nil, tamanho: 'w-4 h-4' %> Marcar pago
                    <% end %>
                  </div>
                <% end %>
              </div>
            <% end %>
          </div>
          <div class="flex flex-wrap gap-2">
            <%# Preview abre modal %>
            <button onclick="abrirPreview('<%= preview_extrato_consolidacao_path(@consolidacao, motorista: cm.motorista_nome) %>')"
                    class="bg-[#0a0a0a] hover:bg-[#2a2a2a] text-white border border-orange-500 font-semibold px-4 py-3 rounded-lg text-sm min-h-[48px]">
              <%= icone :visualizar %> Ver antes de gerar
            </button>
            <%= link_to rotulo(:documento, 'Relatório Individual', cor: nil),
                gerar_pdf_relatorio_consolidacao_path(@consolidacao, motorista: cm.motorista_nome),
                data: { turbo: false },
                class: 'bg-orange-800 hover:bg-orange-700 text-white font-semibold px-4 py-3 rounded-lg text-sm min-h-[48px] flex items-center' %>
            <%= link_to rotulo(:nota_fiscal, 'Gerar Extrato', cor: nil),
                gerar_pdf_extrato_consolidacao_path(@consolidacao, motorista: cm.motorista_nome),
                data: { turbo: false },
                class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-4 py-3 rounded-lg text-sm min-h-[48px] flex items-center' %>
          </div>
        </div>
      </div>
    <% end %>
  </div>

  <%# ── Apontamentos manuais (notas que chegaram por fora) ─────────────── %>
  <% if @apontamentos.present? %>
    <% pode_editar = !(@consolidacao.finalizada? && !current_user.pode?('consolidacao.editar_finalizada')) %>
    <h2 class="text-white font-bold text-lg mt-8 mb-3 flex items-center gap-2"><%= icone :adicionar, espaco: false %> Apontamentos manuais</h2>
    <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-[#0a0a0a] text-gray-400">
          <tr>
            <th class="text-left px-4 py-3">Nota / Motorista</th>
            <th class="text-left px-4 py-3">Classificações</th>
            <th class="text-right px-4 py-3">Valor</th>
            <% if pode_editar %><th class="px-4 py-3"></th><% end %>
          </tr>
        </thead>
        <tbody class="divide-y divide-[#2a2a2a]">
          <% @apontamentos.each do |(motorista, _tracking), pilares| %>
            <% eh_termo = pilares.first.termo? || pilares.first.termo_especial? %>
            <% entrega = eh_termo ? nil : pilares.first.entrega_original %>
            <% nf_exibida = entrega&.numero_nf || pilares.first.nf_manual %>
            <% obs_manual = pilares.first.obs_manual %>
            <% total = pilares.sum { |p| p.desconto? ? -p.valor_aplicado : p.valor_aplicado } %>
            <tr>
              <td class="px-4 py-3">
                <p class="text-white font-bold"><%= if pilares.first.termo?
                                                     rotulo(:documento, 'Entrega de termo')
                                                   elsif pilares.first.termo_especial?
                                                     rotulo(:termo_especial, 'Entrega de termo especial')
                                                   else
                                                     "NF #{nf_exibida.presence || '—'}"
                                                   end %></p>
                <p class="text-gray-400 text-xs">
                  <%= motorista %><% if entrega&.vehicle.present? %> · <%= entrega.vehicle %><% end %>
                  <% if entrega.nil? && obs_manual.present? %> · <%= obs_manual %><% end %>
                </p>
              </td>
              <td class="px-4 py-3">
                <div class="flex flex-wrap gap-1">
                  <% pilares.each do |p| %>
                    <span class="<%= p.tipo_cor[:bg] %> <%= p.tipo_cor[:text] %> px-2 py-1 rounded text-xs font-bold"><%= p.tipo_cor[:label] %><% if (p.termo? || p.termo_especial?) && p.quantidade > 1 %> ×<%= p.quantidade %><% end %></span>
                  <% end %>
                </div>
              </td>
              <td class="px-4 py-3 text-right font-bold <%= total.negative? ? 'text-red-400' : 'text-white' %>"><%= moeda(total) %></td>
              <% if pode_editar %>
                <td class="px-4 py-3 text-right">
                  <%= button_to remover_apontamento_consolidacao_consolidacao_entregas_path(@consolidacao, tracking_id: pilares.first.tracking_id, motorista: motorista),
                      method: :delete,
                      form: { data: { turbo_confirm: eh_termo ? "Remover a entrega de termo de #{motorista}?" : "Remover o apontamento da NF #{nf_exibida.presence || '—'} de #{motorista}?" } },
                      class: 'text-gray-400 hover:text-red-400 border border-[#2a2a2a] hover:border-red-500/50 px-3 py-2 rounded-lg text-xs min-h-[40px] inline-flex items-center gap-1.5' do %>
                    <%= icone :fechar, cor: nil, tamanho: 'w-3.5 h-3.5' %> Remover
                  <% end %>
                </td>
              <% end %>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  <% end %>
</div>

<%# ── Modal de Preview ─────────────────────────────────── %>
<div id="modal-preview" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4">
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl max-w-2xl w-full max-h-[85vh] flex flex-col">
    <div class="flex items-center justify-between px-6 py-4 border-b border-[#2a2a2a]">
      <h3 class="text-white font-bold flex items-center gap-2"><%= icone :visualizar, espaco: false %> Pré-visualização do Extrato</h3>
      <button onclick="fecharPreview()" class="text-gray-400 hover:text-white min-w-[44px] min-h-[44px]" aria-label="Fechar"><%= icone :fechar, cor: nil, tamanho: 'w-6 h-6', espaco: false %></button>
    </div>
    <div id="modal-preview-conteudo" class="overflow-y-auto p-6 flex-1">
      <div class="flex justify-center py-10"><div class="spinner w-10 h-10"></div></div>
    </div>
    <div class="flex gap-3 px-6 py-4 border-t border-[#2a2a2a]">
      <a id="modal-confirmar" href="#" data-turbo="false"
         class="flex-1 bg-orange-500 hover:bg-orange-600 text-black font-bold py-3 rounded-lg text-center min-h-[48px] flex items-center justify-center">
        <%= icone :confirmar, cor: nil %> Confirmar e baixar PDF
      </a>
      <button onclick="fecharPreview()"
              class="px-6 py-3 text-gray-400 hover:text-white border border-[#2a2a2a] rounded-lg min-h-[48px]">
        <%= icone :voltar, cor: nil, tamanho: 'w-5 h-5' %> Voltar
      </button>
    </div>
  </div>
</div>

<script>
  async function abrirPreview(url) {
    const modal = document.getElementById('modal-preview');
    const conteudo = document.getElementById('modal-preview-conteudo');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    conteudo.innerHTML = '<div class="flex justify-center py-10"><div class="spinner w-10 h-10"></div></div>';

    const resp = await fetch(url);
    conteudo.innerHTML = await resp.text();

    // O link de confirmar aponta para o PDF do mesmo motorista
    document.getElementById('modal-confirmar').href =
      url.replace('preview_extrato', 'gerar_pdf_extrato');
  }
  function fecharPreview() {
    const modal = document.getElementById('modal-preview');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
  }
</script>
