<%# app/views/admin/romaneios/_operacao.html.erb
    Vínculo MANUAL da operação do mês, feito na própria tela do romaneio.

    Por que aqui e não só na criação: é aqui que o operador descobre que a coluna
    APARELHO saiu vazia. Mandar ele reimportar o plano (única saída até então)
    depende da API do SimpliRoute responder ou de o .xlsx ainda estar em mãos.

    Sem JavaScript de propósito: <details> nativo + form comum. Este controle é o
    conserto de um romaneio que já está errado — precisa funcionar mesmo quando o
    Stimulus não carrega (foi exatamente esse o caso em 28/08/2026, com os assets
    dando 404 no servidor e a tela inteira sem JS). %>
<% vinculada = @romaneio.operacao_tabela.present? %>

<%# O cabeçalho e o formulário ficam EMPILHADOS, não lado a lado: aberto, o
    seletor + botão precisam da largura toda da caixa; espremidos numa coluna
    lateral o rótulo do estado saía cortado justamente quando ele é a informação
    que importa ("Nenhuma vinculada"). %>
<div class="bg-[#111] border border-white/5 rounded-2xl p-4 space-y-3">
  <div>
    <p class="text-xs uppercase tracking-wide text-gray-500">Operação do mês</p>
    <p class="<%= vinculada ? 'text-white' : 'text-amber-300' %> font-semibold">
      <%= vinculada ? @romaneio.operacao_label : 'Nenhuma vinculada — APARELHO não é preenchido sozinho' %>
    </p>
    <p class="text-xs text-gray-500 mt-0.5 max-w-prose">
      É ela que diz quem é paciente <strong>NOVO</strong>, e quem é novo sempre leva aparelho.
    </p>
  </div>

  <%# Já vinculada: fica fechado, para não convidar a trocar sem motivo. Sem
      operação: abre sozinho, porque é a pendência da tela. %>
  <%# group-open: aberto, o gatilho fica discreto. Aberto ele vira só o título do
      painel — deixá-lo laranja poria DOIS botões laranja um sobre o outro e o
      operador não saberia qual confirma. %>
  <details class="group" <%= 'open' unless vinculada %>>
    <summary class="cursor-pointer list-none px-4 py-2.5 rounded-xl min-h-[48px] inline-flex items-center gap-2
                    border border-white/10 group-open:bg-[#1a1a1a] group-open:text-gray-300
                    group-open:font-normal
                    <%= vinculada ? 'bg-[#1a1a1a] hover:bg-[#242424] text-white'
                                  : 'bg-[#f97316] hover:bg-orange-500 text-white font-semibold border-transparent' %>">
      <%# cor: nil e espaco: false — o fundo laranja apagaria o laranja da marca
          e o container já tem gap-2. %>
      <%= icone :operacao, cor: nil, espaco: false %>
      <%= vinculada ? 'Trocar operação' : 'Vincular operação' %>
    </summary>

    <%= form_with url: vincular_operacao_admin_romaneio_path(@romaneio), method: :patch,
                  class: 'mt-3 flex flex-col sm:flex-row gap-2 sm:items-center' do %>
      <input type="hidden" name="veiculo" value="<%= @veiculo %>">
      <select name="operacao_tabela" required
              class="bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
                     focus:outline-none focus:border-orange-500 min-h-[48px] sm:min-w-[280px]">
        <option value="">Escolha a operação…</option>
        <% @operacoes_agrupadas.each do |titulo, ops| %>
          <optgroup label="<%= titulo %>">
            <% ops.each do |op| %>
              <option value="<%= op[:tabela] %>" <%= 'selected' if op[:tabela] == @romaneio.operacao_tabela %>>
                <%= op[:label] %>
              </option>
            <% end %>
          </optgroup>
        <% end %>
      </select>
      <button type="submit"
              class="px-4 py-2.5 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
                     rounded-xl min-h-[48px] whitespace-nowrap">
        Vincular e preencher APARELHO
      </button>
    <% end %>

    <p class="text-xs text-gray-500 mt-2 max-w-prose">
      Preenche APARELHO, TELEFONES e NOME pelas notas fiscais já importadas.
      O que você digitou na tabela é mantido — só os campos sem edição são
      atualizados.
    </p>
  </details>
</div>
