<% content_for :title, 'Variáveis de mensagem' %>

<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
  <div>
    <h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :tag, espaco: false %> Variáveis de mensagem</h1>
    <p class="text-gray-400 text-sm mt-0.5">
      Escreva <span class="font-mono text-orange-400">{{assim}}</span> no texto e o sistema troca pelo valor na hora do envio.
    </p>
  </div>
  <%= link_to new_admin_variavel_path, data: { turbo: false },
        class: 'inline-flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold rounded-xl min-h-[48px] whitespace-nowrap' do %>
    <%= icone :adicionar, cor: nil %> Nova variável
  <% end %>
</div>

<%# ── As suas ─────────────────────────────────────────── %>
<% if @variaveis.any? %>
  <div class="space-y-3 mb-8">
    <% @variaveis.each do |v| %>
      <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
        <div class="min-w-0">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="font-mono text-orange-400 font-semibold"><%= v.marcador %></span>
            <% unless v.ativo? %>
              <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-red-600/20 text-red-400">Desativada</span>
            <% end %>
          </div>
          <p class="text-white mt-1 break-words"><%= v.valor %></p>
          <% if v.descricao.present? %>
            <p class="text-gray-500 text-sm mt-0.5"><%= v.descricao %></p>
          <% end %>
        </div>
        <div class="flex gap-2 shrink-0">
          <%= link_to rotulo(:editar, 'Editar', cor: nil), edit_admin_variavel_path(v), data: { turbo: false },
              class: 'px-4 py-3 text-gray-300 hover:text-white border border-[#2a2a2a] hover:border-orange-500 rounded-xl min-h-[48px] flex items-center' %>
          <%= button_to admin_variavel_path(v), method: :delete,
                class: 'px-4 py-3 text-red-400 hover:text-red-300 border border-[#2a2a2a] hover:border-red-500 rounded-xl min-h-[48px] flex items-center gap-2',
                form: { data: { turbo_confirm: "Excluir #{v.marcador}? Mensagens que a usam passam a mostrar espaço em branco." } } do %>
            <%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Excluir
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
<% else %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-10 text-center mb-8">
    <p class="mb-3"><%= icone :vazio, tamanho: 'w-12 h-12', cor: 'text-gray-600', espaco: false %></p>
    <p class="text-gray-300">Você ainda não criou nenhuma variável.</p>
    <p class="text-gray-500 text-sm mt-1">Boas primeiras: telefone do suporte, horário de atendimento, endereço da base.</p>
  </div>
<% end %>

<%# ── As que já existem no sistema ─────────────────────
    Listadas aqui para o ADM não tentar cadastrar uma que já existe (o cadastro
    recusaria) e para descobrir o que dá para usar sem criar nada. %>
<h2 class="text-white font-bold text-lg mb-1">Já disponíveis no sistema</h2>
<p class="text-gray-400 text-sm mb-4">Use à vontade nas mensagens — não precisam ser cadastradas.</p>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <% @do_sistema.each do |origem, itens| %>
    <% next if itens.empty? %>
    <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl overflow-hidden">
      <div class="px-5 py-3 bg-[#0f0f0f] border-b border-[#2a2a2a]">
        <h3 class="text-white font-semibold text-sm"><%= Notificacao::CatalogoVariaveis::ORIGENS[origem] %></h3>
      </div>
      <div class="divide-y divide-[#2a2a2a]">
        <% itens.each do |v| %>
          <div class="px-5 py-3">
            <span class="font-mono text-orange-400 text-sm">{{<%= v[:chave] %>}}</span>
            <p class="text-gray-400 text-xs mt-0.5"><%= v[:descricao] %></p>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
