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

{% block admin_title %}Clube de Assinatura{% 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-brand">Receita Recorrente</span>
      <h1 class="text-2xl font-bold text-white tracking-tight mt-0.5">Clube de Assinatura</h1>
      <p class="text-xs text-stone-400 mt-1">O modelo de assinatura mensal garante dinheiro todo mês e clientes fiéis.</p>
    </div>

    <div class="flex items-center gap-2">
      <button onclick="openNewMemberModal()" class="px-4 py-2 rounded-xl bg-brand text-black font-bold text-xs flex items-center gap-1.5 hover:bg-brand-400 transition-colors shadow-md shadow-brand/10">
        <i data-lucide="user-plus" class="w-4 h-4"></i>
        Novo Assinante
      </button>
{% if is_locked %}
  {% set feature_name = "Clube de Assinatura Recorrente (MRR)" %}
  {% set feature_desc = "O Clube de Assinatura mensal permite vender planos estilo Netflix (ex: R$ 119/mês para 4 cortes) com receita garantida todo mês. Este recurso faz parte dos Planos Intermediário e Profissional." %}
  {% include "admin/upgrade_card.html" %}
{% else %}
  <!-- Métricas do Clube -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border">
      <span class="text-xs text-stone-400 block">Faturamento Mensal Garantido</span>
      <span class="text-2xl font-bold text-white block mt-1">R$ {{ "%.2f"|format(club_metrics.total_revenue)|replace(".", ",") }}<small class="text-xs font-normal text-stone-500">/mês</small></span>
      <span class="text-[11px] text-emerald-400 font-medium mt-1 block">Previsibilidade total de caixa</span>
    </div>

    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border">
      <span class="text-xs text-stone-400 block">Assinantes Ativos</span>
      <span class="text-2xl font-bold text-purple-400 block mt-1">{{ club_metrics.active_count }}</span>
      <span class="text-[11px] text-stone-500 mt-1 block">Clientes fidelizados no clube</span>
    </div>

    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border">
      <span class="text-xs text-stone-400 block">Planos Disponíveis</span>
      <span class="text-2xl font-bold text-brand block mt-1">{{ plans|length }}</span>
      <span class="text-[11px] text-stone-500 mt-1 block">Opções para o cliente escolher</span>
    </div>

  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Planos Cadastrados (1 Coluna) -->
    <div class="p-5 rounded-2xl bg-dark-card border border-dark-border space-y-4">
      <h2 class="text-sm font-bold text-white flex items-center gap-2">
        <i data-lucide="crown" class="w-4 h-4 text-brand"></i>
        Planos da Barbearia
      </h2>

      <div class="space-y-3">
        {% for p in plans %}
        <div class="p-4 rounded-xl bg-dark-bg border border-dark-border space-y-2">
          <div class="flex items-center justify-between">
            <h3 class="font-bold text-sm text-white">{{ p.name }}</h3>
            <span class="text-base font-bold text-brand">R$ {{ "%.2f"|format(p.monthly_price)|replace(".", ",") }}<small class="text-[10px] text-stone-400">/mês</small></span>
          </div>
          <p class="text-xs text-stone-400 leading-relaxed">{{ p.description }}</p>
          <div class="pt-2 border-t border-stone-800 flex items-center justify-between text-[11px] text-stone-400">
            <span>Cortes incluídos:</span>
            <span class="font-bold text-stone-200">{% if p.cuts_included == -1 %}Ilimitado{% else %}{{ p.cuts_included }} cortes/mês{% endif %}</span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Lista de Assinantes (2 Colunas) -->
    <div class="lg:col-span-2 space-y-4">
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border">
        <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="users" class="w-4 h-4 text-purple-400"></i>
            Assinantes Ativos
          </h2>
          <span class="text-xs text-stone-400">{{ subscriptions|length }} assinantes</span>
        </div>

        <div class="divide-y divide-dark-border">
          {% if subscriptions %}
            {% for s in subscriptions %}
            <div class="py-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <div class="flex items-center gap-2">
                  <h4 class="text-sm font-bold text-white">{{ s.client_name }}</h4>
                  <span class="text-[10px] px-2 py-0.5 rounded-full {% if s.status == 'ativo' %}bg-emerald-500/10 text-emerald-400 border border-emerald-500/20{% else %}bg-red-500/10 text-red-400 border border-red-500/20{% endif %} font-semibold uppercase">
                    {{ s.status }}
                  </span>
                </div>
                <div class="text-xs text-stone-400 mt-1 flex items-center gap-2">
                  <span>Plano: <b class="text-stone-200">{{ s.plan_name }}</b></span>
                  <span>•</span>
                  <span>Próxima fatura: {{ s.next_billing_date }}</span>
                </div>
                <div class="text-xs text-stone-400 mt-0.5">
                  Cortes utilizados neste mês: <b class="text-brand">{{ s.cuts_used_this_month }}</b> {% if s.cuts_included != -1 %}de {{ s.cuts_included }}{% else %}(ilimitado){% endif %}
                </div>
              </div>

              <div class="flex items-center gap-2">
                <!-- Botão Registrar Uso de Corte -->
                <button onclick="registerCutUse({{ s.id }})" title="Marcar que o cliente cortou 1 vez pelo plano"
                        class="px-3 py-1.5 rounded-xl bg-stone-800 hover:bg-stone-700 text-stone-200 text-xs font-semibold flex items-center gap-1 border border-stone-700 transition-colors">
                  <i data-lucide="scissors" class="w-3.5 h-3.5 text-brand"></i>
                  Usar Corte (+1)
                </button>

                <!-- WhatsApp Cobrança / Boas-vindas -->
                <a href="https://wa.me/55{{ s.client_phone }}?text=Fala%20{{ s.client_name|urlencode }}!%20Tudo%20certo?%20Passando%20para%20confirmar%20sua%20assinatura%20do%20Clube%20na%20{{ shop.name|urlencode }}." target="_blank"
                   class="p-2 rounded-xl bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 transition-colors">
                  <i data-lucide="message-circle" class="w-4 h-4"></i>
                </a>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="py-16 text-center text-stone-500 text-xs">
              <i data-lucide="crown" class="w-8 h-8 mx-auto mb-2 opacity-40"></i>
              Nenhum cliente assinou o clube ainda. Adicione o primeiro acima!
            </div>
          {% endif %}
        </div>
      </div>
    </div>

  </div>
  {% endif %}

</div>

<!-- Modal Novo Assinante -->
<div id="new-member-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-dark-card border border-dark-border rounded-2xl max-w-md w-full p-6 space-y-4 shadow-2xl">
    <div class="flex items-center justify-between pb-3 border-b border-dark-border">
      <h3 class="text-base font-bold text-white flex items-center gap-2">
        <i data-lucide="crown" class="w-5 h-5 text-brand"></i>
        Adicionar Cliente ao Clube
      </h3>
      <button onclick="closeNewMemberModal()" class="text-stone-400 hover:text-white">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <form onsubmit="event.preventDefault(); submitNewMember();" class="space-y-3.5">
      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Cliente *</label>
        <select id="sub_client_id" required class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
          {% for c in clients %}
          <option value="{{ c.id }}">{{ c.name }} ({{ c.phone }})</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Plano Escolhido *</label>
        <select id="sub_plan_id" required class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-xs text-white">
          {% for p in plans %}
          <option value="{{ p.id }}">{{ p.name }} - R$ {{ "%.2f"|format(p.monthly_price)|replace(".", ",") }}/mês</option>
          {% endfor %}
        </select>
      </div>

      <div class="pt-3 border-t border-dark-border flex items-center justify-end gap-2">
        <button type="button" onclick="closeNewMemberModal()" class="px-4 py-2 rounded-xl border border-dark-border text-xs text-stone-400 hover:text-white">
          Cancelar
        </button>
        <button type="submit" class="px-4 py-2 rounded-xl bg-brand text-black font-bold text-xs hover:bg-brand-400 transition-colors">
          Ativar Assinatura
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script>
  function openNewMemberModal() {
    document.getElementById('new-member-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }

  function closeNewMemberModal() {
    document.getElementById('new-member-modal').classList.add('hidden');
  }

  async function registerCutUse(subId) {
    if (!confirm("Confirmar que o cliente realizou 1 corte pelo seu plano de assinatura?")) return;
    try {
      const res = await fetch(`/api/subscriptions/${subId}/use-cut`, { method: 'POST' });
      if (res.ok) window.location.reload();
      else alert("Não foi possível registrar o uso.");
    } catch (e) {
      console.error(e);
      alert("Erro ao enviar comando.");
    }
  }

  async function submitNewMember() {
    const payload = {
      barbershop_id: {{ shop.id }},
      client_id: parseInt(document.getElementById('sub_client_id').value),
      plan_id: parseInt(document.getElementById('sub_plan_id').value)
    };

    try {
      const res = await fetch('/api/subscriptions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        window.location.reload();
      } else {
        alert(data.detail || "Erro ao adicionar assinante.");
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao enviar dados.");
    }
  }
</script>
{% endblock %}