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

{% block admin_title %}Configurações{% 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">Ajustes & Personalização</span>
      <h1 class="text-2xl font-bold text-white tracking-tight mt-0.5">Configurações da Barbearia</h1>
      <p class="text-xs text-stone-400 mt-1">Defina dados do seu link público, preços, serviços e equipe de barbeiros.</p>
    </div>
  </div>

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

    <!-- Dados Gerais da Barbearia (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="store" class="w-4 h-4 text-brand"></i>
        Dados da Barbearia
      </h2>

      <form onsubmit="event.preventDefault(); updateShopInfo();" class="space-y-3.5">
        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Nome do Estabelecimento *</label>
          <input type="text" id="cfg_shop_name" value="{{ shop.name }}" 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">
        </div>

        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">WhatsApp da Barbearia *</label>
          <input type="tel" id="cfg_shop_phone" value="{{ shop.phone }}" 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">
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-medium text-stone-300 mb-1">Abre às *</label>
            <input type="time" id="cfg_opening" value="{{ shop.opening_time }}" 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">
          </div>
          <div>
            <label class="block text-xs font-medium text-stone-300 mb-1">Fecha às *</label>
            <input type="time" id="cfg_closing" value="{{ shop.closing_time }}" 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">
          </div>
        </div>

        <!-- Chave Pix e Sinal de Reserva -->
        <div class="pt-2 border-t border-dark-border space-y-3">
          <h3 class="text-xs font-bold text-stone-300 flex items-center gap-1.5">
            <i data-lucide="qr-code" class="w-3.5 h-3.5 text-brand"></i>
            Sinal Pix Antifalta (Opcional)
          </h3>
          <div>
            <label class="block text-[11px] font-medium text-stone-400 mb-1">Chave Pix da Barbearia</label>
            <input type="text" id="cfg_pix_key" value="{{ shop.pix_key or '' }}" placeholder="Ex: CPF, CNPJ, Celular ou Aleatória"
                   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-[11px] font-medium text-stone-400 mb-1">Valor do Sinal para Reserva (R$)</label>
            <input type="number" step="1" id="cfg_pix_deposit" value="{{ shop.pix_deposit_amount or 0 }}"
                   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">
            <span class="text-[10px] text-stone-500 mt-1 block">Coloque 0 para agendamento sem cobrança de sinal.</span>
          </div>
        </div>

        <button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-brand text-black font-bold text-xs hover:bg-brand-400 transition-colors shadow-sm">
          Salvar Dados da Barbearia
        </button>
      </form>
    </div>

    <!-- Gestão de Serviços & Equipe (2 Colunas) -->
    <div class="lg:col-span-2 space-y-6">

      <!-- Serviços -->
      <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="scissors" class="w-4 h-4 text-brand"></i>
            Serviços & Tabela de Preços
          </h2>
          <button onclick="openNewServiceModal()" 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">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            Adicionar Serviço
          </button>
        </div>

        <div class="divide-y divide-dark-border">
          {% for s in services %}
          <div class="py-3 flex items-center justify-between gap-3">
            <div>
              <div class="flex items-center gap-2">
                <h4 class="text-sm font-bold text-white">{{ s.name }}</h4>
                <span class="text-[10px] px-2 py-0.5 rounded bg-stone-800 text-stone-400 font-mono">{{ s.duration_minutes }} min</span>
              </div>
              {% if s.description %}
              <p class="text-xs text-stone-400 mt-0.5">{{ s.description }}</p>
              {% endif %}
            </div>
            <span class="text-sm font-bold text-brand font-mono">R$ {{ "%.2f"|format(s.price)|replace(".", ",") }}</span>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Equipe de Barbeiros -->
      <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="users" class="w-4 h-4 text-brand"></i>
            Equipe de Profissionais
          </h2>
          <button onclick="openNewBarberModal()" 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">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            Adicionar Barbeiro
          </button>
        </div>

        <div class="divide-y divide-dark-border">
          {% for b in barbers %}
          <div class="py-3 flex items-center justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background-color: {{ b.avatar_color or '#d97706' }}">
                {{ b.name[:2]|upper }}
              </div>
              <div>
                <h4 class="text-sm font-bold text-white">{{ b.name }}</h4>
                <p class="text-xs text-stone-400">Atendimento: {{ b.start_time }} às {{ b.end_time }}</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-xs font-bold text-brand">Comissão: {{ (b.commission_rate * 100)|int }}%</span>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

    </div>

  </div>

</div>

<!-- Modal Adicionar Serviço -->
<div id="service-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="scissors" class="w-5 h-5 text-brand"></i>
        Novo Serviço
      </h3>
      <button onclick="closeNewServiceModal()" class="text-stone-400 hover:text-white"><i data-lucide="x" class="w-5 h-5"></i></button>
    </div>

    <form onsubmit="event.preventDefault(); submitNewService();" class="space-y-3.5">
      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Nome do Serviço *</label>
        <input type="text" id="svc_name" required placeholder="Ex: Corte Degradê Navalhado"
               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">Descrição</label>
        <input type="text" id="svc_desc" placeholder="Detalhes do que inclui o serviço..."
               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">Preço (R$) *</label>
          <input type="number" step="1" id="svc_price" required placeholder="50.00"
                 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">Duração (Minutos) *</label>
          <input type="number" step="5" id="svc_duration" required value="30"
                 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="pt-3 border-t border-dark-border flex items-center justify-end gap-2">
        <button type="button" onclick="closeNewServiceModal()" 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">Cadastrar Serviço</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Adicionar Barbeiro -->
<div id="barber-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="user-plus" class="w-5 h-5 text-brand"></i>
        Novo Barbeiro
      </h3>
      <button onclick="closeNewBarberModal()" class="text-stone-400 hover:text-white"><i data-lucide="x" class="w-5 h-5"></i></button>
    </div>

    <form onsubmit="event.preventDefault(); submitNewBarber();" class="space-y-3.5">
      <div>
        <label class="block text-xs font-medium text-stone-300 mb-1">Nome Completo *</label>
        <input type="text" id="barb_name" required placeholder="Ex: Felipe Navalha"
               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">WhatsApp *</label>
        <input type="tel" id="barb_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 class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-medium text-stone-300 mb-1">Comissão (%) *</label>
          <input type="number" step="1" id="barb_comm" required value="50"
                 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">Cor na Agenda</label>
          <input type="color" id="barb_color" value="#d97706"
                 class="w-full h-8 px-1 py-1 rounded-xl bg-dark-bg border border-dark-border cursor-pointer">
        </div>
      </div>
      <div class="pt-3 border-t border-dark-border flex items-center justify-end gap-2">
        <button type="button" onclick="closeNewBarberModal()" 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">Cadastrar Barbeiro</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script>
  function openNewServiceModal() {
    document.getElementById('service-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }
  function closeNewServiceModal() {
    document.getElementById('service-modal').classList.add('hidden');
  }

  function openNewBarberModal() {
    document.getElementById('barber-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }
  function closeNewBarberModal() {
    document.getElementById('barber-modal').classList.add('hidden');
  }

  async function updateShopInfo() {
    const payload = {
      name: document.getElementById('cfg_shop_name').value.trim(),
      phone: document.getElementById('cfg_shop_phone').value.trim(),
      opening_time: document.getElementById('cfg_opening').value,
      closing_time: document.getElementById('cfg_closing').value,
      pix_key: document.getElementById('cfg_pix_key').value.trim(),
      pix_deposit_amount: parseFloat(document.getElementById('cfg_pix_deposit').value || 0)
    };

    try {
      const res = await fetch('/api/shop/{{ shop.id }}', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (res.ok) alert("Dados atualizados com sucesso!");
      else alert("Erro ao atualizar dados.");
    } catch (e) {
      alert("Erro ao enviar.");
    }
  }

  async function submitNewService() {
    const payload = {
      barbershop_id: {{ shop.id }},
      name: document.getElementById('svc_name').value.trim(),
      description: document.getElementById('svc_desc').value.trim(),
      price: parseFloat(document.getElementById('svc_price').value),
      duration_minutes: parseInt(document.getElementById('svc_duration').value)
    };
    try {
      const res = await fetch('/api/services', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (res.ok) window.location.reload();
      else alert("Erro ao criar serviço.");
    } catch (e) {
      alert("Erro ao enviar dados.");
    }
  }

  async function submitNewBarber() {
    const payload = {
      barbershop_id: {{ shop.id }},
      name: document.getElementById('barb_name').value.trim(),
      phone: document.getElementById('barb_phone').value.trim(),
      commission_rate: parseFloat(document.getElementById('barb_comm').value) / 100,
      avatar_color: document.getElementById('barb_color').value
    };
    try {
      const res = await fetch('/api/barbers', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (res.ok) window.location.reload();
      else alert("Erro ao criar barbeiro.");
    } catch (e) {
      alert("Erro ao enviar dados.");
    }
  }
</script>
{% endblock %}