<div class="max-w-3xl mx-auto space-y-6">

  <div>
    <h1 class="text-2xl font-bold text-white flex items-center gap-2">
      <%= icone :telefone, espaco: false %> WhatsApp — conexão
    </h1>
    <p class="text-gray-400 text-sm mt-0.5">
      Pareia o número da empresa com este servidor lendo um QR code, como no WhatsApp Web.
    </p>
  </div>

  <%= render 'shared/flash' %>

  <%# O aviso fica na TELA, não só no código: quem parear precisa saber o que
      está aceitando. %>
  <div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-6 text-sm text-amber-200 space-y-2">
    <p class="font-bold flex items-center gap-2 text-amber-300">
      <%= icone :alerta, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Este canal não é oficial.
    </p>
    <p class="leading-relaxed">
      A conexão por QR usa a porta do WhatsApp Web por engenharia reversa. É gratuita e ilimitada,
      mas está <strong>fora dos Termos do WhatsApp</strong> — a Meta pode banir o número sem aviso.
      Use um <strong>chip dedicado</strong>, nunca o número principal da operação.
    </p>
    <p class="leading-relaxed">
      Disparo em rajada é o que mais causa banimento. O intervalo entre mensagens fica em
      <%= link_to 'Configurações → Notificações', admin_configuracao_notificacao_path,
            data: { turbo: false }, class: 'underline hover:text-white transition-colors' %>
      (hoje: <strong><%= @config.intervalo_envio %>s</strong>).
    </p>
  </div>

  <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-8"
       data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
    <% if @estado['conectado'] %>
      <div class="flex items-center gap-4">
        <%# Ponto pulsante: à distância, é o que diz "está no ar" sem ler o texto. %>
        <span class="relative flex h-3 w-3 flex-shrink-0">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
        </span>
        <div>
          <p class="text-white font-bold text-lg">Conectado</p>
          <p class="text-sm text-gray-400 mt-0.5">
            Número <span class="font-mono text-gray-300"><%= @estado['numero'] %></span>
            <% if @config.whatsapp_conectado_em %>
              · desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %>
            <% end %>
          </p>
        </div>
      </div>

      <div class="mt-6 border-t border-white/5 pt-6 space-y-6">
        <%= form_with url: testar_admin_whatsapp_sessao_path, method: :post, data: { turbo: false },
              class: 'flex flex-wrap items-end gap-3' do |f| %>
          <div class="flex-1 min-w-[220px]">
            <%= f.label :numero, 'Enviar teste para', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
            <%= f.text_field :numero, placeholder: '(11) 92005-1157',
                  class: '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' %>
          </div>
          <%= f.submit 'Enviar teste',
                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 %>

        <div class="border-t border-white/5 pt-5">
          <%= button_to desconectar_admin_whatsapp_sessao_path, method: :delete,
                form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
                class: 'inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm border
                        border-red-500/30 text-red-400 hover:bg-red-900/20 hover:border-red-500/50
                        transition-colors cursor-pointer' do %>
            <%= icone :sair, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Desconectar
          <% end %>
        </div>
      </div>

    <% elsif @estado['qr'].present? %>
      <div class="flex flex-col items-center gap-4 text-center">
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold
                     bg-amber-500/15 border border-amber-500/30 text-amber-300">
          <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span> Aguardando leitura
        </span>
        <p class="text-white font-bold text-lg">Leia o QR code</p>
        <p class="text-sm text-gray-400 max-w-md leading-relaxed">
          No celular do chip dedicado: WhatsApp → <strong class="text-gray-300">Aparelhos conectados</strong> →
          <strong class="text-gray-300">Conectar um aparelho</strong> → aponte para o código abaixo.
        </p>
        <%# O QR expira em ~20s e a ponte gera outro — o polling abaixo troca a
            imagem sozinho, senão o operador ficaria lendo um código morto. %>
        <img src="<%= @estado['qr'] %>" alt="QR code do WhatsApp" width="320" height="320"
             class="rounded-2xl bg-white p-3 shadow-lg" id="qr-whatsapp">
        <p class="text-xs text-gray-500">O código se renova sozinho a cada poucos segundos.</p>
      </div>

    <% else %>
      <div class="flex items-start gap-4">
        <span class="w-3 h-3 rounded-full bg-red-500 mt-2 flex-shrink-0"></span>
        <div class="min-w-0">
          <p class="text-white font-bold text-lg">Desconectado</p>
          <p class="text-sm text-gray-400 mt-1 leading-relaxed">
            <%= @estado['erro'].presence || @estado['ultimo_erro'].presence ||
                'A ponte ainda não gerou um QR code. Aguarde alguns segundos e recarregue.' %>
          </p>
          <% unless @cliente.configurado? %>
            <div class="mt-4 p-4 bg-amber-500/10 border border-amber-500/30 rounded-xl">
              <p class="text-sm text-amber-200 leading-relaxed">
                Falta configurar a ponte: defina
                <code class="font-mono text-[#f97316]">WHATSAPP_TOKEN</code> no
                <code class="font-mono">.env</code> (o mesmo valor do container
                <code class="font-mono">whatsapp</code>) e suba os containers.
              </p>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>

<script>
  // Polling do estado enquanto não está conectado: o QR expira sozinho e a
  // página precisa buscar o novo, senão o operador lê um código já morto.
  (function () {
    var painel = document.getElementById('painel-whatsapp');
    if (!painel) return;
    var conectado = <%= @estado['conectado'] ? 'true' : 'false' %>;
    if (conectado) return;

    var url = painel.dataset.estadoUrl;
    setInterval(function () {
      fetch(url, { headers: { 'Accept': 'application/json' } })
        .then(function (r) { return r.json(); })
        .then(function (dados) {
          // Conectou: recarrega para mostrar o painel de conectado.
          if (dados.conectado) { window.location.reload(); return; }
          var img = document.getElementById('qr-whatsapp');
          if (dados.qr && img) { img.src = dados.qr; }
          else if (dados.qr && !img) { window.location.reload(); }
        })
        .catch(function () { /* ponte fora do ar: a próxima tentativa resolve */ });
    }, 8000);
  })();
</script>
