<?php
require_once __DIR__ . '/core/auth.php';
$usuario = exigir_login();
$nivel = $usuario['nivel'];
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COBRANEX — Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  html{ font-size:17px; }
  body{ background:#0a0a12; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; letter-spacing:-0.01em; }
  .grid-bg{
    background-image:
      radial-gradient(circle at 10% 10%, rgba(168,85,247,0.12), transparent 35%),
      radial-gradient(circle at 90% 90%, rgba(34,211,238,0.10), transparent 35%);
  }
  .card{ background:rgba(15,15,25,0.75); border:1px solid rgba(168,85,247,0.25); backdrop-filter: blur(10px); border-radius:1rem; transition: border-color .2s ease, box-shadow .2s ease; }
  .neon-purple{ box-shadow:0 0 20px rgba(168,85,247,0.25), 0 4px 18px rgba(0,0,0,0.25); transition: transform .2s ease, box-shadow .2s ease; }
  .neon-purple:hover{ transform: translateY(-2px); box-shadow:0 0 26px rgba(168,85,247,0.4), 0 8px 22px rgba(0,0,0,0.3); }
  .neon-cyan{ box-shadow:0 0 20px rgba(34,211,238,0.20), 0 4px 18px rgba(0,0,0,0.25); transition: transform .2s ease, box-shadow .2s ease; }
  .neon-cyan:hover{ transform: translateY(-2px); box-shadow:0 0 26px rgba(34,211,238,0.35), 0 8px 22px rgba(0,0,0,0.3); }
  .tab-active{ color:#fff; border-bottom:2px solid #22d3ee; }
  .side-btn{ transition: background .15s ease, color .15s ease, padding-left .15s ease; border-radius:0.6rem; }
  .side-btn.tab-active{ color:#fff; border-bottom:none; background:linear-gradient(90deg, rgba(168,85,247,0.25), rgba(59,130,246,0.12)); border-left:3px solid #22d3ee; padding-left:calc(0.75rem - 3px); }
  [class*="bg-gradient-to-r"]{ transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
  [class*="bg-gradient-to-r"]:hover{ filter:brightness(1.12); transform: translateY(-1px); box-shadow:0 4px 14px rgba(168,85,247,0.35); }
  button, .side-btn, input, select, textarea{ transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
  input:focus, select:focus, textarea:focus{ outline:none; border-color:#a855f7 !important; box-shadow:0 0 0 3px rgba(168,85,247,0.15); }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#a855f7,#3b82f6); border-radius:4px; }
  table th{ position:sticky; top:0; background:#0f0f19; }

  /* ===== TEMA CLARO ===== */
  body.tema-claro{
    background:#ffffff !important;
    background-image:
      radial-gradient(circle at 10% 10%, rgba(168,85,247,0.06), transparent 35%),
      radial-gradient(circle at 90% 90%, rgba(59,130,246,0.06), transparent 35%);
    color:#3b0764;
  }
  body.tema-claro aside,
  body.tema-claro header,
  body.tema-claro nav,
  body.tema-claro .bg-\[\#0a0a12\]\/80,
  body.tema-claro .bg-\[\#0a0a12\]\/90,
  body.tema-claro .bg-\[\#0a0a12\]\/60{
    background:#ffffff !important;
    border-color:#e9d5ff !important;
  }
  body.tema-claro .card{
    background:#f5f0ff !important;
    border-color:#c4b5fd !important;
    color:#3b0764;
    box-shadow:0 1px 8px rgba(168,85,247,0.10);
  }
  body.tema-claro h1,
  body.tema-claro h2,
  body.tema-claro h3{ color:#5b21b6; }
  body.tema-claro h1.bg-clip-text{ color:transparent; }
  body.tema-claro p, body.tema-claro span, body.tema-claro td, body.tema-claro label{ color:#4c1d95; }
  body.tema-claro .text-slate-200,
  body.tema-claro .text-slate-300,
  body.tema-claro .text-slate-400,
  body.tema-claro .text-slate-500,
  body.tema-claro .text-slate-600{ color:#7c3aed !important; }
  body.tema-claro table th{ background:#f5f0ff !important; color:#6d28d9 !important; border-color:#ddd6fe !important; }
  body.tema-claro tr{ border-color:#ede9fe !important; }
  body.tema-claro .side-btn{ color:#6d28d9; }
  body.tema-claro .side-btn:hover{ background:#f3e8ff !important; color:#3b0764 !important; }
  body.tema-claro .side-btn.tab-active{ background:linear-gradient(90deg, rgba(168,85,247,0.18), rgba(59,130,246,0.10)) !important; color:#3b0764 !important; }
  body.tema-claro input,
  body.tema-claro select,
  body.tema-claro textarea{
    background:#ffffff !important;
    color:#3b0764 !important;
    border-color:#c4b5fd !important;
  }
  body.tema-claro input::placeholder,
  body.tema-claro textarea::placeholder{ color:#a78bfa !important; }
  body.tema-claro .bg-slate-800,
  body.tema-claro .bg-slate-800\/60,
  body.tema-claro .bg-slate-950,
  body.tema-claro .bg-slate-950\/60,
  body.tema-claro .bg-slate-950\/80{ background:#f5f0ff !important; color:#4c1d95 !important; }
  body.tema-claro .border-slate-700,
  body.tema-claro .border-slate-800{ border-color:#ddd6fe !important; }
  body.tema-claro .hover\:bg-slate-800\/30:hover,
  body.tema-claro .hover\:bg-slate-800\/60:hover{ background:#ede9fe !important; }
  body.tema-claro #modal .card,
  body.tema-claro #modal-conteudo{ background:#ffffff !important; }
  body.tema-claro #botao-tema{ background:#f5f0ff; border-color:#c4b5fd; }
</style>
</head>
<body class="grid-bg text-slate-200 min-h-screen">

<!-- BOTÃO DE TEMA (fixo no canto superior direito, funciona em qualquer tela) -->
<button id="botao-tema" onclick="alternarTema()" title="Alternar tema claro/escuro"
  class="fixed top-3 right-3 z-40 w-10 h-10 rounded-full flex items-center justify-center bg-slate-800 border border-slate-700 hover:border-purple-500 transition text-lg shadow-lg">
  <span id="icone-tema">🌙</span>
</button>

<div class="md:flex md:items-stretch">

  <!-- OVERLAY (fecha o menu ao tocar fora, só aparece no mobile com o menu aberto) -->
  <div id="overlay-menu" onclick="fecharMenuMobile()" class="hidden fixed inset-0 bg-black/60 z-40 md:hidden"></div>

  <!-- SIDEBAR / DRAWER (fixo no desktop, desliza da esquerda no mobile) -->
  <aside id="sidebar-principal" class="fixed md:sticky inset-y-0 left-0 z-50 flex flex-col w-64 md:w-60 shrink-0 border-r border-purple-900/40 bg-[#0a0a12] md:bg-[#0a0a12]/80 backdrop-blur top-0 h-screen overflow-y-auto -translate-x-full md:translate-x-0 transition-transform duration-300">
    <div class="px-5 py-5 border-b border-slate-800 flex items-start justify-between gap-2">
      <div>
        <h1 class="text-xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-cyan-400 to-blue-400">COBRANEX</h1>
        <p class="text-xs text-slate-500 mt-1 truncate"><?= htmlspecialchars($usuario['usuario']) ?> · <span class="text-cyan-400"><?= htmlspecialchars($nivel) ?></span></p>
        <?php if ($nivel !== 'ADM' && !empty($usuario['vencimento_painel'])): ?>
          <?php
            $vencPainel = new DateTime($usuario['vencimento_painel']);
            $diasVencPainel = (int) (new DateTime('today'))->diff($vencPainel)->format('%r%a');
            $corVenc = $diasVencPainel < 0 ? 'text-red-400' : ($diasVencPainel <= 5 ? 'text-cyan-400' : 'text-slate-500');
          ?>
          <p class="text-[11px] <?= $corVenc ?> mt-1">
            Mensalidade: <?= $vencPainel->format('d/m/Y') ?>
            <?= $diasVencPainel < 0 ? ' (VENCIDA)' : '' ?>
          </p>
        <?php endif; ?>
      </div>
      <button onclick="fecharMenuMobile()" class="md:hidden text-slate-400 hover:text-white text-xl leading-none px-1">✕</button>
    </div>
    <nav class="flex-1 flex flex-col gap-1 p-3 text-sm">
      <button data-tab="inicio" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition tab-active">Início</button>
      <button data-tab="clientes" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Clientes</button>
      <button data-tab="inativos" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Inativos</button>
      <button data-tab="testes" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Testes Grátis</button>
      <?php if (in_array($nivel, ['ADM', 'REVENDA'])): ?>
      <button data-tab="planos" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Planos</button>
      <button data-tab="financeiro" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Financeiro</button>
      <?php endif; ?>
      <button data-tab="servidores" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Servidores</button>
      <button data-tab="filas" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Filas de Envio</button>
      <?php if (in_array($nivel, ['ADM', 'REVENDA'])): ?>
      <button data-tab="usuarios" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Equipe / Mensalidade</button>
      <?php endif; ?>
      <button data-tab="mensagens" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Mensagens</button>
      <?php if ($nivel === 'ADM'): ?>
      <button data-tab="auditoria" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Auditoria</button>
      <button data-tab="backup" class="tab-btn side-btn text-left px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition">Backup</button>
      <?php endif; ?>
    </nav>
    <div class="p-3 border-t border-slate-800 flex flex-col gap-2">
      <button onclick="pedirPermissaoNotificacao()" id="botao-push" class="w-full px-3 py-2 rounded-lg bg-slate-800 hover:bg-cyan-900/60 border border-slate-700 hover:border-cyan-500 transition text-xs">🔔 Ativar Notificações</button>
      <button onclick="abrirModalMinhaConta()" class="w-full px-3 py-2 rounded-lg bg-slate-800 hover:bg-purple-900/60 border border-slate-700 hover:border-purple-500 transition text-xs">Minha Conta</button>
      <a href="logout.php" class="w-full text-center px-3 py-2 rounded-lg bg-slate-800 hover:bg-blue-900/60 border border-slate-700 hover:border-blue-400 transition text-xs">Sair</a>
    </div>
  </aside>

  <div class="flex-1 min-w-0">

    <!-- HEADER (MOBILE/TABLET) -->
    <header class="md:hidden flex flex-wrap items-center justify-between gap-y-2 gap-x-4 px-3 sm:px-4 py-3 border-b border-purple-900/40 sticky top-0 bg-[#0a0a12]/90 backdrop-blur z-30">
      <div class="flex items-center gap-3">
        <button onclick="abrirMenuMobile()" class="text-slate-300 hover:text-white text-2xl leading-none px-1" aria-label="Abrir menu">☰</button>
        <h1 class="text-lg font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-cyan-400 to-blue-400">COBRANEX</h1>
      </div>
      <div class="flex items-center gap-2 text-xs flex-wrap justify-end">
        <span class="hidden sm:inline text-slate-400"><?= htmlspecialchars($usuario['usuario']) ?> · <span class="text-cyan-400"><?= htmlspecialchars($nivel) ?></span></span>
        <?php if ($nivel !== 'ADM' && !empty($usuario['vencimento_painel'])):
          $vencPainelM = new DateTime($usuario['vencimento_painel']);
          $diasVencPainelM = (int) (new DateTime('today'))->diff($vencPainelM)->format('%r%a');
          $corVencM = $diasVencPainelM < 0 ? 'text-red-400' : ($diasVencPainelM <= 5 ? 'text-cyan-400' : 'text-slate-500');
        ?>
          <span class="<?= $corVencM ?> whitespace-nowrap">Mensalidade: <?= $vencPainelM->format('d/m') ?><?= $diasVencPainelM < 0 ? ' (vencida)' : '' ?></span>
        <?php endif; ?>
      </div>
    </header>

<main class="p-3 sm:p-4 md:p-8 space-y-5 sm:space-y-6">

  <!-- INÍCIO / DASHBOARD -->
  <section id="tab-inicio" class="tab-content space-y-6">
    <div id="alertas" class="space-y-2"></div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
      <div class="card rounded-xl p-5 neon-purple">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Clientes Totais</p>
        <p id="st-total" class="text-3xl font-bold text-purple-300 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-5 neon-purple">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Ativos</p>
        <p id="st-ativos" class="text-3xl font-bold text-blue-300 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-5 neon-cyan">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Inativos</p>
        <p id="st-inativos" class="text-3xl font-bold text-cyan-300 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-5 neon-cyan">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Testes Expirados</p>
        <p id="st-testes" class="text-3xl font-bold text-cyan-300 mt-1">–</p>
      </div>
    </div>

    <div class="grid md:grid-cols-3 gap-4">
      <div class="card rounded-xl p-5 md:col-span-1">
        <p class="text-sm text-slate-400 uppercase tracking-wide mb-3">Clientes por Status</p>
        <div class="relative h-52">
          <canvas id="grafico-clientes-status"></canvas>
        </div>
      </div>
      <div class="card rounded-xl p-5 md:col-span-2">
        <div class="flex justify-between items-center flex-wrap gap-2 mb-3">
          <p class="text-sm text-slate-400 uppercase tracking-wide">Faturamento (Fluxo de Caixa Real)</p>
          <div class="flex items-end gap-2 flex-wrap">
            <div>
              <label class="text-[10px] text-purple-300 block mb-0.5">De</label>
              <input type="date" id="home-fat-de" onchange="filtrarFaturamentoHomePersonalizado()" class="bg-slate-950 border border-slate-700 rounded-lg p-1 text-xs">
            </div>
            <div>
              <label class="text-[10px] text-purple-300 block mb-0.5">Até</label>
              <input type="date" id="home-fat-ate" onchange="filtrarFaturamentoHomePersonalizado()" class="bg-slate-950 border border-slate-700 rounded-lg p-1 text-xs">
            </div>
          </div>
        </div>
        <div id="home-fat-personalizado" class="hidden card rounded-lg p-3 mb-3 text-center border-cyan-600/50">
          <p class="text-xs text-slate-500" id="home-fat-personalizado-label">Período personalizado</p>
          <p id="home-fat-personalizado-valor" class="text-2xl font-bold text-cyan-300">R$ 0,00</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
          <div><p class="text-xs text-slate-500">Hoje</p><p id="fat-dia" class="text-xl font-bold text-purple-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Semana</p><p id="fat-semana" class="text-xl font-bold text-purple-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Mês</p><p id="fat-mes" class="text-xl font-bold text-purple-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Ano</p><p id="fat-ano" class="text-xl font-bold text-purple-300">R$ 0,00</p></div>
        </div>
        <hr class="border-slate-800 my-3">
        <p class="text-sm text-slate-400 uppercase tracking-wide mb-3">Projeção de Entrada <span class="normal-case text-slate-600">(clientes ativos a vencer)</span></p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
          <div><p class="text-xs text-slate-500">Hoje</p><p id="proj-dia" class="text-xl font-bold text-emerald-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Semana</p><p id="proj-semana" class="text-xl font-bold text-emerald-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Mês</p><p id="proj-mes" class="text-xl font-bold text-emerald-300">R$ 0,00</p></div>
          <div><p class="text-xs text-slate-500">Ano</p><p id="proj-ano" class="text-xl font-bold text-emerald-300">R$ 0,00</p></div>
        </div>
      </div>
    </div>
  </section>

  <!-- CLIENTES -->
  <section id="tab-clientes" class="tab-content hidden space-y-4">
    <div class="flex flex-wrap gap-2 justify-between items-center">
      <h2 class="text-lg font-bold text-slate-100">Clientes</h2>
      <div class="flex flex-wrap gap-2">
        <button onclick="abrirModalCliente()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold hover:brightness-110">+ Novo Cliente</button>
        <button onclick="exportarClientes()" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm hover:border-blue-500">Exportar CSV</button>
        <label class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm hover:border-blue-500 cursor-pointer">
          Importar CSV
          <input type="file" accept=".csv" class="hidden" onchange="importarClientes(event)">
        </label>
      </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
      <div class="card rounded-xl p-4">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Total</p>
        <p id="cc-total" class="text-2xl font-bold text-purple-300 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-4">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Ativos</p>
        <p id="cc-ativos" class="text-2xl font-bold text-blue-300 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-4">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Em atraso</p>
        <p id="cc-atraso" class="text-2xl font-bold text-red-400 mt-1">–</p>
      </div>
      <div class="card rounded-xl p-4">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Vs. mês passado</p>
        <p id="cc-variacao" class="text-2xl font-bold mt-1">–</p>
      </div>
      <div class="card rounded-xl p-4 neon-purple">
        <p class="text-xs text-slate-400 uppercase tracking-wide" id="cc-receber-label">A receber (filtro)</p>
        <p id="cc-receber" class="text-2xl font-bold text-emerald-300 mt-1">R$ 0,00</p>
      </div>
    </div>

    <div class="card rounded-xl p-3 flex flex-wrap gap-2 items-end">
      <div class="flex-1 min-w-[180px]">
        <label class="text-xs text-slate-400">Buscar (nome, WhatsApp ou e-mail)</label>
        <input id="cli-busca" oninput="aplicarFiltrosClientes()" placeholder="Digite para buscar..." class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
      </div>
      <div>
        <label class="text-xs text-slate-400">Servidor</label>
        <select id="cli-filtro-servidor" onchange="aplicarFiltrosClientes()" class="bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
          <option value="">Todos</option>
        </select>
      </div>
      <div class="flex gap-1.5 flex-wrap">
        <label class="text-xs text-slate-400 w-full">Vencimento</label>
        <button onclick="filtrarClientesVencimentoRapido('hoje')" data-venc-rapido="hoje" class="cli-venc-rapido-btn px-3 py-2 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Hoje</button>
        <button onclick="filtrarClientesVencimentoRapido('semana')" data-venc-rapido="semana" class="cli-venc-rapido-btn px-3 py-2 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Esta semana</button>
      </div>
      <div>
        <label class="text-xs text-slate-400">Vencimento de</label>
        <input id="cli-filtro-data-inicio" type="date" onchange="filtrarClientesVencimentoCustom()" class="bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
      </div>
      <div>
        <label class="text-xs text-slate-400">até</label>
        <input id="cli-filtro-data-fim" type="date" onchange="filtrarClientesVencimentoCustom()" class="bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
      </div>
      <button onclick="limparFiltrosClientes()" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Limpar filtros</button>
    </div>

    <div class="card rounded-xl overflow-auto max-h-[60vh]">
      <table class="w-full min-w-[820px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3 cursor-pointer select-none hover:text-white" onclick="ordenarClientes('nome')">Nome<span id="seta-nome"></span></th>
          <th class="p-3">WhatsApp</th>
          <th class="p-3">E-mail</th>
          <th class="p-3 cursor-pointer select-none hover:text-white" onclick="ordenarClientes('servidor')">Servidor<span id="seta-servidor"></span></th>
          <th class="p-3 cursor-pointer select-none hover:text-white" onclick="ordenarClientes('valor')">Preço<span id="seta-valor"></span></th>
          <th class="p-3 cursor-pointer select-none hover:text-white" onclick="ordenarClientes('vencimento')">Vencimento<span id="seta-vencimento"></span></th>
          <th class="p-3 cursor-pointer select-none hover:text-white" onclick="ordenarClientes('status')">Status<span id="seta-status"></span></th>
          <th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-clientes"></tbody>
      </table>
    </div>
  </section>

  <!-- INATIVOS -->
  <section id="tab-inativos" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center">
      <h2 class="text-lg font-bold text-slate-100">Clientes Inativos / Bloqueados</h2>
      <button onclick="limparInativos()" class="px-3 py-2 rounded-lg bg-blue-900/60 border border-blue-600 text-sm hover:brightness-110">Limpar vencidos há +2 dias</button>
    </div>
    <div class="card rounded-xl overflow-auto max-h-[60vh]">
      <table class="w-full min-w-[640px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Nome</th><th class="p-3">WhatsApp</th><th class="p-3">Vencimento</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-inativos"></tbody>
      </table>
    </div>
  </section>

  <!-- TESTES EXPIRADOS (REMARKETING) -->
  <section id="tab-testes" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center flex-wrap gap-2">
      <div>
        <h2 class="text-lg font-bold text-slate-100">Testes Grátis</h2>
        <p class="text-xs text-slate-500 mt-0.5">Cadastro separado do cliente normal — acompanhe aqui os testes em andamento e os já expirados. Quando o lead virar cliente pagante de verdade, use "Converter em Cliente".</p>
      </div>
      <button onclick="abrirModalNovoTeste()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-cyan-600 text-sm font-semibold whitespace-nowrap">+ Novo Teste</button>
    </div>
    <div class="card rounded-xl overflow-auto max-h-[60vh]">
      <table class="w-full min-w-[640px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Nome</th><th class="p-3">WhatsApp</th><th class="p-3">Testou em</th><th class="p-3">Status</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-testes"></tbody>
      </table>
    </div>
  </section>

  <!-- PLANOS -->
  <section id="tab-planos" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center flex-wrap gap-2">
      <div>
        <h2 class="text-lg font-bold text-slate-100">Cadastro de Planos</h2>
        <p class="text-xs text-slate-500 mt-0.5">Ex.: Plano 1 Mês / R$ 35,00 — ao renovar, soma 1 mês. Plano Trimestral / R$ 90,00 — ao renovar, soma 3 meses.</p>
      </div>
      <button onclick="abrirModalPlano()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold whitespace-nowrap">+ Novo Plano</button>
    </div>
    <div class="card rounded-xl overflow-auto max-h-[60vh]">
      <table class="w-full min-w-[480px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Nome do Plano</th><th class="p-3">Duração</th><th class="p-3">Valor</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-planos"></tbody>
      </table>
    </div>
  </section>

  <!-- FINANCEIRO -->
  <section id="tab-financeiro" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center flex-wrap gap-2">
      <h2 class="text-lg font-bold text-slate-100">Movimentações Financeiras</h2>
      <button onclick="abrirModalMovimentacao()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold whitespace-nowrap">+ Nova Movimentação</button>
    </div>

    <div class="card rounded-xl p-3 sm:p-4 flex flex-wrap items-end gap-3">
      <div class="flex gap-1.5 flex-wrap" id="fin-periodo-rapido">
        <button onclick="filtrarFinanceiroPeriodo('hoje')" data-periodo="hoje" class="fin-periodo-btn px-3 py-1.5 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Hoje</button>
        <button onclick="filtrarFinanceiroPeriodo('semana')" data-periodo="semana" class="fin-periodo-btn px-3 py-1.5 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Esta semana</button>
        <button onclick="filtrarFinanceiroPeriodo('mes')" data-periodo="mes" class="fin-periodo-btn px-3 py-1.5 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Este mês</button>
        <button onclick="filtrarFinanceiroPeriodo('mes_passado')" data-periodo="mes_passado" class="fin-periodo-btn px-3 py-1.5 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Mês passado</button>
        <button onclick="filtrarFinanceiroPeriodo('tudo')" data-periodo="tudo" class="fin-periodo-btn px-3 py-1.5 rounded-lg text-xs font-semibold border border-slate-700 bg-slate-800 hover:border-purple-500 transition">Tudo</button>
      </div>
      <div class="flex items-end gap-2 flex-wrap ml-auto">
        <div>
          <label class="text-[11px] text-purple-300 block mb-1">De</label>
          <input type="date" id="fin-data-de" onchange="filtrarFinanceiroCustom()" class="bg-slate-950 border border-slate-700 rounded-lg p-1.5 text-xs">
        </div>
        <div>
          <label class="text-[11px] text-purple-300 block mb-1">Até</label>
          <input type="date" id="fin-data-ate" onchange="filtrarFinanceiroCustom()" class="bg-slate-950 border border-slate-700 rounded-lg p-1.5 text-xs">
        </div>
      </div>
    </div>
    <p id="fin-periodo-label" class="text-xs text-slate-500 -mt-2">Mostrando: tudo</p>

    <div class="grid grid-cols-3 gap-3 sm:gap-4">
      <div class="card rounded-xl p-4 neon-purple">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Entradas</p>
        <p id="fin-entradas" class="text-xl sm:text-2xl font-bold text-blue-300 mt-1">R$ 0,00</p>
      </div>
      <div class="card rounded-xl p-4 neon-cyan">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Saídas</p>
        <p id="fin-saidas" class="text-xl sm:text-2xl font-bold text-cyan-300 mt-1">R$ 0,00</p>
      </div>
      <div class="card rounded-xl p-4">
        <p class="text-xs text-slate-400 uppercase tracking-wide">Saldo</p>
        <p id="fin-saldo" class="text-xl sm:text-2xl font-bold text-purple-300 mt-1">R$ 0,00</p>
      </div>
    </div>
    <div class="card rounded-xl p-4">
      <div class="flex justify-between items-center mb-2 flex-wrap gap-2">
        <h3 class="text-sm font-semibold text-slate-300">Faturamento ao longo do tempo</h3>
        <div class="flex gap-1 text-xs">
          <button onclick="setPeriodoGraficoFinanceiro('dia')" id="periodo-btn-dia" class="periodo-btn px-2 py-1 rounded bg-purple-700/60 border border-purple-600">Por dia</button>
          <button onclick="setPeriodoGraficoFinanceiro('mes')" id="periodo-btn-mes" class="periodo-btn px-2 py-1 rounded bg-slate-800 border border-slate-700">Por mês</button>
        </div>
      </div>
      <div class="relative h-64">
        <canvas id="grafico-financeiro"></canvas>
      </div>
    </div>
    <div class="card rounded-xl overflow-auto max-h-[55vh]">
      <table class="w-full min-w-[560px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Data</th><th class="p-3">Tipo</th><th class="p-3">Descrição</th><th class="p-3">Valor</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-financeiro"></tbody>
      </table>
    </div>
  </section>

  <!-- SERVIDORES (ADM) -->
  <section id="tab-servidores" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center">
      <h2 class="text-lg font-bold text-slate-100">Servidores &amp; Planos</h2>
      <button onclick="abrirModalServidor()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold">+ Novo Servidor</button>
    </div>
    <div id="lista-servidores" class="grid md:grid-cols-2 gap-4"></div>
  </section>

  <!-- FILAS DE ENVIO -->
  <section id="tab-filas" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center flex-wrap gap-2">
      <div>
        <h2 class="text-lg font-bold text-slate-100">Filas de Envio</h2>
        <p class="text-xs text-slate-500 mt-0.5">E-mails e WhatsApp agendados aguardando o horário/intervalo configurado, ou já processados.</p>
      </div>
      <div class="flex gap-2 flex-wrap">
        <button onclick="gerarFilaManual()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold whitespace-nowrap">📋 Gerar Fila Agora (sem enviar)</button>
        <button onclick="carregarFilas()" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm whitespace-nowrap">🔄 Atualizar</button>
      </div>
    </div>
    <p class="text-xs text-slate-500">"Gerar Fila Agora" só organiza quem precisa ser avisado (respeitando o vencimento de cada cliente) e coloca na fila — <b>não envia nada na hora</b>. O envio de verdade só acontece no horário configurado em Mensagens &gt; Agendamento (ou pelos botões de teste lá).</p>

    <div id="resultado-gerar-fila" class="hidden card rounded-lg p-3 text-sm"></div>

    <div class="grid grid-cols-3 gap-3">
      <div class="card rounded-lg p-3 text-center">
        <p class="text-xs text-slate-500">Pendentes</p>
        <p id="filas-total-pendente" class="text-xl font-bold text-purple-300">–</p>
      </div>
      <div class="card rounded-lg p-3 text-center">
        <p class="text-xs text-slate-500">Enviados</p>
        <p id="filas-total-enviado" class="text-xl font-bold text-blue-300">–</p>
      </div>
      <div class="card rounded-lg p-3 text-center">
        <p class="text-xs text-slate-500">Com erro</p>
        <p id="filas-total-erro" class="text-xl font-bold text-red-400">–</p>
      </div>
    </div>

    <div>
      <h3 class="text-sm font-bold text-slate-200 mb-2">📧 E-mails Agendados</h3>
      <div class="card rounded-xl overflow-auto max-h-[45vh]">
        <table class="w-full min-w-[720px] text-sm">
          <thead><tr class="text-left text-slate-400 border-b border-slate-800">
            <th class="p-3">Criado em</th><th class="p-3">Destinatário</th><th class="p-3">Assunto</th><th class="p-3">Status</th><th class="p-3">Tentativas</th><th class="p-3">Ações</th>
          </tr></thead>
          <tbody id="tabela-fila-emails"></tbody>
        </table>
      </div>
    </div>

    <div>
      <h3 class="text-sm font-bold text-slate-200 mb-2">💬 WhatsApp Agendados</h3>
      <div class="card rounded-xl overflow-auto max-h-[45vh]">
        <table class="w-full min-w-[720px] text-sm">
          <thead><tr class="text-left text-slate-400 border-b border-slate-800">
            <th class="p-3">Criado em</th><th class="p-3">WhatsApp</th><th class="p-3">Mensagem</th><th class="p-3">Status</th><th class="p-3">Tentativas</th><th class="p-3">Ações</th>
          </tr></thead>
          <tbody id="tabela-fila-whatsapp"></tbody>
        </table>
      </div>
    </div>

    <div>
      <h3 class="text-sm font-bold text-slate-200 mb-2">📟 SMS Agendados</h3>
      <div class="card rounded-xl overflow-auto max-h-[45vh]">
        <table class="w-full min-w-[720px] text-sm">
          <thead><tr class="text-left text-slate-400 border-b border-slate-800">
            <th class="p-3">Criado em</th><th class="p-3">Número</th><th class="p-3">Mensagem</th><th class="p-3">Status</th><th class="p-3">Tentativas</th><th class="p-3">Ações</th>
          </tr></thead>
          <tbody id="tabela-fila-sms"></tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- USUARIOS / MENSALIDADE -->
  <section id="tab-usuarios" class="tab-content hidden space-y-4">
    <div class="flex justify-between items-center">
      <h2 class="text-lg font-bold text-slate-100">Equipe &amp; Mensalidade</h2>
      <button onclick="abrirModalUsuario()" class="px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-sm font-semibold">+ Novo Usuário</button>
    </div>
    <div class="card rounded-xl overflow-auto max-h-[60vh]">
      <table class="w-full min-w-[640px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Usuário</th><th class="p-3">Nível</th><th class="p-3">Mensalidade</th><th class="p-3">Vencimento do Painel</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-usuarios"></tbody>
      </table>
    </div>
  </section>

  <!-- MENSAGENS -->
  <section id="tab-mensagens" class="tab-content hidden space-y-4">
    <h2 class="text-lg font-bold text-slate-100">Templates de Mensagens</h2>

    <?php if ($nivel === 'ADM'): ?>
    <div class="card rounded-xl p-4">
      <h3 class="text-sm font-bold text-slate-200 mb-1">Agendamento de Lembretes Automáticos</h3>
      <p class="text-xs text-slate-500 mb-3">Controla o cron diário: em quais dias antes do vencimento avisar, a que horas começar a enviar os e-mails, e o intervalo entre cada um (evita bloqueio/spam). O WhatsApp já tem sua própria cadência anti-bloqueio, separada.</p>

      <label class="text-xs text-purple-300 block mb-1">Avisar faltando quantos dias para o vencimento?</label>
      <div class="flex flex-wrap gap-3 mb-3" id="dias-aviso-checkboxes">
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="5" class="chk-dia-aviso w-4 h-4"> 5 dias</label>
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="4" class="chk-dia-aviso w-4 h-4"> 4 dias</label>
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="3" class="chk-dia-aviso w-4 h-4"> 3 dias</label>
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="2" class="chk-dia-aviso w-4 h-4"> 2 dias</label>
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="1" class="chk-dia-aviso w-4 h-4"> 1 dia</label>
      </div>
      <p class="text-xs text-slate-500 mb-3">O aviso do "dia do vencimento" (0 dias) é sempre enviado — não precisa marcar.</p>

      <label class="text-xs text-orange-300 block mb-1">Avisar "vencido" quantos dias DEPOIS do vencimento? (antes de suspender o acesso automaticamente em 2 dias de atraso)</label>
      <div class="flex flex-wrap gap-3 mb-3" id="dias-pos-vencimento-checkboxes">
        <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" value="1" class="chk-dia-pos-vencimento w-4 h-4"> 1 dia depois</label>
      </div>
      <p class="text-xs text-slate-500 mb-3">O aviso de "expirado" (acesso suspenso) é disparado automaticamente no momento da inativação — não precisa configurar dias.</p>

      <div class="grid sm:grid-cols-3 gap-3">
        <div>
          <label class="text-xs text-purple-300">Horário de início (e-mails e SMS)</label>
          <input id="agenda-horario" type="time" value="09:00" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-purple-300">Intervalo entre e-mails (segundos)</label>
          <input id="agenda-intervalo" type="number" min="1" value="30" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-purple-300">Quantos e-mails por execução do cron</label>
          <input id="agenda-lote" type="number" min="1" max="100" value="10" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-purple-300">Intervalo entre SMS (segundos)</label>
          <input id="agenda-intervalo-sms" type="number" min="1" value="30" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-purple-300">Quantos SMS por execução do cron</label>
          <input id="agenda-lote-sms" type="number" min="1" max="100" value="10" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-emerald-300">Avisar quantos minutos ANTES de expirar o teste?</label>
          <input id="agenda-minutos-antes-teste" type="number" min="1" value="15" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
        <div>
          <label class="text-xs text-emerald-300">Avisar teste expirado até quantos minutos DEPOIS?</label>
          <input id="agenda-minutos-teste" type="number" min="1" value="60" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mt-1">
        </div>
      </div>
      <p class="text-xs text-slate-500 mt-2">Ex.: início 09:00 e intervalo 30s → 1º e-mail/SMS às 09:00:00, 2º às 09:00:30, 3º às 09:01:00... Os crons de e-mail e SMS precisam rodar a cada minuto (veja o README). O WhatsApp usa sua própria cadência anti-bloqueio, sem horário fixo. Testes grátis disparam DOIS avisos independentes: um antes de expirar (aviso prévio) e outro depois que expira de verdade (aviso de expiração).</p>
      <button onclick="salvarAgendamento()" class="mt-3 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar Agendamento</button>

      <hr class="border-slate-800 my-4">

      <h4 class="text-sm font-bold text-slate-200 mb-1">🧪 Testar Agora (sem esperar o cron)</h4>
      <p class="text-xs text-slate-500 mb-3">Dispara manualmente as mesmas rotinas que rodam sozinhas todo dia — útil pra testar sem esperar o horário configurado ou o dia seguinte.</p>

      <div class="flex flex-wrap gap-2 mb-3">
        <button onclick="testarVerificarVencimentos()" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:border-purple-500 text-xs font-semibold">1️⃣ Verificar vencimentos agora</button>
        <button onclick="testarVerificarTestes()" class="px-3 py-2 rounded-lg bg-emerald-900/40 border border-emerald-600 hover:border-emerald-400 text-xs font-semibold">⏰ Verificar testes expirando agora</button>
        <button onclick="testarEnviarFilaEmails(false)" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:border-cyan-500 text-xs font-semibold">2️⃣ Enviar fila de e-mails (respeitando horário)</button>
        <button onclick="testarEnviarFilaEmails(true)" class="px-3 py-2 rounded-lg bg-cyan-900/40 border border-cyan-600 hover:border-cyan-400 text-xs font-semibold">2️⃣ Enviar fila de e-mails AGORA (ignora horário)</button>
        <button onclick="testarEnviarFilaSms(true)" class="px-3 py-2 rounded-lg bg-blue-900/40 border border-blue-600 hover:border-blue-400 text-xs font-semibold">3️⃣ Enviar fila de SMS AGORA (ignora horário)</button>
        <button onclick="atualizarStatusFilas()" class="px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:border-blue-500 text-xs font-semibold">🔄 Ver status das filas</button>
      </div>

      <div id="status-filas-teste" class="text-xs text-slate-400 mb-2"></div>
      <pre id="log-teste-automacao" class="text-xs bg-slate-950 border border-slate-800 rounded-lg p-3 max-h-48 overflow-auto whitespace-pre-wrap"></pre>
    </div>
    <?php endif; ?>

    <div class="card rounded-xl p-4">
      <h3 class="text-sm font-bold text-slate-200 mb-1">Chave PIX</h3>
      <p class="text-xs text-slate-500">A configuração da chave PIX (usada onde a tag {PIX} aparecer nas mensagens) foi movida para <b class="text-purple-300">Minha Conta</b> — cada usuário (ADM, Revenda ou Sub-Revenda) tem a própria chave, respeitando a hierarquia de quem criou quem. O ADM pode configurar a de qualquer usuário direto pela tela de Equipe &gt; ⚙️ Configurações.</p>
    </div>

    <div class="card rounded-xl p-4">
      <h3 class="text-sm font-bold text-slate-200 mb-1">📱 SMS via Celular</h3>
      <p class="text-xs text-slate-500">A configuração do gateway de SMS (celular Android) foi movida para <b class="text-purple-300">Minha Conta</b> — cada usuário (ADM, Revenda ou Sub-Revenda) tem o próprio celular/gateway, respeitando a hierarquia de quem criou quem. O ADM pode configurar o de qualquer usuário direto pela tela de Equipe &gt; ⚙️ Configurações.</p>
    </div>

    <div class="card rounded-xl p-4">
      <h3 class="text-sm font-bold text-slate-200 mb-1">Canais de Envio</h3>
      <p class="text-xs text-slate-500 mb-3">Escolha por qual meio cada ação deve enviar mensagem. E-mail e SMS são disparados automaticamente; WhatsApp sempre abre para você confirmar o envio com um clique.</p>
      <div class="grid sm:grid-cols-3 gap-4">
        <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-3">
          <p class="text-xs font-semibold text-cyan-300 mb-2">Cobrança (botão "Cobrar")</p>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-cobranca-whatsapp" class="w-4 h-4"> WhatsApp</label>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-cobranca-email" class="w-4 h-4"> E-mail</label>
          <label class="flex items-center gap-2 text-sm"><input type="checkbox" id="canal-cobranca-sms" class="w-4 h-4"> SMS</label>
        </div>
        <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-3">
          <p class="text-xs font-semibold text-purple-300 mb-2">Renovação de Cliente</p>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-renovacao-whatsapp" class="w-4 h-4"> WhatsApp</label>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-renovacao-email" class="w-4 h-4"> E-mail</label>
          <label class="flex items-center gap-2 text-sm"><input type="checkbox" id="canal-renovacao-sms" class="w-4 h-4"> SMS</label>
        </div>
        <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-3">
          <p class="text-xs font-semibold text-emerald-300 mb-2">Teste Expirado</p>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-teste-whatsapp" class="w-4 h-4"> WhatsApp</label>
          <label class="flex items-center gap-2 text-sm mb-1"><input type="checkbox" id="canal-teste-email" class="w-4 h-4"> E-mail</label>
          <label class="flex items-center gap-2 text-sm"><input type="checkbox" id="canal-teste-sms" class="w-4 h-4"> SMS</label>
        </div>
      </div>
      <button onclick="salvarCanais()" class="mt-3 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar Canais</button>
    </div>

    <p class="text-xs text-slate-500">Tags disponíveis: {NOME} {WHATSAPP} {USUARIO} {SENHA} {VENCIMENTO} {VENCIMENTO_HORA} {VALOR} {PIX} {BENEFICIARIO} {PIX_INSTRUCOES} {SERVIDOR} {DIAS} {SAUDACAO} {DESPEDIDA}</p>

    <div class="card rounded-xl p-4">
      <div class="flex justify-between items-center flex-wrap gap-2 mb-2">
        <div>
          <h3 class="text-sm font-bold text-slate-200">🔀 Saudações e despedidas rotativas</h3>
          <p class="text-xs text-slate-500">As tags {SAUDACAO} e {DESPEDIDA} vão rodando essas opções a cada envio de verdade — nunca repete a mesma duas vezes seguidas pro mesmo cliente. Use nos templates onde quiser, ex.: "{SAUDACAO} {NOME}, tudo bem?".</p>
        </div>
      </div>
      <div class="grid md:grid-cols-2 gap-4">
        <div>
          <div class="flex justify-between items-center mb-1">
            <label class="text-xs text-purple-300">Saudações ({SAUDACAO})</label>
            <button type="button" onclick="adicionarVariacaoSimples('lista-saudacoes')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar</button>
          </div>
          <div id="lista-saudacoes"></div>
        </div>
        <div>
          <div class="flex justify-between items-center mb-1">
            <label class="text-xs text-purple-300">Despedidas ({DESPEDIDA})</label>
            <button type="button" onclick="adicionarVariacaoSimples('lista-despedidas')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar</button>
          </div>
          <div id="lista-despedidas"></div>
        </div>
      </div>
      <button onclick="salvarVariacoes()" class="mt-3 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar Saudações/Despedidas</button>
    </div>

    <div class="grid md:grid-cols-2 gap-4">
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-purple-300">Boas-vindas</label>
          <button type="button" onclick="adicionarVariacaoTemplate('boas_vindas')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <p class="text-[11px] text-slate-500 mb-1">Cadastre 2 ou mais variações pra cada cliente novo receber um texto diferente, não sempre o mesmo.</p>
        <div id="lista-msg-boas_vindas"></div>
      </div>
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-purple-300">Aviso de vencimento próximo (use {DIAS} — funciona para 3, 2, 1 dia)</label>
          <button type="button" onclick="adicionarVariacaoTemplate('aviso_3_dias')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <div id="lista-msg-aviso_3_dias"></div>
      </div>
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-purple-300">Vencimento (no dia)</label>
          <button type="button" onclick="adicionarVariacaoTemplate('aviso_vencimento_dia')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <div id="lista-msg-aviso_vencimento_dia"></div>
      </div>
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-purple-300">Confirmação de renovação</label>
          <button type="button" onclick="adicionarVariacaoTemplate('confirmacao_renovacao')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <div id="lista-msg-confirmacao_renovacao"></div>
      </div>
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-orange-300">Depois de vencido (use {DIAS} para dias de atraso)</label>
          <button type="button" onclick="adicionarVariacaoTemplate('aviso_pos_vencimento')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <div id="lista-msg-aviso_pos_vencimento"></div>
      </div>
      <div class="card rounded-xl p-4">
        <div class="flex justify-between items-center mb-1">
          <label class="text-xs text-red-300">Depois de expirado (acesso suspenso)</label>
          <button type="button" onclick="adicionarVariacaoTemplate('aviso_expirado')" class="text-xs px-2 py-1 rounded bg-slate-800 border border-slate-700">+ Adicionar variação</button>
        </div>
        <div id="lista-msg-aviso_expirado"></div>
      </div>
      <div class="card rounded-xl p-4"><label class="text-xs text-emerald-300">Teste Grátis expirado (use {VENCIMENTO_HORA} pra mostrar data e hora)</label><textarea id="msg-teste_expirando" class="w-full h-32 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm"></textarea></div>
      <div class="card rounded-xl p-4"><label class="text-xs text-emerald-300">Teste Grátis quase acabando (aviso prévio, X min antes)</label><textarea id="msg-teste_aviso_previo" class="w-full h-32 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm"></textarea></div>
    </div>
    <button onclick="salvarMensagens()" class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar Templates</button>

    <div class="card rounded-xl p-4 mt-2">
      <div class="flex justify-between items-center mb-2">
        <h3 class="text-sm font-bold text-slate-200">Meus Templates (mensagens avulsas)</h3>
        <button onclick="abrirModalTemplateExtra()" class="px-3 py-1.5 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-xs font-semibold">+ Novo Template</button>
      </div>
      <p class="text-xs text-slate-500 mb-3">Crie quantas mensagens quiser (avisos, promoções, cobranças alternativas...). Elas aparecem no botão "Mensagem" de cada cliente.</p>
      <div id="lista-templates-extras" class="space-y-2"></div>
    </div>
  </section>

  <!-- AUDITORIA -->
  <section id="tab-auditoria" class="tab-content hidden space-y-4">
    <h2 class="text-lg font-bold text-slate-100">Log de Auditoria</h2>
    <div class="card rounded-xl overflow-auto max-h-[70vh]">
      <table class="w-full min-w-[640px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800"><th class="p-3">Data</th><th class="p-3">Usuário</th><th class="p-3">Ação</th><th class="p-3">Detalhes</th></tr></thead>
        <tbody id="tabela-auditoria"></tbody>
      </table>
    </div>
  </section>

  <!-- BACKUP -->
  <section id="tab-backup" class="tab-content hidden space-y-4">
    <h2 class="text-lg font-bold text-slate-100">Backup &amp; Restauração</h2>

    <div class="grid md:grid-cols-2 gap-4">
      <div class="card rounded-xl p-5 space-y-4">
        <h3 class="text-sm font-bold text-slate-200">Backup manual (baixar agora)</h3>
        <a href="api/backup.php?acao=gerar" class="block text-center px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Baixar Backup (.zip)</a>
        <form onsubmit="return restaurarBackup(event)" class="space-y-2">
          <input type="file" name="arquivo" accept=".zip" required class="w-full text-sm bg-slate-950 border border-slate-700 rounded-lg p-2">
          <button type="submit" class="w-full px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 hover:border-blue-400 text-sm">Restaurar Backup</button>
        </form>
      </div>

      <div class="card rounded-xl p-5 space-y-3">
        <h3 class="text-sm font-bold text-slate-200">☁️ Backup na nuvem (salvo na hospedagem)</h3>
        <p class="text-xs text-slate-500">Fica salvo direto na pasta <code class="text-cyan-400">backups/</code> do seu servidor — não depende de baixar nada nem de manter o navegador aberto. Configure o cron abaixo pra gerar sozinho todo dia; mantém automaticamente só os últimos 30.</p>
        <button onclick="gerarBackupLocal()" class="w-full px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-600 to-blue-600 font-semibold text-sm">Gerar backup agora (salvar na hospedagem)</button>
        <div class="bg-slate-950 border border-slate-800 rounded-lg p-2 text-[11px] text-slate-500 font-mono overflow-x-auto">
          0 4 * * * php /caminho/cobranex/cron/backup_diario.php
        </div>
      </div>
    </div>

    <div class="card rounded-xl overflow-auto max-h-[50vh]">
      <div class="flex justify-between items-center p-3 border-b border-slate-800">
        <h3 class="text-sm font-bold text-slate-200">Backups salvos na hospedagem</h3>
        <button onclick="carregarBackupsLocais()" class="px-2 py-1 rounded-lg bg-slate-800 border border-slate-700 text-xs">🔄 Atualizar</button>
      </div>
      <table class="w-full min-w-[480px] text-sm">
        <thead><tr class="text-left text-slate-400 border-b border-slate-800">
          <th class="p-3">Arquivo</th><th class="p-3">Criado em</th><th class="p-3">Tamanho</th><th class="p-3">Ações</th>
        </tr></thead>
        <tbody id="tabela-backups-locais"></tbody>
      </table>
    </div>
  </section>

</main>

  </div>
</div>

<!-- MODAL GENÉRICO -->
<div id="modal" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50 p-4">
  <div class="card rounded-xl p-6 w-full max-w-lg max-h-[85vh] overflow-auto">
    <div id="modal-conteudo"></div>
  </div>
</div>

<script>
const NIVEL = <?= json_encode($nivel) ?>;

// Formata número no padrão monetário brasileiro, com separador de milhar
// (ponto) e centavos (vírgula). Ex.: 2000 -> "2.000,00"
function formatarMoeda(valor){
  const n = Number(valor) || 0;
  return n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function fechaModal(){ document.getElementById('modal').classList.add('hidden'); document.getElementById('modal').classList.remove('flex'); }
function abreModal(html){ document.getElementById('modal-conteudo').innerHTML = html; const m=document.getElementById('modal'); m.classList.remove('hidden'); m.classList.add('flex'); }

// ---------- MENU LATERAL (drawer no mobile) ----------
function abrirMenuMobile(){
  document.getElementById('sidebar-principal').classList.remove('-translate-x-full');
  document.getElementById('overlay-menu').classList.remove('hidden');
}
function fecharMenuMobile(){
  document.getElementById('sidebar-principal').classList.add('-translate-x-full');
  document.getElementById('overlay-menu').classList.add('hidden');
}

document.querySelectorAll('.tab-btn').forEach(btn=>{
  btn.addEventListener('click', ()=>{
    const aba = btn.dataset.tab;
    document.querySelectorAll('.tab-btn').forEach(b=>{
      b.classList.toggle('tab-active', b.dataset.tab === aba);
    });
    document.querySelectorAll('.tab-content').forEach(s=>s.classList.add('hidden'));
    document.getElementById('tab-'+aba).classList.remove('hidden');
    carregarAba(aba);
    window.scrollTo({top:0, behavior:'smooth'});
    fecharMenuMobile(); // fecha o menu ao escolher uma aba (só tem efeito no mobile)
  });
});

function carregarAba(aba){
  if(aba==='inicio') carregarDashboard();
  if(aba==='clientes') carregarClientes();
  if(aba==='inativos') carregarInativos();
  if(aba==='testes') carregarTestesGratis();
  if(aba==='planos') carregarPlanos();
  if(aba==='financeiro'){
    if(!financeiroFiltroInicializado){
      financeiroFiltroInicializado = true;
      filtrarFinanceiroPeriodo('mes'); // abre já mostrando o mês atual, como pedido
    } else {
      carregarFinanceiro();
    }
  }
  if(aba==='servidores') carregarServidores();
  if(aba==='filas') carregarFilas();
  if(aba==='backup') carregarBackupsLocais();
  if(aba==='usuarios') carregarUsuarios();
  if(aba==='mensagens') carregarMensagens();
  if(aba==='auditoria') carregarAuditoria();
}

async function apiGet(url){
  try{
    const r = await fetch(url);
    const texto = await r.text();
    try{ return JSON.parse(texto); }
    catch(e){
      console.error('Resposta não-JSON de', url, ':', texto.slice(0,300));
      return { ok:false, erro: 'O servidor retornou uma resposta inválida (HTTP '+r.status+'). Veja o console para detalhes.' };
    }
  }catch(e){
    console.error('Falha de rede em', url, e);
    return { ok:false, erro: 'Falha de conexão com o servidor. Tente novamente.' };
  }
}
async function apiPost(url, dados){
  try{
    const r = await fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(dados)});
    const texto = await r.text();
    try{ return JSON.parse(texto); }
    catch(e){
      console.error('Resposta não-JSON de', url, ':', texto.slice(0,300));
      return { ok:false, erro: 'O servidor retornou uma resposta inválida (HTTP '+r.status+'). Veja o console para detalhes.' };
    }
  }catch(e){
    console.error('Falha de rede em', url, e);
    return { ok:false, erro: 'Falha de conexão com o servidor. Tente novamente.' };
  }
}

// ---------- DASHBOARD ----------
async function carregarDashboard(){
  const d = await apiGet('api/dashboard_stats.php');
  if(!d.ok) return;
  document.getElementById('st-total').textContent = d.totais.total;
  document.getElementById('st-ativos').textContent = d.totais.ativos;
  document.getElementById('st-inativos').textContent = d.totais.inativos;
  document.getElementById('st-testes').textContent = d.totais.testes_expirados;
  document.getElementById('fat-dia').textContent = 'R$ '+formatarMoeda(d.faturamento.dia);
  document.getElementById('fat-semana').textContent = 'R$ '+formatarMoeda(d.faturamento.semana);
  document.getElementById('fat-mes').textContent = 'R$ '+formatarMoeda(d.faturamento.mes);
  document.getElementById('fat-ano').textContent = 'R$ '+formatarMoeda(d.faturamento.ano);
  if(d.projecao){
    document.getElementById('proj-dia').textContent = 'R$ '+formatarMoeda(d.projecao.dia);
    document.getElementById('proj-semana').textContent = 'R$ '+formatarMoeda(d.projecao.semana);
    document.getElementById('proj-mes').textContent = 'R$ '+formatarMoeda(d.projecao.mes);
    document.getElementById('proj-ano').textContent = 'R$ '+formatarMoeda(d.projecao.ano);
  }
  renderGraficoClientesStatus(d.totais);

  let alertasHtml = '';
  window.CACHE_ALERTAS_CLIENTES = {};
  d.alertas_clientes.forEach(a=>{
    window.CACHE_ALERTAS_CLIENTES[a.id] = a.whatsapp;
    let texto, cor;
    if(a.situacao === 'atrasado'){
      texto = `🔴 <b>${a.cliente}</b> está atrasado há ${a.dias_atraso} dia(s) (venceu em ${a.vencimento})`;
      cor = 'border-red-600/60 text-red-300';
    } else if(a.situacao === 'vence_hoje'){
      texto = `🟠 <b>${a.cliente}</b> vence HOJE (${a.vencimento})`;
      cor = 'border-cyan-600/60 text-cyan-300';
    } else {
      const dias = a.dias_para_vencer || 3;
      texto = `🔵 <b>${a.cliente}</b> vence em ${dias} dia${dias>1?'s':''} (${a.vencimento})`;
      cor = 'border-purple-600/60 text-purple-300';
    }
    alertasHtml += `<div class="card ${cor} rounded-lg p-3 text-sm flex flex-wrap items-center justify-between gap-2">
      <span>${texto}</span>
      <div class="flex gap-1 flex-wrap">
        <button onclick="irParaClienteEcobrar('${a.id}')" class="px-2 py-1 rounded bg-green-900/50 border border-green-600 text-xs whitespace-nowrap">Cobrar agora</button>
        <select onchange="copiarMensagemPorTipo('${a.id}', this.value); this.selectedIndex=0;" title="Copiar mensagem para colar manualmente" class="px-1 py-1 rounded bg-slate-800 border border-slate-700 text-xs">
          <option value="">Copiar ▾</option>
          <option value="cobranca">Cobrança</option>
          <option value="renovacao">Renovação</option>
          <option value="expirado">Depois de expirado</option>
        </select>
      </div>
    </div>`;
  });
  d.alertas_estoque.forEach(a=>{
    alertasHtml += `<div class="card border-cyan-600/60 rounded-lg p-3 text-sm text-cyan-300">⚠️ Estoque baixo: <b>${a.servidor}</b> (${a.atual}/${a.maximo})</div>`;
  });
  d.alertas_revenda.forEach(a=>{
    alertasHtml += `<div class="card border-purple-600/60 rounded-lg p-3 text-sm text-purple-300">⏰ Painel de <b>${a.usuario}</b> vence em 3 dias (${a.vencimento})</div>`;
  });
  document.getElementById('alertas').innerHTML = alertasHtml;
}

async function filtrarFaturamentoHomePersonalizado(){
  const de = document.getElementById('home-fat-de').value;
  const ate = document.getElementById('home-fat-ate').value;
  const box = document.getElementById('home-fat-personalizado');
  if(!de && !ate){ box.classList.add('hidden'); return; }

  const params = new URLSearchParams({ acao: 'listar' });
  if(de) params.set('de', de);
  if(ate) params.set('ate', ate);
  const r = await apiGet('api/financeiro.php?'+params.toString());
  if(!r.ok) return;

  box.classList.remove('hidden');
  const partes = [];
  if(de) partes.push('de ' + de.split('-').reverse().join('/'));
  if(ate) partes.push('até ' + ate.split('-').reverse().join('/'));
  document.getElementById('home-fat-personalizado-label').textContent = 'Entradas ' + (partes.length ? partes.join(' ') : 'no período');
  document.getElementById('home-fat-personalizado-valor').textContent = 'R$ ' + formatarMoeda(Number(r.total_entradas));
}

async function irParaClienteEcobrar(id){
  const whatsapp = (window.CACHE_ALERTAS_CLIENTES || {})[id] || '';
  await cobrarCliente(id, whatsapp);
}

// Nome fixo de janela: o navegador reaproveita a mesma aba/janela do
// WhatsApp Web em cliques seguintes, em vez de abrir uma nova toda vez.
const JANELA_WHATSAPP = 'cobranex_whatsapp_web';

function abrirLinkWhatsApp(url){
  // Reaproveita a mesma aba/janela nomeada. Só funciona de forma confiável se
  // a aba ainda estiver aberta no navegador; se foi fechada, abre uma nova.
  const janela = window.open(url, JANELA_WHATSAPP);
  if(janela) janela.focus();
  return janela;
}

async function cobrarCliente(id, whatsapp){
  const d = await apiGet('api/clientes.php?acao=gerar_cobranca&id='+id);
  if(!d.ok){
    alert('❌ ' + (d.erro || 'Erro ao gerar mensagem de cobrança.'));
    return;
  }

  if(!d.whatsapp && (!d.envios_automaticos || d.envios_automaticos.length===0)){
    alert('Nenhum canal de cobrança está habilitado. Configure em Mensagens > Canais.');
    return;
  }

  mostrarResultadoCobranca(d);
}

// Mostra um resumo com o status real de cada canal, sem abrir nenhuma aba
// sozinho — o WhatsApp continua exigindo um clique manual (não tem API
// automática configurada), mas fica com um botão à parte, opcional.
function mostrarResultadoCobranca(d){
  const cs = d.canais_status || {};
  const iconeFila = (habilitado, enfileirado) => {
    if (!habilitado) return '<span class="text-slate-600">—</span>';
    return enfileirado ? '<span class="text-cyan-400">📤 Na fila</span>' : '<span class="text-red-400">❌</span>';
  };

  const linhaWhatsapp = cs.whatsapp?.habilitado
    ? `<div class="flex items-center justify-between gap-2 py-1.5">
         <span class="text-sm">💬 WhatsApp</span>
         <button onclick='abrirWhatsAppCobranca(${JSON.stringify(d.whatsapp)}, ${JSON.stringify(d.texto)})' class="px-2 py-1 rounded bg-emerald-900/50 border border-emerald-600 text-xs">Abrir WhatsApp</button>
       </div>`
    : `<div class="flex items-center justify-between gap-2 py-1.5"><span class="text-sm text-slate-500">💬 WhatsApp (desligado)</span><span class="text-slate-600">—</span></div>`;

  const linhaEmail = `<div class="flex items-center justify-between gap-2 py-1.5"><span class="text-sm ${cs.email?.habilitado?'':'text-slate-500'}">📧 E-mail${cs.email?.habilitado?'':' (desligado)'}</span>${iconeFila(cs.email?.habilitado, cs.email?.enfileirado)}</div>`;
  const linhaSms = `<div class="flex items-center justify-between gap-2 py-1.5"><span class="text-sm ${cs.sms?.habilitado?'':'text-slate-500'}">📱 SMS${cs.sms?.habilitado?'':' (desligado)'}</span>${iconeFila(cs.sms?.habilitado, cs.sms?.enfileirado)}</div>`;

  abreModal(`
    <h3 class="text-lg font-bold mb-1">✅ Cobrança processada</h3>
    <p class="text-xs text-slate-500 mb-3">E-mail e SMS (quando ligados) foram colocados na fila e saem em instantes, sem travar sua tela. O WhatsApp precisa de um clique seu pra abrir — ainda não temos envio 100% automático por lá.</p>
    <div class="divide-y divide-slate-800">
      ${linhaWhatsapp}
      ${linhaEmail}
      ${linhaSms}
    </div>
    <button onclick="fechaModal()" class="w-full mt-4 px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Fechar</button>
  `);
}

function abrirWhatsAppCobranca(numero, texto){
  const url = `https://wa.me/${numero}?text=${encodeURIComponent(texto)}`;
  abrirLinkWhatsApp(url);
}

async function copiarTexto(texto){
  try{
    await navigator.clipboard.writeText(texto);
    return true;
  }catch(e){
    // Navegadores mais antigos / sem permissão de clipboard: fallback manual
    const ta = document.createElement('textarea');
    ta.value = texto; ta.style.position='fixed'; ta.style.opacity='0';
    document.body.appendChild(ta); ta.select();
    try{ document.execCommand('copy'); }catch(e2){}
    document.body.removeChild(ta);
    return true;
  }
}

async function copiarMensagemCobranca(id){
  const d = await apiGet('api/clientes.php?acao=gerar_cobranca&id='+id+'&enviar=0');
  if(!d.ok){ alert(d.erro || 'Erro ao gerar mensagem.'); return; }
  await copiarTexto(d.texto);
  alert('Mensagem de cobrança copiada! Agora é só colar (Ctrl+V) na conversa do WhatsApp Web.');
}

const RES_MENSAGEM_COPIA = {
  cobranca: { titulo: 'Mensagem de cobrança', ok: 'Mensagem de cobrança copiada! Agora é só colar (Ctrl+V) na conversa do WhatsApp Web.' },
  renovacao: { titulo: 'Mensagem de renovação', ok: 'Mensagem de confirmação de renovação copiada!' },
  expirado: { titulo: 'Mensagem de expirado', ok: 'Mensagem de "depois de expirado" copiada!' },
};
async function copiarMensagemPorTipo(id, tipo){
  if(!tipo) return;
  const d = await apiGet('api/clientes.php?acao=gerar_mensagem_copia&id='+id+'&tipo='+encodeURIComponent(tipo));
  if(!d.ok){ alert(d.erro || 'Erro ao gerar mensagem.'); return; }
  await copiarTexto(d.texto);
  alert((RES_MENSAGEM_COPIA[tipo] || {}).ok || 'Mensagem copiada!');
}

// ---------- MENSAGEM AVULSA ----------
async function abrirModalMensagemAvulsa(cliente){
  const d = await apiGet('api/mensagens.php?acao=listar');
  const mensagens = d.ok ? d.mensagens : {};
  const extras = (mensagens.extras || []);

  const opcoesFixas = [
    ['boas_vindas','Boas-vindas'],
    ['aviso_3_dias','Aviso de vencimento próximo'],
    ['aviso_vencimento_dia','Vencimento (no dia)'],
    ['confirmacao_renovacao','Confirmação de renovação'],
    ['aviso_pos_vencimento','Depois de vencido'],
    ['aviso_expirado','Depois de expirado'],
  ].map(([chave,label]) => `<option value="fixa:${chave}">${label}</option>`).join('');

  const opcoesExtras = extras.map(t => `<option value="extra:${t.id}">${t.nome}</option>`).join('');

  window.CACHE_TEMPLATES_AVULSA = { fixas: mensagens, extras };

  abreModal(`
    <h3 class="text-lg font-bold mb-1">Mensagem Avulsa</h3>
    <p class="text-xs text-slate-500 mb-3">Cliente: <b class="text-purple-300">${cliente.nome}</b></p>
    <label class="text-xs text-purple-300">Escolha um modelo (ou edite livremente abaixo)</label>
    <select id="ma-template" onchange="aoTrocarTemplateAvulsa()" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm mb-3">
      <option value="">— Escrever do zero —</option>
      <optgroup label="Templates fixos">${opcoesFixas}</optgroup>
      ${extras.length ? `<optgroup label="Meus templates">${opcoesExtras}</optgroup>` : ''}
    </select>
    <label class="text-xs text-purple-300">Texto da mensagem</label>
    <textarea id="ma-texto" class="w-full h-32 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm"></textarea>
    <p class="text-xs text-slate-500 mt-1">Tags disponíveis: {NOME} {WHATSAPP} {USUARIO} {SENHA} {VENCIMENTO} {VALOR} {PIX} {BENEFICIARIO} {PIX_INSTRUCOES} {SERVIDOR} {DIAS} {SAUDACAO} {DESPEDIDA}</p>
    <div class="flex gap-2 mt-4 flex-wrap">
      <button onclick="copiarMensagemAvulsa('${cliente.id}')" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Copiar</button>
      <button onclick="enviarMensagemAvulsa('${cliente.id}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Abrir WhatsApp</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Cancelar</button>
    </div>
  `);
}
function aoTrocarTemplateAvulsa(){
  const valor = document.getElementById('ma-template').value;
  if(!valor) return;
  const [tipo, chaveOuId] = valor.split(':');
  const cache = window.CACHE_TEMPLATES_AVULSA || {};
  let texto = '';
  if(tipo === 'fixa'){
    const bruto = cache.fixas && cache.fixas[chaveOuId];
    // Templates fixos agora podem ter várias variações (rodízio); aqui é
    // só um ponto de partida pra editar livremente, então pega a 1ª.
    texto = Array.isArray(bruto) ? (bruto[0] || '') : (bruto || '');
  } else {
    const t = (cache.extras || []).find(x => x.id === chaveOuId);
    texto = t ? t.texto : '';
  }
  document.getElementById('ma-texto').value = texto;
}
async function copiarMensagemAvulsa(id){
  const textoBruto = document.getElementById('ma-texto').value;
  if(!textoBruto){ alert('Digite ou escolha uma mensagem.'); return; }
  const d = await apiPost('api/clientes.php?acao=mensagem_avulsa', { id, texto: textoBruto, apenas_texto: true });
  if(!d.ok){ alert(d.erro||'Erro ao gerar mensagem.'); return; }
  await copiarTexto(d.texto);
  alert('Mensagem copiada!');
}
async function enviarMensagemAvulsa(id){
  const textoBruto = document.getElementById('ma-texto').value;
  if(!textoBruto){ alert('Digite ou escolha uma mensagem.'); return; }
  const janela = window.open('', JANELA_WHATSAPP);
  const d = await apiPost('api/clientes.php?acao=mensagem_avulsa', { id, texto: textoBruto });
  if(!d.ok){ if(janela) janela.close(); alert(d.erro||'Erro ao gerar mensagem.'); return; }
  if(d.whatsapp){
    const url = `https://wa.me/${d.whatsapp}?text=${encodeURIComponent(d.texto)}`;
    if(janela && !janela.closed){ janela.location.href = url; janela.focus(); } else { abrirLinkWhatsApp(url); }
  } else if(janela){
    janela.close();
  }
  fechaModal();
  if(d.envios_automaticos && d.envios_automaticos.length){
    console.log('Enviado automaticamente via: ' + d.envios_automaticos.join(', '));
  }
}
let CACHE_CLIENTES = [];
let ORDENACAO_CLIENTES = { campo: 'vencimento', direcao: 'asc' };

async function carregarClientes(){
  const d = await apiGet('api/clientes.php?acao=listar');
  if(!d.ok) return;
  CACHE_CLIENTES = d.clientes;

  // Popula o filtro de servidor com os servidores realmente usados pelos
  // clientes (evita listar servidor vazio ou que ninguém usa).
  const selectServidor = document.getElementById('cli-filtro-servidor');
  const servidorSelecionado = selectServidor.value;
  const servidoresUnicos = [...new Set(CACHE_CLIENTES.map(c => c.servidor).filter(Boolean))].sort();
  selectServidor.innerHTML = '<option value="">Todos</option>' + servidoresUnicos.map(s => `<option value="${s}">${s}</option>`).join('');
  selectServidor.value = servidorSelecionado;

  atualizarCardsClientes();
  aplicarFiltrosClientes();
}

function atualizarCardsClientes(){
  const hoje = new Date(); hoje.setHours(0,0,0,0);
  const total = CACHE_CLIENTES.length;
  const ativos = CACHE_CLIENTES.filter(c => c.status === 'Ativo').length;
  const emAtraso = CACHE_CLIENTES.filter(c => {
    if(!c.vencimento) return false;
    const venc = new Date(c.vencimento.split(' ')[0].split('T')[0]+'T00:00:00');
    return venc < hoje;
  }).length;

  const agora = new Date();
  const inicioMesAtual = new Date(agora.getFullYear(), agora.getMonth(), 1);
  const inicioMesPassado = new Date(agora.getFullYear(), agora.getMonth()-1, 1);
  const criadosMesAtual = CACHE_CLIENTES.filter(c => c.criado_em && new Date(c.criado_em.replace(' ','T')) >= inicioMesAtual).length;
  const criadosMesPassado = CACHE_CLIENTES.filter(c => {
    if(!c.criado_em) return false;
    const dt = new Date(c.criado_em.replace(' ','T'));
    return dt >= inicioMesPassado && dt < inicioMesAtual;
  }).length;
  const variacao = criadosMesAtual - criadosMesPassado;

  document.getElementById('cc-total').textContent = total;
  document.getElementById('cc-ativos').textContent = ativos;
  document.getElementById('cc-atraso').textContent = emAtraso;
  const elVariacao = document.getElementById('cc-variacao');
  elVariacao.textContent = (variacao > 0 ? '+' : '') + variacao;
  elVariacao.className = 'text-2xl font-bold mt-1 ' + (variacao > 0 ? 'text-emerald-400' : variacao < 0 ? 'text-red-400' : 'text-slate-300');
}

function limparFiltrosClientes(){
  document.getElementById('cli-busca').value = '';
  document.getElementById('cli-filtro-servidor').value = '';
  document.getElementById('cli-filtro-data-inicio').value = '';
  document.getElementById('cli-filtro-data-fim').value = '';
  atualizarBotoesVencimentoRapido(null);
  aplicarFiltrosClientes();
}

function ordenarClientes(campo){
  if(ORDENACAO_CLIENTES.campo === campo){
    ORDENACAO_CLIENTES.direcao = ORDENACAO_CLIENTES.direcao === 'asc' ? 'desc' : 'asc';
  } else {
    ORDENACAO_CLIENTES.campo = campo;
    ORDENACAO_CLIENTES.direcao = 'asc';
  }
  aplicarFiltrosClientes();
}

function aplicarFiltrosClientes(){
  const busca = (document.getElementById('cli-busca').value || '').toLowerCase().trim();
  const servidorFiltro = document.getElementById('cli-filtro-servidor').value;
  const dataInicio = document.getElementById('cli-filtro-data-inicio').value;
  const dataFim = document.getElementById('cli-filtro-data-fim').value;

  let lista = CACHE_CLIENTES.filter(c => {
    if(busca){
      const alvo = `${c.nome||''} ${c.whatsapp||''} ${c.email||''}`.toLowerCase();
      if(!alvo.includes(busca)) return false;
    }
    if(servidorFiltro && c.servidor !== servidorFiltro) return false;
    if((dataInicio || dataFim) && c.vencimento){
      const dataVenc = c.vencimento.split(' ')[0].split('T')[0];
      if(dataInicio && dataVenc < dataInicio) return false;
      if(dataFim && dataVenc > dataFim) return false;
    }
    return true;
  });

  const { campo, direcao } = ORDENACAO_CLIENTES;
  lista.sort((a,b) => {
    let va = a[campo], vb = b[campo];
    if(campo === 'valor'){ va = valorEfetivoCliente(a); vb = valorEfetivoCliente(b); }
    va = va ?? ''; vb = vb ?? '';
    if(typeof va === 'string') va = va.toLowerCase();
    if(typeof vb === 'string') vb = vb.toLowerCase();
    if(va < vb) return direcao === 'asc' ? -1 : 1;
    if(va > vb) return direcao === 'asc' ? 1 : -1;
    return 0;
  });

  ['nome','servidor','valor','vencimento','status'].forEach(c => {
    const el = document.getElementById('seta-'+c);
    if(el) el.textContent = ORDENACAO_CLIENTES.campo === c ? (ORDENACAO_CLIENTES.direcao === 'asc' ? ' ▲' : ' ▼') : '';
  });

  // Total a receber = soma do valor dos clientes ATIVOS que passaram pelo
  // filtro atual (busca + servidor + intervalo de vencimento).
  const totalReceber = lista.filter(c => c.status === 'Ativo').reduce((soma, c) => soma + valorEfetivoCliente(c), 0);
  document.getElementById('cc-receber').textContent = 'R$ ' + formatarMoeda(totalReceber);
  const temFiltroVencimento = !!(dataInicio || dataFim);
  document.getElementById('cc-receber-label').textContent = temFiltroVencimento ? 'A receber (no período)' : 'A receber (todos ativos)';

  renderTabelaClientes(lista);
}

function filtrarClientesVencimentoRapido(periodo){
  const hoje = new Date();
  let de, ate;
  if(periodo === 'hoje'){
    de = ate = hoje;
  } else { // semana: hoje até domingo (ou hoje + 6 dias se preferir rolling)
    de = hoje;
    ate = new Date(hoje); ate.setDate(hoje.getDate() + (6 - hoje.getDay()));
  }
  const fmt = d => d.toISOString().slice(0,10);
  document.getElementById('cli-filtro-data-inicio').value = fmt(de);
  document.getElementById('cli-filtro-data-fim').value = fmt(ate);
  atualizarBotoesVencimentoRapido(periodo);
  aplicarFiltrosClientes();
}

function filtrarClientesVencimentoCustom(){
  atualizarBotoesVencimentoRapido(null);
  aplicarFiltrosClientes();
}

function atualizarBotoesVencimentoRapido(periodoAtivo){
  document.querySelectorAll('.cli-venc-rapido-btn').forEach(btn=>{
    const ativo = btn.dataset.vencRapido === periodoAtivo;
    btn.classList.toggle('bg-purple-700/60', ativo);
    btn.classList.toggle('border-purple-500', ativo);
    btn.classList.toggle('bg-slate-800', !ativo);
    btn.classList.toggle('border-slate-700', !ativo);
  });
}

function valorEfetivoCliente(c){
  let v = Number(c.valor) || 0;
  if(c.desconto_ativo) v -= Number(c.desconto_valor) || 0;
  return Math.max(0, v);
}

function renderTabelaClientes(lista){
  const tbody = document.getElementById('tabela-clientes');
  tbody.innerHTML = '';
  if(lista.length === 0){
    tbody.innerHTML = '<tr><td colspan="8" class="p-4 text-center text-slate-600 text-xs">Nenhum cliente encontrado com esses filtros.</td></tr>';
    return;
  }
  const hoje = new Date(); hoje.setHours(0,0,0,0);
  lista.forEach(c=>{
    const statusCor = c.status==='Ativo' ? 'text-blue-300' : 'text-cyan-400';

    // Em vez de badge (1D, VENCE HOJE, ATRASADO), o texto do próprio
    // vencimento muda de cor — economiza espaço na linha.
    let corVencimento = '';
    if(c.status === 'Ativo' && c.vencimento){
      const somenteData = c.vencimento.split(' ')[0].split('T')[0];
      const venc = new Date(somenteData+'T00:00:00');
      const dias = Math.round((venc - hoje) / 86400000);
      if(dias <= 0){
        corVencimento = 'text-red-400 font-bold';
      } else if(dias <= 3){
        corVencimento = 'text-orange-400 font-semibold';
      }
    }

    const valorEfetivo = valorEfetivoCliente(c);
    const temDesconto = c.desconto_ativo && Number(c.desconto_valor) > 0;
    const precoHtml = temDesconto
      ? `<span class="text-slate-500 line-through text-xs">R$ ${formatarMoeda(Number(c.valor||0))}</span> <span class="text-emerald-300 font-semibold">R$ ${formatarMoeda(valorEfetivo)}</span>`
      : `R$ ${formatarMoeda(Number(c.valor||0))}`;

    tbody.innerHTML += `<tr class="border-b border-slate-800/60 hover:bg-slate-800/30">
      <td class="p-3">${c.nome}</td>
      <td class="p-3">${c.whatsapp}</td>
      <td class="p-3 text-slate-400">${c.email||''}</td>
      <td class="p-3">${c.servidor||''}</td>
      <td class="p-3 whitespace-nowrap">${precoHtml}</td>
      <td class="p-3 ${corVencimento}">${formatarVencimentoExibicao(c.vencimento)}</td>
      <td class="p-3 ${statusCor} font-semibold">${c.status}</td>
      <td class="p-3 flex gap-1 flex-wrap">
        <button onclick="cobrarCliente('${c.id}', '${c.whatsapp}')" class="px-2 py-1 rounded bg-green-900/50 border border-green-600 text-xs">Cobrar</button>
        <select onchange="copiarMensagemPorTipo('${c.id}', this.value); this.selectedIndex=0;" title="Copiar mensagem para colar manualmente" class="px-1 py-1 rounded bg-slate-800 border border-slate-700 text-xs">
          <option value="">Copiar ▾</option>
          <option value="cobranca">Cobrança</option>
          <option value="renovacao">Renovação</option>
          <option value="expirado">Depois de expirado</option>
        </select>
        <button onclick='abrirModalMensagemAvulsa(${JSON.stringify(c)})' class="px-2 py-1 rounded bg-blue-900/50 border border-blue-600 text-xs">Mensagem</button>
        <button onclick='editarCliente(${JSON.stringify(c)})' class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-xs">Editar</button>
        <button onclick="renovarCliente('${c.id}')" class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Renovar</button>
        <button onclick="verHistorico('${c.id}')" class="px-2 py-1 rounded bg-blue-900/50 border border-blue-600 text-xs">Logs</button>
        <button onclick="deletarCliente('${c.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
      </td>
    </tr>`;
  });
}

// Converte o valor salvo (Y-m-d ou Y-m-d H:i:s) para o formato que o
// input datetime-local espera (YYYY-MM-DDTHH:MM). Se vazio, sugere daqui a
// 30 dias às 23:59 (mesmo padrão que o backend usa quando nada é informado).
function formatarParaDatetimeLocal(valor){
  let d;
  if(!valor){
    d = new Date();
    d.setDate(d.getDate() + 30);
    d.setHours(23, 59, 0, 0);
  } else {
    d = new Date(valor.replace(' ', 'T'));
    if(isNaN(d.getTime())) d = new Date();
  }
  const pad = n => String(n).padStart(2,'0');
  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
// Formata para exibição amigável na tabela (dd/mm/aaaa HH:mm)
function formatarVencimentoExibicao(valor){
  if(!valor) return '';
  const d = new Date(valor.replace(' ', 'T'));
  if(isNaN(d.getTime())) return valor;
  const pad = n => String(n).padStart(2,'0');
  return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

async function abrirModalCliente(cliente){
  cliente = cliente || {};
  const [servidoresResp, planosResp] = await Promise.all([
    apiGet('api/servidores.php?acao=listar'),
    apiGet('api/planos.php?acao=listar'),
  ]);
  const servidores = servidoresResp.ok ? servidoresResp.servidores : [];
  const planos = planosResp.ok ? planosResp.planos : [];

  const opcoesServidor = servidores.map(s =>
    `<option value="${s.nome}" ${cliente.servidor===s.nome?'selected':''}>${s.nome}</option>`
  ).join('') || '<option value="">Nenhum servidor cadastrado</option>';

  const opcoesPlano = planos.map(p =>
    `<option value="${p.nome}" data-meses="${p.meses}" data-valor="${p.valor}" ${cliente.plano===p.nome?'selected':''}>${p.nome} — ${p.meses} ${p.meses==1?'mês':'meses'} — R$ ${formatarMoeda(Number(p.valor))}</option>`
  ).join('') || '<option value="">Nenhum plano cadastrado</option>';

  abreModal(`
    <h3 class="text-lg font-bold mb-4">${cliente.id?'Editar':'Novo'} Cliente</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
      <input id="c-nome" placeholder="Nome" value="${cliente.nome||''}" class="sm:col-span-2 bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="c-whatsapp" placeholder="WhatsApp" value="${cliente.whatsapp||''}" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="c-email" placeholder="E-mail" value="${cliente.email||''}" class="bg-slate-950 border border-slate-700 rounded-lg p-2">

      <select id="c-servidor" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
        <option value="">Selecione o servidor</option>
        ${opcoesServidor}
      </select>
      <select id="c-plano" onchange="aoTrocarPlanoCliente()" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
        <option value="">Selecione o plano</option>
        ${opcoesPlano}
      </select>

      <input id="c-plano_meses" type="hidden" value="${cliente.plano_meses||1}">
      <input id="c-valor" type="number" step="0.01" placeholder="Valor (preenchido pelo plano)" value="${cliente.valor||''}" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="c-usuario_painel" placeholder="Usuário do painel" value="${cliente.usuario_painel||''}" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="c-senha_painel" placeholder="Senha do painel" value="${cliente.senha_painel||''}" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <div>
        <label class="text-xs text-cyan-300 block mb-1">Usuário externo (integração)</label>
        <input id="c-usuario_externo" placeholder="Username no provedor parceiro" value="${cliente.usuario_externo||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      </div>
      <div>
        <label class="text-xs text-cyan-300 block mb-1">Conexões</label>
        <input id="c-conexoes" type="number" min="1" placeholder="1" value="${cliente.conexoes||1}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      </div>
      <div>
        <label class="text-xs text-emerald-300 block mb-1">Desconto (R$)</label>
        <input id="c-desconto-valor" type="number" step="0.01" min="0" placeholder="Ex.: 5.00" value="${cliente.desconto_valor||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      </div>
      <div class="flex items-end pb-2">
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" id="c-desconto-ativo" ${cliente.desconto_ativo ? 'checked' : ''} class="w-4 h-4">
          Desconto ativo (aplica todo mês)
        </label>
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300 block mb-1">Vencimento (data e hora)</label>
        <input id="c-vencimento" type="datetime-local" value="${formatarParaDatetimeLocal(cliente.vencimento)}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      </div>
    </div>

    <div class="mt-3 space-y-2">
      ${!cliente.id ? `
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" id="c-enviar-boas-vindas" checked class="w-4 h-4">
        Enviar mensagem de boas-vindas para este cliente
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" id="c-pago" class="w-4 h-4">
        Já foi pago? (lança automaticamente no Financeiro com o valor já com desconto)
      </label>` : ''}
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" id="c-cobranca-automatica" ${cliente.cobranca_automatica === false ? '' : 'checked'} class="w-4 h-4">
        Incluir nos lembretes automáticos de vencimento (cron)
      </label>
      <p class="text-xs text-slate-500">Desmarcado, este cliente nunca recebe avisos automáticos de vencimento — só se você usar os botões "Cobrar" ou "Mensagem" manualmente.</p>
    </div>
    <p class="text-xs text-slate-500 mt-2">Servidor e Plano são cadastrados nas abas <b>Servidores</b> e <b>Planos</b>. Ao selecionar um plano, o valor e a duração da renovação são preenchidos automaticamente.</p>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarCliente('${cliente.id||''}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
function aoTrocarPlanoCliente(){
  const select = document.getElementById('c-plano');
  const opcao = select.options[select.selectedIndex];
  if(!opcao || !opcao.dataset.meses) return;
  document.getElementById('c-plano_meses').value = opcao.dataset.meses;
  document.getElementById('c-valor').value = Number(opcao.dataset.valor).toFixed(2);
}
function editarCliente(c){ abrirModalCliente(c); }

async function salvarCliente(id){
  const dados = {
    nome: document.getElementById('c-nome').value,
    whatsapp: document.getElementById('c-whatsapp').value,
    email: document.getElementById('c-email').value,
    servidor: document.getElementById('c-servidor').value,
    plano: document.getElementById('c-plano').value,
    plano_meses: document.getElementById('c-plano_meses').value,
    valor: document.getElementById('c-valor').value,
    desconto_valor: document.getElementById('c-desconto-valor').value || 0,
    desconto_ativo: document.getElementById('c-desconto-ativo').checked,
    usuario_painel: document.getElementById('c-usuario_painel').value,
    senha_painel: document.getElementById('c-senha_painel').value,
    usuario_externo: document.getElementById('c-usuario_externo').value,
    conexoes: document.getElementById('c-conexoes').value || 1,
    vencimento: document.getElementById('c-vencimento').value,
    cobranca_automatica: document.getElementById('c-cobranca-automatica').checked,
  };
  if(!id){
    dados.enviar_boas_vindas = document.getElementById('c-enviar-boas-vindas')?.checked ?? true;
    dados.pago = document.getElementById('c-pago')?.checked ?? false;
  }
  const acao = id ? 'editar' : 'criar';
  if(id) dados.id = id;
  const r = await apiPost('api/clientes.php?acao='+acao, dados);
  if(r.ok){
    fechaModal();
    carregarClientes();
    alert(id ? '✅ Cliente atualizado com sucesso!' : '✅ Cliente cadastrado com sucesso!');
  } else {
    alert('❌ ' + (r.erro||'Erro ao salvar. Tente novamente.'));
  }
}

async function deletarCliente(id){
  if(!confirm('Confirma a exclusão deste cliente?')) return;
  const r = await apiPost('api/clientes.php?acao=deletar', {id});
  if(r.ok) carregarClientes();
}
function renovarCliente(id){
  abreModal(`
    <h3 class="text-lg font-bold mb-4">Renovar Cliente</h3>
    <p class="text-sm text-slate-400 mb-4">O vencimento será somado de acordo com o plano do cliente, e a entrada financeira (descontando o custo do servidor, se cadastrado) será lançada automaticamente.</p>
    <label class="flex items-center gap-2 text-sm mb-4">
      <input type="checkbox" id="rc-enviar-msg" checked class="w-4 h-4">
      Enviar mensagem de confirmação de renovação para o cliente (WhatsApp/E-mail/SMS)
    </label>
    <div class="flex gap-2">
      <button onclick="confirmarRenovacaoCliente('${id}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Confirmar Renovação</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function confirmarRenovacaoCliente(id){
  const enviarMensagem = document.getElementById('rc-enviar-msg').checked;
  // Reserva a aba do WhatsApp já no clique (evita bloqueio de pop-up e
  // garante que reaproveita a aba já aberta, se existir).
  const janela = enviarMensagem ? window.open('', JANELA_WHATSAPP) : null;

  const r = await apiPost('api/clientes.php?acao=renovar', { id, enviar_mensagem: enviarMensagem });

  if(!r.ok){
    if(janela) janela.close();
    alert(r.erro||'Erro ao renovar.');
    return;
  }

  fechaModal();
  carregarClientes();

  if(enviarMensagem && r.mensagem_whatsapp && r.whatsapp){
    const url = `https://wa.me/${r.whatsapp}?text=${encodeURIComponent(r.mensagem_whatsapp)}`;
    if(janela && !janela.closed){
      janela.location.href = url;
      janela.focus();
    } else {
      abrirLinkWhatsApp(url);
    }
  } else if(janela){
    janela.close();
  }

  const lucro = 'R$ ' + formatarMoeda(Number(r.lucro_liquido));
  let msg = `Cliente renovado! Recebido: R$ ${formatarMoeda(Number(r.valor_recebido))} | Custo do servidor: R$ ${formatarMoeda(Number(r.custo_servidor))} | Lucro líquido: ${lucro}`;
  // Se o servidor do cliente tem integração externa configurada, avisa o
  // operador se a sincronização (lookup + renew na API do provedor) falhou
  // — a renovação no Cobranex já foi feita normalmente de qualquer forma.
  if(r.integracao_externa && r.integracao_externa.ok === false){
    msg += `\n\n⚠️ Integração externa falhou: ${r.integracao_externa.motivo}`;
  }
  alert(msg);
}
async function verHistorico(id){
  const d = await apiGet('api/clientes.php?acao=historico&id='+id);
  let html = '<h3 class="text-lg font-bold mb-3">Histórico</h3><div class="space-y-2 text-sm">';
  (d.logs||[]).slice().reverse().forEach(l=>{
    html += `<div class="border-b border-slate-800 pb-1"><span class="text-purple-400">${l.data}</span> — ${l.acao}</div>`;
  });
  html += '</div><button onclick="fechaModal()" class="mt-4 px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Fechar</button>';
  abreModal(html);
}
function exportarClientes(){ window.open('api/clientes_csv.php?acao=exportar','_blank'); }
async function importarClientes(ev){
  const file = ev.target.files[0]; if(!file) return;
  const fd = new FormData(); fd.append('arquivo', file);
  const r = await fetch('api/clientes_csv.php?acao=importar', {method:'POST', body:fd});
  const d = await r.json();
  alert(d.ok ? `${d.importados} clientes importados.` : (d.erro||'Erro ao importar.'));
  carregarClientes();
}

// ---------- INATIVOS ----------
async function carregarInativos(){
  const d = await apiGet('api/clientes.php?acao=listar&filtro=inativos');
  const tbody = document.getElementById('tabela-inativos'); tbody.innerHTML='';
  if(!d.ok) return;
  d.clientes.forEach(c=>{
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3">${c.nome}</td><td class="p-3">${c.whatsapp}</td><td class="p-3">${formatarVencimentoExibicao(c.vencimento)}</td>
      <td class="p-3"><button onclick="deletarCliente('${c.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button></td>
    </tr>`;
  });
}
async function limparInativos(){
  if(!confirm('Remover em massa clientes inativos há mais de 2 dias?')) return;
  const r = await apiPost('api/clientes.php?acao=limpar_inativos', {});
  alert(r.ok ? `${r.removidos} clientes removidos.` : 'Erro.');
  carregarInativos();
}

async function carregarTestesGratis(){
  const d = await apiGet('api/clientes.php?acao=listar&filtro=testes_gratis');
  const tbody = document.getElementById('tabela-testes'); tbody.innerHTML='';
  if(!d.ok) return;
  if(d.clientes.length === 0){
    tbody.innerHTML = '<tr><td colspan="5" class="p-4 text-center text-slate-600 text-xs">Nenhum teste grátis criado ainda.</td></tr>';
    return;
  }
  const agora = new Date();
  d.clientes.forEach(c=>{
    const venc = c.vencimento ? new Date(c.vencimento.replace(' ','T')) : null;
    let statusHtml = '<span class="text-slate-500 text-xs">—</span>';
    if(venc){
      const diffMin = Math.round((venc - agora) / 60000);
      if(diffMin <= 0){
        statusHtml = '<span class="px-2 py-0.5 rounded text-[10px] font-bold border bg-red-900/60 text-red-300 border-red-600">EXPIRADO</span>';
      } else if(diffMin < 60){
        statusHtml = `<span class="px-2 py-0.5 rounded text-[10px] font-bold border bg-amber-900/60 text-amber-300 border-amber-600">FALTAM ${diffMin}min</span>`;
      } else {
        const horas = Math.floor(diffMin / 60);
        statusHtml = `<span class="px-2 py-0.5 rounded text-[10px] font-bold border bg-emerald-900/60 text-emerald-300 border-emerald-600">FALTAM ${horas}h</span>`;
      }
    }
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3">${c.nome}</td>
      <td class="p-3">${c.whatsapp}</td>
      <td class="p-3 text-slate-400">${(c.criado_em||'').split(' ')[0]}</td>
      <td class="p-3">${statusHtml}</td>
      <td class="p-3 flex gap-1 flex-wrap">
        <button onclick="cobrarCliente('${c.id}', '${c.whatsapp}')" class="px-2 py-1 rounded bg-green-900/50 border border-green-600 text-xs">Cobrar</button>
        <button onclick='abrirModalMensagemAvulsa(${JSON.stringify(c)})' class="px-2 py-1 rounded bg-blue-900/50 border border-blue-600 text-xs">Mensagem</button>
        <button onclick="converterTesteEmCliente('${c.id}')" class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Converter em Cliente</button>
        <button onclick="deletarCliente('${c.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
      </td>
    </tr>`;
  });
}

function abrirModalNovoTeste(){
  abreModal(`
    <h3 class="text-lg font-bold mb-4">Novo Teste Grátis</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
      <input id="nt-nome" placeholder="Nome" class="sm:col-span-2 bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="nt-whatsapp" placeholder="WhatsApp" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="nt-email" placeholder="E-mail (opcional)" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="nt-servidor" placeholder="Servidor (opcional)" class="bg-slate-950 border border-slate-700 rounded-lg p-2">
      <div>
        <label class="text-xs text-purple-300">Duração do teste (horas)</label>
        <input id="nt-horas" type="number" min="1" value="6" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
    </div>
    <p class="text-xs text-slate-500 mt-2">O lembrete de "teste expirado" é enviado automaticamente depois que o tempo do teste acaba (não antes), conforme configurado em Mensagens &gt; Agendamento &gt; "Avisar teste expirado até quantos minutos depois?".</p>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarNovoTeste()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-cyan-600 font-semibold text-sm">Criar Teste</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Cancelar</button>
    </div>
  `);
}

async function salvarNovoTeste(){
  const nome = document.getElementById('nt-nome').value.trim();
  const whatsapp = document.getElementById('nt-whatsapp').value.trim();
  if(!nome || !whatsapp){ alert('Nome e WhatsApp são obrigatórios.'); return; }
  const r = await apiPost('api/clientes.php?acao=criar_teste', {
    nome, whatsapp,
    email: document.getElementById('nt-email').value.trim(),
    servidor: document.getElementById('nt-servidor').value.trim(),
    horas: document.getElementById('nt-horas').value,
  });
  if(r.ok){ fechaModal(); carregarTestesGratis(); } else alert(r.erro || 'Erro ao criar teste.');
}

async function converterTesteEmCliente(id){
  if(!confirm('Converter este teste em cliente normal? Ele vai sair desta tela e aparecer em Clientes — depois edite pra ajustar plano, valor e vencimento reais.')) return;
  const r = await apiPost('api/clientes.php?acao=converter_em_cliente', { id });
  if(r.ok){ alert('Convertido! Agora edite o cliente em "Clientes" pra ajustar plano/valor/vencimento.'); carregarTestesGratis(); }
  else alert(r.erro || 'Erro ao converter.');
}

// ---------- FINANCEIRO ----------
let dadosFinanceiroCache = [];
let chartFinanceiro = null;
let chartClientesStatus = null;

function renderGraficoClientesStatus(totais){
  const canvas = document.getElementById('grafico-clientes-status');
  if(!canvas || typeof Chart === 'undefined') return;

  const ativos = totais.ativos || 0;
  const inativos = totais.inativos || 0;

  if(chartClientesStatus){ chartClientesStatus.destroy(); }

  if(ativos === 0 && inativos === 0){
    return; // nada pra desenhar ainda
  }

  chartClientesStatus = new Chart(canvas.getContext('2d'), {
    type: 'doughnut',
    data: {
      labels: ['Ativos', 'Inativos'],
      datasets: [{
        data: [ativos, inativos],
        backgroundColor: ['#60a5fa', '#22d3ee'],
        borderColor: '#0f172a',
        borderWidth: 2,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { position: 'bottom', labels: { color: '#cbd5e1', padding: 12 } },
      },
      cutout: '65%',
    }
  });
}

let periodoGraficoAtual = 'dia';

let filtroFinanceiroAtual = { de: '', ate: '', label: 'tudo' };
let financeiroFiltroInicializado = false;

async function carregarFinanceiro(){
  const params = new URLSearchParams({ acao: 'listar' });
  if(filtroFinanceiroAtual.de) params.set('de', filtroFinanceiroAtual.de);
  if(filtroFinanceiroAtual.ate) params.set('ate', filtroFinanceiroAtual.ate);

  const d = await apiGet('api/financeiro.php?'+params.toString());
  if(!d.ok) return;
  document.getElementById('fin-entradas').textContent = 'R$ '+formatarMoeda(Number(d.total_entradas));
  document.getElementById('fin-saidas').textContent = 'R$ '+formatarMoeda(Number(d.total_saidas));
  document.getElementById('fin-saldo').textContent = 'R$ '+formatarMoeda(Number(d.saldo));

  const tbody = document.getElementById('tabela-financeiro'); tbody.innerHTML='';
  if(d.movimentacoes.length === 0){
    tbody.innerHTML = '<tr><td colspan="5" class="p-6 text-center text-slate-600 text-sm">Nenhuma movimentação nesse período.</td></tr>';
  }
  d.movimentacoes.forEach(m=>{
    const isEntrada = m.tipo === 'entrada';
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3 text-slate-400">${(m.data||'').split(' ')[0]}</td>
      <td class="p-3 ${isEntrada?'text-blue-300':'text-cyan-300'} font-semibold">${isEntrada?'Entrada':'Saída'}</td>
      <td class="p-3">${m.descricao||''}</td>
      <td class="p-3 ${isEntrada?'text-blue-300':'text-cyan-300'}">${isEntrada?'+':'-'} R$ ${formatarMoeda(Number(m.valor))}</td>
      <td class="p-3"><button onclick="excluirMovimentacao('${m.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>${m.origem!=='lancamento_manual' ? '<span class="text-[10px] text-slate-600 block mt-0.5">automático</span>' : ''}</td>
    </tr>`;
  });

  dadosFinanceiroCache = d.movimentacoes || [];
  renderGraficoFinanceiro();
}

function formatarDataInput(d){
  return d.toISOString().slice(0,10);
}

function filtrarFinanceiroPeriodo(periodo){
  const hoje = new Date();
  let de = null, ate = null, label = '';

  if(periodo === 'hoje'){
    de = ate = hoje;
    label = 'hoje';
  } else if(periodo === 'semana'){
    const diaSemana = hoje.getDay(); // 0=domingo
    de = new Date(hoje); de.setDate(hoje.getDate() - diaSemana);
    ate = hoje;
    label = 'esta semana';
  } else if(periodo === 'mes'){
    de = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
    ate = hoje;
    label = 'este mês (' + String(hoje.getMonth()+1).padStart(2,'0') + '/' + hoje.getFullYear() + ')';
  } else if(periodo === 'mes_passado'){
    de = new Date(hoje.getFullYear(), hoje.getMonth()-1, 1);
    ate = new Date(hoje.getFullYear(), hoje.getMonth(), 0);
    label = 'mês passado (' + String(de.getMonth()+1).padStart(2,'0') + '/' + de.getFullYear() + ')';
  } else { // tudo
    filtroFinanceiroAtual = { de: '', ate: '', label: 'tudo' };
    document.getElementById('fin-data-de').value = '';
    document.getElementById('fin-data-ate').value = '';
    atualizarBotoesPeriodoFinanceiro('tudo');
    document.getElementById('fin-periodo-label').textContent = 'Mostrando: tudo';
    carregarFinanceiro();
    return;
  }

  filtroFinanceiroAtual = { de: formatarDataInput(de), ate: formatarDataInput(ate), label };
  document.getElementById('fin-data-de').value = filtroFinanceiroAtual.de;
  document.getElementById('fin-data-ate').value = filtroFinanceiroAtual.ate;
  atualizarBotoesPeriodoFinanceiro(periodo);
  document.getElementById('fin-periodo-label').textContent = 'Mostrando: ' + label;
  carregarFinanceiro();
}

function filtrarFinanceiroCustom(){
  const de = document.getElementById('fin-data-de').value;
  const ate = document.getElementById('fin-data-ate').value;
  filtroFinanceiroAtual = { de, ate, label: 'personalizado' };
  atualizarBotoesPeriodoFinanceiro(null);
  const partes = [];
  if(de) partes.push('de ' + de.split('-').reverse().join('/'));
  if(ate) partes.push('até ' + ate.split('-').reverse().join('/'));
  document.getElementById('fin-periodo-label').textContent = 'Mostrando: ' + (partes.length ? partes.join(' ') : 'tudo');
  carregarFinanceiro();
}

function atualizarBotoesPeriodoFinanceiro(periodoAtivo){
  document.querySelectorAll('.fin-periodo-btn').forEach(btn=>{
    const ativo = btn.dataset.periodo === periodoAtivo;
    btn.classList.toggle('bg-purple-700/60', ativo);
    btn.classList.toggle('border-purple-500', ativo);
    btn.classList.toggle('bg-slate-800', !ativo);
    btn.classList.toggle('border-slate-700', !ativo);
  });
}

function setPeriodoGraficoFinanceiro(periodo){
  periodoGraficoAtual = periodo;
  document.querySelectorAll('.periodo-btn').forEach(b => b.className = 'periodo-btn px-2 py-1 rounded bg-slate-800 border border-slate-700');
  document.getElementById('periodo-btn-'+periodo).className = 'periodo-btn px-2 py-1 rounded bg-purple-700/60 border border-purple-600';
  renderGraficoFinanceiro();
}

function renderGraficoFinanceiro(){
  const canvas = document.getElementById('grafico-financeiro');
  if(!canvas || typeof Chart === 'undefined') return;

  // Agrupa por dia (YYYY-MM-DD) ou por mês (YYYY-MM), somando entradas e saídas.
  const grupos = {};
  dadosFinanceiroCache.forEach(m => {
    const data = (m.data || '').slice(0, periodoGraficoAtual === 'mes' ? 7 : 10);
    if(!data) return;
    if(!grupos[data]) grupos[data] = { entradas: 0, saidas: 0 };
    if(m.tipo === 'entrada') grupos[data].entradas += Number(m.valor) || 0;
    else if(m.tipo === 'saida') grupos[data].saidas += Number(m.valor) || 0;
  });

  const chaves = Object.keys(grupos).sort(); // ordem cronológica (strings YYYY-MM-DD ordenam certo)
  const labels = chaves.map(k => {
    if(periodoGraficoAtual === 'mes'){
      const [ano, mes] = k.split('-');
      return `${mes}/${ano}`;
    }
    const [ano, mes, dia] = k.split('-');
    return `${dia}/${mes}`;
  });
  const entradas = chaves.map(k => grupos[k].entradas);
  const saidas = chaves.map(k => grupos[k].saidas);

  if(chartFinanceiro){ chartFinanceiro.destroy(); }

  if(chaves.length === 0){
    return; // nada pra desenhar ainda
  }

  chartFinanceiro = new Chart(canvas.getContext('2d'), {
    type: 'line',
    data: {
      labels,
      datasets: [
        { label: 'Entradas', data: entradas, borderColor: '#60a5fa', backgroundColor: 'rgba(96,165,250,0.15)', tension: 0.3, fill: true },
        { label: 'Saídas', data: saidas, borderColor: '#22d3ee', backgroundColor: 'rgba(34,211,238,0.12)', tension: 0.3, fill: true },
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { labels: { color: '#cbd5e1' } } },
      scales: {
        x: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(148,163,184,0.1)' } },
        y: { ticks: { color: '#94a3b8', callback: v => 'R$ '+v }, grid: { color: 'rgba(148,163,184,0.1)' } },
      }
    }
  });
}
function abrirModalMovimentacao(){
  abreModal(`
    <h3 class="text-lg font-bold mb-4">Nova Movimentação</h3>
    <div class="space-y-3 text-sm">
      <label class="text-xs text-purple-300">Tipo</label>
      <select id="fm-tipo" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
        <option value="entrada">Entrada</option>
        <option value="saida">Saída</option>
      </select>
      <label class="text-xs text-purple-300">Valor (R$)</label>
      <input id="fm-valor" type="number" step="0.01" min="0.01" placeholder="Ex.: 100.00" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Descrição</label>
      <input id="fm-descricao" placeholder="Ex.: Pagamento de servidor / Venda avulsa" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarMovimentacao()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function salvarMovimentacao(){
  const r = await apiPost('api/financeiro.php?acao=criar', {
    tipo: document.getElementById('fm-tipo').value,
    valor: document.getElementById('fm-valor').value,
    descricao: document.getElementById('fm-descricao').value,
  });
  if(r.ok){ fechaModal(); carregarFinanceiro(); } else alert(r.erro||'Erro ao lançar movimentação.');
}
async function excluirMovimentacao(id){
  if(!confirm('Excluir esta movimentação?')) return;
  const r = await apiPost('api/financeiro.php?acao=deletar', {id});
  if(r.ok) carregarFinanceiro();
}

// ---------- PLANOS ----------
let CACHE_PLANOS = [];
async function carregarPlanos(){
  const d = await apiGet('api/planos.php?acao=listar');
  const tbody = document.getElementById('tabela-planos'); tbody.innerHTML='';
  if(!d.ok) return;
  CACHE_PLANOS = d.planos;
  d.planos.forEach(p=>{
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3">${p.nome}</td>
      <td class="p-3">${p.meses} ${p.meses==1?'mês':'meses'}</td>
      <td class="p-3">R$ ${formatarMoeda(Number(p.valor))}</td>
      <td class="p-3 flex gap-1">
        <button onclick='editarPlano(${JSON.stringify(p)})' class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-xs">Editar</button>
        <button onclick="deletarPlano('${p.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
      </td>
    </tr>`;
  });
}
function abrirModalPlano(plano){
  plano = plano || {};
  abreModal(`
    <h3 class="text-lg font-bold mb-4">${plano.id?'Editar':'Novo'} Plano</h3>
    <div class="space-y-3 text-sm">
      <label class="text-xs text-purple-300">Nome do plano</label>
      <input id="p-nome" placeholder="Ex.: Plano 1 Mês" value="${plano.nome||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Duração (em meses)</label>
      <input id="p-meses" type="number" min="1" placeholder="Ex.: 1" value="${plano.meses||1}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Valor de venda (R$)</label>
      <input id="p-valor" type="number" step="0.01" min="0" placeholder="Ex.: 35.00" value="${plano.valor||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarPlano('${plano.id||''}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
function editarPlano(p){ abrirModalPlano(p); }
async function salvarPlano(id){
  const dados = {
    nome: document.getElementById('p-nome').value,
    meses: document.getElementById('p-meses').value,
    valor: document.getElementById('p-valor').value,
  };
  const acao = id ? 'editar' : 'criar';
  if(id) dados.id = id;
  const r = await apiPost('api/planos.php?acao='+acao, dados);
  if(r.ok){ fechaModal(); carregarPlanos(); } else alert(r.erro||'Erro ao salvar plano.');
}
async function deletarPlano(id){
  if(!confirm('Excluir este plano? Clientes já cadastrados não serão alterados.')) return;
  const r = await apiPost('api/planos.php?acao=deletar', {id});
  if(r.ok) carregarPlanos();
}

// ---------- SERVIDORES ----------
async function carregarServidores(){
  const d = await apiGet('api/servidores.php?acao=listar');
  const div = document.getElementById('lista-servidores'); div.innerHTML='';
  if(!d.ok) return;
  d.servidores.forEach(s=>{
    div.innerHTML += `<div class="card rounded-xl p-4">
      <div class="flex justify-between items-start">
        <h3 class="font-bold text-purple-300">${s.nome}</h3>
        <div class="flex gap-2">
          <button onclick='abrirModalServidor(${JSON.stringify(s)})' class="text-xs text-blue-300">Editar</button>
          <button onclick="deletarServidor('${s.id}')" class="text-xs text-red-400">Excluir</button>
        </div>
      </div>
      <p class="text-xs text-slate-400 mt-1">Vagas: ${s.estoque_ocupado||0} ocupadas de ${s.estoque_maximo||0} ${s.estoque_livre!==null ? `(${s.estoque_livre} livres)` : ''}</p>
      <p class="text-xs text-slate-400 mt-1">Estoque de teste grátis: ${s.estoque_teste_disponivel}</p>
      <p class="text-xs text-slate-400 mt-1">Custo mensal (por cliente): R$ ${formatarMoeda(Number(s.custo_mensal||0))}</p>
      <p class="text-xs mt-1 ${s.dominio && s.bearer_token ? 'text-emerald-400' : 'text-slate-500'}">${s.dominio && s.bearer_token ? '🔗 Integração externa ativa ('+s.dominio+')' : 'Sem integração externa configurada'}</p>
    </div>`;
  });
}
function abrirModalServidor(servidor){
  servidor = servidor || {};
  abreModal(`
    <h3 class="text-lg font-bold mb-4">${servidor.id?'Editar':'Novo'} Servidor</h3>
    <div class="space-y-3 text-sm">
      <input id="s-nome" placeholder="Nome do servidor" value="${servidor.nome||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="s-estoque_maximo" type="number" placeholder="Estoque máximo de conexões" value="${servidor.estoque_maximo||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="s-estoque_teste" type="number" placeholder="Estoque para testes grátis" value="${servidor.estoque_teste_disponivel||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Custo mensal deste servidor (por cliente conectado)</label>
      <input id="s-custo" type="number" step="0.01" min="0" placeholder="Ex.: 8.00" value="${servidor.custo_mensal||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <p class="text-xs text-slate-500">Esse valor é usado para calcular automaticamente o lucro líquido (recebido − custo) toda vez que um cliente vinculado a este servidor for renovado.</p>

      <div class="border-t border-slate-700 pt-3 mt-1">
        <p class="text-xs font-semibold text-cyan-300 mb-2">Integração externa (opcional)</p>
        <p class="text-xs text-slate-500 mb-2">Preencha para que toda renovação de um cliente vinculado a este servidor sincronize automaticamente com o provedor parceiro via API.</p>
        <input id="s-dominio" placeholder="Domínio da API (ex.: api.provedor.com)" value="${servidor.dominio||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mb-2">
        <input id="s-bearer_token" placeholder="Bearer Token" value="${servidor.bearer_token||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mb-2">
        <input id="s-package_id" placeholder="ID do pacote padrão (package_id)" value="${servidor.package_id_padrao||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      </div>
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarServidor('${servidor.id||''}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function salvarServidor(id){
  const dados = {
    nome: document.getElementById('s-nome').value,
    estoque_maximo: document.getElementById('s-estoque_maximo').value,
    estoque_teste_disponivel: document.getElementById('s-estoque_teste').value,
    custo_mensal: document.getElementById('s-custo').value,
    dominio: document.getElementById('s-dominio').value,
    bearer_token: document.getElementById('s-bearer_token').value,
    package_id_padrao: document.getElementById('s-package_id').value,
  };
  const acao = id ? 'editar' : 'criar';
  if(id) dados.id = id;
  const r = await apiPost('api/servidores.php?acao='+acao, dados);
  if(r.ok){ fechaModal(); carregarServidores(); } else alert(r.erro||'Erro');
}
async function deletarServidor(id){
  if(!confirm('Excluir servidor?')) return;
  const r = await apiPost('api/servidores.php?acao=deletar', {id});
  if(r.ok) carregarServidores();
}

// ---------- FILAS DE ENVIO ----------
async function gerarFilaManual(){
  const box = document.getElementById('resultado-gerar-fila');
  box.classList.remove('hidden');
  box.className = 'card rounded-lg p-3 text-sm border-purple-600/60 text-purple-300';
  box.textContent = 'Gerando fila (verificando vencimentos)...';

  const r = await apiPost('api/testar_automacao.php?acao=verificar_vencimentos', {});
  if(!r.ok){
    box.className = 'card rounded-lg p-3 text-sm border-red-600/60 text-red-300';
    box.textContent = '❌ Erro: ' + (r.erro || 'desconhecido');
    return;
  }
  const res = r.resultado;
  box.className = 'card rounded-lg p-3 text-sm border-blue-600/60 text-blue-300';
  let texto = `✅ Fila gerada: ${res.avisos_enfileirados} aviso(s) de dias antes + ${res.no_dia_enfileirados} de "vence hoje" — nada foi enviado ainda, só organizado na fila. ${res.inativados} cliente(s) foram inativados por atraso.`;
  if(res.clientes_avisados && res.clientes_avisados.length){
    texto += `<br><span class="text-xs text-slate-400">Enfileirados: ${res.clientes_avisados.join(', ')}</span>`;
  }
  box.innerHTML = texto;

  carregarFilas();
}

function badgeStatus(status){
  const cores = {
    pendente: 'bg-purple-900/60 text-purple-300 border-purple-600',
    processando: 'bg-cyan-900/60 text-cyan-300 border-cyan-600',
    enviado: 'bg-blue-900/60 text-blue-300 border-blue-600',
    erro: 'bg-red-900/60 text-red-300 border-red-600',
  };
  const classe = cores[status] || cores.pendente;
  return `<span class="px-2 py-0.5 rounded text-[10px] font-bold border ${classe}">${(status||'pendente').toUpperCase()}</span>`;
}

async function carregarFilas(){
  const [remail, rwpp, rsms, rstatus] = await Promise.all([
    apiGet('api/testar_automacao.php?acao=listar_fila_emails'),
    apiGet('api/testar_automacao.php?acao=listar_fila_whatsapp'),
    apiGet('api/testar_automacao.php?acao=listar_fila_sms'),
    apiGet('api/testar_automacao.php?acao=status_filas'),
  ]);

  if(rstatus.ok){
    const totalPendente = rstatus.fila_emails.pendente + rstatus.fila_emails.processando + rstatus.fila_whatsapp.pendente + rstatus.fila_whatsapp.processando + rstatus.fila_sms.pendente + rstatus.fila_sms.processando;
    const totalEnviado = rstatus.fila_emails.enviado + rstatus.fila_whatsapp.enviado + rstatus.fila_sms.enviado;
    const totalErro = rstatus.fila_emails.erro + rstatus.fila_whatsapp.erro + rstatus.fila_sms.erro;
    document.getElementById('filas-total-pendente').textContent = totalPendente;
    document.getElementById('filas-total-enviado').textContent = totalEnviado;
    document.getElementById('filas-total-erro').textContent = totalErro;
  }

  const tbodyEmails = document.getElementById('tabela-fila-emails');
  tbodyEmails.innerHTML = '';
  if(remail.ok){
    if(remail.fila.length === 0){
      tbodyEmails.innerHTML = '<tr><td colspan="6" class="p-4 text-center text-slate-600 text-xs">Nenhum e-mail na fila.</td></tr>';
    }
    remail.fila.forEach(item=>{
      tbodyEmails.innerHTML += `<tr class="border-b border-slate-800/60">
        <td class="p-3 text-slate-400 whitespace-nowrap">${item.criado_em||''}</td>
        <td class="p-3">${item.destinatario||''}</td>
        <td class="p-3 truncate max-w-[220px]" title="${(item.assunto||'').replace(/"/g,'&quot;')}">${item.assunto||''}</td>
        <td class="p-3">${badgeStatus(item.status)}</td>
        <td class="p-3">${item.tentativas||0}</td>
        <td class="p-3 flex gap-1 flex-wrap">
          ${item.status==='erro' ? `<button onclick="reenviarItemFila('email','${item.id}')" class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Reenviar</button>` : ''}
          <button onclick="excluirItemFila('email','${item.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
        </td>
      </tr>`;
    });
  }

  const tbodyWpp = document.getElementById('tabela-fila-whatsapp');
  tbodyWpp.innerHTML = '';
  if(rwpp.ok){
    if(rwpp.fila.length === 0){
      tbodyWpp.innerHTML = '<tr><td colspan="6" class="p-4 text-center text-slate-600 text-xs">Nenhuma mensagem de WhatsApp na fila.</td></tr>';
    }
    rwpp.fila.forEach(item=>{
      tbodyWpp.innerHTML += `<tr class="border-b border-slate-800/60">
        <td class="p-3 text-slate-400 whitespace-nowrap">${item.criado_em||''}</td>
        <td class="p-3">${item.whatsapp||''}</td>
        <td class="p-3 truncate max-w-[220px]" title="${(item.mensagem||'').replace(/"/g,'&quot;')}">${(item.mensagem||'').replace(/\n/g,' ')}</td>
        <td class="p-3">${badgeStatus(item.status)}</td>
        <td class="p-3">${item.tentativas||0}</td>
        <td class="p-3 flex gap-1 flex-wrap">
          ${item.status==='erro' ? `<button onclick="reenviarItemFila('whatsapp','${item.id}')" class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Reenviar</button>` : ''}
          <button onclick="excluirItemFila('whatsapp','${item.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
        </td>
      </tr>`;
    });
  }

  const tbodySms = document.getElementById('tabela-fila-sms');
  tbodySms.innerHTML = '';
  if(rsms.ok){
    if(rsms.fila.length === 0){
      tbodySms.innerHTML = '<tr><td colspan="6" class="p-4 text-center text-slate-600 text-xs">Nenhum SMS na fila.</td></tr>';
    }
    rsms.fila.forEach(item=>{
      tbodySms.innerHTML += `<tr class="border-b border-slate-800/60">
        <td class="p-3 text-slate-400 whitespace-nowrap">${item.criado_em||''}</td>
        <td class="p-3">${item.numero||''}</td>
        <td class="p-3 truncate max-w-[220px]" title="${(item.mensagem||'').replace(/"/g,'&quot;')}">${(item.mensagem||'').replace(/\n/g,' ')}</td>
        <td class="p-3">${badgeStatus(item.status)}</td>
        <td class="p-3">${item.tentativas||0}</td>
        <td class="p-3 flex gap-1 flex-wrap">
          ${item.status==='erro' ? `<button onclick="reenviarItemFila('sms','${item.id}')" class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Reenviar</button>` : ''}
          <button onclick="excluirItemFila('sms','${item.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
        </td>
      </tr>`;
    });
  }
}

async function excluirItemFila(tipo, id){
  if(!confirm('Excluir este item da fila?')) return;
  const r = await apiPost('api/testar_automacao.php?acao=excluir_item_fila', {tipo, id});
  if(r.ok) carregarFilas(); else alert(r.erro||'Erro.');
}

async function reenviarItemFila(tipo, id){
  const r = await apiPost('api/testar_automacao.php?acao=reenviar_item_fila', {tipo, id});
  if(r.ok){ alert('Voltou para "pendente" — será reenviado na próxima execução do cron (ou use os botões de teste em Mensagens > Agendamento).'); carregarFilas(); }
  else alert(r.erro||'Erro.');
}

// ---------- USUARIOS / MENSALIDADE ----------
async function carregarUsuarios(){
  const d = await apiGet('api/usuarios.php?acao=listar');
  const tbody = document.getElementById('tabela-usuarios'); tbody.innerHTML='';
  if(!d.ok) return;
  d.usuarios.forEach(u=>{
    if(u.id === '<?= $usuario['id'] ?>') return;
    const hoje = new Date(); hoje.setHours(0,0,0,0);
    const venc = u.vencimento_painel ? new Date(u.vencimento_painel+'T00:00:00') : null;
    const vencido = venc && venc < hoje;
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3">${u.usuario}</td><td class="p-3">${u.nivel}</td>
      <td class="p-3">R$ ${formatarMoeda(Number(u.valor_mensalidade||0))}</td>
      <td class="p-3 ${vencido?'text-red-400 font-semibold':''}">${u.vencimento_painel || '—'}${vencido?' (vencido)':''}</td>
      <td class="p-3"><button onclick='abrirModalRenovarMensalidade("${u.id}","${u.usuario}")' class="px-2 py-1 rounded bg-purple-900/50 border border-purple-600 text-xs">Renovar Mensalidade</button> <button onclick='abrirModalConfigUsuario("${u.id}")' class="px-2 py-1 rounded bg-emerald-900/50 border border-emerald-600 text-xs">⚙️ Configurações</button></td>
    </tr>`;
  });
}
function abrirModalUsuario(){
  abreModal(`
    <h3 class="text-lg font-bold mb-4">Novo Usuário (${NIVEL==='ADM'?'Revenda':'Sub-Revenda'})</h3>
    <div class="space-y-3 text-sm">
      <input id="u-usuario" placeholder="Usuário de login" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="u-senha" type="password" placeholder="Senha" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="u-nome" placeholder="Nome completo" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <input id="u-email" placeholder="E-mail" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Valor da mensalidade (R$)</label>
      <input id="u-mensalidade" type="number" step="0.01" min="0" placeholder="Ex.: 49.90" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Primeiro vencimento do painel</label>
      <input id="u-vencimento" type="date" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarUsuario()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function salvarUsuario(){
  const r = await apiPost('api/usuarios.php?acao=criar', {
    usuario: document.getElementById('u-usuario').value,
    senha: document.getElementById('u-senha').value,
    nome_completo: document.getElementById('u-nome').value,
    email: document.getElementById('u-email').value,
    valor_mensalidade: document.getElementById('u-mensalidade').value,
    vencimento_painel: document.getElementById('u-vencimento').value || undefined,
  });
  if(r.ok){ fechaModal(); carregarUsuarios(); } else alert(r.erro||'Erro');
}
function abrirModalRenovarMensalidade(id, nomeUsuario){
  abreModal(`
    <h3 class="text-lg font-bold mb-4">Renovar Mensalidade — ${nomeUsuario}</h3>
    <div class="space-y-3 text-sm">
      <label class="text-xs text-purple-300">Quantos meses renovar?</label>
      <input id="rm-meses" type="number" min="1" value="1" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <p class="text-xs text-slate-500">O vencimento do painel deste usuário será somado com essa quantidade de meses, e a entrada financeira da mensalidade será lançada automaticamente.</p>
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="renovarMensalidade('${id}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Renovar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function renovarMensalidade(id){
  const meses = document.getElementById('rm-meses').value;
  const r = await apiPost('api/usuarios.php?acao=renovar_mensalidade', { id_destino: id, meses });
  if(r.ok){ fechaModal(); carregarUsuarios(); } else alert(r.erro||'Erro ao renovar mensalidade.');
}

// ---------- MINHA CONTA (trocar a própria senha) ----------
const MEU_ID = <?= json_encode($usuario['id']) ?>;
const MEU_USUARIO = <?= json_encode($usuario['usuario']) ?>;
async function abrirModalMinhaConta(){
  const [dSmtp, dSms, dPix, dMsg] = await Promise.all([
    apiGet('api/usuarios.php?acao=meu_smtp'),
    apiGet('api/usuarios.php?acao=meu_sms'),
    apiGet('api/usuarios.php?acao=meu_pix'),
    apiGet('api/usuarios.php?acao=minhas_mensagens'),
  ]);
  const smtp = dSmtp.ok ? dSmtp.smtp : { host:'', port:587, usuario:'', seguranca:'tls', remetente_nome:'', tem_senha_salva:false };
  const sms = dSms.ok ? dSms.sms_gateway : { url_api:'', usuario:'', tem_senha_salva:false };
  const pix = dPix.ok ? dPix.pix_manual : { chave:'', nome_beneficiario:'', instrucoes:'' };
  const minhasMsgs = dMsg.ok ? dMsg.mensagens : {};
  const msgsPadrao = dMsg.ok ? dMsg.mensagens_padrao : {};

  abreModal(`
    <h3 class="text-lg font-bold mb-1">Minha Conta</h3>
    <p class="text-xs text-slate-500 mb-4">Usuário: <b class="text-purple-300">${MEU_USUARIO}</b></p>

    <div class="space-y-3 text-sm">
      <label class="text-xs text-purple-300">Nova senha</label>
      <input id="minha-nova-senha" type="password" placeholder="Digite a nova senha" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Confirmar nova senha</label>
      <input id="minha-nova-senha-confirma" type="password" placeholder="Repita a nova senha" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
    </div>
    <button onclick="salvarMinhaSenha()" class="w-full mt-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar Nova Senha</button>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Meu E-mail de Cobrança (SMTP)</h4>
    <p class="text-xs text-slate-500 mb-3">Cada usuário usa o próprio e-mail para enviar cobranças aos seus clientes. Se você não configurar o seu, o sistema usa o e-mail de quem te cadastrou (ou o padrão do sistema).</p>
    <div class="grid sm:grid-cols-2 gap-3 text-sm">
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Servidor SMTP (host)</label>
        <input id="smtp-host" placeholder="Ex.: smtp.gmail.com" value="${smtp.host||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Porta</label>
        <input id="smtp-port" type="number" placeholder="587" value="${smtp.port||587}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Segurança</label>
        <select id="smtp-seguranca" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
          <option value="tls" ${smtp.seguranca!=='ssl'?'selected':''}>TLS (porta 587, mais comum)</option>
          <option value="ssl" ${smtp.seguranca==='ssl'?'selected':''}>SSL (porta 465)</option>
        </select>
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Usuário / e-mail de login</label>
        <input id="smtp-usuario" placeholder="seu-email@dominio.com" value="${smtp.usuario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Senha ${smtp.tem_senha_salva ? '<span class="text-cyan-400">(já salva — deixe em branco para manter)</span>' : ''}</label>
        <input id="smtp-senha" type="password" placeholder="${smtp.tem_senha_salva ? '••••••••' : 'Senha ou senha de app'}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Nome do remetente</label>
        <input id="smtp-remetente" placeholder="Ex.: Financeiro - Sua Empresa" value="${smtp.remetente_nome||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick="salvarMeuSmtp()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar E-mail</button>
      <button onclick="removerMeuSmtp()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Meu SMS via Celular</h4>
    <p class="text-xs text-slate-500 mb-3">Use seu próprio celular Android (app "SMS Gateway for Android") pra enviar SMS dos seus clientes. Se não configurar, usa o celular de quem te cadastrou (ou o padrão do sistema).</p>
    <div class="grid gap-3 text-sm">
      <div>
        <label class="text-xs text-purple-300">URL da API</label>
        <input id="meu-sms-url" placeholder="https://api.sms-gate.app/3rdparty/v1/messages" value="${sms.url_api||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Usuário (mostrado no app)</label>
        <input id="meu-sms-usuario" value="${sms.usuario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Senha ${sms.tem_senha_salva ? '<span class="text-cyan-400">(já salva — deixe em branco para manter)</span>' : ''}</label>
        <input id="meu-sms-senha" type="password" placeholder="${sms.tem_senha_salva ? '••••••••' : 'Senha mostrada no app'}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick="salvarMeuSms()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar SMS</button>
      <button onclick="testarMeuSms()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Testar</button>
      <button onclick="removerMeuSms()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Minha Chave PIX</h4>
    <p class="text-xs text-slate-500 mb-3">Sua própria chave PIX de recebimento. Se não configurar, usa a de quem te cadastrou (ou a padrão do sistema).</p>
    <div class="grid gap-3 text-sm">
      <div>
        <label class="text-xs text-purple-300">Chave PIX</label>
        <input id="meu-pix-chave" value="${pix.chave||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Nome do beneficiário</label>
        <input id="meu-pix-beneficiario" value="${pix.nome_beneficiario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Instruções</label>
        <textarea id="meu-pix-instrucoes" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1 h-20">${pix.instrucoes||''}</textarea>
      </div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick="salvarMeuPix()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar PIX</button>
      <button onclick="removerMeuPix()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Minhas Mensagens (opcional)</h4>
    <p class="text-xs text-slate-500 mb-3">Deixe em branco qualquer campo pra continuar usando o texto de quem te cadastrou (ou o padrão do sistema). Preencha só o que quiser personalizar.</p>
    <div class="space-y-3 text-sm">
      <div><label class="text-xs text-purple-300">Boas-vindas</label><textarea id="minha-msg-boas_vindas" placeholder="${msgsPadrao.boas_vindas||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.boas_vindas||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Aviso de vencimento próximo</label><textarea id="minha-msg-aviso_3_dias" placeholder="${msgsPadrao.aviso_3_dias||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_3_dias||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Vencimento (no dia)</label><textarea id="minha-msg-aviso_vencimento_dia" placeholder="${msgsPadrao.aviso_vencimento_dia||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_vencimento_dia||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Confirmação de renovação</label><textarea id="minha-msg-confirmacao_renovacao" placeholder="${msgsPadrao.confirmacao_renovacao||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.confirmacao_renovacao||''}</textarea></div>
      <div><label class="text-xs text-orange-300">Depois de vencido</label><textarea id="minha-msg-aviso_pos_vencimento" placeholder="${msgsPadrao.aviso_pos_vencimento||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_pos_vencimento||''}</textarea></div>
      <div><label class="text-xs text-red-300">Depois de expirado</label><textarea id="minha-msg-aviso_expirado" placeholder="${msgsPadrao.aviso_expirado||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_expirado||''}</textarea></div>
      <div><label class="text-xs text-emerald-300">Teste Grátis expirado</label><textarea id="minha-msg-teste_expirando" placeholder="${msgsPadrao.teste_expirando||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.teste_expirando||''}</textarea></div>
      <div><label class="text-xs text-emerald-300">Teste Grátis quase acabando (aviso prévio)</label><textarea id="minha-msg-teste_aviso_previo" placeholder="${msgsPadrao.teste_aviso_previo||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.teste_aviso_previo||''}</textarea></div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick="salvarMinhasMensagens()" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar Mensagens</button>
      <button onclick="removerMinhasMensagens()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover Todas</button>
    </div>

    <button onclick="fechaModal()" class="w-full mt-4 px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Fechar</button>
  `);
}
async function salvarMinhaSenha(){
  const senha = document.getElementById('minha-nova-senha').value;
  const confirma = document.getElementById('minha-nova-senha-confirma').value;
  if(!senha || senha.length < 6){ alert('A senha precisa ter pelo menos 6 caracteres.'); return; }
  if(senha !== confirma){ alert('As senhas não conferem.'); return; }
  const r = await apiPost('api/usuarios.php?acao=editar', { id: MEU_ID, nova_senha: senha });
  if(r.ok){ alert('Senha alterada com sucesso!'); document.getElementById('minha-nova-senha').value=''; document.getElementById('minha-nova-senha-confirma').value=''; } else alert(r.erro || 'Erro ao alterar senha.');
}
async function salvarMeuSmtp(){
  const r = await apiPost('api/usuarios.php?acao=salvar_smtp', {
    host: document.getElementById('smtp-host').value,
    port: document.getElementById('smtp-port').value,
    seguranca: document.getElementById('smtp-seguranca').value,
    usuario_smtp: document.getElementById('smtp-usuario').value,
    senha: document.getElementById('smtp-senha').value,
    remetente_nome: document.getElementById('smtp-remetente').value,
  });
  alert(r.ok ? 'E-mail salvo! Suas cobranças agora usarão esse SMTP.' : (r.erro||'Erro ao salvar.'));
}
async function removerMeuSmtp(){
  if(!confirm('Remover sua configuração de e-mail? Voltará a usar o e-mail de quem te cadastrou (ou o padrão do sistema).')) return;
  const r = await apiPost('api/usuarios.php?acao=remover_smtp', {});
  if(r.ok){ alert('Configuração removida.'); fechaModal(); } else alert(r.erro||'Erro.');
}

async function salvarMeuSms(){
  const r = await apiPost('api/usuarios.php?acao=salvar_sms_proprio', {
    url_api: document.getElementById('meu-sms-url').value,
    usuario: document.getElementById('meu-sms-usuario').value,
    senha: document.getElementById('meu-sms-senha').value,
  });
  alert(r.ok ? 'SMS salvo! Seus lembretes agora usarão esse gateway.' : (r.erro||'Erro ao salvar.'));
  if(r.ok) document.getElementById('meu-sms-senha').value = '';
}
async function testarMeuSms(){
  const numero = prompt('Digite um número (com DDD) para receber o SMS de teste:');
  if(!numero) return;
  const r = await apiPost('api/mensagens.php?acao=testar_sms', { numero });
  alert(r.ok ? '✅ SMS enviado! Confira o celular de destino.' : '❌ ' + (r.erro||'Falha ao enviar.'));
}
async function removerMeuSms(){
  if(!confirm('Remover sua configuração de SMS? Voltará a usar o celular de quem te cadastrou (ou o padrão do sistema).')) return;
  const r = await apiPost('api/usuarios.php?acao=remover_sms_proprio', {});
  if(r.ok){ alert('Configuração removida.'); fechaModal(); } else alert(r.erro||'Erro.');
}

async function salvarMeuPix(){
  const r = await apiPost('api/usuarios.php?acao=salvar_pix_proprio', {
    chave: document.getElementById('meu-pix-chave').value,
    nome_beneficiario: document.getElementById('meu-pix-beneficiario').value,
    instrucoes: document.getElementById('meu-pix-instrucoes').value,
  });
  alert(r.ok ? 'Chave PIX salva!' : (r.erro||'Erro ao salvar.'));
}
async function removerMeuPix(){
  if(!confirm('Remover sua chave PIX? Voltará a usar a de quem te cadastrou (ou a padrão do sistema).')) return;
  const r = await apiPost('api/usuarios.php?acao=remover_pix_proprio', {});
  if(r.ok){ alert('Chave PIX removida.'); fechaModal(); } else alert(r.erro||'Erro.');
}

async function salvarMinhasMensagens(){
  const chaves = ['boas_vindas','aviso_3_dias','aviso_vencimento_dia','confirmacao_renovacao','aviso_pos_vencimento','aviso_expirado','teste_expirando','teste_aviso_previo'];
  const dados = {};
  chaves.forEach(chave => { dados[chave] = document.getElementById('minha-msg-'+chave).value; });
  const r = await apiPost('api/usuarios.php?acao=salvar_mensagens_proprias', dados);
  alert(r.ok ? 'Mensagens salvas! Campos em branco continuam herdando o texto padrão.' : (r.erro||'Erro ao salvar.'));
}
async function removerMinhasMensagens(){
  if(!confirm('Remover todas as suas mensagens personalizadas? Voltará a usar o texto de quem te cadastrou (ou o padrão do sistema) em tudo.')) return;
  const r = await apiPost('api/usuarios.php?acao=remover_mensagens_proprias', {});
  if(r.ok){ alert('Mensagens personalizadas removidas.'); fechaModal(); } else alert(r.erro||'Erro.');
}

// ---------- CONFIGURAR OUTRO USUÁRIO (ADM ou quem o criou) ----------
async function abrirModalConfigUsuario(idAlvo){
  const d = await apiGet('api/usuarios.php?acao=config_de_usuario&id='+encodeURIComponent(idAlvo));
  if(!d.ok){ alert(d.erro || 'Erro ao carregar configuração.'); return; }

  const smtp = d.smtp, sms = d.sms_gateway, pix = d.pix_manual, minhasMsgs = d.mensagens, msgsPadrao = d.mensagens_padrao;

  abreModal(`
    <h3 class="text-lg font-bold mb-1">Configurações de ${d.usuario}</h3>
    <p class="text-xs text-slate-500 mb-4">Você está editando o e-mail, SMS, PIX e mensagens deste usuário sem precisar logar como ele.</p>

    <h4 class="text-sm font-bold text-slate-200 mb-1">E-mail de Cobrança (SMTP)</h4>
    <div class="grid sm:grid-cols-2 gap-3 text-sm">
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Servidor SMTP (host)</label>
        <input id="cfg-smtp-host" value="${smtp.host||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Porta</label>
        <input id="cfg-smtp-port" type="number" value="${smtp.port||587}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div>
        <label class="text-xs text-purple-300">Segurança</label>
        <select id="cfg-smtp-seguranca" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
          <option value="tls" ${smtp.seguranca!=='ssl'?'selected':''}>TLS (587)</option>
          <option value="ssl" ${smtp.seguranca==='ssl'?'selected':''}>SSL (465)</option>
        </select>
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Usuário / e-mail de login</label>
        <input id="cfg-smtp-usuario" value="${smtp.usuario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Senha ${smtp.tem_senha_salva ? '<span class="text-cyan-400">(já salva — deixe em branco para manter)</span>' : ''}</label>
        <input id="cfg-smtp-senha" type="password" placeholder="${smtp.tem_senha_salva ? '••••••••' : ''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
      <div class="sm:col-span-2">
        <label class="text-xs text-purple-300">Nome do remetente</label>
        <input id="cfg-smtp-remetente" value="${smtp.remetente_nome||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1">
      </div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick='salvarConfigUsuario("${idAlvo}","smtp")' class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar E-mail</button>
      <button onclick='removerConfigUsuario("${idAlvo}","smtp")' class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">SMS via Celular</h4>
    <div class="grid gap-3 text-sm">
      <div><label class="text-xs text-purple-300">URL da API</label><input id="cfg-sms-url" value="${sms.url_api||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1"></div>
      <div><label class="text-xs text-purple-300">Usuário</label><input id="cfg-sms-usuario" value="${sms.usuario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1"></div>
      <div><label class="text-xs text-purple-300">Senha ${sms.tem_senha_salva ? '<span class="text-cyan-400">(já salva)</span>' : ''}</label><input id="cfg-sms-senha" type="password" placeholder="${sms.tem_senha_salva ? '••••••••' : ''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1"></div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick='salvarConfigUsuario("${idAlvo}","sms")' class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar SMS</button>
      <button onclick='removerConfigUsuario("${idAlvo}","sms")' class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Chave PIX</h4>
    <div class="grid gap-3 text-sm">
      <div><label class="text-xs text-purple-300">Chave PIX</label><input id="cfg-pix-chave" value="${pix.chave||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1"></div>
      <div><label class="text-xs text-purple-300">Nome do beneficiário</label><input id="cfg-pix-beneficiario" value="${pix.nome_beneficiario||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1"></div>
      <div><label class="text-xs text-purple-300">Instruções</label><textarea id="cfg-pix-instrucoes" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 mt-1 h-20">${pix.instrucoes||''}</textarea></div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick='salvarConfigUsuario("${idAlvo}","pix")' class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar PIX</button>
      <button onclick='removerConfigUsuario("${idAlvo}","pix")' class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover</button>
    </div>

    <hr class="border-slate-800 my-4">

    <h4 class="text-sm font-bold text-slate-200 mb-1">Mensagens (opcional)</h4>
    <p class="text-xs text-slate-500 mb-3">Em branco = continua herdando o texto de quem criou este usuário, ou o padrão do sistema.</p>
    <div class="space-y-3 text-sm">
      <div><label class="text-xs text-purple-300">Boas-vindas</label><textarea id="cfg-msg-boas_vindas" placeholder="${msgsPadrao.boas_vindas||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.boas_vindas||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Aviso de vencimento próximo</label><textarea id="cfg-msg-aviso_3_dias" placeholder="${msgsPadrao.aviso_3_dias||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_3_dias||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Vencimento (no dia)</label><textarea id="cfg-msg-aviso_vencimento_dia" placeholder="${msgsPadrao.aviso_vencimento_dia||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_vencimento_dia||''}</textarea></div>
      <div><label class="text-xs text-purple-300">Confirmação de renovação</label><textarea id="cfg-msg-confirmacao_renovacao" placeholder="${msgsPadrao.confirmacao_renovacao||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.confirmacao_renovacao||''}</textarea></div>
      <div><label class="text-xs text-orange-300">Depois de vencido</label><textarea id="cfg-msg-aviso_pos_vencimento" placeholder="${msgsPadrao.aviso_pos_vencimento||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_pos_vencimento||''}</textarea></div>
      <div><label class="text-xs text-red-300">Depois de expirado</label><textarea id="cfg-msg-aviso_expirado" placeholder="${msgsPadrao.aviso_expirado||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.aviso_expirado||''}</textarea></div>
      <div><label class="text-xs text-emerald-300">Teste Grátis expirado</label><textarea id="cfg-msg-teste_expirando" placeholder="${msgsPadrao.teste_expirando||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.teste_expirando||''}</textarea></div>
      <div><label class="text-xs text-emerald-300">Teste Grátis quase acabando (aviso prévio)</label><textarea id="cfg-msg-teste_aviso_previo" placeholder="${msgsPadrao.teste_aviso_previo||''}" class="w-full h-20 mt-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">${minhasMsgs.teste_aviso_previo||''}</textarea></div>
    </div>
    <div class="flex gap-2 mt-3">
      <button onclick='salvarConfigUsuario("${idAlvo}","mensagens")' class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-sm">Salvar Mensagens</button>
      <button onclick='removerConfigUsuario("${idAlvo}","mensagens")' class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Remover Todas</button>
    </div>

    <button onclick="fechaModal()" class="w-full mt-4 px-4 py-2 rounded-lg bg-slate-800 border border-slate-700 text-sm">Fechar</button>
  `);
}

async function salvarConfigUsuario(idAlvo, tipo){
  let dados = { id: idAlvo, tipo };
  if(tipo === 'smtp'){
    dados = {...dados,
      host: document.getElementById('cfg-smtp-host').value,
      port: document.getElementById('cfg-smtp-port').value,
      seguranca: document.getElementById('cfg-smtp-seguranca').value,
      usuario_smtp: document.getElementById('cfg-smtp-usuario').value,
      senha: document.getElementById('cfg-smtp-senha').value,
      remetente_nome: document.getElementById('cfg-smtp-remetente').value,
    };
  } else if(tipo === 'sms'){
    dados = {...dados,
      url_api: document.getElementById('cfg-sms-url').value,
      usuario: document.getElementById('cfg-sms-usuario').value,
      senha: document.getElementById('cfg-sms-senha').value,
    };
  } else if(tipo === 'pix'){
    dados = {...dados,
      chave: document.getElementById('cfg-pix-chave').value,
      nome_beneficiario: document.getElementById('cfg-pix-beneficiario').value,
      instrucoes: document.getElementById('cfg-pix-instrucoes').value,
    };
  } else if(tipo === 'mensagens'){
    ['boas_vindas','aviso_3_dias','aviso_vencimento_dia','confirmacao_renovacao','aviso_pos_vencimento','aviso_expirado','teste_expirando','teste_aviso_previo'].forEach(chave => {
      dados[chave] = document.getElementById('cfg-msg-'+chave).value;
    });
  }
  const r = await apiPost('api/usuarios.php?acao=salvar_config_usuario', dados);
  alert(r.ok ? 'Configuração salva!' : (r.erro||'Erro ao salvar.'));
}

async function removerConfigUsuario(idAlvo, tipo){
  if(!confirm('Remover essa configuração deste usuário? Ele volta a herdar de quem o criou, ou do padrão do sistema.')) return;
  const r = await apiPost('api/usuarios.php?acao=remover_config_usuario', { id: idAlvo, tipo });
  if(r.ok){ alert('Removido.'); fechaModal(); } else alert(r.erro||'Erro.');
}

// ---------- MENSAGENS ----------
// ---------- LISTAS DE VARIAÇÕES (templates rotativos + saudação/despedida) ----------
// Cada "linha" é uma textarea (para templates) ou input de uma linha (para
// saudação/despedida, que são só uma palavrinha/frase curta).
function renderizarListaVariacoes(containerId, valores, curto){
  const container = document.getElementById(containerId);
  if(!container) return;
  container.innerHTML = '';
  let lista = Array.isArray(valores) ? valores.slice() : (valores ? [valores] : []);
  if(lista.length === 0) lista = [''];
  lista.forEach(texto => adicionarVariacaoLinha(containerId, texto, curto));
}

function adicionarVariacaoLinha(containerId, texto, curto){
  const container = document.getElementById(containerId);
  if(!container) return;
  const div = document.createElement('div');
  div.className = 'flex gap-2 items-start mb-2';
  const campo = curto
    ? `<input type="text" class="variacao-campo flex-1 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm">`
    : `<textarea class="variacao-campo flex-1 h-28 bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm"></textarea>`;
  div.innerHTML = `${campo}<button type="button" onclick="removerVariacaoLinha(this)" class="px-2 py-1.5 rounded bg-red-900/50 border border-red-600 text-xs shrink-0">🗑</button>`;
  container.appendChild(div);
  div.querySelector('.variacao-campo').value = texto || '';
}

function removerVariacaoLinha(botao){
  const container = botao.closest('[id^="lista-"]');
  botao.parentElement.remove();
  // Nunca deixa a lista completamente vazia — sempre sobra 1 campo em branco pra editar.
  if(container && container.children.length === 0){
    adicionarVariacaoLinha(container.id, '', container.id.includes('saudacoes') || container.id.includes('despedidas'));
  }
}

function adicionarVariacaoTemplate(chave){
  adicionarVariacaoLinha('lista-msg-'+chave, '', false);
}
function adicionarVariacaoSimples(containerId){
  adicionarVariacaoLinha(containerId, '', true);
}

function coletarVariacoes(containerId){
  const container = document.getElementById(containerId);
  if(!container) return [];
  return Array.from(container.querySelectorAll('.variacao-campo')).map(c => c.value).filter(v => v.trim() !== '');
}

async function salvarVariacoes(){
  const saudacoes = coletarVariacoes('lista-saudacoes');
  const despedidas = coletarVariacoes('lista-despedidas');
  if(saudacoes.length === 0 || despedidas.length === 0){
    alert('Cadastre pelo menos uma saudação e uma despedida.');
    return;
  }
  const r = await apiPost('api/mensagens.php?acao=salvar_variacoes', { saudacoes, despedidas });
  alert(r.ok ? 'Saudações e despedidas salvas!' : (r.erro||'Erro ao salvar.'));
}

async function carregarMensagens(){
  atualizarStatusFilas();
  const d = await apiGet('api/mensagens.php?acao=listar');
  if(!d.ok) return;

  // Os 6 tipos rotativos viram lista de variações (aceita tanto o
  // formato novo - array - quanto o antigo - string única, de templates
  // salvos antes desse recurso existir).
  for(const chave of ['boas_vindas','aviso_3_dias','aviso_vencimento_dia','confirmacao_renovacao','aviso_pos_vencimento','aviso_expirado']){
    renderizarListaVariacoes('lista-msg-'+chave, d.mensagens[chave]);
  }
  // Os 2 de teste grátis continuam sendo texto único.
  for(const chave of ['teste_expirando','teste_aviso_previo']){
    document.getElementById('msg-'+chave).value = d.mensagens[chave] || '';
  }
  renderizarListaVariacoes('lista-saudacoes', d.saudacoes, true);
  renderizarListaVariacoes('lista-despedidas', d.despedidas, true);

  if(d.agendamento && document.getElementById('agenda-horario')){
    document.getElementById('agenda-horario').value = d.agendamento.horario_inicio || '09:00';
    document.getElementById('agenda-intervalo').value = d.agendamento.intervalo_segundos_email || 30;
    document.getElementById('agenda-lote').value = d.agendamento.lote_por_execucao_email || 10;
    document.getElementById('agenda-intervalo-sms').value = d.agendamento.intervalo_segundos_sms || 30;
    document.getElementById('agenda-lote-sms').value = d.agendamento.lote_por_execucao_sms || 10;
    document.getElementById('agenda-minutos-antes-teste').value = d.agendamento.minutos_antes_aviso_teste || 15;
    document.getElementById('agenda-minutos-teste').value = d.agendamento.minutos_aviso_teste || 60;
    const diasMarcados = (d.agendamento.dias_aviso || [3]).map(String);
    document.querySelectorAll('.chk-dia-aviso').forEach(chk=>{
      chk.checked = diasMarcados.includes(chk.value);
    });
    const diasPosVencMarcados = (d.agendamento.dias_aviso_pos_vencimento || [1]).map(String);
    document.querySelectorAll('.chk-dia-pos-vencimento').forEach(chk=>{
      chk.checked = diasPosVencMarcados.includes(chk.value);
    });
  }
  if(d.canais){
    for(const grupo of ['cobranca','renovacao','teste']){
      for(const canal of ['whatsapp','email','sms']){
        const el = document.getElementById(`canal-${grupo}-${canal}`);
        if(el) el.checked = !!(d.canais[grupo] && d.canais[grupo][canal]);
      }
    }
  }
  const lista = document.getElementById('lista-templates-extras');
  const extras = d.mensagens.extras || [];
  lista.innerHTML = extras.length ? '' : '<p class="text-xs text-slate-600">Nenhum template extra criado ainda.</p>';
  extras.forEach(t=>{
    lista.innerHTML += `<div class="bg-slate-950/60 border border-slate-800 rounded-lg p-3 flex justify-between items-start gap-2">
      <div class="min-w-0">
        <p class="text-sm font-semibold text-blue-300">${t.nome}</p>
        <p class="text-xs text-slate-500 truncate">${t.texto}</p>
      </div>
      <div class="flex gap-1 shrink-0">
        <button onclick='abrirModalTemplateExtra(${JSON.stringify(t)})' class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-xs">Editar</button>
        <button onclick="excluirTemplateExtra('${t.id}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
      </div>
    </div>`;
  });
}
function abrirModalTemplateExtra(template){
  template = template || {};
  abreModal(`
    <h3 class="text-lg font-bold mb-4">${template.id?'Editar':'Novo'} Template</h3>
    <div class="space-y-3 text-sm">
      <label class="text-xs text-purple-300">Nome do template</label>
      <input id="te-nome" placeholder="Ex.: Aviso de promoção" value="${template.nome||''}" class="w-full bg-slate-950 border border-slate-700 rounded-lg p-2">
      <label class="text-xs text-purple-300">Texto</label>
      <textarea id="te-texto" class="w-full h-32 bg-slate-950 border border-slate-700 rounded-lg p-2">${template.texto||''}</textarea>
      <p class="text-xs text-slate-500">Tags disponíveis: {NOME} {WHATSAPP} {USUARIO} {SENHA} {VENCIMENTO} {VALOR} {PIX} {BENEFICIARIO} {PIX_INSTRUCOES} {SERVIDOR} {DIAS} {SAUDACAO} {DESPEDIDA}</p>
    </div>
    <div class="flex gap-2 mt-4">
      <button onclick="salvarTemplateExtra('${template.id||''}')" class="flex-1 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 font-semibold">Salvar</button>
      <button onclick="fechaModal()" class="px-4 py-2 rounded-lg bg-slate-800 border border-slate-700">Cancelar</button>
    </div>
  `);
}
async function salvarTemplateExtra(id){
  const dados = { nome: document.getElementById('te-nome').value, texto: document.getElementById('te-texto').value };
  const acao = id ? 'editar_extra' : 'criar_extra';
  if(id) dados.id = id;
  const r = await apiPost('api/mensagens.php?acao='+acao, dados);
  if(r.ok){ fechaModal(); carregarMensagens(); } else alert(r.erro||'Erro ao salvar.');
}
async function excluirTemplateExtra(id){
  if(!confirm('Excluir este template?')) return;
  const r = await apiPost('api/mensagens.php?acao=deletar_extra', {id});
  if(r.ok) carregarMensagens();
}
async function salvarAgendamento(){
  const diasSelecionados = Array.from(document.querySelectorAll('.chk-dia-aviso:checked')).map(chk => parseInt(chk.value, 10));
  if(diasSelecionados.length === 0){
    alert('Marque ao menos um dia de aviso antes do vencimento.');
    return;
  }
  const diasPosVencSelecionados = Array.from(document.querySelectorAll('.chk-dia-pos-vencimento:checked')).map(chk => parseInt(chk.value, 10));
  const r = await apiPost('api/mensagens.php?acao=salvar_agendamento', {
    dias_aviso: diasSelecionados,
    dias_aviso_pos_vencimento: diasPosVencSelecionados,
    horario_inicio: document.getElementById('agenda-horario').value,
    intervalo_segundos_email: document.getElementById('agenda-intervalo').value,
    lote_por_execucao_email: document.getElementById('agenda-lote').value,
    intervalo_segundos_sms: document.getElementById('agenda-intervalo-sms').value,
    lote_por_execucao_sms: document.getElementById('agenda-lote-sms').value,
    minutos_antes_aviso_teste: document.getElementById('agenda-minutos-antes-teste').value,
    minutos_aviso_teste: document.getElementById('agenda-minutos-teste').value,
  });
  alert(r.ok ? 'Agendamento salvo!' : (r.erro||'Erro'));
}

function logTeste(texto){
  const pre = document.getElementById('log-teste-automacao');
  if(!pre) return;
  const hora = new Date().toLocaleTimeString('pt-BR');
  pre.textContent = `[${hora}] ${texto}\n` + pre.textContent;
}

async function testarVerificarVencimentos(){
  logTeste('Verificando vencimentos...');
  const r = await apiPost('api/testar_automacao.php?acao=verificar_vencimentos', {});
  if(!r.ok){ logTeste('❌ Erro: ' + (r.erro||'desconhecido')); return; }
  const res = r.resultado;
  logTeste(`✅ ${res.avisos_enfileirados} aviso(s) de dias + ${res.no_dia_enfileirados} de "vence hoje" enfileirados. ${res.inativados} cliente(s) inativado(s).`);
  if(res.clientes_avisados && res.clientes_avisados.length){
    logTeste('Avisados: ' + res.clientes_avisados.join(', '));
  }
  atualizarStatusFilas();
}

async function testarVerificarTestes(){
  logTeste('Verificando testes grátis (prévio + expirado)...');
  const r = await apiPost('api/testar_automacao.php?acao=verificar_testes', {});
  if(!r.ok){ logTeste('❌ Erro: ' + (r.erro||'desconhecido')); return; }
  const res = r.resultado;
  logTeste(`✅ ${res.avisos_previos} aviso(s) prévio(s) + ${res.avisos_expirado} aviso(s) de expiração enviados.`);
  if(res.clientes_avisados && res.clientes_avisados.length){
    logTeste('Avisados: ' + res.clientes_avisados.join(', '));
  }
  atualizarStatusFilas();
}

async function testarEnviarFilaEmails(ignorarHorario){
  logTeste(ignorarHorario ? 'Enviando fila de e-mails AGORA (ignorando horário)...' : 'Enviando fila de e-mails (respeitando horário configurado)...');
  const r = await apiPost('api/testar_automacao.php?acao=enviar_fila_emails', { ignorar_horario: ignorarHorario });
  if(!r.ok){ logTeste('❌ Erro: ' + (r.erro||'desconhecido')); return; }
  const res = r.resultado;
  if(res.aguardando_horario){
    logTeste('⏳ Ainda não chegou o horário configurado. Use o botão "AGORA (ignora horário)" para testar sem esperar.');
    return;
  }
  logTeste(`✅ ${res.enviados} enviado(s), ${res.falhas} falha(s).`);
  if(res.detalhes && res.detalhes.length){
    res.detalhes.forEach(d => logTeste(d));
  }
  if(res.enviados === 0 && res.falhas === 0){
    logTeste('Fila de e-mails está vazia — rode "Verificar vencimentos agora" primeiro, ou aguarde um cliente vencer.');
  }
  atualizarStatusFilas();
}

async function testarEnviarFilaSms(ignorarHorario){
  logTeste(ignorarHorario ? 'Enviando fila de SMS AGORA (ignorando horário)...' : 'Enviando fila de SMS (respeitando horário configurado)...');
  const r = await apiPost('api/testar_automacao.php?acao=enviar_fila_sms', { ignorar_horario: ignorarHorario });
  if(!r.ok){ logTeste('❌ Erro: ' + (r.erro||'desconhecido')); return; }
  const res = r.resultado;
  if(res.aguardando_horario){
    logTeste('⏳ Ainda não chegou o horário configurado.');
    return;
  }
  logTeste(`✅ ${res.enviados} enviado(s), ${res.falhas} falha(s).`);
  if(res.detalhes && res.detalhes.length){
    res.detalhes.forEach(d => logTeste(d));
  }
  if(res.enviados === 0 && res.falhas === 0){
    logTeste('Fila de SMS está vazia — rode "Verificar vencimentos agora" primeiro (com o canal SMS marcado em Cobrança), ou aguarde um cliente vencer.');
  }
  atualizarStatusFilas();
}

async function atualizarStatusFilas(){
  const el = document.getElementById('status-filas-teste');
  if(!el) return;
  const r = await apiGet('api/testar_automacao.php?acao=status_filas');
  if(!r.ok) return;
  const fe = r.fila_emails, fw = r.fila_whatsapp;
  el.innerHTML =
    `📧 E-mails: ${fe.pendente} pendente(s), ${fe.enviado} enviado(s), ${fe.erro} erro(s) &nbsp;|&nbsp; ` +
    `💬 WhatsApp: ${fw.pendente} pendente(s), ${fw.enviado} enviado(s), ${fw.erro} erro(s)`;
}

async function salvarMensagens(){
  const dados = {};
  for(const chave of ['boas_vindas','aviso_3_dias','aviso_vencimento_dia','confirmacao_renovacao','aviso_pos_vencimento','aviso_expirado']){
    dados[chave] = coletarVariacoes('lista-msg-'+chave);
  }
  for(const chave of ['teste_expirando','teste_aviso_previo']){
    dados[chave] = document.getElementById('msg-'+chave).value;
  }
  const r = await apiPost('api/mensagens.php?acao=salvar', dados);
  alert(r.ok ? 'Templates salvos!' : (r.erro||'Erro'));
}
async function salvarCanais(){
  const canais = { cobranca: {}, renovacao: {}, teste: {} };
  for(const grupo of ['cobranca','renovacao','teste']){
    for(const canal of ['whatsapp','email','sms']){
      canais[grupo][canal] = document.getElementById(`canal-${grupo}-${canal}`)?.checked ?? false;
    }
  }
  const r = await apiPost('api/mensagens.php?acao=salvar_canais', { canais });
  alert(r.ok ? '✅ Canais salvos!' : '❌ ' + (r.erro||'Erro ao salvar.'));
}

// ---------- AUDITORIA ----------
async function carregarAuditoria(){
  const d = await apiGet('api/auditoria.php');
  const tbody = document.getElementById('tabela-auditoria'); if(!tbody) return;
  tbody.innerHTML='';
  if(!d.ok) return;
  d.registros.slice().reverse().forEach(a=>{
    tbody.innerHTML += `<tr class="border-b border-slate-800/60"><td class="p-3">${a.data}</td><td class="p-3">${a.usuario}</td><td class="p-3">${a.acao}</td><td class="p-3 text-slate-400">${a.detalhes}</td></tr>`;
  });
}
// ---------- NOTIFICAÇÕES PUSH DO NAVEGADOR (Web Notifications API) ----------
// Obs: isso usa a API de Notificações nativa do navegador para avisos em
// tempo real enquanto o painel está aberto (mesmo minimizado/outra aba).
// Não é "push" via servidor (não precisa de service worker/VAPID) — o
// navegador só verifica periodicamente enquanto o painel estiver aberto.
function atualizarBotaoPush(){
  const btn = document.getElementById('botao-push');
  if(!btn || !('Notification' in window)) return;
  if(Notification.permission === 'granted'){
    btn.textContent = '🔔 Notificações Ativadas';
    btn.classList.add('border-cyan-500','text-cyan-300');
  } else if(Notification.permission === 'denied'){
    btn.textContent = '🔕 Notificações Bloqueadas';
  } else {
    btn.textContent = '🔔 Ativar Notificações';
  }
}
function pedirPermissaoNotificacao(){
  if(!('Notification' in window)){
    alert('Seu navegador não suporta notificações.');
    return;
  }
  Notification.requestPermission().then(()=>{
    atualizarBotaoPush();
    if(Notification.permission === 'granted'){
      new Notification('COBRANEX', { body: 'Notificações ativadas! Você será avisado sobre clientes vencendo.' });
      verificarAlertasParaPush();
    }
  });
}
async function verificarAlertasParaPush(){
  if(!('Notification' in window) || Notification.permission !== 'granted') return;
  const d = await apiGet('api/dashboard_stats.php');
  if(!d.ok) return;
  const jaNotificados = JSON.parse(sessionStorage.getItem('cobranex_push_notificados') || '[]');
  const relevantes = (d.alertas_clientes || []).filter(a => a.situacao === 'vence_hoje' || a.situacao === 'atrasado');
  const novos = relevantes.filter(a => !jaNotificados.includes(a.id));
  novos.forEach(a=>{
    const corpo = a.situacao === 'atrasado'
      ? `${a.cliente} está atrasado há ${a.dias_atraso} dia(s).`
      : `${a.cliente} vence hoje!`;
    new Notification('COBRANEX — Cliente vencendo', { body: corpo });
  });
  if(novos.length){
    sessionStorage.setItem('cobranex_push_notificados', JSON.stringify([...jaNotificados, ...novos.map(a=>a.id)]));
  }
}
setInterval(verificarAlertasParaPush, 5 * 60 * 1000); // verifica a cada 5 minutos

// ---------- TEMA CLARO/ESCURO ----------
function aplicarTema(tema){
  const claro = tema === 'claro';
  document.body.classList.toggle('tema-claro', claro);
  document.getElementById('icone-tema').textContent = claro ? '☀️' : '🌙';
  localStorage.setItem('cobranex_tema', tema);
}
function alternarTema(){
  const atual = document.body.classList.contains('tema-claro') ? 'claro' : 'escuro';
  aplicarTema(atual === 'claro' ? 'escuro' : 'claro');
}
aplicarTema(localStorage.getItem('cobranex_tema') || 'escuro');

document.addEventListener('DOMContentLoaded', ()=>{
  carregarDashboard();
  atualizarBotaoPush();
  setTimeout(verificarAlertasParaPush, 3000);
});

// ---------- BACKUP ----------
async function restaurarBackup(ev){
  ev.preventDefault();
  const fd = new FormData(ev.target);
  const r = await fetch('api/backup.php?acao=restaurar', {method:'POST', body:fd});
  const d = await r.json();
  alert(d.ok ? 'Backup restaurado: '+d.restaurados.join(', ') : (d.erro||'Erro'));
  return false;
}

async function gerarBackupLocal(){
  const r = await apiGet('api/backup.php?acao=gerar_local');
  if(r.ok){
    let msg = `✅ Backup salvo na hospedagem: ${r.arquivo} (${r.tamanho_kb} KB)`;
    if(r.apagados && r.apagados.length){
      msg += `\n${r.apagados.length} backup(s) antigo(s) além do limite de 30 foram apagados automaticamente.`;
    }
    alert(msg);
    carregarBackupsLocais();
  } else {
    alert('❌ ' + (r.erro || 'Erro ao gerar backup.'));
  }
}

async function carregarBackupsLocais(){
  const r = await apiGet('api/backup.php?acao=listar_local');
  const tbody = document.getElementById('tabela-backups-locais');
  if(!tbody) return;
  tbody.innerHTML = '';
  if(!r.ok || r.backups.length === 0){
    tbody.innerHTML = '<tr><td colspan="4" class="p-4 text-center text-slate-600 text-xs">Nenhum backup salvo na hospedagem ainda. Clique em "Gerar backup agora" ou configure o cron.</td></tr>';
    return;
  }
  r.backups.forEach(b=>{
    tbody.innerHTML += `<tr class="border-b border-slate-800/60">
      <td class="p-3 font-mono text-xs">${b.nome}</td>
      <td class="p-3 text-slate-400">${b.criado_em}</td>
      <td class="p-3 text-slate-400">${b.tamanho_kb} KB</td>
      <td class="p-3 flex gap-1 flex-wrap">
        <a href="api/backup.php?acao=baixar_local&arquivo=${encodeURIComponent(b.nome)}" class="px-2 py-1 rounded bg-blue-900/50 border border-blue-600 text-xs">Baixar</a>
        <button onclick="excluirBackupLocal('${b.nome}')" class="px-2 py-1 rounded bg-red-900/50 border border-red-600 text-xs">Excluir</button>
      </td>
    </tr>`;
  });
}

async function excluirBackupLocal(nome){
  if(!confirm('Excluir o backup '+nome+'? Essa ação não pode ser desfeita.')) return;
  const r = await apiPost('api/backup.php?acao=excluir_local', { arquivo: nome });
  if(r.ok) carregarBackupsLocais(); else alert(r.erro||'Erro ao excluir.');
}
</script>
</body>
</html>
