{% extends "base.html" %}

{% block title %}Painel Master · Gestor da Plataforma SaaS{% endblock %}

{% block content %}
<div class="min-h-screen bg-dark-bg text-stone-100 flex flex-col">

  <!-- Topo da Plataforma -->
  <header class="border-b border-dark-border bg-dark-card/80 backdrop-blur-md sticky top-0 z-40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand to-amber-600 text-black flex items-center justify-center font-bold shadow-lg shadow-brand/20">
          <i data-lucide="shield-check" class="w-6 h-6"></i>
        </div>
        <div>
          <div class="flex items-center gap-2">
            <h1 class="font-extrabold text-base tracking-tight text-white">NaRégua Master</h1>
            <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-purple-500/10 text-purple-400 border border-purple-500/20">Master Hub</span>
          </div>
          <p class="text-xs text-stone-400">Gestão global de barbearias, assinaturas e planos</p>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <button onclick="openNewShopModal()" class="px-4 py-2 rounded-xl bg-brand hover:bg-brand-400 text-black font-bold text-xs flex items-center gap-2 transition-all shadow-md shadow-brand/20">
          <i data-lucide="plus-circle" class="w-4 h-4"></i>
          Cadastrar Nova Barbearia
        </button>
      </div>
    </div>
  </header>

  <main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 py-8 w-full space-y-8">

    <!-- Indicadores Gerais do SaaS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      
      <!-- Faturamento Mensal do SaaS (MRR) -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
        <span class="text-xs font-semibold text-stone-400 block uppercase tracking-wider">Faturamento SaaS (MRR)</span>
        <p class="text-2xl font-black text-emerald-400 mt-2">R$ {{ "%.2f"|format(metrics.total_mrr)|replace(".", ",") }}<span class="text-xs text-stone-500 font-normal">/mês</span></p>
        <span class="text-[11px] text-stone-400 mt-1 block">Receita recorrente das assinaturas</span>
      </div>

      <!-- Barbearias Ativas -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
        <span class="text-xs font-semibold text-stone-400 block uppercase tracking-wider">Barbearias na Base</span>
        <p class="text-2xl font-black text-white mt-2">{{ metrics.active_shops }} <span class="text-xs text-stone-500 font-normal">de {{ metrics.total_shops }}</span></p>
        <span class="text-[11px] text-emerald-400 mt-1 block font-medium">Contas ativas pagantes</span>
      </div>

      <!-- Total de Barbeiros -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
        <span class="text-xs font-semibold text-stone-400 block uppercase tracking-wider">Profissionais Atendendo</span>
        <p class="text-2xl font-black text-brand mt-2">{{ metrics.total_barbers }}</p>
        <span class="text-[11px] text-stone-400 mt-1 block">Barbeiros cadastrados na plataforma</span>
      </div>

      <!-- Agendamentos Processados -->
      <div class="p-5 rounded-2xl bg-dark-card border border-dark-border relative overflow-hidden">
        <span class="text-xs font-semibold text-stone-400 block uppercase tracking-wider">Cortes Agendados</span>
        <p class="text-2xl font-black text-purple-400 mt-2">{{ metrics.total_appts }}</p>
        <span class="text-[11px] text-stone-400 mt-1 block">Agendamentos criados pelo link</span>
      </div>

    </div>

    <!-- Comparativo dos 3 Planos SaaS (Tiers de Monetização) -->
    <div class="p-6 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">
        <div>
          <h2 class="text-base font-bold text-white flex items-center gap-2">
            <i data-lucide="layers" class="w-5 h-5 text-brand"></i>
            Grade de Planos do SaaS
          </h2>
          <p class="text-xs text-stone-400">Recursos e limites configurados para cada assinatura.</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Básico -->
        <div class="p-4 rounded-xl bg-dark-bg border border-amber-500/30 space-y-3">
          <div class="flex items-center justify-between">
            <span class="px-2.5 py-0.5 rounded text-xs font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">BÁSICO</span>
            <span class="text-lg font-bold text-white">R$ 49,90<small class="text-xs text-stone-500">/mês</small></span>
          </div>
          <p class="text-xs text-stone-400">Para barbeiros solo que trabalham sozinhos na bancada.</p>
          <ul class="text-xs text-stone-300 space-y-1.5 pt-2 border-t border-stone-800">
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Até 1 profissional</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Link de Agendamento</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Agenda & Caixa Simples</li>
            <li class="flex items-center gap-2 text-stone-500"><i data-lucide="x" class="w-3.5 h-3.5 text-stone-600"></i> Sem Clube ou Comissões</li>
          </ul>
        </div>

        <!-- Intermediário -->
        <div class="p-4 rounded-xl bg-dark-bg border border-emerald-500/40 space-y-3 relative">
          <span class="absolute -top-2.5 right-4 px-2 py-0.5 bg-emerald-500 text-black font-extrabold text-[10px] rounded-full uppercase tracking-wider">Mais Popular</span>
          <div class="flex items-center justify-between">
            <span class="px-2.5 py-0.5 rounded text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">INTERMEDIÁRIO</span>
            <span class="text-lg font-bold text-white">R$ 79,90<small class="text-xs text-stone-500">/mês</small></span>
          </div>
          <p class="text-xs text-stone-400">Para barbearias com equipe e produtos de bancada.</p>
          <ul class="text-xs text-stone-300 space-y-1.5 pt-2 border-t border-stone-800">
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Até 5 profissionais</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Divisão de Comissões & Vales</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Venda de Produtos de Bancada</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Clube de Assinatura Recorrente</li>
          </ul>
        </div>

        <!-- Profissional -->
        <div class="p-4 rounded-xl bg-dark-bg border border-purple-500/40 space-y-3">
          <div class="flex items-center justify-between">
            <span class="px-2.5 py-0.5 rounded text-xs font-bold bg-purple-500/10 text-purple-400 border border-purple-500/20">PROFISSIONAL</span>
            <span class="text-lg font-bold text-white">R$ 119,90<small class="text-xs text-stone-500">/mês</small></span>
          </div>
          <p class="text-xs text-stone-400">Tudo liberado sem travas para barbearias grandes.</p>
          <ul class="text-xs text-stone-300 space-y-1.5 pt-2 border-t border-stone-800">
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Profissionais ILIMITADOS</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Máquina de Reativação (+30 dias)</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Todas as Funções Desbloqueadas</li>
            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400"></i> Suporte Prioritário</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Tabela de Barbearias Cadastradas -->
    <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-4">
      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-dark-border">
        <div>
          <h2 class="text-base font-bold text-white flex items-center gap-2">
            <i data-lucide="store" class="w-5 h-5 text-brand"></i>
            Barbearias Cadastradas na Plataforma
          </h2>
          <p class="text-xs text-stone-400">{{ shops|length }} estabelecimentos cadastrados</p>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full text-left text-xs">
          <thead>
            <tr class="border-b border-dark-border text-stone-400 font-semibold uppercase tracking-wider">
              <th class="pb-3 pl-2">Barbearia</th>
              <th class="pb-3">Plano Atual</th>
              <th class="pb-3">Equipe</th>
              <th class="pb-3">Agendamentos</th>
              <th class="pb-3">Acesso / Login</th>
              <th class="pb-3">Status</th>
              <th class="pb-3 text-right pr-2">Ações</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-dark-border">
            {% for s in shops %}
            <tr class="hover:bg-dark-cardHover transition-colors">
              <!-- Nome e Link -->
              <td class="py-4 pl-2">
                <div class="flex items-center gap-3">
                  <div class="w-9 h-9 rounded-xl bg-stone-800 border border-stone-700 flex items-center justify-center font-bold text-white text-xs">
                    {{ s.name[:2]|upper }}
                  </div>
                  <div>
                    <span class="font-bold text-white text-sm block">{{ s.name }}</span>
                    <a href="/b/{{ s.slug }}" target="_blank" class="text-[11px] text-brand hover:underline flex items-center gap-1 mt-0.5">
                      /b/{{ s.slug }} <i data-lucide="external-link" class="w-3 h-3"></i>
                    </a>
                  </div>
                </div>
              </td>

              <!-- Plano com Seletor Rápido -->
              <td class="py-4">
                <select onchange="changeShopPlan({{ s.id }}, this.value)"
                        class="px-2.5 py-1.5 rounded-lg text-xs font-bold border outline-none cursor-pointer
                        {% if s.plan_tier == 'profissional' %}bg-purple-950/40 text-purple-300 border-purple-500/40
                        {% elif s.plan_tier == 'intermediario' %}bg-emerald-950/40 text-emerald-300 border-emerald-500/40
                        {% else %}bg-amber-950/40 text-amber-300 border-amber-500/40{% endif %}">
                  <option value="basico" {% if s.plan_tier == 'basico' %}selected{% endif %}>🟡 Básico (R$ 49,90)</option>
                  <option value="intermediario" {% if s.plan_tier == 'intermediario' %}selected{% endif %}>🟢 Intermediário (R$ 79,90)</option>
                  <option value="profissional" {% if s.plan_tier == 'profissional' %}selected{% endif %}>🟣 Profissional (R$ 119,90)</option>
                </select>
              </td>

              <!-- Equipe -->
              <td class="py-4 text-stone-300">
                <span class="font-bold text-white">{{ s.total_barbers }}</span>
                <span class="text-stone-500">/ {% if s.max_barbers >= 999 %}∞{% else %}{{ s.max_barbers }}{% endif %}</span>
              </td>

              <!-- Agendamentos -->
              <td class="py-4 text-stone-300">
                <span class="font-bold text-white">{{ s.total_appts }}</span> cortes
              </td>

              <!-- Login do Dono -->
              <td class="py-4">
                <span class="text-stone-200 block">{{ s.email or '-' }}</span>
                <span class="text-[10px] text-stone-500 font-mono">Senha: {{ s.password }}</span>
              </td>

              <!-- Status -->
              <td class="py-4">
                <button onclick="toggleShopStatus({{ s.id }})"
                        class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase transition-all
                        {% if s.is_active == 1 %}bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20{% else %}bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20{% endif %}">
                  {% if s.is_active == 1 %}Ativa{% else %}Suspensa{% endif %}
                </button>
              </td>

              <!-- Ações -->
              <td class="py-4 text-right pr-2">
                <a href="/admin?shop_id={{ s.id }}"
                   class="px-3 py-1.5 rounded-xl bg-brand hover:bg-brand-400 text-black font-bold text-xs inline-flex items-center gap-1.5 transition-colors shadow-sm">
                  <span>Abrir Painel</span>
                  <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

  </main>

</div>

<!-- Modal Cadastrar Nova Barbearia -->
<div id="new-shop-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-lg 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="plus-circle" class="w-5 h-5 text-brand"></i>
        Criar Nova Barbearia no SaaS
      </h3>
      <button onclick="closeNewShopModal()" class="text-stone-400 hover:text-white">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <form onsubmit="event.preventDefault(); submitCreateShop();" class="space-y-3.5">
      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Nome da Barbearia *</label>
        <input type="text" id="ns_name" required placeholder="Ex: Barbearia Bigode de Ouro" oninput="autoSlug(this.value)"
               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">
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Link Exclusivo (Slug) *</label>
          <div class="flex items-center bg-dark-bg border border-dark-border rounded-xl px-2">
            <span class="text-[11px] text-stone-500">/b/</span>
            <input type="text" id="ns_slug" required placeholder="bigode-de-ouro"
                   class="w-full py-2 bg-transparent outline-none text-xs text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">WhatsApp da Barbearia *</label>
          <input type="tel" id="ns_phone" required placeholder="(11) 99999-9999"
                 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">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Email de Acesso do Dono *</label>
          <input type="email" id="ns_email" required placeholder="dono@barbearia.com"
                 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">
        </div>

        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Senha Inicial *</label>
          <input type="text" id="ns_password" required value="123456"
                 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">
        </div>
      </div>

      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Plano Assinado *</label>
        <select id="ns_plan" 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 font-semibold">
          <option value="basico">🟡 Plano Básico (R$ 49,90/mês · Até 1 profissional)</option>
          <option value="intermediario" selected>🟢 Plano Intermediário (R$ 79,90/mês · Até 5 profissionais)</option>
          <option value="profissional">🟣 Plano Profissional (R$ 119,90/mês · Ilimitado)</option>
        </select>
      </div>

      <div class="pt-3 border-t border-dark-border flex items-center justify-end gap-2">
        <button type="button" onclick="closeNewShopModal()" 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">
          Criar Barbearia & Gerar Acesso
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function openNewShopModal() {
    document.getElementById('new-shop-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }
  function closeNewShopModal() {
    document.getElementById('new-shop-modal').classList.add('hidden');
  }

  function autoSlug(text) {
    const slug = text.toLowerCase()
      .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
      .replace(/[^a-z0-9]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
    document.getElementById('ns_slug').value = slug;
  }

  async function submitCreateShop() {
    const payload = {
      name: document.getElementById('ns_name').value.trim(),
      slug: document.getElementById('ns_slug').value.trim(),
      phone: document.getElementById('ns_phone').value.trim(),
      email: document.getElementById('ns_email').value.trim(),
      password: document.getElementById('ns_password').value.trim(),
      plan_tier: document.getElementById('ns_plan').value
    };

    try {
      const res = await fetch('/api/master/shops', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        alert(`Barbearia "${payload.name}" criada com sucesso!\nLink do cliente: /b/${data.slug}`);
        window.location.reload();
      } else {
        alert(data.detail || "Erro ao criar barbearia.");
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao enviar dados.");
    }
  }

  async function changeShopPlan(shopId, newPlan) {
    try {
      const res = await fetch(`/api/master/shops/${shopId}/plan`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ plan_tier: newPlan })
      });
      if (res.ok) {
        alert("Plano atualizado com sucesso!");
        window.location.reload();
      } else {
        alert("Erro ao alterar plano.");
      }
    } catch (e) {
      alert("Erro ao enviar requisição.");
    }
  }

  async function toggleShopStatus(shopId) {
    try {
      const res = await fetch(`/api/master/shops/${shopId}/status`, { method: 'PATCH' });
      if (res.ok) window.location.reload();
      else alert("Erro ao alterar status.");
    } catch (e) {
      alert("Erro ao conectar.");
    }
  }
</script>
{% endblock %}