<?php
// FORÇA O PHP E O NAVEGADOR A USAREM UTF-8
header('Content-Type: text/html; charset=utf-8');
session_start();
require_once 'config.php'; 

$pdo = getConexaoAtiva();

// FORÇA A CONEXÃO COM O BANCO A USAR UTF-8 ANTES DE QUALQUER BUSCA
$pdo->exec("SET NAMES utf8mb4");
$pdo->exec("SET CHARACTER SET utf8mb4");

// --- INÍCIO: BUSCA DE PERSONALIZAÇÃO DINÂMICA ---
$nome_painel = 'TOP IPTV';
$logo_url = '';
$cor_primaria = '#007bff';

try {
    $tabela_existe = $pdo->query("SHOW TABLES LIKE 'painel_config'")->rowCount() > 0;
    if ($tabela_existe) {
        $config_painel = $pdo->query("SELECT * FROM painel_config LIMIT 1")->fetch(PDO::FETCH_ASSOC);
        if ($config_painel) {
            $nome_painel = !empty($config_painel['nome_painel']) ? $config_painel['nome_painel'] : $nome_painel;
            $logo_url = !empty($config_painel['logo_url']) ? $config_painel['logo_url'] : $logo_url;
            $cor_primaria = !empty($config_painel['cor_primaria']) ? $config_painel['cor_primaria'] : $cor_primaria;
        }
    }
} catch (Exception $e) {}
// --- FIM: BUSCA DE PERSONALIZAÇÃO DINÂMICA ---

$pdo->exec("SET NAMES utf8mb4");

if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit; }

$role = $_SESSION['user_role'] ?? 'reseller'; 
$nome_usuario = $_SESSION['username'] ?? 'Usuário';
$user_id_logado = $_SESSION['user_id'];

// ====================================================================
// INTELIGÊNCIA ARTIFICIAL: DETECTA SE É XUI ONE OU XTREAM UI 
// ====================================================================
$tabela_revendedores = 'reg_users';
try {
    $pdo->query("SELECT 1 FROM reg_users LIMIT 1");
} catch (Exception $e) {
    $tabela_revendedores = 'users'; // Se der erro, estamos no XUI One
}

try {
    $user_credits = $pdo->query("SELECT credits FROM $tabela_revendedores WHERE id = " . intval($user_id_logado))->fetchColumn() ?: 0;
} catch (Exception $e) { $user_credits = 0; }

$mensagem = "";

// =========================================================================
// 1. AUTO-CRIAÇÃO DAS TABELAS E TOKENS DO CHATBOT
// =========================================================================
try {
    // ADICIONADO CHARSET NAS CRIAÇÕES DAS TABELAS
    $pdo->exec("CREATE TABLE IF NOT EXISTS chatbot (
        id INT AUTO_INCREMENT PRIMARY KEY,
        admin_id INT NOT NULL,
        rule_type VARCHAR(50) DEFAULT 'equals',
        rule_action VARCHAR(50) DEFAULT 'text',
        response TEXT,
        status INT DEFAULT 1,
        runs INT DEFAULT 0
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci");

    $pdo->exec("CREATE TABLE IF NOT EXISTS chatbot_messages (
        id INT AUTO_INCREMENT PRIMARY KEY,
        chatbot_id INT NOT NULL,
        admin_id INT NOT NULL,
        message VARCHAR(255) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci");

    // ADICIONADO ALTER TABLE: Corrige as tabelas caso já tenham sido criadas erradas antes
    $pdo->exec("ALTER TABLE chatbot CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci");
    $pdo->exec("ALTER TABLE chatbot_messages CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci");

    $colunas = $pdo->query("SHOW COLUMNS FROM $tabela_revendedores")->fetchAll(PDO::FETCH_COLUMN);
    if (!in_array('chatbot_token', $colunas)) {
        $pdo->exec("ALTER TABLE $tabela_revendedores ADD COLUMN chatbot_token VARCHAR(255) NULL");
    }

    $stmt_key = $pdo->prepare("SELECT chatbot_token FROM $tabela_revendedores WHERE id = ?");
    $stmt_key->execute([$user_id_logado]);
    $api_key = $stmt_key->fetchColumn();

    if (empty($api_key)) {
        $api_key = bin2hex(random_bytes(16));
        $pdo->prepare("UPDATE $tabela_revendedores SET chatbot_token = ? WHERE id = ?")->execute([$api_key, $user_id_logado]);
    }
    
    // --- CORREÇÃO: LINK APONTANDO PARA A PASTA API ONDE ESTÁ O MOTOR DO CHATBOT ---
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
    $server_url = $protocol . $_SERVER['HTTP_HOST'] . "/api/chatbot_office_api.php?key=" . urlencode($api_key);

} catch (PDOException $e) {
    $mensagem = "<div class='alert danger'>Erro de banco de dados: " . $e->getMessage() . "</div>";
}

// =========================================================================
// 2. PROCESSAMENTO DE AÇÕES (CRIAR / EDITAR / EXCLUIR REGRA)
// =========================================================================
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    try {
        if ($_POST['action'] === 'save_rule') {
            $type = $_POST['rule_type'];
            $action = $_POST['rule_action'];
            $response = $_POST['response'] ?? '';
            $messages = $_POST['messages'] ?? [];
            $rule_id = isset($_POST['rule_id']) && is_numeric($_POST['rule_id']) ? intval($_POST['rule_id']) : 0;
            $status = $_POST['status'] ?? 1;

            if (empty($messages)) {
                $mensagem = "<div class='alert danger'><i class='fas fa-exclamation-triangle'></i> Adicione pelo menos um gatilho/mensagem!</div>";
            } else {
                if ($rule_id === 0) {
                    $stmt = $pdo->prepare("INSERT INTO chatbot (admin_id, rule_type, rule_action, response, status) VALUES (?, ?, ?, ?, ?)");
                    $stmt->execute([$user_id_logado, $type, $action, $response, $status]);
                    $new_id = $pdo->lastInsertId();
                    
                    foreach($messages as $msg) {
                        if(trim($msg) !== '') {
                            $pdo->prepare("INSERT INTO chatbot_messages (chatbot_id, admin_id, message) VALUES (?, ?, ?)")->execute([$new_id, $user_id_logado, trim($msg)]);
                        }
                    }
                    $mensagem = "<div class='alert success'><i class='fas fa-check-circle'></i> Nova regra criada com sucesso!</div>";
                } else {
                    $pdo->prepare("UPDATE chatbot SET rule_type=?, rule_action=?, response=?, status=? WHERE id=? AND admin_id=?")->execute([$type, $action, $response, $status, $rule_id, $user_id_logado]);
                    
                    $pdo->prepare("DELETE FROM chatbot_messages WHERE chatbot_id=? AND admin_id=?")->execute([$rule_id, $user_id_logado]);
                    foreach($messages as $msg) {
                        if(trim($msg) !== '') {
                            $pdo->prepare("INSERT INTO chatbot_messages (chatbot_id, admin_id, message) VALUES (?, ?, ?)")->execute([$rule_id, $user_id_logado, trim($msg)]);
                        }
                    }
                    $mensagem = "<div class='alert success'><i class='fas fa-info-circle'></i> Regra atualizada com sucesso!</div>";
                }
            }
        }

        if ($_POST['action'] === 'delete_rule') {
            $del_id = intval($_POST['rule_id']);
            $pdo->prepare("DELETE FROM chatbot WHERE id=? AND admin_id=?")->execute([$del_id, $user_id_logado]);
            $pdo->prepare("DELETE FROM chatbot_messages WHERE chatbot_id=? AND admin_id=?")->execute([$del_id, $user_id_logado]);
            $mensagem = "<div class='alert danger'><i class='fas fa-trash'></i> Regra excluída com sucesso!</div>";
        }
    } catch (Exception $e) {
        $mensagem = "<div class='alert danger'><i class='fas fa-times-circle'></i> Erro: " . $e->getMessage() . "</div>";
    }
}

// =========================================================================
// 3. BUSCA REGRAS DO USUÁRIO LOGADO
// =========================================================================
$stmt = $pdo->prepare("SELECT * FROM chatbot WHERE admin_id = ? ORDER BY id DESC");
$stmt->execute([$user_id_logado]);
$lista_regras = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($lista_regras as $key => $regra) {
    $stm = $pdo->prepare("SELECT message FROM chatbot_messages WHERE chatbot_id = ?");
    $stm->execute([$regra['id']]);
    $lista_regras[$key]['messages'] = $stm->fetchAll(PDO::FETCH_COLUMN);
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="stylesheet" href="tema.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Chatbot - <?php echo htmlspecialchars($nome_painel); ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root { --bg-dark: #0f1114; --bg-sidebar: #1e2227; --bg-card: #272c33; --text-main: #d1d5da; --text-muted: #8a94a1; --accent: <?php echo $cor_primaria; ?>; --border-color: #3a4149; --success: #28a745; --danger: #dc3545; --warning: #f39c12; --info: #3b82f6;}
        body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: var(--bg-dark); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; }
        .sidebar { width: 260px; background-color: var(--bg-sidebar); display: flex; flex-direction: column; transition: 0.3s; border-right: 1px solid var(--border-color); z-index: 1001; flex-shrink: 0; }
        .sidebar-header { padding: 25px 20px; text-align: center; font-size: 22px; font-weight: bold; color: white; border-bottom: 1px solid var(--border-color); }
        .sidebar-logo { max-width: 180px; max-height: 50px; object-fit: contain; }
        .user-info { padding: 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
        .user-info .badge { background: rgba(255, 255, 255, 0.05); color: var(--accent); padding: 4px 10px; border-radius: 4px; font-size: 11px; text-transform: uppercase; font-weight: bold; margin-top: 5px; display: inline-block; }
        .credits-badge { display: block; margin-top: 10px; color: var(--success); font-weight: bold; font-size: 13px; }
        .menu-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
        .menu-item { padding: 14px 20px; color: var(--text-main); text-decoration: none; display: flex; align-items: center; transition: 0.2s; border-left: 3px solid transparent; font-size: 14px; cursor: pointer; }
        .menu-item i:first-child { margin-right: 12px; width: 20px; text-align: center; color: var(--text-muted); font-size: 16px;}
        .menu-item:hover, .menu-item.active { background-color: #2c3138; color: white; border-left-color: var(--accent); }
        .menu-item.active i:first-child { color: var(--accent); }
        .submenu { display: none; background: #16191d; list-style: none; padding: 0; margin: 0; }
        .submenu .menu-item { padding-left: 52px; font-size: 13px; border-left: none; }
        .arrow-icon { margin-left: auto; transition: 0.3s; font-size: 11px; }
        .rotate { transform: rotate(180deg); }
        .menu-category { padding: 20px 20px 8px; font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: bold; letter-spacing: 1px; }
        .logout-btn { padding: 15px; background-color: var(--danger); color: white; text-align: center; text-decoration: none; font-weight: bold; margin-top: auto; }
        .main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; width: 100%; position: relative; }
        .topbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background-color: var(--bg-sidebar); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
        .menu-toggle { display: none; background: none; border: none; color: white; font-size: 22px; cursor: pointer; padding: 5px; }
        .content-area { padding: 25px; flex: 1; width: 100%; box-sizing: border-box; }
        .mode-badge { padding: 6px 15px; background: rgba(40, 167, 69, 0.15); color: var(--success); border-radius: 20px; font-size: 12px; font-weight: bold; border: 1px solid var(--success); }
        .page-header { margin-bottom: 25px; }
        .page-header h3 { font-size: 24px; color: white; margin: 0 0 5px 0; display: flex; align-items: center; gap: 10px; }
        .page-header h3 i { color: #25D366; font-size: 30px; }
        .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; border: 1px solid transparent; }
        .alert.info { background: rgba(59, 130, 246, 0.1); color: var(--info); border-color: var(--info); }
        .alert.success { background: rgba(40, 167, 69, 0.1); color: var(--success); border-color: var(--success); }
        .alert.danger { background: rgba(220, 53, 69, 0.1); color: var(--danger); border-color: var(--danger); }
        .btn { padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; color: white; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; transition: 0.2s; }
        .btn-primary { background: var(--accent); }
        .btn-success { background: var(--success); }
        .btn-danger { background: var(--danger); padding: 8px 12px; font-size: 12px; }
        .btn-warning { background: var(--warning); padding: 8px 12px; font-size: 12px; color: #121519; }
        .btn-info { background: var(--info); }
        .input-group { display: flex; width: 100%; }
        .input-group input { flex: 1; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px 0 0 6px; background: #121519; color: white; }
        .input-group button { border-radius: 0 6px 6px 0; }
        .card-table { background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border-color); overflow-x: auto; width: 100%; margin-top: 20px; }
        table { width: 100%; border-collapse: collapse; min-width: 800px; }
        th { background: rgba(0,0,0,0.2); padding: 15px; text-align: left; font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
        td { padding: 15px; border-bottom: 1px solid var(--border-color); font-size: 13px; vertical-align: middle; }
        .message-badge { background-color: rgba(255,255,255,0.1); color: white; padding: 5px 10px; border-radius: 20px; font-size: 11px; margin: 2px; display: inline-block; border: 1px solid var(--border-color); }
        .status-badge { padding: 4px 10px; border-radius: 20px; font-weight: bold; font-size: 10px; text-transform: uppercase; }
        .status-on { background: rgba(40,167,69,0.2); color: var(--success); border: 1px solid var(--success); }
        .status-off { background: rgba(255,255,255,0.1); color: var(--text-muted); border: 1px solid var(--text-muted); }
        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); overflow-y: auto; }
        .modal-content { background: var(--bg-card); width: 95%; max-width: 600px; margin: 5% auto; padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); position: relative; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--text-muted); font-weight: bold; }
        .form-control { width: 100%; padding: 12px; background: #121519; border: 1px solid var(--border-color); color: white; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-family: inherit;}
        .tag-remove { margin-left: 5px; color: var(--danger); cursor: pointer; font-weight: bold; }
        .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; }
        @media (max-width: 768px) {
            .sidebar { position: fixed; left: -260px; height: 100%; box-shadow: 10px 0 20px rgba(0,0,0,0.5); }
            .sidebar.active { left: 0; }
            .sidebar-overlay.active { display: block; }
            .menu-toggle { display: block; margin-right: 15px; }
            .topbar { padding: 15px 20px; justify-content: flex-start; }
            .topbar h2 { display: none; }
            .topbar-right { margin-left: auto; }
            .content-area { padding: 15px; }
            .modal-content { width: 95%; margin: 10% auto; }
        }
    </style>
</head> <body style="display:flex; flex-direction:row;"> <div class="sidebar-overlay" id="overlay" onclick="toggleMenu()"></div> <?php include 'sidebar.php'; ?>

    <div class="main-content">
        <header class="topbar">
            <div style="display:flex; align-items:center;">
                <button class="menu-toggle" id="btn-menu"><i class="fas fa-bars"></i></button>
                <h2 style="margin:0; font-size: 18px; color:white;">Configurar Chatbot</h2>
            </div>
            <div class="topbar-right">
                <span class="mode-badge"><i class="fas fa-database"></i> MODO: <?php echo defined('MODO_SISTEMA') ? strtoupper(MODO_SISTEMA) : 'INTERNO'; ?></span>
            </div>
        </header>

        <div class="content-area">
            <div class="page-header">
                <h3><i class="fab fa-whatsapp"></i> Chatbot Integrado (IA)</h3>
                <p style="color:var(--text-muted); margin:0;">Configure respostas automáticas para o seu WhatsApp de forma independente.</p>
            </div>
            
            <?php echo $mensagem; ?>

            <div class="alert info">
                <h4 style="margin:0 0 10px 0;"><i class="fas fa-link"></i> URL do seu Servidor (App Auto Reply)</h4>
                <p style="margin:0 0 15px 0;">Use a URL exclusiva abaixo para conectar o seu aplicativo de Auto Resposta ao painel.</p>
                <div class="input-group">
                    <input type="text" id="serverUrlInput" value="<?php echo htmlspecialchars($server_url); ?>" readonly>
                    <button class="btn btn-primary" onclick="copyUrl()"><i class="fas fa-copy"></i> Copiar URL</button>
                </div>
                <div style="margin-top: 15px;">
                    <button class="btn btn-info" onclick="document.getElementById('installModal').style.display='block'"><i class="fas fa-book-open"></i> Como Instalar?</button>
                </div>
            </div>

            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;">
                <h3 style="margin:0; color:white;">Suas Regras Cadastradas</h3>
                <button class="btn btn-success" onclick="openModalRule()"><i class="fas fa-plus"></i> CRIAR NOVA REGRA</button>
            </div>

            <div class="card-table">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Lógica</th>
                            <th>Mensagens (Gatilhos)</th>
                            <th>Ação</th>
                            <th>Status</th>
                            <th>Execuções</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($lista_regras as $regra): 
                            $json_data = htmlspecialchars(json_encode($regra), ENT_QUOTES, 'UTF-8');
                        ?>
                        <tr>
                            <td><strong>#<?php echo $regra['id']; ?></strong></td>
                            <td><?php echo $regra['rule_type'] == 'equals' ? 'Igual a' : 'Contém a palavra'; ?></td>
                            <td>
                                <?php foreach($regra['messages'] as $msg): ?>
                                    <span class="message-badge"><?php echo htmlspecialchars($msg); ?></span>
                                <?php endforeach; ?>
                            </td>
                            <td>
                                <span style="color:var(--info); font-weight:bold;">
                                    <?php echo $regra['rule_action'] == 'text' ? 'Enviar Texto' : 'Gerar Teste IPTV'; ?>
                                </span>
                            </td>
                            <td><span class="status-badge <?php echo $regra['status'] == 1 ? 'status-on' : 'status-off'; ?>"><?php echo $regra['status'] == 1 ? 'Ativo' : 'Inativo'; ?></span></td>
                            <td><?php echo $regra['runs']; ?></td>
                            <td>
                                <button class="btn-act btn-warning" onclick='editModalRule(<?php echo $json_data; ?>)'><i class="fas fa-edit"></i></button>
                                <form method="POST" style="display:inline;" onsubmit="return confirm('Tem certeza que deseja excluir esta regra?');">
                                    <input type="hidden" name="action" value="delete_rule">
                                    <input type="hidden" name="rule_id" value="<?php echo $regra['id']; ?>">
                                    <button type="submit" class="btn-act btn-danger"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; if(empty($lista_regras)) echo "<tr><td colspan='7' style='text-align:center; padding:30px;'>Nenhuma regra configurada. Clique em 'Criar Nova Regra'.</td></tr>"; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php include 'rodape.php'; ?>
    </div>

    <div id="ruleModal" class="modal">
        <div class="modal-content">
            <h3 id="modalTitle" style="margin-top:0; color:white;">Nova Regra</h3>
            <form method="POST" id="formRule">
                <input type="hidden" name="action" value="save_rule">
                <input type="hidden" name="rule_id" id="rule_id" value="0">
                
                <div style="display:flex; gap:10px;">
                    <div class="form-group" style="flex:1;">
                        <label>Tipo da Regra</label>
                        <select name="rule_type" id="rule_type" class="form-control">
                            <option value="equals">Texto IGUAL A (Exato)</option>
                            <option value="contains">Texto CONTÉM (Basta ter a palavra)</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex:1;">
                        <label>Ação do Robô</label>
                        <select name="rule_action" id="rule_action" class="form-control">
                            <option value="text">Responder com Texto Fixo</option>
                            <option value="test_iptv">Gerar e Enviar Teste IPTV (4h)</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>Gatilhos (O que o cliente digita)</label>
                    <div class="input-group mb-2">
                        <input type="text" id="gatilho_input" placeholder="Ex: oi">
                        <button type="button" class="btn btn-primary" onclick="addGatilho()">Adicionar</button>
                    </div>
                    <small style="color:var(--text-muted); font-size:11px;">Use * para responder a qualquer mensagem.</small>
                    <div id="gatilhos_container" style="margin-top:10px; padding:10px; background:#0f1114; border:1px solid var(--border-color); border-radius:6px; min-height:50px;"></div>
                </div>

                <div class="form-group">
                    <label>Resposta (O que o robô fala)</label>
                    <textarea name="response" id="response_text" class="form-control" rows="5" placeholder="Digite a resposta aqui... Se a ação for 'Gerar Teste', o sistema ignora este texto."></textarea>
                </div>

                <div class="form-group">
                    <label>Status</label>
                    <select name="status" id="rule_status" class="form-control">
                        <option value="1">Ativo</option>
                        <option value="0">Inativo</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-success" style="width:100%; padding:15px; justify-content:center; margin-top:10px;">SALVAR REGRA</button>
                <button type="button" onclick="document.getElementById('ruleModal').style.display='none'" style="width:100%; background:none; border:none; color:var(--text-muted); margin-top:10px; cursor:pointer;">Cancelar</button>
            </form>
        </div>
    </div>

    <div id="installModal" class="modal">
        <div class="modal-content" style="max-width:600px;">
            <h3 style="margin:0; color:white;"><i class="fas fa-mobile-alt"></i> Passo a Passo: Auto Reply</h3>
            <div style="color:var(--text-main); font-size:14px; line-height:1.6;">
                <p>O sistema foi desenhado para funcionar perfeitamente com o App <strong>Auto Reply</strong> (Para Android).</p>
                <ol style="padding-left:20px; color:var(--text-muted);">
                    <li>Abra o seu aplicativo Auto Reply no celular.</li>
                    <li>Edite ou crie a regra de resposta (botão +).</li>
                    <li>Em <strong>"Received Message"</strong> coloque a mensagem ou deixe o <code>*</code> (asterisco).</li>
                    <li>Em <strong>"Reply Message"</strong>, você <strong>PRECISA</strong> escrever o código: <code>{{json.reply}}</code></li>
                    <li>Role a tela e ative a opção <strong>"Connect to own Server"</strong>.</li>
                    <li>No campo "Server URL", cole a sua URL gerada aqui no painel.</li>
                    <li>Salve e ative o robô. Faça o teste enviando uma mensagem de OUTRO celular para o seu!</li>
                </ol>
            </div>
            <button type="button" class="btn btn-primary" onclick="document.getElementById('installModal').style.display='none'" style="width:100%; justify-content:center; margin-top:20px;">Entendi</button>
        </div>
    </div>

    <script>
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        document.getElementById('btn-menu').onclick = () => { sidebar.classList.add('active'); overlay.classList.add('active'); };
        overlay.onclick = () => { sidebar.classList.remove('active'); overlay.classList.remove('active'); };

        function toggleSubmenu(id) {
            const sub = document.getElementById(id);
            const arrow = document.getElementById('arrow-' + id);
            if (sub.style.display === "block") { sub.style.display = "none"; if(arrow) arrow.classList.remove('rotate'); } 
            else { sub.style.display = "block"; if(arrow) arrow.classList.add('rotate'); }
        }

        function copyUrl() {
            const input = document.getElementById('serverUrlInput');
            input.select(); input.setSelectionRange(0, 99999);
            document.execCommand('copy');
            alert('URL copiada! Cole no campo "Server URL" do seu Auto Reply.');
        }

        // Lógica de Gatilhos (Tags)
        const gatilhoInput = document.getElementById('gatilho_input');
        const gatilhosContainer = document.getElementById('gatilhos_container');

        function addGatilho() {
            const val = gatilhoInput.value.trim();
            if(!val) return;
            criarBadgeGatilho(val);
            gatilhoInput.value = '';
            gatilhoInput.focus();
        }

        gatilhoInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') { e.preventDefault(); addGatilho(); }
        });

        function criarBadgeGatilho(texto) {
            const span = document.createElement('span');
            span.className = 'message-badge';
            span.innerHTML = `${texto} <i class="fas fa-times tag-remove" onclick="this.parentElement.remove()"></i>`;
            
            const inputHidden = document.createElement('input');
            inputHidden.type = 'hidden';
            inputHidden.name = 'messages[]';
            inputHidden.value = texto;
            
            span.appendChild(inputHidden);
            gatilhosContainer.appendChild(span);
        }

        // CORREÇÃO: Limpando completamente o formulário ao abrir para Nova Regra
        function openModalRule() {
            document.getElementById('formRule').reset(); // Zera todo o formulário
            document.getElementById('modalTitle').innerText = "Nova Regra de Resposta";
            document.getElementById('rule_id').value = "0"; // Garante que será um INSERT
            document.getElementById('rule_type').value = "equals";
            document.getElementById('rule_action').value = "text";
            document.getElementById('rule_status').value = "1";
            gatilhosContainer.innerHTML = ""; // Limpa os gatilhos
            document.getElementById('ruleModal').style.display = 'block';
        }

        function editModalRule(r) {
            document.getElementById('formRule').reset();
            document.getElementById('modalTitle').innerText = "Editar Regra";
            document.getElementById('rule_id').value = r.id; // Garante que será um UPDATE
            document.getElementById('rule_type').value = r.rule_type;
            document.getElementById('rule_action').value = r.rule_action;
            document.getElementById('response_text').value = r.response;
            document.getElementById('rule_status').value = r.status;
            
            gatilhosContainer.innerHTML = "";
            if(r.messages && Array.isArray(r.messages)) {
                r.messages.forEach(msg => criarBadgeGatilho(msg));
            }
            document.getElementById('ruleModal').style.display = 'block';
        }
    </script>
    <script src="tema.js"></script>
</body>
</html>
