<%# app/views/consolidacoes/_lista.html.erb — visão por CONSOLIDAÇÃO %>
<% pode_arquivar = policy(Consolidacao).arquivar? %>

<% if @consolidacoes.any? %>
  <%# ── Seleção em massa ──────────────────────────────────────────────────
      Arquivar uma a uma custava três passos por consolidação (abrir, arquivar,
      voltar para o filtro) — inviável para fechar um mês inteiro de uma vez.

      A linha aparece SEMPRE (não só depois de marcar algo): um controle que só
      existe depois de descobrir que ele existe não é descoberto. Ela só some
      para quem não tem `consolidacao.arquivar`.

      O `data-controller` envolve a linha E a lista porque os checkboxes dos
      cards são targets deste mesmo controller. %>
  <div data-controller="selecao-lote">

    <% if pode_arquivar %>
      <%= form_with url: arquivar_em_lote_consolidacoes_path, method: :post,
                    id: 'form-arquivar-lote',
                    data: { turbo_confirm: 'Arquivar as consolidações marcadas? Elas saem da lista, mas dá para restaurar em "Arquivadas".' },
                    class: 'flex flex-wrap items-center gap-3 bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl px-4 py-3 mb-4' do %>

        <label class="flex items-center gap-2 cursor-pointer min-h-[48px] text-sm text-gray-300 hover:text-white">
          <%# Sem `name`: este checkbox comanda os outros, não é dado do form. %>
          <input type="checkbox" class="w-5 h-5 accent-orange-500"
                 data-selecao-lote-target="todos"
                 data-action="change->selecao-lote#alternarTodos">
          Selecionar todas
        </label>

        <%# Texto inicial NEUTRO de propósito: com o JS fora do ar ele nunca é
            substituído, e "Nenhuma selecionada" fixo na tela seria mentira. %>
        <span data-selecao-lote-target="contador" class="text-sm text-gray-500">
          Marque as que quer arquivar
        </span>

        <%# Começa HABILITADO. Se o JS não carregar (já aconteceu: os assets
            ficaram 404 em produção), um botão que só o JS habilita deixaria a
            função inalcançável — a marcação manual continua funcionando, e o
            controller devolve um aviso quando nada foi marcado. %>
        <button type="submit" data-selecao-lote-target="botao"
                class="ml-auto min-h-[48px] px-4 py-2.5 rounded-lg whitespace-nowrap
                       text-sm font-semibold border border-[#2a2a2a] text-gray-300
                       hover:border-orange-500 hover:text-white transition-colors
                       disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-[#2a2a2a]">
          <%= icone :arquivadas %> Arquivar selecionadas
        </button>
      <% end %>
    <% end %>

    <%# Em celular/monitor pequeno a lista vira carrossel de 10 em 10; em tela
        grande aparece inteira (ver carrossel_controller.js). %>
    <div data-controller="carrossel" data-carrossel-tamanho-value="10" class="relative sm:px-16">
    <div class="space-y-3">
      <% @consolidacoes.each do |c| %>
        <%# O card deixou de ser UM <a> só: com o link envolvendo tudo, clicar no
            checkbox navegava para a consolidação em vez de marcar. Agora a
            caixinha é irmã do link, e o link cobre o resto do card. %>
        <div data-carrossel-target="item"
             class="flex items-stretch bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl
                    hover:border-orange-500 transition-colors overflow-hidden">

          <% if pode_arquivar %>
            <%# Alvo de toque grande (diretriz 3): a área clicável é a coluna
                inteira, não os 20px do quadradinho. `form=` porque o checkbox
                mora FORA do <form> — assim o formulário não precisa envolver a
                lista (e o carrossel) inteira. %>
            <label class="flex items-center pl-5 pr-3 cursor-pointer shrink-0 hover:bg-white/5"
                   aria-label="Selecionar <%= c.nome %>">
              <input type="checkbox" name="ids[]" value="<%= c.id %>"
                     form="form-arquivar-lote"
                     data-selecao-lote-target="item"
                     data-action="change->selecao-lote#atualizar"
                     class="w-5 h-5 accent-orange-500">
            </label>
          <% end %>

          <%= link_to consolidacao_path(c),
              class: "flex-1 min-w-0 block p-5 #{'pl-0' if pode_arquivar}" do %>
            <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">
                  <h3 class="text-white font-bold text-lg"><%= c.nome %></h3>
                  <%= badge_status(c.status) %>
                  <% if c.finalizada? %><%= badge_pagamento(c.status_pagamento) %><% end %>
                </div>
                <p class="text-gray-400 text-sm">
                  <%= icone :calendario %> <%= l c.data_inicio, format: :short %> → <%= l c.data_fim, format: :short %>
                  · <%= icone :pessoa %> <%= c.consolidacao_motoristas.count %> motorista(s)
                  · Criada por <%= c.criador.nome_display %>
                </p>
                <% if c.operacoes.present? %>
                  <p class="text-gray-500 text-xs mt-1"><%= icone :pasta %> <%= c.operacoes_label.join(' · ') %></p>
                <% end %>
              </div>
              <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>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>

      <%= render 'shared/carrossel_controles',
              anterior: 'Consolidações anteriores', proximo: 'Próximas consolidações' %>
    </div>
  </div>
<% else %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-12 text-center">
    <p class="mb-4"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
    <p class="text-gray-400 mb-4">Nenhuma consolidação encontrada.</p>
    <%= link_to 'Criar primeira consolidação', new_consolidacao_path,
        class: 'inline-block bg-orange-500 hover:bg-orange-600 text-black font-bold px-5 py-3 rounded-lg' %>
  </div>
<% end %>
