<%
  input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
           placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
           focus:ring-[#f97316] transition-colors text-sm'
  pill  = 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold'
%>
<div class="space-y-6">

  <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 :diario, espaco: false %> Eventos de notificação
      </h1>
      <p class="text-gray-400 text-sm mt-0.5">
        O que dispara mensagem e para quais grupos. Você cria quantos eventos quiser —
        o <strong class="text-gray-300">gatilho</strong> sai de uma lista fixa, porque gatilho é código.
      </p>
    </div>
    <%= link_to new_admin_evento_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 transition-colors min-h-[48px] whitespace-nowrap' do %>
      <%= icone :adicionar, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Novo evento
    <% end %>
  </div>

  <%= render 'shared/flash' %>

  <div class="space-y-4">
    <% @eventos.each do |evento| %>
      <%# Evento desativado fica esmaecido: a lista mistura ativo e inativo e sem
          isso os dois pesam igual na varredura visual. %>
      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 <%= 'opacity-60' unless evento.ativo? %>">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2 flex-wrap">
              <h2 class="text-white font-bold text-lg"><%= evento.nome %></h2>
              <span class="<%= pill %> bg-white/5 border border-white/10 text-gray-400">
                <%= evento.gatilho_label %>
              </span>
              <% if evento.sistema? %>
                <span class="<%= pill %> bg-blue-500/15 border border-blue-500/30 text-blue-300"
                      title="Nasce com o sistema: pode desativar, não apagar">sistema</span>
              <% end %>
              <% unless evento.ativo? %>
                <span class="<%= pill %> bg-gray-700 text-gray-300">desativado</span>
              <% end %>
            </div>

            <p class="text-sm text-gray-400 mt-1.5"><%= evento.descricao.presence || '—' %></p>

            <div class="mt-3 space-y-1.5">
              <% assinantes = evento.assinaturas.select(&:ativo) %>
              <% if assinantes.any? %>
                <div class="flex items-start gap-2 flex-wrap text-xs">
                  <span class="text-gray-500 uppercase tracking-wider font-semibold py-1">Grupos</span>
                  <% assinantes.each do |a| %>
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-gray-300">
                      <%= a.grupo_contato.nome %>
                      <span class="text-gray-500 ml-1">· <%= a.canal_label %></span>
                    </span>
                  <% end %>
                </div>
              <% else %>
                <p class="flex items-center gap-1.5 text-xs text-amber-400">
                  <%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %>
                  Nenhum grupo assina — este evento não manda nada.
                </p>
              <% end %>

              <% if evento.agendado? %>
                <p class="flex items-center gap-1.5 text-xs text-gray-500">
                  <%= icone :relogio, cor: 'text-gray-500', tamanho: 'w-3.5 h-3.5', espaco: false %>
                  <%= evento.frequencia == 'semanal' ? "Toda #{Date::DAYNAMES[evento.dia_semana.to_i]}" : 'Todo dia' %>
                  às <%= format('%02d:00', evento.hora.to_i) %>
                </p>
              <% end %>
            </div>
          </div>

          <%# Ações: editor de mensagem por canal + editar/excluir %>
          <div class="flex flex-col items-end gap-2 whitespace-nowrap">
            <div class="flex items-center gap-2">
              <%# O ✓ diz se já existe mensagem montada — sem ela o evento usa o
                  texto padrão do sistema. %>
              <% %w[whatsapp email].each do |canal| %>
                <% montado = evento.template_utilizavel(canal).present? %>
                <%= link_to template_admin_evento_path(evento, canal: canal), data: { turbo: false },
                      title: montado ? 'Mensagem montada no editor' : 'Sem mensagem — usa o texto padrão',
                      class: "inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border transition-colors #{
                        montado ? 'bg-green-500/10 border-green-500/30 text-green-300 hover:border-green-500'
                                : 'bg-[#0a0a0a] border-white/10 text-gray-400 hover:border-[#f97316] hover:text-white'}" do %>
                  <%= icone(montado ? :sucesso : (canal == 'email' ? :email : :telefone),
                            cor: nil, tamanho: 'w-4 h-4', espaco: false) %>
                  <%= canal == 'email' ? 'E-mail' : 'WhatsApp' %>
                <% end %>
              <% end %>
            </div>

            <div class="flex items-center gap-2">
              <%= link_to edit_admin_evento_path(evento), data: { turbo: false },
                    class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
                    title: 'Editar' do %>
                <%= icone :editar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
              <% end %>
              <% if evento.apagavel? %>
                <%= button_to admin_evento_path(evento), method: :delete,
                      class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
                      title: 'Excluir',
                      form: { data: { turbo_confirm: "Excluir o evento #{evento.nome}?" } } do %>
                  <%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
                <% end %>
              <% end %>
            </div>
          </div>
        </div>

        <%# Disparo manual: manda mensagem DE VERDADE. %>
        <% if evento.manual? && evento.ativo? %>
          <details class="mt-5 border-t border-white/5 pt-4 group/disparo">
            <summary class="cursor-pointer select-none inline-flex items-center gap-1.5 text-sm
                            text-[#f97316] hover:text-orange-400 transition-colors">
              <%= icone :expandir, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Disparar agora
            </summary>
            <% com_template = %w[whatsapp email].any? { |c| evento.template_utilizavel(c) } %>
            <%= form_with url: disparar_admin_evento_path(evento), method: :post,
                  data: { turbo: false }, class: 'mt-4 space-y-3' do |f| %>
              <% if com_template %>
                <p class="flex items-start gap-2 text-xs text-green-300 bg-green-500/10
                          border border-green-500/30 rounded-xl px-3 py-2.5">
                  <%= icone :sucesso, cor: nil, tamanho: 'w-4 h-4', espaco: false, classe: 'mt-0.5' %>
                  <span>
                    Este evento tem mensagem montada no editor — ela será usada nos canais configurados.
                    O texto abaixo só vale para o canal que ainda não tem mensagem própria.
                  </span>
                </p>
              <% end %>
              <%= f.text_field :assunto, placeholder: 'Assunto (só e-mail)', value: evento.nome, class: input %>
              <%= f.text_area :corpo, rows: 4, required: !com_template, class: input,
                    placeholder: com_template ? 'Opcional — só para o canal sem mensagem montada' : 'Mensagem que será enviada…' %>
              <%= f.submit 'Enviar para os grupos assinantes',
                    data: { turbo_confirm: 'Isso envia mensagem de verdade para todos os contatos dos grupos assinantes. Confirmar?' },
                    class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
                            rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
            <% end %>
          </details>
        <% end %>
      </div>
    <% end %>

    <% if @eventos.empty? %>
      <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 px-6 py-16 text-center text-gray-500">
        <div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
        <p>Nenhum evento cadastrado.</p>
      </div>
    <% end %>
  </div>
</div>
