<%# app/views/consolidacao_entregas/revisar.html.erb — PASSO 3: Revisar %>
<% content_for :title, "Revisar — #{@motorista}" %>

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

  <div class="mb-6">
    <%= link_to rotulo(:voltar, 'Voltar (Passo 2)', cor: nil),
        validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
        class: 'inline-flex items-center gap-1 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-[#2a2a2a] hover:border-orange-500 font-semibold px-4 py-2.5 rounded-lg text-sm min-h-[44px]' %>
    <h1 class="text-2xl font-bold text-white mt-2 flex items-center gap-2"><%= icone :planilha, espaco: false %> Revisão — <%= @motorista %></h1>
    <p class="text-gray-400 text-sm"><%= @consolidacao.nome %></p>
  </div>

  <%# Resumo por tipo — auto-fit em vez de `md:grid-cols-7`.
      Sete colunas fixas a partir de 768px dão ~55px cada quando a sidebar está
      aberta (768 − 256 de menu − padding), destruindo rótulos como
      "Extraordinária" e "Termo Especial". O mínimo de 9rem cabe o maior rótulo. %>
  <div class="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3 mb-6">
    <% [
      ['entrega_normal', 'Normal',         'bg-orange-500 text-black'],
      ['retirada',       'Retirada',       'bg-orange-800 text-white'],
      ['bonus',          'Bônus',          'bg-white text-black'],
      ['desconto',       'Desconto',       'bg-black text-white border border-gray-700'],
      ['extraordinaria', 'Extraordinária', 'bg-purple-600 text-white'],
      ['termo',          'Termo',          'bg-blue-600 text-white'],
      ['termo_especial', 'Termo Especial', 'bg-cyan-600 text-white']
    ].each do |tipo, label, cores| %>
      <div class="<%= cores %> rounded-xl p-4 text-center">
        <p class="font-black text-3xl"><%= @resumo[tipo] || 0 %></p>
        <p class="text-sm font-semibold"><%= label %></p>
      </div>
    <% end %>
  </div>

  <%# Total %>
  <div class="bg-[#1a1a1a] border border-orange-500 rounded-xl p-6 mb-6 text-center">
    <p class="text-gray-400 text-sm mb-1">Total a pagar — <%= @motorista %></p>
    <p class="text-orange-500 font-black text-4xl"><%= moeda(@total) %></p>
    <p class="text-gray-500 text-xs mt-1"><%= @total_classificadas %> entregas classificadas (<%= @total_pilares %> pilares)</p>
  </div>

  <%# Seletor de itens por página %>
  <form method="get" action="<%= revisar_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
        class="flex items-center justify-end gap-2 mb-2">
    <input type="hidden" name="motorista" value="<%= @motorista %>">
    <label class="text-gray-400 text-sm">Itens por página</label>
    <select name="por_pagina" onchange="this.form.submit()"
            class="bg-[#1a1a1a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2 text-sm focus:border-orange-500 focus:outline-none cursor-pointer">
      <% [20, 50, 100].each do |n| %>
        <option value="<%= n %>" <%= 'selected' if @por_pagina == n %>><%= n %></option>
      <% end %>
    </select>
  </form>

  <%# Detalhe das classificações %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl overflow-hidden mb-4">
    <table class="w-full text-sm">
      <thead class="bg-[#0a0a0a] text-gray-400">
        <tr>
          <th class="text-left px-4 py-3">Veículo</th>
          <th class="text-left px-4 py-3">Endereço</th>
          <th class="text-left px-4 py-3">Tipo</th>
          <th class="text-right px-4 py-3">Valor</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-[#2a2a2a]">
        <% @classificacoes.each do |c| %>
          <% endereco_manual = [c.nf_manual.present? ? "NF #{c.nf_manual}" : nil, c.obs_manual.presence].compact.join(' · ') %>
          <tr>
            <td class="px-4 py-3 text-white text-xs"><%= c.entrega_original&.vehicle.presence || (c.manual? ? 'manual' : '—') %></td>
            <td class="px-4 py-3 text-gray-300 text-xs"><%= c.entrega_original&.address.presence || endereco_manual.presence || '—' %></td>
            <td class="px-4 py-3">
              <span class="<%= c.tipo_cor[:bg] %> <%= c.tipo_cor[:text] %> px-2 py-1 rounded text-xs font-bold">
                <%= c.tipo_cor[:label] %><% if (c.termo? || c.termo_especial?) && c.quantidade > 1 %> ×<%= c.quantidade %><% end %>
              </span>
              <% if c.manual? %>
                <span class="ml-1 bg-orange-500/15 text-orange-400 border border-orange-500/40 px-2 py-1 rounded text-xs font-bold"><%= icone :adicionar, cor: nil, tamanho: 'w-3.5 h-3.5' %> Apontamento</span>
              <% end %>
            </td>
            <td class="px-4 py-3 text-right font-bold <%= c.desconto? ? 'text-red-400' : 'text-white' %>">
              <div class="flex items-center justify-end gap-2">
                <span><%= c.desconto? ? '-' : '' %><%= moeda(c.valor_aplicado) %></span>
                <% if c.manual? && !(@consolidacao.finalizada? && !current_user.pode?('consolidacao.editar_finalizada')) %>
                  <%= button_to remover_apontamento_consolidacao_consolidacao_entregas_path(@consolidacao, id: c.id, motorista: @motorista),
                      method: :delete,
                      form: { data: { turbo_confirm: 'Remover este apontamento manual?' } },
                      class: 'text-gray-500 hover:text-red-400 leading-none px-1',
                      title: 'Remover apontamento' do %>
                    <%= icone :fechar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
                  <% end %>
                <% end %>
              </div>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

  <%# Navegação de páginas %>
  <% if @pagy.pages > 1 %>
    <% pag = ->(p) { revisar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, por_pagina: @por_pagina, page: p) } %>
    <nav class="flex items-center justify-center gap-1.5 mb-6 flex-wrap">
      <% if @pagy.prev %>
        <%= link_to '‹', pag.call(@pagy.prev),
            class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
      <% else %>
        <span class="min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-gray-700">‹</span>
      <% end %>

      <% @pagy.series.each do |item| %>
        <% if item == :gap %>
          <span class="px-2 text-gray-500">…</span>
        <% elsif item.is_a?(String) %>
          <span class="min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg bg-orange-500 text-black font-bold"><%= item %></span>
        <% else %>
          <%= link_to item, pag.call(item),
              class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
        <% end %>
      <% end %>

      <% if @pagy.next %>
        <%= link_to '›', pag.call(@pagy.next),
            class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
      <% else %>
        <span class="min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-gray-700">›</span>
      <% end %>
    </nav>
  <% end %>

  <%# Ações finais %>
  <div class="flex flex-col md:flex-row gap-3">
    <% if @proximo %>
      <%= link_to safe_join(["Próximo motorista: #{@proximo}", icone(:avancar, cor: nil)], ' '),
          validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @proximo),
          class: 'flex-1 bg-orange-500 hover:bg-orange-600 text-black font-bold py-3.5 rounded-lg min-h-[48px] flex items-center justify-center text-center' %>
    <% end %>
    <%= link_to rotulo(:salvar, 'Salvar rascunho e voltar', cor: nil), wizard_consolidacao_path(@consolidacao),
        class: 'flex-1 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-[#2a2a2a] font-bold py-3.5 rounded-lg min-h-[48px] flex items-center justify-center' %>
  </div>
</div>
