<%# app/views/operacoes_dashboard/planilha.html.erb %>
<%# Página da Planilha da Operação: tabela espelho (uma linha por NF) com busca
    e paginação. Chega-se aqui pelo botão no Dashboard de Operações, que passa
    o contexto (operação/modo global/período/cross-filters) na URL. %>

<% content_for :head do %>
  <meta name="turbo-cache-control" content="no-cache">
<% end %>

<% ini_iso = @periodo_inicio.strftime('%Y-%m-%d') %>
<% fim_iso = @periodo_fim.strftime('%Y-%m-%d') %>

<div class="space-y-6">

  <%# ── Cabeçalho ─────────────────────────────────────────── %>
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
      <h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :planilha, espaco: false %> Planilha da Operação</h1>
      <p class="text-gray-400 text-sm mt-0.5">
        <% if @modo == 'global' %>
          <%= icone :global %> Global · <%= @periodo_inicio.strftime('%d/%m/%Y') %> – <%= @periodo_fim.strftime('%d/%m/%Y') %>
        <% elsif @metricas&.data_inicio %>
          <%= @metricas.operacoes_label %> · <%= @metricas.data_inicio.strftime('%d/%m/%Y') %> – <%= @metricas.data_fim.strftime('%d/%m/%Y') %>
        <% elsif @operacao %>
          <%= Operacao.label(@operacao) %>
        <% end %>
      </p>
    </div>

    <%= link_to rotulo(:voltar, 'Dashboard de Operações', cor: nil),
        operacoes_dashboard_path({ modo: @modo, operacao: @operacao, inicio: ini_iso, fim: fim_iso }.compact),
        data: { turbo: false },
        class: 'px-4 py-2.5 rounded-xl text-sm whitespace-nowrap bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
  </div>

  <%# ── Seleção de escopo: operação única ou global ───────── %>
  <div class="flex flex-wrap items-center gap-2">
    <% pills = { 'operacao' => [:operacao, 'Operação'], 'global' => [:global, 'Global'] } %>
    <% pills.each do |m, (ic, label)| %>
      <% ativo = @modo == m %>
      <%= link_to rotulo(ic, label, cor: (ativo ? nil : 'text-brand-laranja')),
          operacoes_planilha_path({ modo: m, operacao: @operacao, inicio: ini_iso, fim: fim_iso, q: @busca.presence }.compact),
          data: { turbo: false },
          class: "px-4 py-2 rounded-xl text-sm font-semibold whitespace-nowrap #{ativo ? 'bg-orange-500 text-black' : 'bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500'}" %>
    <% end %>

    <% if @modo == 'operacao' %>
      <form method="get" action="<%= operacoes_planilha_path %>" data-turbo="false" class="flex items-center gap-2">
        <input type="hidden" name="modo" value="operacao">
        <input type="hidden" name="inicio" value="<%= ini_iso %>">
        <input type="hidden" name="fim"    value="<%= fim_iso %>">
        <% if @busca.present? %><input type="hidden" name="q" value="<%= @busca %>"><% end %>
        <select name="operacao" id="planilha-operacao"
                class="bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500 min-w-[240px]">
          <% @operacoes_agrupadas.each do |titulo, ops| %>
            <optgroup label="<%= titulo %>">
              <% ops.each do |op| %>
                <option value="<%= op[:tabela] %>" <%= 'selected' if op[:tabela] == @operacao %>><%= op[:label] %></option>
              <% end %>
            </optgroup>
          <% end %>
        </select>
      </form>

      <%# Planilha Entregas preenchida (modelo entregue ao cliente) %>
      <% if @operacao %>
        <%= link_to rotulo(:baixar, 'Baixar Excel preenchido', cor: nil), operacoes_planilha_baixar_path(operacao: @operacao),
            data: { turbo: false },
            title: 'Planilha Entregas da operação com status/ocorrências preenchidos pelo rastreio',
            class: 'px-4 py-2.5 bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-xl text-sm whitespace-nowrap' %>
      <% end %>
    <% end %>
  </div>

  <%# ── Filtros ativos herdados do dashboard (chips removíveis) ── %>
  <% if @chips.any? %>
    <div class="flex flex-wrap items-center gap-2">
      <span class="text-xs text-gray-500 uppercase tracking-wider">Filtros ativos:</span>
      <% @chips.each do |chip| %>
        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-orange-500/15 border border-orange-500/30 text-orange-300 text-xs">
          <%= chip[:rotulo] %>: <strong class="text-white"><%= chip[:display] || chip[:valor] %></strong>
          <%= link_to icone(:fechar, cor: nil, tamanho: 'w-3.5 h-3.5'), operacoes_planilha_path(request.query_parameters.except(chip[:param], 'pg')),
                data: { turbo: false }, class: 'hover:text-white font-bold', title: 'Remover filtro' %>
        </span>
      <% end %>
      <%= link_to 'Limpar tudo',
            operacoes_planilha_path(request.query_parameters.except('pg', *@chips.map { |c| c[:param] })),
            data: { turbo: false }, class: 'text-xs text-gray-400 hover:text-orange-400 underline' %>
    </div>
  <% end %>

  <%# ── Tabela espelho ─────────────────────────────────────── %>
  <% if @metricas %>
    <%= render 'espelho' %>
  <% else %>
    <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-10 text-center text-gray-400">
      Nenhuma operação encontrada no banco (tabelas <code class="text-orange-400">gade_entregas_*</code>).
    </div>
  <% end %>
</div>

<%# Troca de operação recarrega a planilha %>
<script>
  (function () {
    const sel = document.getElementById('planilha-operacao');
    if (sel) sel.addEventListener('change', function () { sel.form.requestSubmit(); });
  })();
</script>
