<%# app/views/consolidacoes/wizard.html.erb — PASSO 1: Selecionar motorista %>
<% content_for :title, "Wizard — #{@consolidacao.nome}" %>

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

  <%# Header do wizard %>
  <div class="mb-6">
    <%= link_to '← Voltar para consolidações', consolidacoes_path, class: 'text-gray-500 hover:text-orange-500 text-sm' %>
    <h1 class="text-2xl font-bold text-white mt-2"><%= @consolidacao.nome %></h1>
    <p class="text-gray-400 text-sm">
      📅 <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %>
      · <%= badge_status(@consolidacao.status) %>
    </p>
  </div>

  <%# Indicador de passos %>
  <div class="flex items-center gap-2 mb-8">
    <div class="flex items-center gap-2 text-orange-500 font-bold">
      <span class="w-8 h-8 bg-orange-500 text-black rounded-full flex items-center justify-center">1</span>
      Selecionar motorista
    </div>
    <div class="flex-1 h-px bg-[#2a2a2a]"></div>
    <div class="flex items-center gap-2 text-gray-600">
      <span class="w-8 h-8 bg-[#1a1a1a] border border-[#2a2a2a] rounded-full flex items-center justify-center">2</span>
      Validar entregas
    </div>
    <div class="flex-1 h-px bg-[#2a2a2a]"></div>
    <div class="flex items-center gap-2 text-gray-600">
      <span class="w-8 h-8 bg-[#1a1a1a] border border-[#2a2a2a] rounded-full flex items-center justify-center">3</span>
      Revisar
    </div>
  </div>

  <%# Apontamento manual — adiciona entrega por fora (busca pela NF na rastreio) %>
  <% unless @consolidacao.finalizada? && current_user.operador? %>
    <div data-controller="apontamento"
         data-apontamento-buscar-url-value="<%= buscar_nf_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
         data-apontamento-apontar-url-value="<%= apontar_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
         class="mb-4">
      <button type="button" data-action="apontamento#abrir"
              class="w-full md:w-auto inline-flex items-center justify-center gap-2 bg-[#1a1a1a] hover:bg-[#2a2a2a] text-white border border-dashed border-orange-500/60 hover:border-orange-500 font-semibold px-4 py-3 rounded-lg min-h-[48px]">
        ➕ Apontamento manual
        <span class="text-gray-500 text-xs font-normal hidden md:inline">(nota que chegou por fora)</span>
      </button>

      <%# Modal %>
      <div data-apontamento-target="modal" data-action="click->apontamento#fundo"
           class="hidden fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4">
        <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-xl font-bold text-white">Apontamento manual</h2>
            <button type="button" data-action="apontamento#fechar"
                    class="text-gray-500 hover:text-white text-2xl leading-none">✕</button>
          </div>
          <p class="text-gray-400 text-sm mb-4">Busque a nota pela base de rastreio e adicione ao fechamento do motorista correspondente.</p>

          <p data-apontamento-target="erro" class="hidden bg-red-500/10 text-red-400 border border-red-500/30 rounded-lg px-3 py-2 text-sm mb-3"></p>

          <%# Busca da NF %>
          <form data-action="submit->apontamento#buscar" class="flex gap-2 mb-4">
            <input data-apontamento-target="nf" type="text" inputmode="numeric"
                   placeholder="Número da nota (NF)"
                   class="flex-1 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-3 text-base focus:border-orange-500 focus:outline-none">
            <button type="submit"
                    class="bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 rounded-lg min-h-[48px]">Buscar</button>
          </form>

          <%# Resultados (preenchidos via JS) %>
          <div data-apontamento-target="resultados" class="space-y-2 mb-4"></div>

          <%# Confirmação — pilares (múltiplos) + adicionar (oculto até a busca retornar) %>
          <div data-apontamento-target="confirmar" class="hidden border-t border-[#2a2a2a] pt-4">
            <label class="block text-gray-400 text-sm mb-2">Classificar como <span class="text-gray-600">(pode marcar mais de uma)</span></label>
            <div class="grid grid-cols-2 gap-2 mb-4">
              <% [['entrega_normal', '🚚 Entrega Normal',        Configuracao.preco_entrega],
                  ['retirada',       '📦 Retirada',             Configuracao.preco_retirada],
                  ['bonus',          '⭐ Bônus',                Configuracao.preco_bonus],
                  ['desconto',       '⚠️ Desconto',             Configuracao.preco_desconto],
                  ['extraordinaria', '✨ Entrega Extraordinária', Configuracao.preco_extraordinaria]].each do |tipo, label, preco| %>
                <label class="flex items-center gap-2 bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-3 py-3 cursor-pointer hover:border-orange-500 text-sm text-white">
                  <input type="checkbox" value="<%= tipo %>" data-apontamento-target="tipoCheck"
                         <%= 'checked' if tipo == 'entrega_normal' %>
                         class="accent-orange-500">
                  <span><%= label %><br><span class="text-gray-500 text-xs"><%= moeda(preco) %></span></span>
                </label>
              <% end %>
            </div>
            <button type="button" data-action="apontamento#apontar"
                    class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3.5 rounded-lg min-h-[48px]">
              Adicionar apontamento ✓
            </button>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <%# Lista de motoristas %>
  <div class="space-y-3">
    <% @motoristas.each do |m| %>
      <%= link_to validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: m[:registro].motorista_nome),
          class: "block bg-[#1a1a1a] border rounded-xl p-5 transition-colors
                  #{m[:completo] ? 'border-green-600 hover:border-green-500' : 'border-[#2a2a2a] hover:border-orange-500'}" do %>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-full flex items-center justify-center text-xl font-black
                        <%= m[:completo] ? 'bg-green-600 text-white' : 'bg-orange-500 text-black' %>">
              <%= m[:completo] ? '✓' : m[:registro].motorista_nome.first.upcase %>
            </div>
            <div>
              <p class="text-white font-bold text-lg"><%= m[:registro].motorista_nome %></p>
              <p class="text-gray-400 text-sm">
                <%= m[:total] %> entregas pagas no período
                · <span class="<%= m[:completo] ? 'text-green-400' : 'text-orange-400' %>">
                    <%= m[:classificadas] %>/<%= m[:total] %> classificadas
                  </span>
                <% if m[:apontamentos].positive? %>
                  · <span class="text-orange-400">➕ <%= m[:apontamentos] %> apontamento<%= 's' if m[:apontamentos] > 1 %></span>
                <% end %>
              </p>
            </div>
          </div>
          <div class="text-right">
            <p class="text-orange-500 font-bold"><%= moeda(m[:registro].valor_total) %></p>
            <span class="text-gray-600 text-2xl">→</span>
          </div>
        </div>
        <div class="mt-3">
          <% pct = m[:total].zero? ? 0 : (m[:classificadas] * 100 / m[:total]) %>
          <div class="w-full bg-[#0a0a0a] rounded-full h-2">
            <div class="h-2 rounded-full <%= m[:completo] ? 'bg-green-500' : 'bg-orange-500' %> transition-all"
                 style="width: <%= pct %>%"></div>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>

  <%# Finalizar — só habilita se tudo classificado %>
  <% tudo_completo = @motoristas.all? { |m| m[:completo] } && @motoristas.any? %>
  <div class="mt-8 bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5 flex items-center justify-between">
    <div>
      <p class="text-white font-bold">Total da consolidação</p>
      <p class="text-orange-500 font-black text-3xl"><%= moeda(@consolidacao.valor_total) %></p>
    </div>
    <% if @consolidacao.rascunho? %>
      <%= button_to 'Finalizar consolidação ✓', finalizar_consolidacao_path(@consolidacao),
          method: :post,
          disabled: !tudo_completo,
          data: { turbo_confirm: 'Finalizar? Após finalizada, a consolidação não poderá ser editada por operadores.' },
          class: "font-bold px-6 py-3.5 rounded-lg min-h-[48px] transition-colors
                  #{tudo_completo ? 'bg-green-600 hover:bg-green-500 text-white cursor-pointer' : 'bg-[#2a2a2a] text-gray-600 cursor-not-allowed'}" %>
    <% end %>
  </div>
  <% unless tudo_completo %>
    <p class="text-gray-500 text-sm mt-2 text-center">⚠️ Classifique todas as entregas de todos os motoristas para poder finalizar.</p>
  <% end %>
</div>
