{% extends "admin/layout.html" %}

{% block admin_title %}Clientes & WhatsApp{% endblock %}

{% block admin_content %}
<div class="space-y-6">

  <!-- Header -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
      <span class="text-xs font-semibold uppercase tracking-wider text-emerald-400">Fidelização & Retenção</span>
      <h1 class="text-2xl font-bold text-white tracking-tight mt-0.5">Clientes & WhatsApp</h1>
      <p class="text-xs text-stone-400 mt-1">Base de clientes sem atrito: cadastrados sozinhos ao agendar pelo link.</p>
    </div>

    <div>
      <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-dark-card border border-dark-border text-xs text-stone-300">
        <i data-lucide="users" class="w-4 h-4 text-brand"></i>
        Total: <b>{{ clients|length }} clientes</b>
      </span>
    </div>
  </div>

  <!-- Sessão de Reativação: Clientes Sumidos (+30 dias) -->
  {% if has_recovery %}
  <div class="p-5 rounded-2xl bg-gradient-to-br from-emerald-950/30 to-dark-card border border-emerald-500/20 space-y-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
          <i data-lucide="sparkles" class="w-4 h-4"></i>
        </div>
        <div>
          <h3 class="text-sm font-bold text-white">Máquina de Recuperação de Clientes Sumidos</h3>
          <p class="text-xs text-stone-400">Clientes que cortaram no passado mas não voltam há mais de 30 dias. Chame-os de volta com 1 clique!</p>
        </div>
      </div>
      <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-bold">
        {{ lost_clients|length }} clientes para reativar
      </span>
    </div>

    {% if lost_clients %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
      {% for lc in lost_clients %}
      <div class="p-3.5 rounded-xl bg-dark-bg/80 border border-dark-border flex items-center justify-between gap-3">
        <div>
          <h4 class="text-xs font-bold text-white">{{ lc.name }}</h4>
          <span class="text-[11px] text-stone-400 block mt-0.5">Última visita: {{ lc.last_visit_at or 'Mais de 30 dias' }} ({{ lc.total_visits }} visitas)</span>
        </div>
        <a href="https://wa.me/55{{ lc.phone }}?text=Fala%20{{ lc.name|urlencode }}!%20Tudo%20certo?%20Passando%20para%20lembrar%20que%20já%20faz%20um%20tempinho%20desde%20seu%20último%20corte%20aqui%20na%20{{ shop.name|urlencode }}.%20Bora%20dar%20aquele%20trato%20no%20visual?%20Clica%20aqui%20para%20garantir%20seu%20horário:%20{{ base_url }}/b/{{ shop.slug }}"
           target="_blank"
           class="px-3 py-1.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs flex items-center gap-1.5 transition-colors flex-shrink-0 shadow-sm">
          <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
          Chamar no Whats
        </a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-xs text-stone-500 italic pt-1">Todos os seus clientes estão com visitas em dia. Excelente!</p>
    {% endif %}
  </div>
  {% else %}
  <div class="p-5 rounded-2xl bg-dark-card border border-purple-500/30 flex flex-col sm:flex-row items-center justify-between gap-4">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center flex-shrink-0">
        <i data-lucide="sparkles" class="w-5 h-5"></i>
      </div>
      <div>
        <div class="flex items-center gap-2">
          <h4 class="text-xs font-bold text-white">Máquina de Recuperação de Clientes Sumidos (+30 dias)</h4>
          <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-purple-500/10 text-purple-400 border border-purple-500/20">Plano Profissional</span>
        </div>
        <p class="text-[11px] text-stone-400 mt-0.5">Identifica automaticamente quem sumiu há mais de 30 dias e gera o link direto no WhatsApp para reativar o corte.</p>
      </div>
    </div>
    <a href="https://wa.me/5511999999999?text=Olá,%20gostaria%20de%20ativar%20o%20recurso%20de%20recuperação%20de%20clientes%20sumidos!" target="_blank" class="px-3 py-1.5 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-bold text-xs flex-shrink-0 transition-colors">
      Fazer Upgrade
    </a>
  </div>
  {% endif %}

  <!-- Tabela / Lista Geral de Clientes -->
  <div class="p-5 rounded-2xl bg-dark-card border border-dark-border space-y-4">
    <div class="flex items-center justify-between pb-3 border-b border-dark-border">
      <h2 class="text-sm font-bold text-white flex items-center gap-2">
        <i data-lucide="address-book" class="w-4 h-4 text-brand"></i>
        Todos os Clientes Cadastrados
      </h2>
      <input type="text" id="search-client" onkeyup="filterClients()" placeholder="Buscar cliente por nome..."
             class="px-3 py-1.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white w-48 sm:w-64">
    </div>

    <div class="divide-y divide-dark-border" id="clients-list">
      {% for c in clients %}
      <div class="py-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3 client-row" data-name="{{ c.name|lower }}">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-stone-800 border border-stone-700 flex items-center justify-center font-bold text-stone-300 text-xs">
            {{ c.name[:2]|upper }}
          </div>
          <div>
            <h4 class="text-sm font-bold text-white">{{ c.name }}</h4>
            <div class="flex items-center gap-2 text-xs text-stone-400 mt-0.5">
              <span>{{ c.phone }}</span>
              <span>•</span>
              <span>{{ c.total_visits }} corte(s) realizados</span>
              {% if c.last_visit_at %}
              <span>•</span>
              <span>Último em {{ c.last_visit_at }}</span>
              {% endif %}
            </div>
            {% if c.notes %}
            <p class="text-[11px] text-stone-500 italic mt-0.5">Nota: {{ c.notes }}</p>
            {% endif %}
          </div>
        </div>

        <div class="flex items-center gap-2 self-end sm:self-center">
          <a href="https://wa.me/55{{ c.phone }}" target="_blank"
             class="px-3 py-1.5 rounded-xl bg-stone-800 hover:bg-stone-700 text-stone-300 hover:text-white text-xs font-semibold flex items-center gap-1.5 transition-colors border border-stone-700">
            <i data-lucide="message-square" class="w-3.5 h-3.5 text-emerald-400"></i>
            WhatsApp
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

</div>
{% endblock %}

{% block admin_scripts %}
<script>
  function filterClients() {
    const q = document.getElementById('search-client').value.toLowerCase().trim();
    document.querySelectorAll('.client-row').forEach(row => {
      const name = row.getAttribute('data-name') || '';
      if (name.includes(q)) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });
  }
</script>
{% endblock %}