<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Sistema Nuvem</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #06b6d4;
            --primary-dark: #0891b2;
            --bg-dark: #0f172a;
            --bg-card: #1e293b;
            --bg-sidebar: #0d1324;
            --text-light: #f1f5f9;
            --text-muted: #94a3b8;
            --glass-border: rgba(255, 255, 255, 0.08);
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #06b6d4;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-dark);
            color: var(--text-light);
        }

        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 260px;
            height: 100vh;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--glass-border);
            padding: 24px 16px;
            z-index: 50;
            display: flex;
            flex-direction: column;
        }

        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 8px 24px;
            border-bottom: 1px solid var(--glass-border);
            margin-bottom: 24px;
        }

        .sidebar-brand .icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }

        .sidebar-brand h3 {
            font-size: 1rem;
            font-weight: 700;
            margin: 0;
        }

        .sidebar-brand span {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 12px;
            color: var(--text-muted);
            text-decoration: none;
            transition: all 0.2s;
            margin-bottom: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
        }

        .nav-item:hover,
        .nav-item.active {
            background: rgba(6, 182, 212, 0.1);
            color: var(--primary);
        }

        .nav-item.active {
            color: var(--text-light);
            background: rgba(6, 182, 212, 0.15);
        }

        .nav-item i {
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }

        .sidebar-footer {
            margin-top: auto;
            padding-top: 16px;
            border-top: 1px solid var(--glass-border);
        }

        .main-content {
            margin-left: 260px;
            padding: 32px;
            min-height: 100vh;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .page-header h1 {
            font-size: 1.6rem;
            font-weight: 800;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 24px;
            transition: all 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 800;
        }

        .card-section {
            background: var(--bg-card);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
        }

        .card-section h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-section h3 i {
            color: var(--primary);
        }

        .table-custom {
            color: var(--text-light);
            font-size: 0.85rem;
        }

        .table-custom th {
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            border-color: var(--glass-border);
            padding: 12px;
        }

        .table-custom td {
            border-color: var(--glass-border);
            padding: 12px;
            vertical-align: middle;
        }

        .table-custom tbody tr:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .form-custom .form-control,
        .form-custom .form-select {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            color: var(--text-light);
            padding: 10px 14px;
        }

        .form-custom .form-control:focus,
        .form-custom .form-select:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
            color: var(--text-light);
        }

        .form-custom label {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .btn-action {
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-add {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
        }

        .btn-add:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
            color: white;
        }

        .btn-del {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: var(--danger);
        }

        .btn-del:hover {
            background: rgba(239, 68, 68, 0.2);
            color: white;
        }

        .tab-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid var(--glass-border);
            background: transparent;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tab-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .tab-btn.active {
            background: rgba(6, 182, 212, 0.15);
            border-color: var(--primary);
            color: var(--text-light);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 200;
        }

        .badge-status {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .badge-active {
            background: rgba(16, 185, 129, 0.15);
            color: var(--success);
        }

        .badge-inactive {
            background: rgba(239, 68, 68, 0.15);
            color: var(--danger);
        }

        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }

            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <div class="sidebar-brand">
            <div class="icon"><i class="bi bi-cloud-fill"></i></div>
            <div>
                <h3>Sistema Nuvem</h3>
                <span>Promoções & Sorteio</span>
            </div>
        </div>
        <a class="nav-item active" href="#dashboard" data-tab="dashboard"><i class="bi bi-speedometer2"></i> Dashboard</a>
        <a class="nav-item" href="#settings" data-tab="settings" style="color:var(--cyan-400); border: 1px solid rgba(6,182,212,0.2); background: rgba(6,182,212,0.05);"><i class="bi bi-gear-fill"></i> Configurações (Asaas)</a>
        <a class="nav-item" href="#promotions" data-tab="promotions"><i class="bi bi-tag"></i> Promoções</a>
        <a class="nav-item" href="#raffle" data-tab="raffle"><i class="bi bi-ticket-perforated"></i> Sorteio</a>
        <a class="nav-item" href="#leads" data-tab="leads"><i class="bi bi-people"></i> Leads WiFi</a>
        <a class="nav-item" href="#admins" data-tab="admins"><i class="bi bi-person-gear"></i> Usuários Admin</a>
        <a class="nav-item" href="#plugins" data-tab="plugins"><i class="bi bi-puzzle"></i> Plugins</a>
        <a href="http://alemaoconveniencias.local:4001/" class="nav-item" target="_blank"><i class="bi bi-globe"></i> Ver Landing Page</a>
        <div class="sidebar-footer">
            <a href="/admin/logout" class="nav-item"><i class="bi bi-box-arrow-left"></i> Sair</a>
        </div>
    </div>

    <div class="main-content">
        <!-- Dashboard Tab -->
        <div class="tab-content active" id="tab-dashboard">
            <div class="page-header">
                <h1>☁️ Dashboard Nuvem</h1>
            </div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-label">Leads WiFi</div>
                    <div class="stat-value" id="statLeads" style="color:var(--primary)">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Promoções Ativas</div>
                    <div class="stat-value" id="statPromos" style="color:var(--warning)">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Números Vendidos</div>
                    <div class="stat-value" id="statTickets" style="color:var(--success)">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Receita Vendas</div>
                    <div class="stat-value" id="statRevenue" style="color:var(--warning)">R$ 0</div>
                </div>
            </div>

            <!-- Gráficos de Analytics -->
            <div class="row g-4 mb-4">
                <div class="col-md-6">
                    <div class="card-section h-100">
                        <h3><i class="bi bi-graph-up"></i> Receita por Dia (Últimos 30 Dias)</h3>
                        <canvas id="salesByDayChart" height="250"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-section h-100">
                        <h3><i class="bi bi-clock-history"></i> Vendas por Horário (Picos)</h3>
                        <canvas id="salesByHourChart" height="250"></canvas>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card-section">
                        <h3><i class="bi bi-pie-chart"></i> Desempenho por Sorteio</h3>
                        <canvas id="salesByRaffleChart" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Promotions Tab -->
        <div class="tab-content" id="tab-promotions">
            <div class="page-header">
                <h1>🏷️ Promoções</h1>
                <button class="btn btn-action btn-add" onclick="togglePromoForm()">
                    <i class="bi bi-plus-lg me-1"></i> Nova Promoção
                </button>
            </div>

            <!-- Add Promotion Form -->
            <div class="card-section form-custom" id="promoForm" style="display:none">
                <h3><i class="bi bi-plus-circle"></i> Cadastrar Promoção</h3>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="promoNome">Nome do Produto *</label>
                        <input type="text" class="form-control" id="promoNome" placeholder="Ex: Coca-Cola 2L">
                    </div>
                    <div class="col-md-4">
                        <label for="promoDesc">Descrição</label>
                        <input type="text" class="form-control" id="promoDesc" placeholder="Descrição do produto">
                    </div>
                    <div class="col-md-2">
                        <label for="promoPrecoOrig">Preço Original</label>
                        <input type="number" class="form-control" id="promoPrecoOrig" step="0.01" placeholder="0.00">
                    </div>
                    <div class="col-md-2">
                        <label for="promoPrecoPromo">Preço Promo *</label>
                        <input type="number" class="form-control" id="promoPrecoPromo" step="0.01" placeholder="0.00">
                    </div>
                    <div class="col-12">
                        <button class="btn btn-action btn-add" onclick="createPromotion()">
                            <i class="bi bi-check-lg me-1"></i> Salvar Promoção
                        </button>
                    </div>
                </div>
            </div>

            <!-- Promotions Table -->
            <div class="card-section">
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Produto</th>
                                <th>Descrição</th>
                                <th>Original</th>
                                <th>Promocional</th>
                                <th>Status</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="promosTable">
                            <tr>
                                <td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Carregando...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Raffle Tab -->
        <div class="tab-content" id="tab-raffle">
            <div class="page-header">
                <h1>🎟️ Sorteio</h1>
                <button class="btn btn-action btn-add" onclick="toggleRaffleForm()">
                    <i class="bi bi-plus-lg me-1"></i> Novo Sorteio
                </button>
            </div>

            <!-- New Raffle Form -->
            <div class="card-section form-custom" id="raffleForm" style="display:none">
                <h3><i class="bi bi-plus-circle"></i> Criar Sorteio</h3>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="raffleTitulo">Título *</label>
                        <input type="text" class="form-control" id="raffleTitulo">
                    </div>
                    <div class="col-md-4">
                        <label for="raffleDesc">Descrição</label>
                        <input type="text" class="form-control" id="raffleDesc">
                    </div>
                    <div class="col-md-2">
                        <label for="rafflePreco">Preço/Número</label>
                        <input type="number" class="form-control" id="rafflePreco" step="0.01" value="5.00">
                    </div>
                    <div class="col-md-2">
                        <label for="raffleTotal">Total Números</label>
                        <input type="number" class="form-control" id="raffleTotal" value="500">
                    </div>
                    <div class="col-12">
                        <button class="btn btn-action btn-add" onclick="createRaffle()">
                            <i class="bi bi-check-lg me-1"></i> Criar Sorteio
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sold Tickets -->
            <div class="card-section">
                <h3><i class="bi bi-ticket-perforated"></i> Números Vendidos</h3>
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th>Número</th>
                                <th>Sorteio</th>
                                <th>Comprador</th>
                                <th>Telefone</th>
                                <th>CPF</th>
                                <th>Data</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="ticketsTable">
                            <tr>
                                <td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Carregando...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Leads Tab -->
        <div class="tab-content" id="tab-leads">
            <div class="page-header">
                <h1>📡 Leads WiFi</h1>
            </div>
            <div class="card-section">
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Nome</th>
                                <th>CPF</th>
                                <th>Telefone</th>
                                <th>IP</th>
                                <th>Data</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="leadsTable">
                            <tr>
                                <td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Carregando...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Admins Tab -->
        <div class="tab-content" id="tab-admins">
            <div class="page-header">
                <h1>👤 Gerenciamento de Usuários Admin</h1>
                <button class="btn btn-action btn-add" onclick="toggleAdminForm()">
                    <i class="bi bi-person-plus me-1"></i> Novo Administrador
                </button>
            </div>

            <!-- Add Admin Form -->
            <div class="card-section form-custom" id="adminForm" style="display:none">
                <h3><i class="bi bi-person-plus"></i> Cadastrar Administrador</h3>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="adminUsername">Nome de Usuário *</label>
                        <input type="text" class="form-control" id="adminUsername" placeholder="Ex: joao123"
                            minlength="3">
                    </div>
                    <div class="col-md-4">
                        <label for="adminPassword">Senha *</label>
                        <div class="position-relative">
                            <input type="password" class="form-control" id="adminPassword"
                                placeholder="Mínimo 4 caracteres" minlength="4">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="adminPasswordConfirm">Confirmar Senha *</label>
                        <input type="password" class="form-control" id="adminPasswordConfirm"
                            placeholder="Repita a senha">
                    </div>
                    <div class="col-12">
                        <button class="btn btn-action btn-add" onclick="createAdmin()">
                            <i class="bi bi-check-lg me-1"></i> Criar Administrador
                        </button>
                    </div>
                </div>
            </div>

            <!-- Admins Table -->
            <div class="card-section">
                <h3><i class="bi bi-shield-check"></i> Administradores Cadastrados</h3>
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Usuário</th>
                                <th>E-mail</th>
                                <th>Telefone</th>
                                <th>Status</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="adminsTable">
                            <tr>
                                <td colspan="4" class="text-center py-4" style="color:var(--text-muted)">Carregando...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- CONFIGURAÇÕES -->
        <div id="tab-settings" class="tab-content" style="display: none;">
            <div class="page-header">
                <div>
                    <h1>⚙️ Configurações Globais</h1>
                    <p class="text-muted">Integrações de Gateways e Variáveis de Ambiente</p>
                </div>
            </div>
            
            <div class="card-section">
                <h3><i class="bi bi-bank"></i> Integração Asaas (PIX)</h3>
                <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 20px;">A chave de API é necessária para gerar cobranças Pix instantâneas.</p>
                
                <form id="settingsForm">
                    <div class="mb-3">
                        <label class="form-label" for="settingAsaasKey">ASAAS API KEY</label>
                        <input type="password" class="form-control" id="settingAsaasKey" style="background: rgba(255,255,255,0.05); color:white; border: 1px solid rgba(255,255,255,0.1);" placeholder="Ex: $aact_YTU5YTE0M2M...">
                    </div>
                    <button type="submit" class="btn btn-primary-custom" id="btnSaveSettings">Salvar Configurações</button>
                    <span id="settingsAlert" class="ms-3 text-success d-none"><i class="bi bi-check-circle"></i> Salvo com sucesso!</span>
                </form>
            </div>
            
             <div class="card-section mt-4">
                <h3><i class="bi bi-whatsapp"></i> NewWhats (Para Notificações)</h3>
                <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 20px;">O backend do Alemão usa as variáveis de ambiente NEWWHATS_API_URL e NEWWHATS_API_TOKEN definidas no arquivo .env</p>
            </div>
        </div>

        <!-- Plugins Tab -->
        <div class="tab-content" id="tab-plugins">
            <div class="page-header">
                <h1><i class="bi bi-puzzle me-2" style="color:var(--primary)"></i>Plugins</h1>
            </div>
            <div id="plugin-list"></div>
        </div>

    </div><!-- /main-content -->

    <!-- NewWhats Pairing Modal -->
    <div class="modal fade" id="pairModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background:var(--bg-card);border:1px solid var(--glass-border);border-radius:20px;color:var(--text-light)">
                <div class="modal-header" style="border-bottom:1px solid var(--glass-border);padding:20px 24px">
                    <h5 class="modal-title" style="font-weight:700"><i class="bi bi-link-45deg me-2"></i>Parear com NewWhats</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" style="filter:invert(1)"></button>
                </div>
                <div class="modal-body form-custom" style="padding:24px">
                    <div id="pair-step1">
                        <p style="color:var(--text-muted);font-size:.875rem;margin-bottom:16px">
                            Informe o e-mail da sua conta NewWhats. Um código será enviado para confirmação.
                        </p>
                        <div class="mb-3">
                            <label class="form-label">URL do servidor NewWhats</label>
                            <input type="text" class="form-control" id="pair-nw-url" placeholder="http://newwhats.local:8008">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">E-mail da conta NewWhats</label>
                            <input type="email" class="form-control" id="pair-email" placeholder="seu@email.com">
                        </div>
                        <div id="pair-error1" style="color:#f87171;font-size:.82rem;display:none;margin-top:8px"></div>
                    </div>
                    <div id="pair-step2" style="display:none">
                        <p id="pair-step2-desc" style="color:var(--text-muted);font-size:.875rem;margin-bottom:16px">
                            Código enviado para <strong id="pair-email-label"></strong>. Digite abaixo:
                        </p>
                        <div class="mb-3">
                            <label class="form-label">Código de confirmação</label>
                            <input type="text" class="form-control" id="pair-code" maxlength="6" placeholder="000000"
                                style="font-size:1.5rem;letter-spacing:.4em;text-align:center">
                        </div>
                        <div id="pair-error2" style="color:#f87171;font-size:.82rem;display:none;margin-top:8px"></div>
                    </div>
                    <div id="pair-step3" style="display:none;text-align:center">
                        <div style="font-size:3rem;margin-bottom:12px">✅</div>
                        <p style="font-weight:700;margin-bottom:4px">Pareamento concluído!</p>
                        <p style="color:var(--text-muted);font-size:.875rem">A chave de integração foi salva automaticamente.</p>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid var(--glass-border);padding:16px 24px">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius:10px">Cancelar</button>
                    <button type="button" class="btn btn-action btn-add" id="pair-btn-next" onclick="pairNext()">
                        Enviar código <i class="bi bi-arrow-right ms-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Admin Modal -->
    <div class="modal fade" id="editAdminModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content"
                style="background:var(--bg-card);border:1px solid var(--glass-border);border-radius:20px;color:var(--text-light)">
                <div class="modal-header" style="border-bottom:1px solid var(--glass-border);padding:20px 24px">
                    <h5 class="modal-title" style="font-weight:700"><i class="bi bi-pencil-square me-2"></i>Editar
                        Administrador</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" style="filter:invert(1)"></button>
                </div>
                <div class="modal-body form-custom" style="padding:24px">
                    <input type="hidden" id="editAdminId">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Nome completo</label>
                            <input type="text" class="form-control" id="editAdminNome" placeholder="Ex: João da Silva">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">E-mail</label>
                            <input type="email" class="form-control" id="editAdminEmail" placeholder="admin@email.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Telefone</label>
                            <input type="text" class="form-control" id="editAdminTelefone" placeholder="(00) 00000-0000">
                        </div>
                        <div class="col-12">
                            <hr style="border-color:var(--glass-border);margin:4px 0">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nome de usuário</label>
                            <input type="text" class="form-control" id="editAdminUsername">
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                            <label class="form-label">Nova senha <small style="color:var(--text-muted)">(opcional)</small></label>
                            <input type="password" class="form-control" id="editAdminPassword" placeholder="Deixe vazio para manter">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Confirmar nova senha</label>
                            <input type="password" class="form-control" id="editAdminPasswordConfirm" placeholder="Repita a senha">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid var(--glass-border);padding:16px 24px">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        style="border-radius:10px">Cancelar</button>
                    <button type="button" class="btn btn-action btn-add" onclick="updateAdmin()">
                        <i class="bi bi-check-lg me-1"></i> Salvar Alterações
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="toast-container">
        <div id="toast" class="toast" role="alert">
            <div class="toast-body" id="toastBody"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function showToast(msg, type = 'success') {
            const t = document.getElementById('toast');
            const tb = document.getElementById('toastBody');
            tb.textContent = msg;
            t.className = 'toast show ' + (type === 'success' ? 'bg-success' : 'bg-danger');
            t.style.color = 'white';
            setTimeout(() => t.className = 'toast', 3000);
        }

        function formatCPF(cpf) {
            if (!cpf || cpf.length !== 11) return cpf || '-';
            return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
        }

        function formatPhone(p) {
            if (!p) return '-';
            p = p.replace(/\D/g, '');
            if (p.length === 11) return p.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
            return p;
        }

        function formatDate(d) {
            if (!d) return '-';
            const dt = new Date(d);
            return dt.toLocaleDateString('pt-BR') + ' ' + dt.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
        }

        // Tabs — hash-based routing
        const VALID_TABS = ['dashboard', 'promotions', 'raffle', 'leads', 'admins', 'settings', 'plugins'];

        function showTab(tab) {
            if (!VALID_TABS.includes(tab)) tab = 'dashboard';

            document.querySelectorAll('.tab-content').forEach(t => t.style.display = 'none');
            document.querySelectorAll('.nav-item[data-tab]').forEach(n => n.classList.remove('active'));

            const targetEl = document.getElementById('tab-' + tab);
            if (targetEl) {
                targetEl.style.display = 'block';
                // Need a tiny delay for structural browser repaints specifically when using display block initially before adding animation. We just toggle block immediately.
            }

            const navLink = document.querySelector(`.nav-item[data-tab="${tab}"]`);
            if (navLink) navLink.classList.add('active');

            if (tab === 'promotions') loadPromotions();
            if (tab === 'raffle') loadTickets();
            if (tab === 'leads') loadLeads();
            if (tab === 'dashboard') loadDashboard();
            if (tab === 'admins') loadAdmins();
            if (tab === 'settings') loadSettings();
            if (tab === 'plugins') loadPlugins();
        }

        // Hash routing: read tab from URL hash
        function getTabFromHash() {
            const hash = window.location.hash.replace('#', '').trim();
            return VALID_TABS.includes(hash) ? hash : 'dashboard';
        }

        // Nav clicks update hash (href="#tab" already does this) — intercept to call showTab
        document.querySelectorAll('.nav-item[data-tab]').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const tab = this.dataset.tab;
                history.pushState(null, '', '#' + tab);
                showTab(tab);
            });
        });

        // Back / forward button
        window.addEventListener('popstate', () => showTab(getTabFromHash()));

        // Initial load
        showTab(getTabFromHash());

        let chartsInstance = {};

        async function loadDashboard() {
            try {
                const [usersRes, promosRes, analyticsRes] = await Promise.all([
                    fetch('/api/users'),
                    fetch('/api/promotions/all'), // Updated route from backend schema
                    fetch('/api/analytics/dashboard')
                ]);

                const users = await usersRes.json();
                const promos = await promosRes.json();
                
                // Tratar Analytics (Auth failure or empty payload fallback)
                let analyticsData = { revenueStats: {}, salesByDay: [], salesByHour: [], salesByRaffle: [] };
                if (analyticsRes.ok) {
                   const contentType = analyticsRes.headers.get("content-type");
                   if (contentType && contentType.indexOf("application/json") !== -1) {
                        analyticsData = await analyticsRes.json();
                   } else {
                       throw new Error("Sessão expirada. Redirecionando...");
                   }
                } else {
                    throw new Error("Sessão expirada. Redirecionando...");
                }
                const { revenueStats, salesByDay, salesByHour, salesByRaffle } = analyticsData;

                document.getElementById('statLeads').textContent = users.length;
                document.getElementById('statPromos').textContent = promos.length || 0;
                
                document.getElementById('statTickets').textContent = revenueStats?.total_tickets_sold || 0;
                document.getElementById('statRevenue').textContent = 'R$ ' + parseFloat(revenueStats?.total_revenue || 0).toFixed(2);

                // Renderizar gráficos com Chart.js
                if (typeof Chart === 'undefined') return;

                Chart.defaults.color = '#94a3b8';
                Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.08)';

                if (chartsInstance.chartDay) chartsInstance.chartDay.destroy();
                if (chartsInstance.chartHour) chartsInstance.chartHour.destroy();
                if (chartsInstance.chartRaffle) chartsInstance.chartRaffle.destroy();

                const ctxDay = document.getElementById('salesByDayChart')?.getContext('2d');
                if (ctxDay && Array.isArray(salesByDay)) {
                    chartsInstance.chartDay = new Chart(ctxDay, {
                        type: 'line',
                        data: {
                            labels: salesByDay.map(d => formatDate(d.date).split(' ')[0]),
                            datasets: [{
                                label: 'Receita (R$)',
                                data: salesByDay.map(d => parseFloat(d.revenue || 0)),
                                borderColor: '#06b6d4',
                                backgroundColor: 'rgba(6, 182, 212, 0.1)',
                                fill: true,
                                tension: 0.4
                            }]
                        },
                        options: { responsive: true, maintainAspectRatio: false }
                    });
                }

                const ctxHour = document.getElementById('salesByHourChart')?.getContext('2d');
                if (ctxHour && Array.isArray(salesByHour)) {
                    chartsInstance.chartHour = new Chart(ctxHour, {
                        type: 'bar',
                        data: {
                            labels: salesByHour.map(h => h.hour_of_day + 'h'),
                            datasets: [{
                                label: 'Tickets Vendidos',
                                data: salesByHour.map(h => parseInt(h.tickets_sold || 0)),
                                backgroundColor: '#10b981',
                                borderRadius: 4
                            }]
                        },
                        options: { responsive: true, maintainAspectRatio: false }
                    });
                }

                const ctxRaffle = document.getElementById('salesByRaffleChart')?.getContext('2d');
                if (ctxRaffle && Array.isArray(salesByRaffle)) {
                    chartsInstance.chartRaffle = new Chart(ctxRaffle, {
                        type: 'bar',
                        data: {
                            labels: salesByRaffle.map(r => r.raffle_name),
                            datasets: [{
                                label: 'Receita (R$)',
                                data: salesByRaffle.map(r => parseFloat(r.revenue || 0)),
                                backgroundColor: '#f59e0b',
                                borderRadius: 4
                            }]
                        },
                        options: { responsive: true, maintainAspectRatio: false }
                    });
                }
            } catch (err) {
                console.error('Error loading dashboard:', err);
                if (err.message.includes('Sessão expirada')) {
                    window.location.href = '/admin';
                }
            }
        }

        // --- Settings Management ---
        async function loadSettings() {
            try {
                const res = await fetch('/api/settings/asaas');
                const data = await res.json();
                if (data.key) {
                    document.getElementById('settingAsaasKey').value = data.key;
                }
            } catch (e) { console.error('Erro ao buscar configs:', e); }
        }

        document.getElementById('settingsForm')?.addEventListener('submit', async function(e) {
            e.preventDefault();
            const btn = document.getElementById('btnSaveSettings');
            btn.innerHTML = 'Salvando...';
            btn.disabled = true;

            try {
                const asaasKey = document.getElementById('settingAsaasKey').value.trim();
                const res = await fetch('/api/settings/asaas', {
                    method: 'POST',
                    headers: { 'Content-Type':'application/json' },
                    body: JSON.stringify({ key: asaasKey })
                });

                if (res.ok) {
                    const alert = document.getElementById('settingsAlert');
                    alert.classList.remove('d-none');
                    setTimeout(() => alert.classList.add('d-none'), 3000);
                }
            } catch (error) {
                console.error('Erro ao salvar config', error);
            } finally {
                btn.innerHTML = 'Salvar Configurações';
                btn.disabled = false;
            }
        });

        // Promotions
        function togglePromoForm() {
            const f = document.getElementById('promoForm');
            f.style.display = f.style.display === 'none' ? 'block' : 'none';
        }

        async function loadPromotions() {
            try {
                const res = await fetch('/api/promotions/all');
                const promos = await res.json();
                const tbody = document.getElementById('promosTable');

                if (promos.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Nenhuma promoção</td></tr>';
                    return;
                }

                tbody.innerHTML = promos.map(p => `
          <tr>
            <td>${p.id}</td>
            <td><strong>${p.nome}</strong></td>
            <td>${p.descricao || '-'}</td>
            <td>${p.preco_original ? 'R$ ' + parseFloat(p.preco_original).toFixed(2) : '-'}</td>
            <td style="color:var(--success);font-weight:700">R$ ${parseFloat(p.preco_promocional).toFixed(2)}</td>
            <td><span class="badge-status ${p.ativo ? 'badge-active' : 'badge-inactive'}">${p.ativo ? 'Ativa' : 'Inativa'}</span></td>
            <td><button class="btn btn-action btn-del" onclick="deletePromo(${p.id})"><i class="bi bi-trash"></i></button></td>
          </tr>
        `).join('');
            } catch (err) { console.error(err); }
        }

        async function createPromotion() {
            const nome = document.getElementById('promoNome').value.trim();
            const preco_promocional = document.getElementById('promoPrecoPromo').value;

            if (!nome || !preco_promocional) {
                showToast('Preencha nome e preço promocional', 'error');
                return;
            }

            try {
                const res = await fetch('/api/promotions', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nome,
                        descricao: document.getElementById('promoDesc').value.trim(),
                        preco_original: document.getElementById('promoPrecoOrig').value || null,
                        preco_promocional
                    })
                });
                const data = await res.json();
                if (data.success) {
                    showToast('Promoção criada!');
                    document.getElementById('promoNome').value = '';
                    document.getElementById('promoDesc').value = '';
                    document.getElementById('promoPrecoOrig').value = '';
                    document.getElementById('promoPrecoPromo').value = '';
                    loadPromotions();
                } else showToast(data.error, 'error');
            } catch (err) { showToast('Erro ao criar', 'error'); }
        }

        async function deletePromo(id) {
            if (!confirm('Remover esta promoção?')) return;
            try {
                await fetch('/api/promotions/' + id, { method: 'DELETE' });
                showToast('Promoção removida');
                loadPromotions();
            } catch (err) { showToast('Erro', 'error'); }
        }

        // Raffle
        function toggleRaffleForm() {
            const f = document.getElementById('raffleForm');
            f.style.display = f.style.display === 'none' ? 'block' : 'none';
        }

        async function createRaffle() {
            const titulo = document.getElementById('raffleTitulo').value.trim();
            if (!titulo) { showToast('Digite o título', 'error'); return; }
            try {
                const res = await fetch('/api/raffle', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        titulo,
                        descricao: document.getElementById('raffleDesc').value.trim(),
                        preco_numero: document.getElementById('rafflePreco').value,
                        total_numeros: document.getElementById('raffleTotal').value
                    })
                });
                const data = await res.json();
                if (data.success) {
                    showToast('Sorteio criado!');
                    loadTickets();
                } else showToast(data.error, 'error');
            } catch (err) { showToast('Erro', 'error'); }
        }

        async function loadTickets() {
            try {
                const res = await fetch('/api/raffle/tickets');
                const tickets = await res.json();
                const tbody = document.getElementById('ticketsTable');

                if (!Array.isArray(tickets)) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4" style="color:#f87171">Erro ao carregar tickets</td></tr>';
                    return;
                }

                if (tickets.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Nenhum número vendido</td></tr>';
                    return;
                }

                tbody.innerHTML = tickets.map(t => `
          <tr>
            <td><strong style="color:var(--warning)">#${String(t.numero).padStart(3, '0')}</strong></td>
            <td>${t.raffle_titulo || '-'}</td>
            <td><strong>${t.usuario_nome}</strong></td>
            <td>${formatPhone(t.usuario_telefone)}</td>
            <td>${formatCPF(t.usuario_cpf)}</td>
            <td>${formatDate(t.data_compra)}</td>
            <td><button class="btn btn-action btn-del" onclick="deleteTicket(${t.id})"><i class="bi bi-trash"></i></button></td>
          </tr>
        `).join('');
            } catch (err) { console.error(err); }
        }

        async function deleteTicket(id) {
            if (!confirm('Remover este ticket?')) return;
            try {
                await fetch('/api/raffle/ticket/' + id, { method: 'DELETE' });
                showToast('Ticket removido');
                loadTickets();
            } catch (err) { showToast('Erro', 'error'); }
        }

        // Leads
        async function loadLeads() {
            try {
                const res = await fetch('/api/users');
                const users = await res.json();
                const tbody = document.getElementById('leadsTable');

                if (users.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4" style="color:var(--text-muted)">Nenhum lead recebido</td></tr>';
                    return;
                }

                tbody.innerHTML = users.map(u => `
          <tr>
            <td>${u.id}</td>
            <td><strong>${u.nome}</strong></td>
            <td>${formatCPF(u.cpf)}</td>
            <td>${formatPhone(u.telefone)}</td>
            <td><code style="color:var(--info)">${u.ip || '-'}</code></td>
            <td>${formatDate(u.timestamp)}</td>
            <td><button class="btn btn-action btn-del" onclick="deleteLead(${u.id})"><i class="bi bi-trash"></i></button></td>
          </tr>
        `).join('');
            } catch (err) { console.error(err); }
        }

        async function deleteLead(id) {
            if (!confirm('Remover este lead?')) return;
            try {
                await fetch('/api/users/' + id, { method: 'DELETE' });
                showToast('Lead removido');
                loadLeads();
            } catch (err) { showToast('Erro', 'error'); }
        }

        // Admin Users
        function toggleAdminForm() {
            const f = document.getElementById('adminForm');
            f.style.display = f.style.display === 'none' ? 'block' : 'none';
        }

        async function loadAdmins() {
            try {
                const res = await fetch('/api/admins');
                if (res.status === 401) return window.location.href = '/admin';
                const admins = await res.json();
                const tbody = document.getElementById('adminsTable');

                if (admins.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" class="text-center py-4" style="color:var(--text-muted)">Nenhum administrador</td></tr>';
                    return;
                }

                window._adminMap = {}
                tbody.innerHTML = admins.map(a => {
                    window._adminMap[a.id] = a
                    return `
                    <tr>
                        <td>${a.id}</td>
                        <td>
                            <div style="display:flex;align-items:center;gap:10px">
                                <div style="width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;color:white;font-weight:700;flex-shrink:0">
                                    ${(a.nome || a.username).charAt(0).toUpperCase()}
                                </div>
                                <div>
                                    <div style="font-weight:700">${a.nome || a.username}</div>
                                    <div style="font-size:.75rem;color:var(--text-muted)">@${a.username}</div>
                                </div>
                            </div>
                        </td>
                        <td style="color:var(--text-muted);font-size:.85rem">${a.email || '-'}</td>
                        <td style="color:var(--text-muted);font-size:.85rem">${formatPhone(a.telefone) || '-'}</td>
                        <td><span class="badge-status badge-active">Ativo</span></td>
                        <td>
                            <div style="display:flex;gap:8px">
                                <button class="btn btn-action" style="background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);color:#6366f1"
                                    onclick="editAdmin(${a.id})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-action btn-del" onclick="deleteAdmin(${a.id}, '${a.username}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>`
                }).join('');
            } catch (err) { console.error(err); }
        }

        async function createAdmin() {
            const username = document.getElementById('adminUsername').value.trim();
            const password = document.getElementById('adminPassword').value;
            const passwordConfirm = document.getElementById('adminPasswordConfirm').value;

            if (!username || !password) {
                showToast('Preencha usuário e senha', 'error');
                return;
            }

            if (username.length < 3) {
                showToast('Usuário deve ter no mínimo 3 caracteres', 'error');
                return;
            }

            if (password.length < 4) {
                showToast('Senha deve ter no mínimo 4 caracteres', 'error');
                return;
            }

            if (password !== passwordConfirm) {
                showToast('As senhas não coincidem', 'error');
                return;
            }

            try {
                const res = await fetch('/api/admins', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                });
                const data = await res.json();
                if (data.success) {
                    showToast('Administrador criado com sucesso!');
                    document.getElementById('adminUsername').value = '';
                    document.getElementById('adminPassword').value = '';
                    document.getElementById('adminPasswordConfirm').value = '';
                    document.getElementById('adminForm').style.display = 'none';
                    loadAdmins();
                } else {
                    showToast(data.error, 'error');
                }
            } catch (err) { showToast('Erro ao criar administrador', 'error'); }
        }

        function editAdmin(id) {
            const a = window._adminMap[id] || {}
            document.getElementById('editAdminId').value = id;
            document.getElementById('editAdminUsername').value = a.username || '';
            document.getElementById('editAdminNome').value = a.nome || '';
            document.getElementById('editAdminEmail').value = a.email || '';
            document.getElementById('editAdminTelefone').value = a.telefone || '';
            document.getElementById('editAdminPassword').value = '';
            document.getElementById('editAdminPasswordConfirm').value = '';
            new bootstrap.Modal(document.getElementById('editAdminModal')).show();
        }

        async function updateAdmin() {
            const id       = document.getElementById('editAdminId').value;
            const username = document.getElementById('editAdminUsername').value.trim();
            const nome     = document.getElementById('editAdminNome').value.trim();
            const email    = document.getElementById('editAdminEmail').value.trim();
            const telefone = document.getElementById('editAdminTelefone').value.trim();
            const password = document.getElementById('editAdminPassword').value;
            const passwordConfirm = document.getElementById('editAdminPasswordConfirm').value;

            if (!username) { showToast('Nome de usuário é obrigatório', 'error'); return; }
            if (password && password !== passwordConfirm) { showToast('As senhas não coincidem', 'error'); return; }
            if (password && password.length < 4) { showToast('Senha deve ter no mínimo 4 caracteres', 'error'); return; }

            try {
                const body = { username, nome, email, telefone };
                if (password) body.password = password;

                const res = await fetch('/api/admins/' + id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body)
                });
                const data = await res.json();
                if (data.success) {
                    showToast('Administrador atualizado!');
                    bootstrap.Modal.getInstance(document.getElementById('editAdminModal')).hide();
                    loadAdmins();
                } else {
                    showToast(data.error, 'error');
                }
            } catch (err) { showToast('Erro ao atualizar', 'error'); }
        }

        async function deleteAdmin(id, username) {
            if (!confirm('Tem certeza que deseja remover o administrador "' + username + '"?')) return;
            try {
                const res = await fetch('/api/admins/' + id, { method: 'DELETE' });
                const data = await res.json();
                if (data.success) {
                    showToast('Administrador removido');
                    loadAdmins();
                } else {
                    showToast(data.error, 'error');
                }
            } catch (err) { showToast('Erro ao remover', 'error'); }
        }

        // ── Plugins ───────────────────────────────────────────────────────────

        async function loadPlugins() {
            const container = document.getElementById('plugin-list')
            try {
                const res = await fetch('/api/plugins', { credentials: 'include' })
                const plugins = await res.json()

                if (!Array.isArray(plugins) || plugins.length === 0) {
                    container.innerHTML = '<p style="color:var(--text-muted)">Nenhum plugin encontrado.</p>'
                    return
                }

                container.innerHTML = plugins.map(p => {
                    const cfgRows = (p.config_schema || []).map(f => `
                        <div class="mb-3">
                            <label class="form-label">${f.label}</label>
                            <input type="${f.type === 'password' ? 'password' : 'text'}"
                                class="form-control plugin-cfg-field"
                                data-key="${f.key}"
                                placeholder="${f.help || ''}"
                                id="cfg-${p.id}-${f.key}">
                            ${f.help ? `<div style="color:var(--text-muted);font-size:.75rem;margin-top:4px">${f.help}</div>` : ''}
                        </div>`).join('')

                    const pairBtn = p.id === 'newwhats' ? `
                        <button class="btn btn-action" onclick="openPairModal()"
                            style="background:rgba(6,182,212,.15);border:1px solid rgba(6,182,212,.3);color:var(--primary);margin-bottom:16px;width:100%">
                            <i class="bi bi-link-45deg me-1"></i> Parear com NewWhats (gerar chave automaticamente)
                        </button>` : ''

                    return `
                    <div class="card-section" style="margin-bottom:20px">
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px">
                            <div>
                                <h3 style="margin:0 0 4px"><i class="bi bi-puzzle me-2" style="color:var(--primary)"></i>${p.name}</h3>
                                <span style="color:var(--text-muted);font-size:.8rem">v${p.version}${p.description ? ' — ' + p.description : ''}</span>
                            </div>
                            <div style="display:flex;align-items:center;gap:10px">
                                <span class="badge-status ${p.active ? 'badge-active' : 'badge-inactive'}" id="badge-${p.id}">
                                    ${p.active ? 'Ativo' : 'Inativo'}
                                </span>
                                <button class="btn btn-action ${p.active ? 'btn-del' : 'btn-add'}" id="toggle-${p.id}"
                                    onclick="togglePlugin('${p.id}', ${p.active})">
                                    ${p.active ? '<i class="bi bi-stop-circle me-1"></i>Desativar' : '<i class="bi bi-play-circle me-1"></i>Ativar'}
                                </button>
                            </div>
                        </div>
                        ${cfgRows ? `
                        <hr style="border-color:var(--glass-border);margin:16px 0">
                        <h4 style="font-size:.85rem;font-weight:700;color:var(--text-muted);margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em">Configuração</h4>
                        ${pairBtn}
                        <div class="form-custom" id="cfg-form-${p.id}">${cfgRows}</div>
                        <button class="btn btn-action btn-add" style="margin-top:8px" onclick="savePluginConfig('${p.id}')">
                            <i class="bi bi-floppy me-1"></i> Salvar configuração
                        </button>` : ''}
                    </div>`
                }).join('')

                // Carrega valores atuais de configuração
                for (const p of plugins) {
                    if (!p.config_schema?.length) continue
                    const cfgRes = await fetch(`/api/plugins/${p.id}/config`, { credentials: 'include' })
                    const cfg = await cfgRes.json()
                    for (const f of p.config_schema) {
                        const el = document.getElementById(`cfg-${p.id}-${f.key}`)
                        if (el && cfg[f.key]) el.value = cfg[f.key]
                    }
                }
            } catch (err) {
                container.innerHTML = '<p style="color:#f87171">Erro ao carregar plugins.</p>'
            }
        }

        async function togglePlugin(id, currentlyActive) {
            const action = currentlyActive ? 'deactivate' : 'activate'
            try {
                const res = await fetch(`/api/plugins/${id}/${action}`, { method: 'POST', credentials: 'include' })
                const data = await res.json()
                if (!res.ok) throw new Error(data.error || 'Erro')
                showToast(`Plugin ${currentlyActive ? 'desativado' : 'ativado'}!`)
                loadPlugins()
            } catch (err) {
                showToast(err.message, 'error')
            }
        }

        async function savePluginConfig(id) {
            const fields = document.querySelectorAll(`#cfg-form-${id} .plugin-cfg-field`)
            const values = {}
            fields.forEach(f => { if (f.value.trim()) values[f.dataset.key] = f.value.trim() })

            try {
                const res = await fetch(`/api/plugins/${id}/config`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify(values),
                })
                if (!res.ok) throw new Error('Erro ao salvar')
                showToast('Configuração salva!')
            } catch (err) {
                showToast(err.message, 'error')
            }
        }

        // ── NewWhats Pairing ──────────────────────────────────────────────────

        let pairStep = 1

        function openPairModal() {
            pairStep = 1
            document.getElementById('pair-step1').style.display = ''
            document.getElementById('pair-step2').style.display = 'none'
            document.getElementById('pair-step3').style.display = 'none'
            document.getElementById('pair-error1').style.display = 'none'
            document.getElementById('pair-error2').style.display = 'none'
            document.getElementById('pair-btn-next').style.display = ''
            document.getElementById('pair-btn-next').textContent = 'Enviar código'
            document.getElementById('pair-btn-next').innerHTML = 'Enviar código <i class="bi bi-arrow-right ms-1"></i>'
            document.getElementById('pair-code').value = ''

            // Pré-preenche URL salva
            const urlEl = document.getElementById(`cfg-newwhats-newwhats_url`)
            if (urlEl && urlEl.value) document.getElementById('pair-nw-url').value = urlEl.value

            new bootstrap.Modal(document.getElementById('pairModal')).show()
        }

        async function pairNext() {
            if (pairStep === 1) {
                const email = document.getElementById('pair-email').value.trim()
                const nwUrl = document.getElementById('pair-nw-url').value.trim().replace(/\/$/, '')
                const errEl = document.getElementById('pair-error1')
                errEl.style.display = 'none'

                if (!email || !nwUrl) {
                    errEl.textContent = 'Preencha a URL e o e-mail.'
                    errEl.style.display = ''
                    return
                }

                document.getElementById('pair-btn-next').disabled = true
                try {
                    const res = await fetch('/api/pair/proxy/request', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        credentials: 'include',
                        body: JSON.stringify({ email, nwUrl }),
                    })
                    const data = await res.json()
                    if (!res.ok) throw new Error(data.error || 'Erro ao solicitar código')

                    document.getElementById('pair-step1').style.display = 'none'
                    document.getElementById('pair-step2').style.display = ''
                    document.getElementById('pair-btn-next').innerHTML = 'Confirmar <i class="bi bi-check-lg ms-1"></i>'

                    const descEl = document.getElementById('pair-step2-desc')
                    const warn   = document.getElementById('pair-error2')

                    if (data.dev_code) {
                        descEl.style.display = 'none'
                        document.getElementById('pair-code').value = data.dev_code
                        warn.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>SMTP não configurado — código gerado localmente e preenchido automaticamente. Clique em <strong>Confirmar</strong> para continuar.'
                        warn.style.color = '#f59e0b'
                        warn.style.display = ''
                    } else {
                        descEl.style.display = ''
                        document.getElementById('pair-email-label').textContent = email
                        warn.style.display = 'none'
                    }

                    pairStep = 2
                } catch (err) {
                    errEl.textContent = err.message
                    errEl.style.display = ''
                } finally {
                    document.getElementById('pair-btn-next').disabled = false
                }

            } else if (pairStep === 2) {
                const email = document.getElementById('pair-email').value.trim()
                const nwUrl = document.getElementById('pair-nw-url').value.trim().replace(/\/$/, '')
                const code  = document.getElementById('pair-code').value.trim()
                const errEl = document.getElementById('pair-error2')
                errEl.style.display = 'none'

                if (code.length !== 6) {
                    errEl.textContent = 'Digite o código de 6 dígitos.'
                    errEl.style.display = ''
                    return
                }

                document.getElementById('pair-btn-next').disabled = true
                try {
                    const res = await fetch('/api/pair/proxy/confirm', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        credentials: 'include',
                        body: JSON.stringify({ email, code, nwUrl }),
                    })
                    const data = await res.json()
                    if (!res.ok) throw new Error(data.error || 'Código inválido')

                    // Salva a chave e URL no config do plugin
                    await fetch('/api/plugins/newwhats/config', {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        credentials: 'include',
                        body: JSON.stringify({ integration_key: data.integration_key, newwhats_url: nwUrl }),
                    })

                    document.getElementById('pair-step2').style.display = 'none'
                    document.getElementById('pair-step3').style.display = ''
                    document.getElementById('pair-btn-next').style.display = 'none'
                    loadPlugins()
                    pairStep = 3
                } catch (err) {
                    errEl.textContent = err.message
                    errEl.style.display = ''
                } finally {
                    document.getElementById('pair-btn-next').disabled = false
                }
            }
        }

        // Fix Bootstrap aria-hidden focus warning — blur focused element before modal hides
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('hide.bs.modal', () => {
                if (document.activeElement instanceof HTMLElement) {
                    document.activeElement.blur()
                }
            })
        })

        // Init — handled by showTab(getTabFromHash()) above
    </script>
</body>

</html>