<%# app/views/consolidacoes/arquivadas.html.erb %>
<% content_for :title, 'Consolidações arquivadas' %>

<%# flex-wrap pelo mesmo motivo do cabeçalho de consolidacoes/index: título longo
    mais botão não cabem na largura de um celular e esticariam a página. %>
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
  <h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :arquivadas, espaco: false %> Consolidações arquivadas</h1>
  <%= link_to rotulo(:voltar, 'Voltar às ativas', cor: nil), consolidacoes_path,
      class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center' %>
</div>

<p class="text-gray-500 text-sm mb-6">
  Histórico de consolidações arquivadas. Você pode <span class="text-orange-400">reativar</span>
  uma consolidação para voltar a editá-la, ou <span class="text-red-400">excluí-la</span>
  permanentemente — esta ação não pode ser desfeita.
</p>

<%# ── Lista ────────────────────────────────────────────── %>
<% if @consolidacoes.any? %>
  <div class="space-y-3">
    <% @consolidacoes.each do |c| %>
      <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-3">
          <div>
            <div class="flex items-center gap-3 mb-1">
              <%= link_to c.nome, consolidacao_path(c),
                  class: 'text-white font-bold text-lg hover:text-orange-500' %>
              <%= badge_status(c.status) %>
            </div>
            <p class="text-gray-400 text-sm">
              <%= icone :calendario %> <%= l c.data_inicio, format: :short %> <%= icone :avancar, tamanho: 'w-3.5 h-3.5' %> <%= l c.data_fim, format: :short %>
              · <%= icone :pessoa %> <%= c.consolidacao_motoristas.count %> motorista(s)
              · Criada por <%= c.criador.nome_display %>
            </p>
            <p class="text-gray-500 text-xs mt-1">
              <%= icone :arquivar %> Arquivada
              <% if c.arquivado_em.present? %>em <%= l c.arquivado_em, format: :short %><% end %>
              <% if c.arquivador.present? %>por <%= c.arquivador.nome_display %><% end %>
            </p>
          </div>

          <div class="flex flex-col items-end gap-3">
            <div class="text-right">
              <p class="text-orange-500 font-black text-2xl"><%= moeda(c.valor_total) %></p>
              <p class="text-gray-500 text-xs"><%= c.consolidacao_entregas.count %> entregas classificadas</p>
            </div>

            <% if policy(c).destroy? %>
              <div class="flex gap-2">
                <%= button_to reativar_consolidacao_path(c), method: :post,
                    form: { data: { turbo_confirm: 'Reativar esta consolidação? Ela voltará para a lista de ativas.' } },
                    class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-4 py-2.5 rounded-lg text-sm min-h-[44px] inline-flex items-center gap-2' do %>
                  <%= icone :restaurar, cor: nil, tamanho: 'w-5 h-5' %> Reativar
                <% end %>
                <%= button_to consolidacao_path(c), method: :delete,
                    form: { data: { turbo_confirm: 'EXCLUIR PERMANENTEMENTE esta consolidação e todas as suas classificações? Esta ação NÃO pode ser desfeita.' } },
                    class: 'text-red-400 hover:text-white hover:bg-red-600 border border-red-900 px-4 py-2.5 rounded-lg text-sm min-h-[44px] inline-flex items-center gap-2' do %>
                  <%= icone :excluir, cor: nil, tamanho: 'w-5 h-5' %> Excluir
                <% end %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% else %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-12 text-center">
    <p class="mb-4"><%= icone :pasta, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
    <p class="text-gray-400 mb-4">Nenhuma consolidação arquivada.</p>
    <%= link_to 'Ver consolidações ativas', consolidacoes_path,
        class: 'inline-block bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg' %>
  </div>
<% end %>
