{% extends "base.html" %}

{% block title %}{% block admin_title %}Painel da Barbearia{% endblock %} · {{ shop.name }}{% endblock %}

{% block content %}
<div class="min-h-screen flex flex-col md:flex-row bg-dark-bg">

  <!-- Sidebar Desktop -->
  <aside class="hidden md:flex flex-col w-64 border-r border-dark-border bg-dark-card flex-shrink-0">
    <!-- Brand / Topo com Seletor de Barbearia Ativa -->
    <div class="p-4 border-b border-dark-border space-y-3">
      <div class="flex items-center justify-between">
        <a href="/" class="flex items-center gap-2 group">
          <div class="w-6 h-6 rounded-lg bg-gradient-to-tr from-brand-600 to-amber-500 text-black flex items-center justify-center font-bold text-xs">
            <i data-lucide="scissors" class="w-3.5 h-3.5"></i>
          </div>
          <span class="font-extrabold text-xs text-white">Na<span class="text-brand">Régua</span></span>
        </a>
        <!-- Badge do Plano Atual -->
        <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider
          {% if shop.plan_tier == 'profissional' %}bg-purple-500/10 text-purple-400 border border-purple-500/30
          {% elif shop.plan_tier == 'intermediario' %}bg-emerald-500/10 text-emerald-400 border border-emerald-500/30
          {% else %}bg-amber-500/10 text-amber-400 border border-amber-500/30{% endif %}">
          {{ shop.plan_tier }}
        </span>
      </div>

      <!-- Seletor Rápido de Barbearia -->
      <div>
        <label class="block text-[10px] font-semibold text-stone-500 uppercase tracking-wider mb-1">Barbearia Ativa:</label>
        <select onchange="switchShop(this.value)" class="w-full bg-dark-bg border border-dark-border text-xs text-white rounded-xl px-2.5 py-1.5 outline-none font-semibold focus:border-brand cursor-pointer">
          {% for s in all_shops %}
          <option value="{{ s.id }}" {% if s.id == shop.id %}selected{% endif %}>
            {{ s.name }} ({{ s.plan_tier|upper }})
          </option>
          {% endfor %}
        </select>
      </div>
    </div>

    <!-- Navegação -->
    <nav class="flex-1 p-3 space-y-1 text-sm font-medium">
      <a href="/admin?shop_id={{ shop.id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {% if active_page == 'dashboard' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
        Dashboard
      </a>

      <a href="/admin/agenda?shop_id={{ shop.id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {% if active_page == 'agenda' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <i data-lucide="calendar" class="w-4 h-4"></i>
        Agenda do Dia
      </a>

      <a href="/admin/caixa?shop_id={{ shop.id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {% if active_page == 'caixa' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <i data-lucide="wallet" class="w-4 h-4"></i>
        Caixa & Comandas
      </a>

      <!-- Comissões (Disponível em Intermediário e Profissional) -->
      <a href="/admin/comissoes?shop_id={{ shop.id }}" class="flex items-center justify-between px-3 py-2.5 rounded-xl transition-all {% if active_page == 'comissoes' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <div class="flex items-center gap-3">
          <i data-lucide="percent" class="w-4 h-4"></i>
          <span>Comissões & Vales</span>
        </div>
        {% if not plan_info.has_commissions %}
        <i data-lucide="lock" class="w-3.5 h-3.5 text-stone-600" title="Recurso do Plano Intermediário"></i>
        {% endif %}
      </a>

      <!-- Clube de Assinatura (Disponível em Intermediário e Profissional) -->
      <a href="/admin/clube?shop_id={{ shop.id }}" class="flex items-center justify-between px-3 py-2.5 rounded-xl transition-all {% if active_page == 'clube' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <div class="flex items-center gap-3">
          <i data-lucide="crown" class="w-4 h-4"></i>
          <span>Clube de Assinatura</span>
        </div>
        {% if not plan_info.has_club %}
        <i data-lucide="lock" class="w-3.5 h-3.5 text-stone-600" title="Recurso do Plano Intermediário"></i>
        {% endif %}
      </a>

      <!-- Clientes & Reativação (Reativação exclusiva do Profissional) -->
      <a href="/admin/clientes?shop_id={{ shop.id }}" class="flex items-center justify-between px-3 py-2.5 rounded-xl transition-all {% if active_page == 'clientes' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <div class="flex items-center gap-3">
          <i data-lucide="users" class="w-4 h-4"></i>
          <span>Clientes & WhatsApp</span>
        </div>
        {% if not plan_info.has_recovery %}
        <i data-lucide="lock" class="w-3.5 h-3.5 text-stone-600" title="Reativação exclusiva do Plano Profissional"></i>
        {% endif %}
      </a>

      <a href="/admin/config?shop_id={{ shop.id }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {% if active_page == 'config' %}bg-brand text-black font-bold shadow-md shadow-brand/10{% else %}text-stone-400 hover:text-white hover:bg-dark-cardHover{% endif %}">
        <i data-lucide="settings" class="w-4 h-4"></i>
        Configurações
      </a>

      <!-- Botão de Sair do Sistema (Logout) -->
      <a href="/sair" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all text-stone-400 hover:text-red-400 hover:bg-red-950/20 group">
        <i data-lucide="log-out" class="w-4 h-4 text-stone-500 group-hover:text-red-400 transition-colors"></i>
        <span>Sair do Sistema</span>
      </a>
    </nav>

    <!-- Card Link Público Neutro do Cliente -->
    <div class="p-3 m-3 rounded-xl bg-dark-bg border border-dark-border space-y-2">
      <span class="text-[11px] font-semibold text-stone-400 block">Link de Agendamento Oficial:</span>
      <div class="flex items-center gap-1.5">
        <input type="text" readonly value="{{ base_url }}/b/{{ shop.slug }}" id="copy-link-input"
               class="bg-dark-card border border-dark-border text-[11px] px-2 py-1.5 rounded-lg text-stone-300 w-full outline-none select-all truncate font-mono">
        <button type="button" onclick="copyBookingLink()" title="Copiar Link"
                class="p-1.5 rounded-lg bg-brand text-black hover:bg-brand-400 transition-colors flex-shrink-0">
          <i data-lucide="copy" class="w-3.5 h-3.5"></i>
        </button>
      </div>
      <a href="/b/{{ shop.slug }}" target="_blank" class="text-[11px] text-brand hover:underline inline-flex items-center gap-1">
        Abrir tela do cliente <i data-lucide="external-link" class="w-3 h-3"></i>
      </a>
    </div>
  </aside>

  <!-- Mobile Header -->
  <header class="md:hidden flex flex-col p-4 border-b border-dark-border bg-dark-card sticky top-0 z-40 gap-2">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="font-bold text-sm text-white">{{ shop.name }}</span>
        <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase
          {% if shop.plan_tier == 'profissional' %}bg-purple-500/10 text-purple-400
          {% elif shop.plan_tier == 'intermediario' %}bg-emerald-500/10 text-emerald-400
          {% else %}bg-amber-500/10 text-amber-400{% endif %}">
          {{ shop.plan_tier }}
        </span>
      </div>
      <div class="flex items-center gap-2">
        <a href="/sair" class="px-2.5 py-1 rounded-lg bg-red-950/40 border border-red-500/30 text-red-300 hover:text-red-200 text-xs font-semibold flex items-center gap-1">
          <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
          <span>Sair</span>
        </a>
        <a href="/b/{{ shop.slug }}" target="_blank" class="px-2.5 py-1 rounded-lg bg-brand text-black text-xs font-bold flex items-center gap-1">
          <i data-lucide="smartphone" class="w-3.5 h-3.5"></i>
          <span>Link</span>
        </a>
      </div>
    </div>
    <!-- Seletor Mobile -->
    <select onchange="switchShop(this.value)" class="w-full bg-dark-bg border border-dark-border text-xs text-white rounded-lg px-2 py-1">
      {% for s in all_shops %}
      <option value="{{ s.id }}" {% if s.id == shop.id %}selected{% endif %}>
        Alternar: {{ s.name }} ({{ s.plan_tier|upper }})
      </option>
      {% endfor %}
    </select>
  </header>

  <!-- Conteúdo Principal -->
  <main class="flex-1 flex flex-col min-w-0 pb-20 md:pb-8">
    <div class="p-4 md:p-8 max-w-7xl w-full mx-auto">
      {% block admin_content %}{% endblock %}
    </div>
  </main>

  <!-- Mobile Bottom Navigation -->
  <nav class="md:hidden fixed bottom-0 left-0 right-0 border-t border-dark-border bg-dark-card/95 backdrop-blur-md px-2 py-2 flex items-center justify-around z-40 text-[10px] font-medium">
    <a href="/admin?shop_id={{ shop.id }}" class="flex flex-col items-center gap-1 py-1 px-2 rounded-lg {% if active_page == 'dashboard' %}text-brand font-bold{% else %}text-stone-400{% endif %}">
      <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
      <span>Painel</span>
    </a>
    <a href="/admin/agenda?shop_id={{ shop.id }}" class="flex flex-col items-center gap-1 py-1 px-2 rounded-lg {% if active_page == 'agenda' %}text-brand font-bold{% else %}text-stone-400{% endif %}">
      <i data-lucide="calendar" class="w-4 h-4"></i>
      <span>Agenda</span>
    </a>
    <a href="/admin/caixa?shop_id={{ shop.id }}" class="flex flex-col items-center gap-1 py-1 px-2 rounded-lg {% if active_page == 'caixa' %}text-brand font-bold{% else %}text-stone-400{% endif %}">
      <i data-lucide="wallet" class="w-4 h-4"></i>
      <span>Caixa</span>
    </a>
    <a href="/admin/comissoes?shop_id={{ shop.id }}" class="flex flex-col items-center gap-1 py-1 px-2 rounded-lg {% if active_page == 'comissoes' %}text-brand font-bold{% else %}text-stone-400{% endif %}">
      <i data-lucide="percent" class="w-4 h-4"></i>
      <span>Comissão</span>
    </a>
    <a href="/admin/clientes?shop_id={{ shop.id }}" class="flex flex-col items-center gap-1 py-1 px-2 rounded-lg {% if active_page == 'clientes' %}text-brand font-bold{% else %}text-stone-400{% endif %}">
      <i data-lucide="users" class="w-4 h-4"></i>
      <span>Clientes</span>
    </a>
  </nav>

</div>
{% endblock %}

{% block scripts %}
<script>
  function switchShop(shopId) {
    const url = new URL(window.location.href);
    url.searchParams.set('shop_id', shopId);
    window.location.href = url.toString();
  }

  function copyBookingLink() {
    const copyText = document.getElementById("copy-link-input");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    alert("Link copiado para a área de transferência! Cole na bio do Instagram ou WhatsApp da barbearia.");
  }
</script>
{% block admin_scripts %}{% endblock %}
{% endblock %}