{% extends "base.html" %}

{% block title %}Balcão / Frontline - {{ settings.storeName }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
  <!-- Top Notification Toast -->
  <div id="bannerToast" class="hidden mb-6 p-4 rounded-2xl flex items-center gap-3 text-sm font-semibold shadow-md transition-all">
    <i id="toastIcon" data-lucide="check-circle-2" class="w-5 h-5 shrink-0"></i>
    <span id="toastText"></span>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    <!-- LEFT: Identification & Search (5 cols) -->
    <div class="lg:col-span-5 space-y-4">
      <div class="bg-white rounded-3xl p-5 sm:p-6 border border-slate-200 shadow-sm">
        <h2 class="text-slate-900 font-bold text-lg mb-1 flex items-center gap-2">
          <i data-lucide="sparkles" class="w-5 h-5 text-indigo-600"></i>
          <span>Identificar Cliente</span>
        </h2>
        <p class="text-slate-500 text-xs mb-4">Leia o QR Code com a câmara ou procure pelo telemóvel</p>

        <!-- Big Camera Button -->
        <button
          onclick="openQRScanner()"
          class="w-full py-4 px-4 bg-gradient-to-r from-indigo-600 to-violet-700 hover:from-indigo-700 hover:to-violet-800 text-white font-bold rounded-2xl flex items-center justify-center gap-3 shadow-lg shadow-indigo-200 transition-all cursor-pointer group active:scale-98"
        >
          <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center group-hover:scale-110 transition-transform">
            <i data-lucide="camera" class="w-6 h-6"></i>
          </div>
          <div class="text-left">
            <span class="block text-base leading-tight">Ler QR Code com a Câmara</span>
            <span class="block text-[11px] text-indigo-100 font-normal">Abertura instantânea</span>
          </div>
        </button>

        <div class="relative my-4 flex items-center">
          <div class="flex-grow border-t border-slate-200"></div>
          <span class="shrink-0 px-3 text-xs text-slate-400 font-medium">ou procurar por telefone</span>
          <div class="flex-grow border-t border-slate-200"></div>
        </div>

        <!-- Search input -->
        <div class="relative">
          <i data-lucide="search" class="w-5 h-5 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
          <input
            type="text"
            id="searchInput"
            placeholder="Introduza telefone ou nome..."
            class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-300 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-slate-900"
            oninput="handleSearch(this.value)"
          />
        </div>

        <!-- Search Results Dropdown -->
        <div id="searchResults" class="hidden mt-2 bg-white border border-slate-200 rounded-2xl shadow-xl overflow-hidden max-h-60 overflow-y-auto divide-y divide-slate-100"></div>

        <!-- New Customer Button -->
        <button
          onclick="openNewCustomerModal()"
          class="w-full mt-4 py-2.5 px-4 bg-slate-50 hover:bg-slate-100 text-slate-700 font-semibold rounded-2xl border border-slate-200 flex items-center justify-center gap-2 text-xs transition-colors cursor-pointer"
        >
          <i data-lucide="user-plus" class="w-4 h-4 text-indigo-600"></i>
          <span>+ Registar Novo Cliente (5 segundos)</span>
        </button>
      </div>

      <!-- Quick Demo Clients -->
      <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm">
        <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Clientes de Teste Rápidos</h3>
        <div class="space-y-2">
          <button onclick="selectCustomer('cust_1')" class="w-full p-2.5 rounded-xl border border-slate-100 hover:border-indigo-300 hover:bg-indigo-50/50 flex items-center justify-between text-left text-xs transition-all cursor-pointer">
            <div><span class="font-semibold text-slate-800">Ana Silva</span><span class="text-slate-400 text-[11px] block">912345678</span></div>
            <span class="px-2 py-0.5 rounded-md font-semibold text-[11px] bg-slate-100 text-slate-600">8 selos</span>
          </button>
          <button onclick="selectCustomer('cust_2')" class="w-full p-2.5 rounded-xl border border-slate-100 hover:border-indigo-300 hover:bg-indigo-50/50 flex items-center justify-between text-left text-xs transition-all cursor-pointer">
            <div><span class="font-semibold text-slate-800">João Pedro Santos</span><span class="text-slate-400 text-[11px] block">934567890</span></div>
            <span class="px-2 py-0.5 rounded-md font-semibold text-[11px] bg-amber-100 text-amber-800">🎉 Pronto a resgatar!</span>
          </button>
          <button onclick="selectCustomer('cust_3')" class="w-full p-2.5 rounded-xl border border-slate-100 hover:border-indigo-300 hover:bg-indigo-50/50 flex items-center justify-between text-left text-xs transition-all cursor-pointer">
            <div><span class="font-semibold text-slate-800">Mariana Costa</span><span class="text-slate-400 text-[11px] block">965432109</span></div>
            <span class="px-2 py-0.5 rounded-md font-semibold text-[11px] bg-slate-100 text-slate-600">3 selos</span>
          </button>
        </div>
      </div>
    </div>

    <!-- RIGHT: Active Customer Deck (7 cols) -->
    <div class="lg:col-span-7">
      <div id="noCustomerState" class="h-full min-h-[420px] bg-white rounded-3xl border-2 border-dashed border-slate-200 p-8 flex flex-col items-center justify-center text-center">
        <div class="w-20 h-20 rounded-3xl bg-indigo-50 text-indigo-500 flex items-center justify-center mb-4">
          <i data-lucide="credit-card" class="w-10 h-10"></i>
        </div>
        <h3 class="text-slate-900 font-bold text-lg mb-1">Nenhum Cliente Selecionado</h3>
        <p class="text-slate-500 text-sm max-w-sm mb-6">Leia o QR Code do telemóvel do cliente através da câmara ou introduza o telefone na pesquisa ao lado.</p>
        <div class="flex gap-3">
          <button onclick="openQRScanner()" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold transition-all flex items-center gap-2 cursor-pointer shadow-md">
            <i data-lucide="camera" class="w-4 h-4"></i> Abrir Scanner
          </button>
          <button onclick="selectCustomer('cust_1')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-all cursor-pointer">
            Testar com Ana Silva
          </button>
        </div>
      </div>

      <!-- Active Customer Card -->
      <div id="activeCustomerState" class="hidden bg-white rounded-3xl p-6 sm:p-7 border border-slate-200 shadow-md space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 pb-5">
          <div>
            <span class="px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold uppercase tracking-wider">Cliente Ativo no Balcão</span>
            <h2 id="custName" class="text-2xl font-black text-slate-900 mt-1"></h2>
            <p id="custPhone" class="text-xs text-slate-500 flex items-center gap-1.5 mt-0.5"></p>
          </div>
          <div class="flex items-center gap-2">
            <a id="custDigitalLink" href="#" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-semibold transition-colors">
              <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
              <span>Ver Cartão</span>
            </a>
            <button onclick="clearActiveCustomer()" class="p-2 rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors">
              <i data-lucide="x" class="w-5 h-5"></i>
            </button>
          </div>
        </div>

        <!-- Visual Stamp Card -->
        <div class="bg-slate-950 text-white rounded-3xl p-5 shadow-inner">
          <div class="flex justify-between items-center mb-2">
            <span class="text-xs font-bold uppercase tracking-wider text-indigo-400">Estado do Cartão</span>
            <span id="stampsCounterText" class="text-xs font-bold text-slate-300"></span>
          </div>

          <div id="stampGridSlots" class="grid grid-cols-5 gap-2.5 my-3"></div>

          <div class="flex justify-between items-center text-xs text-slate-400 pt-2 border-t border-slate-800">
            <span>Prémio: <strong id="rewardText" class="text-amber-300">{{ settings.rewardDescription }}</strong></span>
            <span>Total visitas: <strong id="custVisits" class="text-white"></strong></span>
          </div>
        </div>

        <!-- Reward Ready Box -->
        <div id="rewardReadyBanner" class="hidden bg-gradient-to-r from-amber-500 to-amber-600 rounded-2xl p-4 text-white flex flex-col sm:flex-row items-center justify-between gap-3 shadow-lg shadow-amber-200">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
              <i data-lucide="gift" class="w-7 h-7 animate-bounce"></i>
            </div>
            <div>
              <p class="text-xs uppercase font-bold tracking-wider text-amber-100">Cartão Completo!</p>
              <p class="text-base font-black leading-tight">Cliente tem 1 Prémio Grátis para resgatar</p>
            </div>
          </div>
          <button onclick="handleRedeemReward()" class="w-full sm:w-auto px-6 py-3 bg-white text-amber-900 font-black rounded-xl hover:bg-amber-50 active:scale-95 transition-all shadow-md text-sm cursor-pointer">
            🎁 Resgatar Prémio Agora
          </button>
        </div>

        <!-- 1-Click Action Buttons -->
        <div class="space-y-4">
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <button onclick="handleAddStamps(1)" class="py-4 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-extrabold rounded-2xl shadow-lg shadow-indigo-200 flex flex-col items-center justify-center gap-1 transition-all active:scale-95 cursor-pointer">
              <span class="text-2xl font-black">+1 Carimbo</span>
              <span class="text-xs text-indigo-200 font-normal">Ação Mais Frequente</span>
            </button>
            <button onclick="handleAddStamps(2)" class="py-4 px-4 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-2xl shadow-md flex flex-col items-center justify-center gap-1 transition-all active:scale-95 cursor-pointer">
              <span class="text-xl font-bold">+2 Carimbos</span>
              <span class="text-xs text-slate-400 font-normal">Pedido Duplo</span>
            </button>
            <button onclick="handleAddStamps(3)" class="py-4 px-4 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-2xl shadow-md flex flex-col items-center justify-center gap-1 transition-all active:scale-95 cursor-pointer">
              <span class="text-xl font-bold">+3 Carimbos</span>
              <span class="text-xs text-slate-400 font-normal">Mesa / Grupo</span>
            </button>
          </div>

          <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col sm:flex-row gap-3 items-center">
            <div class="w-full sm:flex-1">
              <label class="block text-xs font-semibold text-slate-600 mb-1">Registar Valor da Compra (Opcional)</label>
              <input type="number" id="purchaseAmount" step="0.01" placeholder="Ex: 14.50 €" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>
            <div class="w-full sm:flex-1">
              <label class="block text-xs font-semibold text-slate-600 mb-1">Nota do Operador (Opcional)</label>
              <input type="text" id="operatorNote" placeholder="Ex: Menu Almoço + Café" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>
          </div>
        </div>

        <!-- History -->
        <div class="pt-4 border-t border-slate-100">
          <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-1.5">
            <i data-lucide="history" class="w-4 h-4"></i> Histórico deste Cliente
          </h4>
          <div id="customerTxList" class="space-y-2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- QR Scanner Modal -->
<div id="qrModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-xs">
  <div class="bg-white rounded-3xl max-w-md w-full overflow-hidden shadow-2xl border border-slate-100">
    <div class="flex items-center justify-between p-4 px-6 border-b border-slate-100">
      <div class="flex items-center gap-2 text-slate-900 font-bold text-lg">
        <i data-lucide="camera" class="w-5 h-5 text-indigo-600"></i>
        <span>Leitor de QR Code</span>
      </div>
      <button onclick="closeQRScanner()" class="p-1.5 rounded-full text-slate-400 hover:text-slate-600">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
    <div class="p-6 flex flex-col items-center">
      <div id="qr-reader" class="w-full max-w-[280px] aspect-square rounded-2xl overflow-hidden bg-black shadow-inner"></div>
      <p class="text-xs text-slate-500 mt-4 text-center">Aponte a câmara para o QR Code no telemóvel do cliente</p>
    </div>
  </div>
</div>

<!-- Quick New Customer Modal -->
<div id="newCustModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-xs">
  <div class="bg-white rounded-3xl max-w-md w-full p-6 shadow-2xl border border-slate-100">
    <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
      <div class="flex items-center gap-2 text-slate-900 font-bold text-lg">
        <i data-lucide="user-plus" class="w-5 h-5 text-indigo-600"></i>
        <span>Registo Rápido de Cliente</span>
      </div>
      <button onclick="closeNewCustomerModal()" class="p-1 rounded-full text-slate-400 hover:text-slate-600">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
    <form onsubmit="handleCreateCustomer(event)" class="space-y-4">
      <div>
        <label class="block text-xs font-bold text-slate-700 mb-1">Nome do Cliente *</label>
        <input type="text" id="newCustName" required placeholder="Ex: Carlos Ferreira" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-slate-900" />
      </div>
      <div>
        <label class="block text-xs font-bold text-slate-700 mb-1">Número de Telemóvel *</label>
        <input type="tel" id="newCustPhone" required placeholder="Ex: 912345678" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-slate-900" />
      </div>
      <div class="flex items-center gap-2 p-3 bg-indigo-50 rounded-xl">
        <input type="checkbox" id="initialStampCheck" checked class="w-4 h-4 text-indigo-600 rounded-sm focus:ring-indigo-500" />
        <label for="initialStampCheck" class="text-xs font-semibold text-indigo-900 cursor-pointer">Atribuir 1º Carimbo imediatamente</label>
      </div>
      <div class="flex gap-3 pt-2">
        <button type="button" onclick="closeNewCustomerModal()" class="flex-1 py-2.5 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold">Cancelar</button>
        <button type="submit" class="flex-1 py-2.5 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold shadow-md">Criar e Abrir</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let activeCustomer = null;
  let html5Scanner = null;
  const stampsGoal = {{ settings.stampsGoal or 10 }};
  const primaryColor = "{{ settings.primaryColor or '#6366f1' }}";

  function showToast(text, type = 'success') {
    const toast = document.getElementById('bannerToast');
    const toastText = document.getElementById('toastText');
    const toastIcon = document.getElementById('toastIcon');

    toast.className = `mb-6 p-4 rounded-2xl flex items-center gap-3 text-sm font-semibold shadow-md ${
      type === 'success' ? 'bg-emerald-600 text-white' : 'bg-rose-600 text-white'
    }`;
    toastText.textContent = text;
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 4000);
  }

  async function handleSearch(val) {
    const resultsContainer = document.getElementById('searchResults');
    if (!val || val.trim().length === 0) {
      resultsContainer.classList.add('hidden');
      return;
    }

    try {
      const res = await fetch('/api/customers?q=' + encodeURIComponent(val.trim()));
      const data = await res.json();
      if (data.success && data.customers.length > 0) {
        resultsContainer.innerHTML = data.customers.map(c => `
          <button onclick="selectCustomer('${c.id}')" class="w-full p-3 text-left hover:bg-indigo-50/70 flex items-center justify-between transition-colors cursor-pointer">
            <div>
              <p class="text-sm font-bold text-slate-900">${c.name}</p>
              <p class="text-xs text-slate-500">${c.phone}</p>
            </div>
            <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700">${c.stamps} / ${stampsGoal} selos</span>
          </button>
        `).join('');
        resultsContainer.classList.remove('hidden');
      } else {
        resultsContainer.innerHTML = `
          <div class="p-4 text-center">
            <p class="text-xs text-slate-500 mb-2">Nenhum cliente encontrado</p>
            <button onclick="openNewCustomerModal('${val}')" class="text-xs font-bold text-indigo-600 hover:text-indigo-800">+ Registar agora</button>
          </div>
        `;
        resultsContainer.classList.remove('hidden');
      }
    } catch(e) {}
  }

  async function selectCustomer(idOrToken) {
    try {
      const res = await fetch('/api/customers/' + encodeURIComponent(idOrToken));
      const data = await res.json();
      if (data.success) {
        activeCustomer = data.customer;
        renderActiveCustomer(data.customer, data.transactions || []);
        document.getElementById('searchResults').classList.add('hidden');
        document.getElementById('searchInput').value = '';
      } else {
        showToast(data.error || 'Cliente não encontrado', 'error');
      }
    } catch(e) {
      showToast('Erro ao carregar dados do cliente', 'error');
    }
  }

  function renderActiveCustomer(cust, txs) {
    document.getElementById('noCustomerState').classList.add('hidden');
    document.getElementById('activeCustomerState').classList.remove('hidden');

    document.getElementById('custName').textContent = cust.name;
    document.getElementById('custPhone').textContent = cust.phone + (cust.email ? ' • ' + cust.email : '');
    document.getElementById('custVisits').textContent = cust.totalVisits;
    document.getElementById('custDigitalLink').href = '/cartao/' + cust.cardToken;
    document.getElementById('stampsCounterText').textContent = `${cust.stamps} / ${stampsGoal} Selos`;

    // Render Stamps Grid
    const slotsDiv = document.getElementById('stampGridSlots');
    let slotsHtml = '';
    for (let i = 1; i <= stampsGoal; i++) {
      const isFilled = i <= cust.stamps;
      const isReward = i === stampsGoal;
      slotsHtml += `
        <div class="relative aspect-square rounded-2xl flex flex-col items-center justify-center p-1 transition-all ${
          isFilled ? 'shadow-md scale-100 text-white' : 'border-2 border-dashed border-slate-700 bg-slate-900 text-slate-600'
        }" style="${isFilled ? `background-color: ${isReward ? '#f59e0b' : primaryColor};` : ''}">
          <span class="absolute top-1 left-1.5 text-[9px] font-bold ${isFilled ? 'text-white/70' : 'text-slate-500'}">${i}</span>
          ${isReward ? '<i data-lucide="gift" class="w-6 h-6 ' + (isFilled ? 'text-white' : 'text-amber-500/60') + '"></i>' : (isFilled ? '<i data-lucide="check" class="w-5 h-5"></i>' : '<i data-lucide="circle" class="w-4 h-4 opacity-30"></i>')}
        </div>
      `;
    }
    slotsDiv.innerHTML = slotsHtml;
    lucide.createIcons();

    // Reward Ready
    const rewardBanner = document.getElementById('rewardReadyBanner');
    if (cust.stamps >= stampsGoal) {
      rewardBanner.classList.remove('hidden');
    } else {
      rewardBanner.classList.add('hidden');
    }

    // Transactions list
    const txList = document.getElementById('customerTxList');
    if (txs.length === 0) {
      txList.innerHTML = '<p class="text-xs text-slate-400">Sem movimentos registados.</p>';
    } else {
      txList.innerHTML = txs.slice(0, 4).map(tx => `
        <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-100 text-xs">
          <div>
            <p class="font-semibold text-slate-800">${tx.description || tx.type}</p>
            <p class="text-[10px] text-slate-400">${new Date(tx.createdAt).toLocaleDateString('pt-PT', {day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit'})}</p>
          </div>
          <span class="font-bold ${tx.stampsDelta > 0 ? 'text-emerald-600' : 'text-amber-600'}">${tx.stampsDelta > 0 ? '+' + tx.stampsDelta : tx.stampsDelta} selos</span>
        </div>
      `).join('');
    }
  }

  function clearActiveCustomer() {
    activeCustomer = null;
    document.getElementById('activeCustomerState').classList.add('hidden');
    document.getElementById('noCustomerState').classList.remove('hidden');
  }

  async function handleAddStamps(count = 1) {
    if (!activeCustomer) return;
    sounds.playStamp();
    const amount = document.getElementById('purchaseAmount').value;
    const note = document.getElementById('operatorNote').value;

    try {
      const res = await fetch('/api/stamps/add', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customerId: activeCustomer.id,
          count: count,
          amountEuros: amount || undefined,
          note: note || undefined
        })
      });
      const data = await res.json();
      if (data.success) {
        showToast(`+${count} Carimbo(s) registado(s) com sucesso!`, 'success');
        document.getElementById('purchaseAmount').value = '';
        document.getElementById('operatorNote').value = '';
        selectCustomer(activeCustomer.id);
        if (data.canRedeem) {
          sounds.playCelebration();
          fireConfetti();
        }
      } else {
        showToast(data.error || 'Erro ao adicionar carimbos', 'error');
      }
    } catch(e) {
      showToast('Erro ao contactar o servidor', 'error');
    }
  }

  async function handleRedeemReward() {
    if (!activeCustomer) return;
    sounds.playCelebration();
    fireConfetti();

    try {
      const res = await fetch('/api/stamps/redeem', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ customerId: activeCustomer.id, note: 'Resgate de prémio no balcão' })
      });
      const data = await res.json();
      if (data.success) {
        showToast('🎁 Prémio resgatado com sucesso!', 'success');
        selectCustomer(activeCustomer.id);
      } else {
        showToast(data.error || 'Erro ao resgatar', 'error');
      }
    } catch(e) {
      showToast('Erro ao processar resgate', 'error');
    }
  }

  function openQRScanner() {
    sounds.playTap();
    document.getElementById('qrModal').classList.remove('hidden');
    html5Scanner = new Html5Qrcode("qr-reader");
    html5Scanner.start(
      { facingMode: "environment" },
      { fps: 10, qrbox: { width: 250, height: 250 } },
      (decodedText) => {
        closeQRScanner();
        let token = decodedText.trim();
        if (token.includes('/cartao/')) {
          token = token.split('/cartao/').pop().split('?')[0];
        }
        selectCustomer(token);
      },
      () => {}
    ).catch(err => {
      console.warn("Scanner error:", err);
    });
  }

  function closeQRScanner() {
    if (html5Scanner) {
      html5Scanner.stop().catch(() => {});
      html5Scanner = null;
    }
    document.getElementById('qrModal').classList.add('hidden');
  }

  function openNewCustomerModal(phone = '') {
    sounds.playTap();
    if (phone) document.getElementById('newCustPhone').value = phone;
    document.getElementById('newCustModal').classList.remove('hidden');
  }

  function closeNewCustomerModal() {
    document.getElementById('newCustModal').classList.add('hidden');
  }

  async function handleCreateCustomer(e) {
    e.preventDefault();
    const name = document.getElementById('newCustName').value.trim();
    const phone = document.getElementById('newCustPhone').value.trim();
    const initialStamp = document.getElementById('initialStampCheck').checked;

    try {
      const res = await fetch('/api/customers', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, phone })
      });
      const data = await res.json();
      if (data.success) {
        closeNewCustomerModal();
        if (initialStamp) {
          await fetch('/api/stamps/add', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ customerId: data.customer.id, count: 1 })
          });
        }
        selectCustomer(data.customer.id);
        showToast(`Cliente ${name} registado com sucesso!`, 'success');
      } else {
        showToast(data.error || 'Erro ao criar cliente', 'error');
      }
    } catch(e) {
      showToast('Erro ao criar cliente', 'error');
    }
  }
</script>
{% endblock %}