<%# app/views/configuracoes/index.html.erb %>
<div class="space-y-6">

  <div>
    <h1 class="text-2xl font-bold text-white">Configurações</h1>
    <p class="text-gray-400 text-sm mt-0.5">Pilares de preço e parâmetros do sistema</p>
  </div>

  <%= render 'shared/flash' %>

  <%# Configurações sensíveis (credenciais de envio) — só ADM %>
  <% if current_user.admin? %>
    <div>
      <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :travado, espaco: false %> Configurações do Administrador</h2>
      <div class="grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] gap-4">
        <%= link_to admin_configuracao_notificacao_path,
              class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 hover:border-[#f97316]/50
                      p-6 flex items-start gap-4 transition-colors group' do %>
          <div class="text-3xl">✉️</div>
          <div class="flex-1 min-w-0">
            <p class="text-white font-semibold group-hover:text-[#f97316] transition-colors">Notificações e E-mail</p>
            <p class="text-gray-500 text-xs mt-1 leading-relaxed">
              Servidor de e-mail (SMTP), WhatsApp via Twilio e os contatos que recebem os avisos da administração
            </p>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>

  <%# Pilares de preço %>
  <div>
    <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :dinheiro, espaco: false %> Pilares de Preço</h2>
    <%# auto-fit: `lg:grid-cols-4` mede a JANELA, mas a sidebar come 256px do
        conteúdo — os cards de preço ficavam com ~128px úteis e o valor em
        moeda espremia. Aqui o número de colunas segue a largura REAL. %>
      <div class="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-4">
      <% @configuracoes.each do |cfg| %>
        <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 group relative">
          <div class="flex items-start justify-between mb-4">
            <div class="text-3xl"><%= cfg.icone %></div>
            <% if policy(cfg).edit? %>
              <%= link_to edit_admin_configuracao_path(cfg),
                    class: 'opacity-0 group-hover:opacity-100 transition-opacity p-1.5
                            text-gray-500 hover:text-white hover:bg-white/10 rounded-lg' do %>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
              <% end %>
            <% end %>
          </div>
          <p class="text-gray-400 text-sm mb-1"><%= cfg.tipo_label %></p>
          <p class="text-3xl font-bold text-white"><%= moeda(cfg.valor) %></p>
          <% if cfg.descricao.present? %>
            <p class="text-gray-500 text-xs mt-2"><%= cfg.descricao %></p>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>

  <%# Informações do banco externo %>
  <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
    <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :arquivar, espaco: false %> Banco de Dados Externo</h2>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
        <p class="text-gray-400 text-xs mb-1">Tabela monitorada</p>
        <p class="text-white font-mono text-sm">db_reem_simplerout_2026</p>
      </div>
      <div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
        <p class="text-gray-400 text-xs mb-1">Account ID</p>
        <p class="text-white font-mono text-sm">95907 (Reem Transporte)</p>
      </div>
      <div class="p-4 bg-[#0a0a0a] rounded-xl border border-white/5">
        <p class="text-gray-400 text-xs mb-1">Atualização</p>
        <p class="text-white font-mono text-sm">A cada 1 hora</p>
      </div>
    </div>
    <p class="text-yellow-500/80 text-xs mt-4 flex items-center gap-1.5">
      <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
      </svg>
      Somente leitura — nunca alterar, deletar ou truncar esta tabela.
    </p>
  </div>
</div>
