<%# app/views/admin/perfis_acesso/index.html.erb %>
<% content_for :title, 'Perfis de acesso' %>

<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 :usuarios, espaco: false %> Perfis de acesso
    </h1>
    <p class="text-gray-400 text-sm mt-0.5">
      O perfil define o que a pessoa enxerga e pode fazer. Mudou a regra, muda aqui — vale para todos do perfil.
    </p>
  </div>
  <%= link_to new_admin_perfil_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 %> Novo perfil
  <% end %>
</div>

<% if @perfis.any? %>
  <div class="space-y-3">
    <% @perfis.each do |perfil| %>
      <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-5">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div class="min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
              <h2 class="text-white font-bold text-lg"><%= perfil.nome %></h2>
              <% if perfil.sistema? %>
                <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-gray-700 text-gray-300">Do sistema</span>
              <% end %>
              <% unless perfil.ativo? %>
                <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-red-600/20 text-red-400">Desativado</span>
              <% end %>
              <% if perfil.vazio? %>
                <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-amber-500/20 text-amber-400">Sem nenhum acesso</span>
              <% end %>
            </div>
            <% if perfil.descricao.present? %>
              <p class="text-gray-400 text-sm mt-1"><%= perfil.descricao %></p>
            <% end %>
            <p class="text-gray-500 text-sm mt-1">
              <%= icone :pessoa %> <%= perfil.users.size %> usuário(s)
              · <%= icone :chave %> <%= perfil.total_permissoes %> de <%= Permissao.chaves.size %> permissões
            </p>
          </div>

          <div class="flex flex-wrap gap-2 shrink-0">
            <%= link_to rotulo(:editar, 'Editar', cor: nil), edit_admin_perfil_path(perfil), 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 com BLOCO: passando o rótulo como primeiro argumento, o
                Rails escapa o HTML e o ícone sai como texto cru na tela. %>
            <% if policy(perfil).destroy? %>
              <%= button_to admin_perfil_path(perfil), 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 o perfil #{perfil.nome}?" } } do %>
                <%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Excluir
              <% end %>
            <% end %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% else %>
  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl 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-300">Nenhum perfil cadastrado ainda.</p>
    <p class="text-gray-500 text-sm mt-1">Enquanto não houver perfil, cada pessoa acessa conforme o tipo de conta dela.</p>
  </div>
<% end %>
