{% extends "base.html" %}

{% block title %}Painel de Gestão - {{ settings.storeName }}{% endblock %}

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

  <!-- Top Bar -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <div>
      <h1 class="text-2xl font-black text-slate-900">Painel de Gestão</h1>
      <p class="text-xs text-slate-500 mt-0.5">Controlo de clientes, métricas, temas visuais, logótipo e personalização</p>
    </div>

    <!-- Tabs Navigation -->
    <div class="flex bg-white p-1 rounded-2xl border border-slate-200 shadow-xs overflow-x-auto">
      <button onclick="switchTab('dashboard')" id="tabBtn-dashboard" class="tab-btn active flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all bg-indigo-600 text-white shadow-xs">
        <i data-lucide="trending-up" class="w-4 h-4"></i><span>Dashboard</span>
      </button>
      <button onclick="switchTab('customers')" id="tabBtn-customers" class="tab-btn flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all text-slate-600 hover:text-slate-900">
        <i data-lucide="users" class="w-4 h-4"></i><span>Clientes</span>
      </button>
      <button onclick="switchTab('transactions')" id="tabBtn-transactions" class="tab-btn flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all text-slate-600 hover:text-slate-900">
        <i data-lucide="clock" class="w-4 h-4"></i><span>Movimentos</span>
      </button>
      <button onclick="switchTab('settings')" id="tabBtn-settings" class="tab-btn flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all text-slate-600 hover:text-slate-900">
        <i data-lucide="settings" class="w-4 h-4"></i><span>Temas &amp; Definições</span>
      </button>
    </div>
  </div>

  <!-- TAB 1: DASHBOARD -->
  <div id="tab-dashboard" class="space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
      <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Clientes</p>
          <p id="kpiTotalCust" class="text-3xl font-black text-slate-900 mt-1">-</p>
          <p class="text-[11px] text-emerald-600 font-semibold mt-1">Registados no programa</p>
        </div>
        <div class="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
          <i data-lucide="users" class="w-6 h-6"></i>
        </div>
      </div>

      <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Selos Hoje</p>
          <p id="kpiStampsToday" class="text-3xl font-black text-indigo-600 mt-1">-</p>
          <p class="text-[11px] text-slate-400 mt-1">Atribuídos no balcão hoje</p>
        </div>
        <div class="w-12 h-12 rounded-2xl bg-violet-50 text-violet-600 flex items-center justify-center">
          <i data-lucide="sparkles" class="w-6 h-6"></i>
        </div>
      </div>

      <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Prémios Resgatados</p>
          <p id="kpiRewardsTotal" class="text-3xl font-black text-amber-600 mt-1">-</p>
          <p class="text-[11px] text-amber-700 font-semibold mt-1">Total de ofertas entregues</p>
        </div>
        <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center">
          <i data-lucide="gift" class="w-6 h-6"></i>
        </div>
      </div>

      <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm flex items-center justify-between">
        <div>
          <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Taxa de Retorno</p>
          <p id="kpiLoyaltyRate" class="text-3xl font-black text-emerald-600 mt-1">-%</p>
          <p class="text-[11px] text-slate-400 mt-1">Clientes com &gt;1 visita</p>
        </div>
        <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
          <i data-lucide="award" class="w-6 h-6"></i>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
      <!-- VIP Customers (5 cols) -->
      <div class="lg:col-span-5 bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
        <h3 class="text-slate-900 font-bold text-base flex items-center gap-2 mb-4">
          <i data-lucide="crown" class="w-5 h-5 text-amber-500"></i>
          <span>Top Clientes Mais Frequentes</span>
        </h3>
        <div id="topVipList" class="space-y-3"></div>
      </div>

      <!-- Recent Transactions (7 cols) -->
      <div class="lg:col-span-7 bg-white rounded-3xl p-6 border border-slate-200 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-slate-900 font-bold text-base flex items-center gap-2">
            <i data-lucide="clock" class="w-5 h-5 text-indigo-600"></i>
            <span>Atividade Recente no Balcão</span>
          </h3>
          <button onclick="loadStats()" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100">
            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
          </button>
        </div>
        <div id="recentTxList" class="space-y-2.5"></div>
      </div>
    </div>
  </div>

  <!-- TAB 2: CUSTOMERS -->
  <div id="tab-customers" class="hidden bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
      <div class="relative w-full sm:w-80">
        <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
        <input
          type="text"
          id="custFilterInput"
          placeholder="Pesquisar por nome ou telefone..."
          oninput="filterCustomersTable(this.value)"
          class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500 text-slate-900"
        />
      </div>
      <button onclick="exportCSV()" class="flex items-center gap-1.5 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-colors cursor-pointer">
        <i data-lucide="download" class="w-4 h-4"></i> Exportar CSV
      </button>
    </div>

    <div class="overflow-x-auto rounded-2xl border border-slate-200">
      <table class="w-full text-left text-xs divide-y divide-slate-200">
        <thead class="bg-slate-50 text-slate-600 font-bold uppercase tracking-wider text-[10px]">
          <tr>
            <th class="px-4 py-3.5">Cliente</th>
            <th class="px-4 py-3.5">Contacto</th>
            <th class="px-4 py-3.5 text-center">Selos Atuais</th>
            <th class="px-4 py-3.5 text-center">Visitas</th>
            <th class="px-4 py-3.5 text-center">Prémios Ganhos</th>
            <th class="px-4 py-3.5">Última Visita</th>
            <th class="px-4 py-3.5 text-right">Ações</th>
          </tr>
        </thead>
        <tbody id="customersTableBody" class="divide-y divide-slate-100 bg-white"></tbody>
      </table>
    </div>
  </div>

  <!-- TAB 3: TRANSACTIONS -->
  <div id="tab-transactions" class="hidden bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
    <h3 class="text-slate-900 font-bold text-base flex items-center gap-2">
      <i data-lucide="clock" class="w-5 h-5 text-indigo-600"></i>
      <span>Registo de Todos os Movimentos &amp; Transações</span>
    </h3>
    <div class="overflow-x-auto rounded-2xl border border-slate-200">
      <table class="w-full text-left text-xs divide-y divide-slate-200">
        <thead class="bg-slate-50 text-slate-600 font-bold uppercase tracking-wider text-[10px]">
          <tr>
            <th class="px-4 py-3">Data e Hora</th>
            <th class="px-4 py-3">Cliente</th>
            <th class="px-4 py-3">Tipo</th>
            <th class="px-4 py-3">Descrição</th>
            <th class="px-4 py-3 text-center">Variação Selos</th>
          </tr>
        </thead>
        <tbody id="allTxTableBody" class="divide-y divide-slate-100 bg-white"></tbody>
      </table>
    </div>
  </div>

  <!-- TAB 4: SETTINGS & THEMES -->
  <div id="tab-settings" class="hidden grid grid-cols-1 lg:grid-cols-12 gap-6">
    <div class="lg:col-span-7 space-y-6">
      <form id="settingsForm" onsubmit="handleSaveSettings(event)" class="space-y-6">
        <!-- Theme Presets -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
          <div class="flex items-center gap-2">
            <i data-lucide="palette" class="w-5 h-5 text-indigo-600"></i>
            <div>
              <h3 class="text-slate-900 font-bold text-base">Temas Prontos (1-Clique)</h3>
              <p class="text-xs text-slate-500">Escolha uma combinação estética pré-definida para aplicar instantaneamente</p>
            </div>
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2" id="themesGrid"></div>
        </div>

        <!-- Logo Upload & Identity -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
          <div class="flex items-center gap-2">
            <i data-lucide="image" class="w-5 h-5 text-indigo-600"></i>
            <div>
              <h3 class="text-slate-900 font-bold text-base">Identidade &amp; Logótipo da Loja</h3>
              <p class="text-xs text-slate-500">Personalize o nome da marca, subtítulo e imagem do logótipo</p>
            </div>
          </div>

          <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 flex flex-col sm:flex-row items-center gap-4">
            <div id="logoPreviewBox" class="relative w-20 h-20 rounded-2xl bg-white border border-slate-200 shadow-xs flex items-center justify-center overflow-hidden shrink-0">
              {% if settings.logoUrl %}
                <img id="logoImg" src="{{ settings.logoUrl }}" alt="Logo" class="w-full h-full object-contain p-1" />
              {% else %}
                <div id="noLogoPlaceholder" class="text-center text-slate-400 p-2">
                  <i data-lucide="image" class="w-7 h-7 mx-auto opacity-50 mb-0.5"></i>
                  <span class="text-[9px] block font-semibold">Sem Logótipo</span>
                </div>
              {% endif %}
            </div>

            <div class="flex-1 text-center sm:text-left space-y-2">
              <p class="text-xs font-bold text-slate-800">Logótipo do Estabelecimento</p>
              <p class="text-[11px] text-slate-500">PNG, JPG ou SVG (Máximo 2MB)</p>
              <div class="flex items-center gap-2 justify-center sm:justify-start">
                <input type="file" id="logoFileInput" accept="image/*" class="hidden" onchange="handleLogoFileSelect(event)" />
                <button type="button" onclick="document.getElementById('logoFileInput').click()" class="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold flex items-center gap-1.5 transition-colors cursor-pointer">
                  <i data-lucide="upload" class="w-3.5 h-3.5"></i> <span>Carregar Imagem</span>
                </button>
                <button type="button" onclick="handleRemoveLogo()" class="px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-xl text-xs font-semibold">
                  Remover
                </button>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Nome do Estabelecimento *</label>
              <input type="text" id="cfgStoreName" required value="{{ settings.storeName }}" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-semibold text-slate-900" oninput="updateLivePreview()" />
            </div>
            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Slogan / Subtítulo</label>
              <input type="text" id="cfgStoreSlogan" value="{{ settings.storeSlogan or '' }}" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm text-slate-900" oninput="updateLivePreview()" />
            </div>
          </div>
        </div>

        <!-- Custom Color Pickers -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
          <h3 class="text-slate-900 font-bold text-base">Ajuste de Cores &amp; Estilo</h3>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Cor Primária (Selos)</label>
              <div class="flex items-center gap-2">
                <input type="color" id="cfgPrimaryColor" value="{{ settings.primaryColor or '#6366f1' }}" class="w-9 h-9 rounded-xl border border-slate-200 cursor-pointer p-0.5 bg-white" onchange="syncColorInput(this.value, 'primary')" />
                <input type="text" id="cfgPrimaryColorHex" value="{{ settings.primaryColor or '#6366f1' }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold uppercase" oninput="syncColorHex(this.value, 'primary')" />
              </div>
            </div>

            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Fundo do Cartão</label>
              <div class="flex items-center gap-2">
                <input type="color" id="cfgCardBgColor" value="{{ settings.cardBgColor or '#0f172a' }}" class="w-9 h-9 rounded-xl border border-slate-200 cursor-pointer p-0.5 bg-white" onchange="syncColorInput(this.value, 'cardBg')" />
                <input type="text" id="cfgCardBgColorHex" value="{{ settings.cardBgColor or '#0f172a' }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold uppercase" oninput="syncColorHex(this.value, 'cardBg')" />
              </div>
            </div>

            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Estilo do Cartão</label>
              <select id="cfgCardTheme" class="w-full px-3 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-bold text-slate-800" onchange="updateLivePreview()">
                <option value="dark" {% if settings.cardTheme == 'dark' %}selected{% endif %}>Escuro / Dark</option>
                <option value="light" {% if settings.cardTheme == 'light' %}selected{% endif %}>Claro / Minimal Light</option>
                <option value="luxury" {% if settings.cardTheme == 'luxury' %}selected{% endif %}>Luxo Dourado</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Rules & Rewards -->
        <div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm space-y-4">
          <h3 class="text-slate-900 font-bold text-base">Regras do Cartão &amp; Prémio</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">Meta de Carimbos por Cartão *</label>
              <select id="cfgStampsGoal" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-bold text-slate-900" onchange="updateLivePreview()">
                <option value="5" {% if settings.stampsGoal == 5 %}selected{% endif %}>5 Carimbos</option>
                <option value="6" {% if settings.stampsGoal == 6 %}selected{% endif %}>6 Carimbos</option>
                <option value="8" {% if settings.stampsGoal == 8 %}selected{% endif %}>8 Carimbos</option>
                <option value="10" {% if settings.stampsGoal == 10 %}selected{% endif %}>10 Carimbos (Padrão)</option>
                <option value="12" {% if settings.stampsGoal == 12 %}selected{% endif %}>12 Carimbos</option>
              </select>
            </div>
            <div>
              <label class="block text-xs font-bold text-slate-700 mb-1">PIN do Operador</label>
              <input type="text" id="cfgOperatorPin" maxlength="6" value="{{ settings.operatorPin or '1234' }}" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-mono text-slate-900" />
            </div>
          </div>

          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Descrição do Prémio ao Completar o Cartão *</label>
            <input type="text" id="cfgRewardDesc" required value="{{ settings.rewardDescription }}" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-sm font-semibold text-slate-900" oninput="updateLivePreview()" />
          </div>
        </div>

        <div class="flex justify-end pt-2">
          <button type="submit" class="px-8 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-2xl shadow-lg shadow-indigo-200 transition-all flex items-center gap-2 cursor-pointer text-sm">
            <i data-lucide="save" class="w-4 h-4"></i>
            <span>Guardar Todas as Definições</span>
          </button>
        </div>
      </form>
    </div>

    <!-- Live Preview (5 cols) -->
    <div class="lg:col-span-5">
      <div class="sticky top-24 space-y-4">
        <div class="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm flex items-center justify-between">
          <div class="flex items-center gap-2">
            <i data-lucide="eye" class="w-5 h-5 text-indigo-600"></i>
            <span class="font-bold text-sm text-slate-900">Pré-visualização ao Vivo</span>
          </div>
          <span class="text-[11px] font-semibold text-indigo-600 bg-indigo-50 px-2.5 py-0.5 rounded-full">Atualização em tempo real</span>
        </div>

        <!-- Live Mockup -->
        <div id="liveCardMockup" class="rounded-3xl p-5 shadow-xl border relative overflow-hidden transition-all duration-300 bg-slate-900 text-white border-slate-800">
          <div class="flex items-center gap-3 border-b pb-3.5 mb-3 border-white/10">
            <div id="livePreviewLogoContainer" class="w-10 h-10 rounded-xl overflow-hidden bg-white/10 border border-white/20 p-0.5 shrink-0 flex items-center justify-center">
              <i data-lucide="coffee" class="w-5 h-5"></i>
            </div>
            <div class="min-w-0 flex-1">
              <h4 id="livePreviewStoreName" class="font-black text-sm truncate">{{ settings.storeName }}</h4>
              <p id="livePreviewStoreSlogan" class="text-[10px] text-slate-400 truncate">{{ settings.storeSlogan }}</p>
            </div>
          </div>

          <div class="flex justify-between items-baseline mb-3">
            <div>
              <span id="livePreviewTag" class="text-[10px] font-bold uppercase tracking-wider block text-indigo-400">Cartão de Fidelização</span>
              <p class="text-lg font-black">Ana Silva</p>
            </div>
            <span id="livePreviewCounter" class="text-xs font-bold text-indigo-400">7 de {{ settings.stampsGoal }}</span>
          </div>

          <div id="liveStampSlots" class="grid grid-cols-5 gap-2 rounded-2xl p-3 bg-black/40 border border-white/10 my-2"></div>

          <div class="flex items-center gap-2 p-2.5 rounded-xl bg-white/5 border border-white/10 text-xs mt-3">
            <i data-lucide="gift" class="w-4 h-4 shrink-0 text-amber-400"></i>
            <span id="livePreviewReward" class="text-[11px] font-semibold truncate">{{ settings.rewardDescription }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const THEME_PRESETS = [
    { id: 'indigo', label: 'Modern Indigo', desc: 'Índigo e violeta', primary: '#6366f1', secondary: '#8b5cf6', cardBg: '#0f172a', cardTheme: 'dark', preview: ['#6366f1', '#8b5cf6', '#0f172a'] },
    { id: 'midnight', label: 'Midnight Gold', desc: 'Dourado luxuoso', primary: '#f59e0b', secondary: '#d97706', cardBg: '#18181b', cardTheme: 'luxury', preview: ['#f59e0b', '#d97706', '#18181b'] },
    { id: 'cafe', label: 'Café & Bistro', desc: 'Caramelo e café', primary: '#b45309', secondary: '#d97706', cardBg: '#271c19', cardTheme: 'dark', preview: ['#b45309', '#d97706', '#271c19'] },
    { id: 'emerald', label: 'Eco Emerald', desc: 'Verde esmeralda', primary: '#059669', secondary: '#10b981', cardBg: '#062e24', cardTheme: 'dark', preview: ['#059669', '#10b981', '#062e24'] },
    { id: 'sunset', label: 'Sunset Rose', desc: 'Rosa e fúcsia', primary: '#e11d48', secondary: '#f43f5e', cardBg: '#2b0e1a', cardTheme: 'dark', preview: ['#e11d48', '#f43f5e', '#2b0e1a'] },
    { id: 'ocean', label: 'Ocean Blue', desc: 'Azul marítimo', primary: '#0284c7', secondary: '#0ea5e9', cardBg: '#082f49', cardTheme: 'dark', preview: ['#0284c7', '#0ea5e9', '#082f49'] },
    { id: 'minimal', label: 'Clean Light', desc: 'Branco minimalista', primary: '#2563eb', secondary: '#4f46e5', cardBg: '#ffffff', cardTheme: 'light', preview: ['#2563eb', '#4f46e5', '#ffffff'] },
    { id: 'carbon', label: 'Dark Carbon', desc: 'Preto puro com néon', primary: '#10b981', secondary: '#06b6d4', cardBg: '#000000', cardTheme: 'dark', preview: ['#10b981', '#06b6d4', '#000000'] }
  ];

  let currentLogoData = "{{ settings.logoUrl or '' }}";
  let allCustomers = [];

  document.addEventListener('DOMContentLoaded', () => {
    renderThemeButtons();
    loadStats();
    loadCustomers();
    loadTransactions();
    updateLivePreview();
  });

  function showAdminToast(text, type = 'success') {
    const toast = document.getElementById('adminToast');
    const toastText = document.getElementById('adminToastText');
    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);
  }

  function switchTab(tabId) {
    sounds.playTap();
    ['dashboard', 'customers', 'transactions', 'settings'].forEach(id => {
      const el = document.getElementById('tab-' + id);
      const btn = document.getElementById('tabBtn-' + id);
      if (id === tabId) {
        el.classList.remove('hidden');
        btn.className = 'tab-btn active flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all bg-indigo-600 text-white shadow-xs';
      } else {
        el.classList.add('hidden');
        btn.className = 'tab-btn flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all text-slate-600 hover:text-slate-900';
      }
    });
    lucide.createIcons();
  }

  function renderThemeButtons() {
    const grid = document.getElementById('themesGrid');
    grid.innerHTML = THEME_PRESETS.map(t => `
      <button type="button" onclick="applyPreset('${t.id}')" class="p-3 rounded-2xl border border-slate-200 hover:border-slate-300 hover:bg-slate-50 text-left flex flex-col justify-between transition-all cursor-pointer">
        <div class="flex items-center gap-1.5 mb-2.5">
          ${t.preview.map(c => `<span class="w-4 h-4 rounded-full border border-white/40 shadow-xs" style="background-color: ${c}"></span>`).join('')}
        </div>
        <div>
          <span class="font-bold text-slate-900 text-xs block">${t.label}</span>
          <span class="text-[10px] text-slate-500 block truncate">${t.desc}</span>
        </div>
      </button>
    `).join('');
  }

  function applyPreset(presetId) {
    sounds.playTap();
    const p = THEME_PRESETS.find(x => x.id === presetId);
    if (!p) return;
    document.getElementById('cfgPrimaryColor').value = p.primary;
    document.getElementById('cfgPrimaryColorHex').value = p.primary;
    document.getElementById('cfgCardBgColor').value = p.cardBg;
    document.getElementById('cfgCardBgColorHex').value = p.cardBg;
    document.getElementById('cfgCardTheme').value = p.cardTheme;
    updateLivePreview();
  }

  function syncColorInput(val, type) {
    if (type === 'primary') document.getElementById('cfgPrimaryColorHex').value = val;
    if (type === 'cardBg') document.getElementById('cfgCardBgColorHex').value = val;
    updateLivePreview();
  }

  function syncColorHex(val, type) {
    if (val.startsWith('#') && (val.length === 4 || val.length === 7)) {
      if (type === 'primary') document.getElementById('cfgPrimaryColor').value = val;
      if (type === 'cardBg') document.getElementById('cfgCardBgColor').value = val;
      updateLivePreview();
    }
  }

  function handleLogoFileSelect(e) {
    const file = e.target.files[0];
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) {
      showAdminToast('O logótipo deve ter menos de 2MB', 'error');
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      currentLogoData = reader.result;
      document.getElementById('logoPreviewBox').innerHTML = `<img src="${currentLogoData}" class="w-full h-full object-contain p-1" />`;
      updateLivePreview();
      showAdminToast('Logótipo carregado! Guarde as definições para aplicar.', 'success');
    };
    reader.readAsDataURL(file);
  }

  function handleRemoveLogo() {
    currentLogoData = '';
    document.getElementById('logoPreviewBox').innerHTML = `
      <div class="text-center text-slate-400 p-2">
        <i data-lucide="image" class="w-7 h-7 mx-auto opacity-50 mb-0.5"></i>
        <span class="text-[9px] block font-semibold">Sem Logótipo</span>
      </div>
    `;
    updateLivePreview();
    lucide.createIcons();
  }

  function updateLivePreview() {
    const storeName = document.getElementById('cfgStoreName').value || 'Nome da Loja';
    const storeSlogan = document.getElementById('cfgStoreSlogan').value || '';
    const primaryColor = document.getElementById('cfgPrimaryColor').value;
    const cardBgColor = document.getElementById('cfgCardBgColor').value;
    const rewardDesc = document.getElementById('cfgRewardDesc').value || '1 Café Grátis';
    const stampsGoal = parseInt(document.getElementById('cfgStampsGoal').value) || 10;
    const isLight = document.getElementById('cfgCardTheme').value === 'light' || cardBgColor.toLowerCase() === '#ffffff';

    const cardEl = document.getElementById('liveCardMockup');
    cardEl.style.backgroundColor = cardBgColor;
    cardEl.className = `rounded-3xl p-5 shadow-xl border relative overflow-hidden transition-all duration-300 ${
      isLight ? 'bg-white border-slate-200 text-slate-900' : 'border-slate-800 text-white'
    }`;

    document.getElementById('livePreviewStoreName').textContent = storeName;
    document.getElementById('livePreviewStoreName').className = `font-black text-sm truncate ${isLight ? 'text-slate-900' : 'text-white'}`;
    document.getElementById('livePreviewStoreSlogan').textContent = storeSlogan;
    document.getElementById('livePreviewReward').textContent = rewardDesc;
    document.getElementById('livePreviewTag').style.color = primaryColor;
    document.getElementById('livePreviewCounter').style.color = primaryColor;
    document.getElementById('livePreviewCounter').textContent = `7 de ${stampsGoal}`;

    if (currentLogoData) {
      document.getElementById('livePreviewLogoContainer').innerHTML = `<img src="${currentLogoData}" class="w-full h-full object-contain" />`;
    } else {
      document.getElementById('livePreviewLogoContainer').innerHTML = `<i data-lucide="coffee" class="w-5 h-5"></i>`;
    }

    const slotsEl = document.getElementById('liveStampSlots');
    let slotsHtml = '';
    for (let i = 1; i <= stampsGoal; i++) {
      const isFilled = i <= Math.min(7, stampsGoal - 1);
      const isReward = i === stampsGoal;
      slotsHtml += `
        <div class="aspect-square rounded-xl flex items-center justify-center text-xs ${
          isFilled ? 'text-white shadow-xs' : 'border border-white/20 text-white/30'
        }" style="${isFilled ? `background-color: ${isReward ? '#f59e0b' : primaryColor};` : ''}">
          ${isReward ? '🎁' : (isFilled ? '✓' : i)}
        </div>
      `;
    }
    slotsEl.innerHTML = slotsHtml;
    lucide.createIcons();
  }

  async function handleSaveSettings(e) {
    e.preventDefault();
    try {
      const payload = {
        storeName: document.getElementById('cfgStoreName').value,
        storeSlogan: document.getElementById('cfgStoreSlogan').value,
        primaryColor: document.getElementById('cfgPrimaryColor').value,
        cardBgColor: document.getElementById('cfgCardBgColor').value,
        cardTheme: document.getElementById('cfgCardTheme').value,
        stampsGoal: parseInt(document.getElementById('cfgStampsGoal').value),
        rewardDescription: document.getElementById('cfgRewardDesc').value,
        operatorPin: document.getElementById('cfgOperatorPin').value,
        logoUrl: currentLogoData || null
      };
      const res = await fetch('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.success) {
        sounds.playCelebration();
        showAdminToast('Definições e temas guardados com sucesso!', 'success');
      } else {
        showAdminToast(data.error || 'Erro ao guardar', 'error');
      }
    } catch(err) {
      showAdminToast('Erro ao contactar o servidor', 'error');
    }
  }

  async function loadStats() {
    try {
      const res = await fetch('/api/stats');
      const data = await res.json();
      if (data.success) {
        const s = data.stats;
        document.getElementById('kpiTotalCust').textContent = s.totalCustomers;
        document.getElementById('kpiStampsToday').textContent = s.stampsGivenToday;
        document.getElementById('kpiRewardsTotal').textContent = s.rewardsRedeemedTotal;
        document.getElementById('kpiLoyaltyRate').textContent = s.activeLoyaltyRate + '%';

        document.getElementById('topVipList').innerHTML = s.topCustomers.map((c, i) => `
          <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
              <span class="w-8 h-8 rounded-xl font-black text-xs flex items-center justify-center ${i === 0 ? 'bg-amber-400 text-amber-950' : 'bg-slate-200 text-slate-700'}">#${i+1}</span>
              <div>
                <p class="text-sm font-bold text-slate-900">${c.name}</p>
                <p class="text-[11px] text-slate-400">${c.phone}</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-xs font-bold text-indigo-600">${c.totalVisits} visitas</span>
              <p class="text-[10px] text-slate-400">${c.totalStampsEarned} selos acumulados</p>
            </div>
          </div>
        `).join('');

        document.getElementById('recentTxList').innerHTML = s.recentTransactions.map(tx => `
          <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between text-xs">
            <div class="flex items-center gap-3">
              <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${tx.type === 'REDEEM_REWARD' ? 'bg-amber-100 text-amber-700' : 'bg-indigo-100 text-indigo-700'}">
                <i data-lucide="${tx.type === 'REDEEM_REWARD' ? 'gift' : 'sparkles'}" class="w-4 h-4"></i>
              </div>
              <div>
                <p class="font-bold text-slate-900">${tx.customerName || 'Cliente'}</p>
                <p class="text-[11px] text-slate-500">${tx.description}</p>
              </div>
            </div>
            <div class="text-right">
              <span class="font-black ${tx.stampsDelta > 0 ? 'text-emerald-600' : 'text-amber-600'}">${tx.stampsDelta > 0 ? '+' + tx.stampsDelta : tx.stampsDelta} selos</span>
              <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>
          </div>
        `).join('');
        lucide.createIcons();
      }
    } catch(e) {}
  }

  async function loadCustomers() {
    try {
      const res = await fetch('/api/customers');
      const data = await res.json();
      if (data.success) {
        allCustomers = data.customers;
        renderCustomersTable(allCustomers);
      }
    } catch(e) {}
  }

  function renderCustomersTable(list) {
    const tbody = document.getElementById('customersTableBody');
    if (list.length === 0) {
      tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-8 text-center text-slate-400">Nenhum cliente encontrado.</td></tr>';
      return;
    }
    tbody.innerHTML = list.map(c => `
      <tr class="hover:bg-slate-50/80 transition-colors">
        <td class="px-4 py-3.5 font-bold text-slate-900">${c.name}</td>
        <td class="px-4 py-3.5 text-slate-600">${c.phone}</td>
        <td class="px-4 py-3.5 text-center font-black text-indigo-700">${c.stamps}</td>
        <td class="px-4 py-3.5 text-center font-semibold text-slate-700">${c.totalVisits}</td>
        <td class="px-4 py-3.5 text-center font-bold text-amber-600">${c.rewardsRedeemed}</td>
        <td class="px-4 py-3.5 text-slate-500 text-[11px]">${new Date(c.lastVisitAt).toLocaleDateString('pt-PT')}</td>
        <td class="px-4 py-3.5 text-right">
          <a href="/cartao/${c.cardToken}" target="_blank" class="inline-block p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg">
            <i data-lucide="external-link" class="w-4 h-4"></i>
          </a>
        </td>
      </tr>
    `).join('');
    lucide.createIcons();
  }

  function filterCustomersTable(q) {
    const filtered = allCustomers.filter(c => c.name.toLowerCase().includes(q.toLowerCase()) || c.phone.includes(q));
    renderCustomersTable(filtered);
  }

  async function loadTransactions() {
    try {
      const res = await fetch('/api/transactions?limit=50');
      const data = await res.json();
      if (data.success) {
        document.getElementById('allTxTableBody').innerHTML = data.transactions.map(tx => `
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-3 text-slate-500 font-mono text-[11px]">${tx.createdAt}</td>
            <td class="px-4 py-3 font-bold text-slate-900">${tx.customerName || 'Cliente'}</td>
            <td class="px-4 py-3"><span class="px-2 py-0.5 rounded-md text-[10px] font-bold ${tx.type === 'REDEEM_REWARD' ? 'bg-amber-100 text-amber-800' : 'bg-indigo-100 text-indigo-800'}">${tx.type}</span></td>
            <td class="px-4 py-3 text-slate-700">${tx.description}</td>
            <td class="px-4 py-3 text-center font-bold ${tx.stampsDelta > 0 ? 'text-emerald-600' : 'text-amber-600'}">${tx.stampsDelta > 0 ? '+' + tx.stampsDelta : tx.stampsDelta}</td>
          </tr>
        `).join('');
        lucide.createIcons();
      }
    } catch(e) {}
  }

  function exportCSV() {
    if (allCustomers.length === 0) return;
    const headers = ['ID', 'Nome', 'Telefone', 'Email', 'Selos', 'Visitas', 'Premios', 'CriadoEm'];
    const rows = allCustomers.map(c => [c.id, `"${c.name}"`, `"${c.phone}"`, `"${c.email||''}"`, c.stamps, c.totalVisits, c.rewardsRedeemed, c.createdAt]);
    const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
    const link = document.createElement('a');
    link.setAttribute('href', encodeURI(csvContent));
    link.setAttribute('download', 'clientes_fidelizacao.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showAdminToast('Ficheiro CSV exportado com sucesso!', 'success');
  }
</script>
{% endblock %}