<?php
ob_start(); // Iniciar el búfer de salida al inicio del script
session_start();

// ***** IMPORTANTE: ESTAS LÍNEAS ESTÁN AQUÍ PARA DEPURAR. *****
// UNA VEZ QUE FUNCIONE, CÁMBIALAS A: error_reporting(0); ini_set('display_errors', 0);
error_reporting(E_ALL); // Reporta todos los errores
ini_set('display_errors', 1); // Muestra los errores en la pantalla
// *************************************************************

// --- DATOS DE ADMINISTRADOR DE EJEMPLO ---
$admin_data = [
    'nombre' => 'María Admin',
    'email' => 'maria.admin@example.com',
    'foto_perfil' => 'https://placehold.co/100x100/4c7c59/ffffff?text=MA' // Ejemplo de imagen
];

// --- Lógica PHP para obtener datos de herramientas IA (AHORA SON DATOS DUMMY) ---
$ai_tools_data_from_db = [
    'ai-tool-1' => [
        'id' => 'ai-tool-1', // ID para JS (string)
        'db_id' => 1,        // ID simulado de la base de datos (numérico)
        'name' => 'Generador de Mensajes de Primer Contacto',
        'description' => 'Crea mensajes personalizados para iniciar conversaciones con nuevos prospectos usando IA.',
        'url' => 'http://ia.orozdesign.com/primer-contacto',
        'enabled' => true,
        'created_at' => '2024-07-01 10:00:00'
    ],
    'ai-tool-2' => [
        'id' => 'ai-tool-2',
        'db_id' => 2,
        'name' => 'Asistente de Ventas Inteligente',
        'description' => 'Asistente virtual que te ayuda a cerrar ventas respondiendo preguntas comunes y ofreciendo soluciones.',
        'url' => 'http://ia.orozdesign.com/asistente-ventas',
        'enabled' => true,
        'created_at' => '2024-07-05 14:30:00'
    ],
    'ai-tool-3' => [
        'id' => 'ai-tool-3',
        'db_id' => 3,
        'name' => 'Creador de Contenido para Redes Sociales',
        'description' => 'Genera ideas y textos para tus publicaciones en Facebook, Instagram y otras redes sociales.',
        'url' => 'http://ia.orozdesign.com/redes-sociales',
        'enabled' => false, // Esta herramienta está deshabilitada en los datos dummy
        'created_at' => '2024-07-10 09:00:00'
    ],
    'ai-tool-4' => [
        'id' => 'ai-tool-4',
        'db_id' => 4,
        'name' => 'Analizador de Sentimientos de Cliente',
        'description' => 'Analiza las interacciones con tus clientes para entender su estado de ánimo y mejorar la atención.',
        'url' => 'http://ia.orozdesign.com/sentimientos',
        'enabled' => true,
        'created_at' => '2024-06-15 16:00:00' // Herramienta del mes pasado para el contador
    ]
];

// Si el array de herramientas IA está vacío, convertirlo a un objeto vacío para JSON
if (empty($ai_tools_data_from_db)) {
    $ai_tools_data_from_db = new stdClass();
}

// Lógica para contar nuevas herramientas IA este mes (desde PHP)
$new_ai_tools_this_month = 0;
$current_month_year = date('Y-m'); // Formato "AAAA-MM"
foreach ((array)$ai_tools_data_from_db as $tool) {
    // Aseguramos que 'created_at' exista y sea válido antes de intentar crear un DateTime
    if (isset($tool['created_at']) && (new DateTime($tool['created_at']))->format('Y-m') === $current_month_year) {
        $new_ai_tools_this_month++;
    }
}

// Codificar los datos a JSON para pasarlos a JavaScript
$ai_tools_json = json_encode($ai_tools_data_from_db);
$new_ai_tools_this_month_json = json_encode($new_ai_tools_this_month);

// Manejo de notificaciones de sesión (si existen)
$notification_message = '';
$notification_type = '';
if (isset($_SESSION['notification'])) {
    $notification_message = $_SESSION['notification']['message'];
    $notification_type = $_SESSION['notification']['type'];
    unset($_SESSION['notification']); // Limpiar la notificación después de mostrarla
}
ob_end_clean(); // Finalizar y limpiar el búfer de salida
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalCRM ToolKit Dashboard | Administración de Herramientas IA</title>
    <meta name="description" content="Administra tus herramientas de Inteligencia Artificial en LocalCRM: añade, edita y controla su disponibilidad para tus usuarios.">
    <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <link rel="stylesheet" href="style.css">
    <script src="files/header-manager.js"></script>
</head>
 
<body data-page-title="PANEL DE ADMINISTRADOR - HERRAMIENTAS IA"
      data-page-subtitle="GESTIÓN DE INTELIGENCIA ARTIFICIAL"
      data-page-icon="cpu">

<div id="toastNotification" class="toast-notification">
    <i id="toastIcon" class="fas"></i>
    <span id="toastMessage"></span>
    <button id="toastCloseBtn" class="toast-close-btn">×</button>
</div>
<style>
.toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
}

.toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

.toast-notification.success { background-color: #4CAF50; }
.toast-notification.error { background-color: #f44336; }
.toast-notification.info { background-color: #2196F3; }

.toast-notification .toast-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto;
}
</style>

<div class="relative min-h-screen md:flex">

    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>

    <?php include 'menu.php'; ?>

    <main class="flex-1 overflow-y-auto">
        <header class="bg-white shadow-sm p-4 flex justify-between items-center sticky top-0 z-20">
            <button id="mobile-menu-button" class="md:hidden text-gray-600 hover:text-gray-800">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
            <div class="page-header-container">
                <h2 id="page-title"></h2>
                <p id="page-subtitle"></p>
            </div>
        </header>

        <div id="content-area" class="p-4 md:p-8 space-y-8">
            <section id="ai-tools" class="dashboard-section">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                        <div>
                            <h3 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
                                <i data-lucide="cpu" class="w-7 h-7 text-[var(--color-primary)]"></i> INVENTARIO DE HERRAMIENTAS IA
                            </h3>
                            <p class="text-gray-500 text-sm mt-1 uppercase">VISUALIZA Y ADMINISTRA TUS HERRAMIENTAS DE INTELIGENCIA ARTIFICIAL.</p>
                        </div>
                        <div class="flex items-center gap-4 w-full md:w-auto">
                            <button id="addAiToolBtn" class="btn-secondary font-bold py-2 px-4 rounded-lg flex items-center w-full md:w-auto justify-center uppercase">
                                <i data-lucide="plus" class="w-5 h-5 mr-2"></i> AGREGAR HERRAMIENTA IA
                            </button>
                            </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div class="stat-card bg-white p-6 rounded-xl shadow-md flex items-center space-x-4 border-l-4 border-[var(--color-primary)]">
                            <i data-lucide="bot" class="w-12 h-12 text-gray-700"></i>
                            <div>
                                <h3 class="text-lg font-extrabold text-gray-500 mb-1">TOTAL DE HERRAMIENTAS IA</h3>
                                <p id="total-ai-tools-count" class="text-5xl font-bold text-[var(--color-secondary)]">0</p>
                                <p class="text-sm text-gray-400 mt-1">EN EL CATÁLOGO</p>
                            </div>
                        </div>
                        <div class="stat-card bg-white p-6 rounded-xl shadow-md flex items-center space-x-4 border-l-4 border-[var(--color-highlight)]">
                            <i data-lucide="activity" class="w-12 h-12 text-gray-700"></i>
                            <div>
                                <h3 class="text-lg font-extrabold text-gray-500 mb-1">NUEVAS HERRAMIENTAS ESTE MES</h3>
                                <p id="new-ai-tools-this-month-count" class="text-5xl font-bold text-[var(--color-secondary)]">0</p>
                                <p class="text-sm text-gray-400 mt-1 uppercase">HERRAMIENTAS AGREGADAS EN EL PERIODO</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row gap-4 mb-6">
                        <div class="relative flex-grow">
                            <input type="text" id="ai-tool-search" placeholder="Buscar Por Nombre o Descripción..." class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]">
                            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        </div>
                        <div class="view-toggle inline-flex bg-gray-200 rounded-lg p-1">
                            <button id="grid-view-btn" class="px-3 py-1 rounded-md text-sm font-semibold transition-colors duration-200 active uppercase" title="Vista de Cuadrícula">
                                <i data-lucide="layout-grid" class="w-5 h-5"></i>
                            </button>
                            <button id="list-view-btn" class="px-3 py-1 rounded-md text-sm font-semibold transition-colors duration-200 uppercase" title="Vista de Lista">
                                <i data-lucide="list" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>

                    <div id="ai-tool-grid-view" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        </div>

                    <div id="ai-tool-list-view" class="overflow-x-auto hidden">
                        <table class="min-w-full bg-white">
                            <thead class="bg-gray-50">
                                <tr class="text-left text-gray-500 uppercase text-sm">
                                    <th class="py-3 px-6 font-semibold">NOMBRE</th>
                                    <th class="py-3 px-6 font-semibold hidden md:table-cell">DESCRIPCIÓN</th>
                                    <th class="py-3 px-6 font-semibold">URL</th>
                                    <th class="py-3 px-6 font-semibold">ESTADO</th>
                                    <th class="py-3 px-6 font-semibold text-center">ACCIONES</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700 text-sm" id="aiToolsTableBody">
                                </tbody>
                        </table>
                    </div>

                </div>
            </section>
        </div>
    </main>
</div>

<div id="addAiToolPanel" class="fixed inset-y-0 right-0 w-full md:w-1/2 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
    <div class="p-8 flex flex-col h-full">
        <div class="flex justify-between items-center mb-6 flex-shrink-0">
            <h3 class="text-2xl font-bold text-[var(--color-primary)]">AGREGAR NUEVA HERRAMIENTA IA</h3>
            <button onclick="closePanel('addAiToolPanel')" class="text-gray-400 hover:text-gray-600"><i data-lucide="x" class="w-6 h-6"></i></button>
        </div>
        <form id="add-ai-tool-form" class="flex-grow overflow-y-auto pr-2 -mr-2">
            <div class="grid grid-cols-1 gap-x-6 gap-y-4">
                <div>
                    <label for="ai-tool-name" class="block text-gray-700 text-sm font-bold mb-2 uppercase">NOMBRE DE LA HERRAMIENTA</label>
                    <input type="text" id="ai-tool-name" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="Ej. Generador de Textos IA" required>
                </div>
                <div>
                    <label for="ai-tool-url" class="block text-gray-700 text-sm font-bold mb-2 uppercase">URL DE LA HERRAMIENTA</label>
                    <input type="url" id="ai-tool-url" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="http://ia-tool.com" required>
                </div>
                <div>
                    <label for="ai-tool-description" class="block text-gray-700 text-sm font-bold mb-2 uppercase">DESCRIPCIÓN</label>
                    <textarea id="ai-tool-description" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="Describe la funcionalidad de la herramienta de IA"></textarea>
                </div>
                <div class="flex items-center pt-2">
                    <input type="checkbox" id="ai-tool-enabled" class="h-5 w-5 text-[var(--color-primary)] focus:ring-[var(--color-highlight)] border-gray-300 rounded mr-2" checked>
                    <label for="ai-tool-enabled" class="text-gray-700 text-sm font-bold uppercase">HABILITAR HERRAMIENTA</label>
                </div>
            </div>
            <div class="h-4"></div>
        </form>
        <div class="flex justify-end space-x-4 pt-6 flex-shrink-0">
            <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg uppercase" onclick="closePanel('addAiToolPanel')">CANCELAR</button>
            <button type="submit" form="add-ai-tool-form" class="btn-secondary font-bold py-2 px-4 rounded-lg uppercase">GUARDAR HERRAMIENTA IA</button>
        </div>
    </div>
</div>

<div id="confirmDeleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center hidden z-50">
    <div class="bg-white p-8 rounded-xl shadow-2xl w-full max-w-sm m-4 transform transition-all duration-300 scale-95 opacity-0 text-center">
        <div class="flex justify-center mb-4">
            <i data-lucide="alert-triangle" class="w-16 h-16 text-red-500"></i>
        </div>
        <h3 class="text-2xl font-bold text-[var(--color-primary)] mb-4 uppercase">CONFIRMAR ELIMINACIÓN</h3>
        <p class="text-gray-700 mb-6 uppercase">¿ESTÁS SEGURO DE QUE DESEAS ELIMINAR ESTE <span id="confirm-item-type" class="font-semibold">ELEMENTO</span>? ESTA ACCIÓN NO SE PUEDE DESHACER.</p>
        <div class="flex justify-center space-x-4">
            <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg uppercase" onclick="closeModal('confirmDeleteModal')">CANCELAR</button>
            <button type="button" class="btn-secondary font-bold py-2 px-4 rounded-lg uppercase" id="confirm-delete-button">CONFIRMAR</button>
        </div>
    </div>
</div>

<div id="viewAiToolPanel" class="fixed inset-y-0 right-0 w-full md:w-1/2 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
    <div class="p-8 flex flex-col h-full">
        <div class="flex justify-between items-center mb-6 flex-shrink-0">
            <h3 class="text-2xl font-bold text-[var(--color-primary)]">DETALLE DE LA HERRAMIENTA IA</h3>
            <button onclick="closePanel('viewAiToolPanel')" class="text-gray-400 hover:text-gray-600"><i data-lucide="x" class="w-6 h-6"></i></button>
        </div>
        <form id="view-ai-tool-form" class="flex-grow overflow-y-auto pr-2 -mr-2">
            <input type="hidden" id="view-ai-tool-id">
            <div class="grid grid-cols-1 gap-x-6 gap-y-4">
                <div>
                    <label for="view-ai-tool-name" class="block text-gray-700 text-sm font-bold mb-2 uppercase">NOMBRE DE LA HERRAMIENTA</label>
                    <input type="text" id="view-ai-tool-name" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="Nombre de la Herramienta">
                </div>
                <div>
                    <label for="view-ai-tool-url" class="block text-gray-700 text-sm font-bold mb-2 uppercase">URL DE LA HERRAMIENTA</label>
                    <input type="url" id="view-ai-tool-url" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="http://ia-tool.com">
                </div>
                <div>
                    <label for="view-ai-tool-description" class="block text-gray-700 text-sm font-bold mb-2 uppercase">DESCRIPCIÓN</label>
                    <textarea id="view-ai-tool-description" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-highlight)]" placeholder="Descripción de la funcionalidad"></textarea>
                </div>
                <div class="flex items-center pt-2">
                    <input type="checkbox" id="view-ai-tool-enabled" class="h-5 w-5 text-[var(--color-primary)] focus:ring-[var(--color-highlight)] border-gray-300 rounded mr-2">
                    <label for="view-ai-tool-enabled" class="text-gray-700 text-sm font-bold uppercase">HABILITAR HERRAMIENTA</label>
                </div>
            </div>
            <div class="h-4"></div>
        </form>
        <div class="flex justify-end space-x-4 pt-4 border-t border-gray-200 mt-6 flex-shrink-0">
            <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg uppercase" onclick="closePanel('viewAiToolPanel')">CANCELAR</button>
            <button type="submit" form="view-ai-tool-form" class="btn-primary font-bold py-2 px-4 rounded-lg uppercase">GUARDAR CAMBIOS</button>
        </div>
    </div>
</div>

<script>
// Variable global para almacenar las herramientas IA cargadas desde PHP
// Se usa una IIFE (Immediately Invoked Function Expression) con try-catch para un parseo seguro.
let aiToolsActuales = (function() {
    try {
        const data = <?php echo $ai_tools_json; ?>;
        // Asegúrate de que los datos sean un objeto, no un array vacío ni nulo.
        return (typeof data === 'object' && data !== null && !Array.isArray(data)) ? data : {};
    } catch (e) {
        console.error("Error al parsear ai_tools_json:", e);
        return {}; // Devuelve un objeto vacío en caso de error
    }
})();

// El contador de nuevas herramientas IA este mes ya viene de PHP, lo asignamos directamente.
// NOTA: En la lógica de JS, este contador se recalculará dinámicamente.
let newAiToolsThisMonthCount = <?php echo $new_ai_tools_this_month_json; ?>;


document.addEventListener('DOMContentLoaded', function() {
    // --- CONSOLE.LOGS PARA DEPURACIÓN (visible en la consola del navegador) ---
    console.log("--- Depuración de ia-marketing.php ---");
    console.log("aiToolsActuales (datos de herramientas IA de la DB al cargar PHP):", aiToolsActuales);
    console.log("newAiToolsThisMonthCount (contador mensual desde PHP):", newAiToolsThisMonthCount);
    // --- FIN CONSOLE.LOGS PARA DEPURACIÓN ---


    // --- VARIABLES DOM LOCALES (Elementos HTML que el JS necesita manipular) ---
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const sidebar = document.getElementById('sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');
    const sidebarCloseBtn = document.getElementById('sidebarCloseBtn'); // Botón de cierre explícito del sidebar
    
    // Herramientas IA
    const aiToolSearch = document.getElementById('ai-tool-search');
    const aiToolGridView = document.getElementById('ai-tool-grid-view');
    const aiToolListView = document.getElementById('ai-tool-list-view');
    const aiToolsTableBody = document.getElementById('aiToolsTableBody');
    const gridViewBtn = document.getElementById('grid-view-btn');
    const listViewBtn = document.getElementById('list-view-btn');
    // ELIMINADO: const downloadAiToolsBtn = document.getElementById('download-ai-tools-btn');
    const addAiToolForm = document.getElementById('add-ai-tool-form');
    const viewAiToolForm = document.getElementById('view-ai-tool-form');
    const totalAiToolsCountElement = document.getElementById('total-ai-tools-count');
    const newAiToolsThisMonthCountElement = document.getElementById('new-ai-tools-this-month-count');
    // **IMPORTANTE**: Asegúrate que este ID 'addAiToolBtn' esté en tu HTML para el botón de "Agregar Herramienta IA"
    const addAiToolBtn = document.getElementById('addAiToolBtn'); 

    // Referencias para checkboxes de habilitar
    const addAiToolEnabledCheckbox = document.getElementById('ai-tool-enabled');
    const viewAiToolEnabledCheckbox = document.getElementById('view-ai-tool-enabled');

    // Modales de confirmación (compartidos)
    const confirmDeleteModal = document.getElementById('confirmDeleteModal');
    const confirmDeleteButton = document.getElementById('confirm-delete-button');
    const confirmItemTypeSpan = document.getElementById('confirm-item-type');


    // Variable para controlar la vista actual de las herramientas IA (cuadrícula por defecto)
    let currentAiToolView = 'grid'; 
    
    // Elemento de overlay para los paneles laterales (creado dinámicamente si no existe)
    // Esto es para el fondo oscuro semitransparente cuando se abre un panel lateral.
    let panelOverlay = document.getElementById('panel-overlay');
    if (!panelOverlay) {
        panelOverlay = document.createElement('div');
        panelOverlay.id = 'panel-overlay';
        panelOverlay.className = 'fixed inset-0 bg-black bg-opacity-50 z-40 hidden';
        document.body.appendChild(panelOverlay);
    }


    // --- FUNCIONES HELPER GLOBALES (acciones comunes que pueden ser llamadas desde cualquier parte) ---

    // Muestra una notificación temporal en la pantalla (como un "toast")
    window.showCustomNotification = function(message, type = 'info', duration = 3000) {
        const toast = document.getElementById('toastNotification');
        const toastMessage = document.getElementById('toastMessage');
        const toastIcon = document.getElementById('toastIcon');
        const toastCloseBtn = document.getElementById('toastCloseBtn');
        let toastTimeout;

        // Si los elementos del toast no existen, imprime un mensaje en consola y no hace nada
        if (!toast || !toastMessage || !toastIcon || !toastCloseBtn) {
            console.warn(`[NOTIFICACION - FALLBACK] Elementos de toast no encontrados. Mensaje: ${type.toUpperCase()}: ${message}`);
            return;
        }

        clearTimeout(toastTimeout); // Limpia cualquier notificación anterior
        // Limpiar clases de tipo anteriores para aplicar la nueva
        toast.classList.remove('success', 'error', 'info');
        toastIcon.classList.remove('fa-check-circle', 'fa-exclamation-circle', 'fa-info-circle');
        toast.className = 'toast-notification'; // Restablecer a la clase base

        toastMessage.textContent = message; // Establece el mensaje
        toast.classList.add(type); // Añade la clase de estilo (success, error, info)
        
        // Define el ícono basado en el tipo de notificación
        if (type === 'success') {
            toastIcon.classList.add('fa-check-circle');
        } else if (type === 'error') {
            toastIcon.classList.add('fa-exclamation-circle');
        } else {
            toastIcon.classList.add('fa-info-circle'); 
        }

        toast.classList.add('show'); // Muestra el toast
        // Configura un temporizador para ocultar el toast después de 'duration' milisegundos
        toastTimeout = setTimeout(() => {
            toast.classList.remove('show');
        }, duration);

        // Permite cerrar el toast manualmente
        toastCloseBtn.onclick = () => {
            clearTimeout(toastTimeout);
            toast.classList.remove('show');
        };

        console.log(`[NOTIFICACION - ${type.toUpperCase()}] ${message}`);
    };

    // Abre un panel lateral deslizante (como los de añadir/editar)
    window.openPanel = function(panelId) {
        const panel = document.getElementById(panelId);
        if (!panel) { console.error(`Error: Panel con ID "${panelId}" no encontrado.`); return; }
        panel.classList.remove('translate-x-full'); // Mueve el panel para que sea visible
        panelOverlay.classList.remove('hidden');    // Muestra el overlay oscuro
        console.log(`[ia-marketing.php] Panel ${panelId} abierto.`);
        
        // Lógica específica para restablecer formularios al abrir
        if (panelId === 'addAiToolPanel') {
            addAiToolForm.reset(); // Limpia el formulario
            addAiToolEnabledCheckbox.checked = true; // Por defecto: herramienta habilitada
        } 
        // No es necesario manejar viewAiToolPanel aquí, openViewAiToolModal ya lo llena
    };

    // Cierra un panel lateral deslizante
    window.closePanel = function(panelId) {
        const panel = document.getElementById(panelId);
        if (!panel) { console.error(`Error: Panel con ID "${panelId}" no encontrado para cerrar.`); return; }
        panel.classList.add('translate-x-full'); // Esconde el panel
        panelOverlay.classList.add('hidden');    // Esconde el overlay
        console.log(`[ia-marketing.php] Panel ${panelId} cerrado.`);
    };

    // Abre un modal (ventana emergente, como la de confirmación de eliminación)
    window.openModal = function(modalId) {
        const modal = document.getElementById(modalId);
        if (!modal) { console.error(`Error: Modal con ID "${modalId}" no encontrado.`); return; }
        const modalBox = modal.querySelector('div:first-of-type'); // El contenido real del modal
        modal.classList.remove('hidden'); // Muestra el modal
        // Pequeño retardo para la animación de entrada
        setTimeout(() => { 
            if (modalBox) modalBox.classList.remove('scale-95', 'opacity-0'); 
        }, 50);
        console.log(`[ia-marketing.php] Modal ${modalId} abierto.`);
        lucide.createIcons({ container: modal }); // Asegura que los íconos del modal se muestren
    };

    // Cierra un modal
    window.closeModal = function(modalId) {
        const modal = document.getElementById(modalId);
        if (!modal) { console.error(`Error: Modal con ID "${modalId}" no encontrado para cerrar.`); return; }
        const modalBox = modal.querySelector('div:first-of-type');
        if (modalBox) modalBox.classList.add('scale-95', 'opacity-0'); // Inicia la animación de salida
        // Oculta el modal después de la animación
        setTimeout(() => { modal.classList.add('hidden'); }, 300);
        console.log(`[ia-marketing.php] Modal ${modalId} cerrado.`);
    };
    
    // Prepara y abre el modal de confirmación de eliminación para un elemento específico
    window.openConfirmDeleteModal = function(itemId, itemType) {
        if (!confirmDeleteButton || !confirmItemTypeSpan) { console.error("Error: Elementos del modal de confirmación de eliminación no encontrados."); return; }
        confirmDeleteButton.dataset.itemId = itemId; // Guarda el ID del elemento a eliminar
        confirmDeleteButton.dataset.itemType = itemType; // Guarda el tipo (herramienta IA)
        confirmItemTypeSpan.textContent = itemType.toUpperCase(); // Muestra el tipo en el mensaje
        openModal('confirmDeleteModal'); // Abre el modal
    };

    // ELIMINADO: Función descargarComoCSV ya no es necesaria
    /*
    function descargarComoCSV(dataObject, filename) {
        const data = Object.values(dataObject);
        if (data.length === 0) { showCustomNotification('No hay datos para descargar.', 'info'); return; }
        const escapeCSV = (value) => {
            if (value === null || value === undefined) { return ''; }
            value = String(value);
            if (value.search(/("|,|\n)/g) >= 0) { return `"${value.replace(/"/g, '""')}"`; }
            return value;
        };
        const headers = ['db_id', 'name', 'description', 'url', 'enabled', 'created_at']; 
        const csvRows = [headers.map(h => escapeCSV(h.replace(/_/g, ' ').toUpperCase())).join(',')];
        data.forEach(item => {
            const values = headers.map(header => escapeCSV(item[header]));
            csvRows.push(values.join(','));
        });
        const csvContent = csvRows.join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        if (link.download !== undefined) {
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url); 
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden'; 
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            showCustomNotification('CSV generado y descargado.', 'success');
        } else {
            showCustomNotification('Tu navegador no soporta la descarga directa de archivos.', 'error');
        }
    }
    */

    // Abre el panel de Ver/Editar Herramienta IA
    window.openViewAiToolModal = function(aiToolId) {
        const aiTool = aiToolsActuales[aiToolId];
        if (!aiTool) { console.error('Herramienta IA no encontrada:', aiToolId); return; }
        
        // Rellena los campos del formulario con los datos de la herramienta IA
        document.getElementById('view-ai-tool-id').value = aiTool.db_id;
        document.getElementById('view-ai-tool-name').value = aiTool.name;
        document.getElementById('view-ai-tool-url').value = aiTool.url;
        document.getElementById('view-ai-tool-description').value = aiTool.description || '';
        document.getElementById('view-ai-tool-enabled').checked = aiTool.enabled; // Establecer estado del checkbox

        openPanel('viewAiToolPanel'); // Abre el panel
    };

    // Setup de listeners para botones de eliminar
    function setupDeleteListeners() {
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.removeEventListener('click', handleDeleteButtonClick); // Previene múltiples listeners
            button.addEventListener('click', handleDeleteButtonClick);
        });
    }
    function handleDeleteButtonClick(e) {
        e.stopPropagation(); // Evita que el clic se propague
        const itemId = this.dataset.itemId; // Obtiene el ID del elemento a eliminar
        const itemType = this.dataset.itemType; // Obtiene el tipo de elemento (herramienta IA)
        openConfirmDeleteModal(itemId, itemType); // Abre el modal de confirmación
    }

    // Setup de listeners para botones de ver/editar
    function setupEditListeners() {
        document.querySelectorAll('.edit-ai-tool-btn').forEach(button => {
            button.removeEventListener('click', handleEditAiToolButtonClick); // Previene múltiples listeners
            button.addEventListener('click', handleEditAiToolButtonClick);
        });
    }
    function handleEditAiToolButtonClick(e) {
        e.stopPropagation(); // Evita que el clic se propague
        const aiToolId = this.dataset.aiToolId;
        openViewAiToolModal(aiToolId); // Abre el panel de edición de la herramienta IA
    }
    
    // Función para actualizar el conteo total de herramientas IA en el dashboard
    function updateTotalAiToolsDisplay() {
        if (totalAiToolsCountElement) {
            const total = Object.keys(aiToolsActuales).length;
            totalAiToolsCountElement.textContent = total.toString();
        }
    }

    // Función para actualizar el contador de herramientas IA nuevas este mes en el dashboard
    function updateNewAiToolsThisMonthDisplay() {
        if (newAiToolsThisMonthCountElement) {
            // Recalcula el contador real en lugar de usar el dummy de PHP
            let newThisMonth = 0;
            const currentMonth = new Date().getMonth();
            const currentYear = new Date().getFullYear();
            Object.values(aiToolsActuales).forEach(tool => {
                if (tool.created_at) {
                    const createdAt = new Date(tool.created_at);
                    if (createdAt.getFullYear() === currentYear && createdAt.getMonth() === currentMonth) {
                        newThisMonth++;
                    }
                }
            });
            newAiToolsThisMonthCountElement.textContent = newThisMonth.toString();
        }
    }

    // Crea el HTML para una tarjeta de herramienta IA (vista de cuadrícula)
    function renderAiToolCard(aiTool) {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-xl shadow-md overflow-hidden flex flex-col border border-gray-200';
        card.dataset.aiToolId = aiTool.id;
        card.dataset.itemId = aiTool.id;

        // HTML para la etiqueta de estado (Habilitada/Deshabilitada)
        const statusTagHtml = aiTool.enabled ? 
            `<span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-semibold uppercase flex items-center gap-1"><i data-lucide="check-circle" class="w-3 h-3"></i> Habilitada</span>` :
            `<span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-semibold uppercase flex items-center gap-1"><i data-lucide="x-circle" class="w-3 h-3"></i> Deshabilitada</span>`;

        card.innerHTML = `
            <div class="bg-[var(--color-primary)] text-white p-4 flex items-center justify-between">
                <div class="flex items-center gap-2 flex-grow min-w-0">
                    <i data-lucide="bot" class="w-5 h-5 flex-shrink-0"></i>
                    <h3 class="font-bold text-lg uppercase truncate">${aiTool.name}</h3>
                </div>
                <div class="flex-shrink-0 ml-2">${statusTagHtml}</div>
            </div>
            <div class="p-4 flex-grow flex flex-col">
                <p class="text-gray-700 text-sm flex-grow mb-4 line-clamp-3">${aiTool.description || 'Sin descripción detallada.'}</p>
                <p class="text-gray-500 text-xs mt-auto">Agregado: <span class="font-semibold">${new Date(aiTool.created_at).toLocaleDateString()}</span></p>
            </div>
            <div class="bg-gray-100 p-3 flex justify-end space-x-3 border-t border-gray-200">
                <a href="${aiTool.url}" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-600 font-semibold py-2 px-4 rounded-lg text-sm uppercase inline-flex items-center justify-center gap-1">
                    <i data-lucide="external-link" class="w-4 h-4"></i> Ir
                </a>
                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg text-sm uppercase edit-ai-tool-btn" data-ai-tool-id="${aiTool.id}">EDITAR</button>
                <button class="p-2 bg-red-100 hover:bg-red-200 text-red-600 rounded-lg delete-btn" data-item-type="herramienta IA" data-item-id="${aiTool.id}" title="ELIMINAR HERRAMIENTA IA"><i data-lucide="trash-2" class="w-5 h-5"></i></button>
            </div>
        `;
        lucide.createIcons({ container: card }); // Renderiza los íconos de Lucide dentro de la tarjeta
        return card;
    }

    // Crea el HTML para una fila de tabla de herramienta IA (vista de lista)
    function renderAiToolTableRow(aiTool) {
        const row = document.createElement('tr');
        row.className = 'border-b border-gray-200 hover:bg-gray-50';
        // Asegúrate de que aiTool.id sea válido y se asigne correctamente
        row.dataset.aiToolId = aiTool.id || ''; // Fallback a cadena vacía si id no existe
        row.dataset.itemId = aiTool.id || ''; // Fallback a cadena vacía si id no existe

        const shortDescription = aiTool.description ? aiTool.description.substring(0, 70) + (aiTool.description.length > 70 ? '...' : '') : 'N/A';
        const statusText = aiTool.enabled ? 
            '<span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-semibold uppercase">Habilitada</span>' :
            '<span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-semibold uppercase">Deshabilitada</span>';

        // Asegúrate de que los atributos data-ai-tool-id y data-item-id se pasen siempre
        const editButtonHtml = aiTool.id ? `<button class="text-blue-600 hover:text-blue-800 mr-3 edit-ai-tool-btn" title="EDITAR HERRAMIENTA IA" data-ai-tool-id="${aiTool.id}"><i data-lucide="edit-2" class="w-5 h-5"></i></button>` : '';
        const deleteButtonHtml = aiTool.id ? `<button class="text-red-600 hover:text-red-800 delete-btn" data-item-type="herramienta IA" data-item-id="${aiTool.id}" title="ELIMINAR HERRAMIENTA IA"><i data-lucide="trash-2" class="w-5 h-5"></i></button>` : '';


        row.innerHTML = `
            <td class="py-4 px-6 whitespace-nowrap">
                <span class="text-blue-600 hover:text-blue-800 cursor-pointer font-semibold uppercase" onclick="openViewAiToolModal('${aiTool.id}')">${aiTool.name}</span>
            </td>
            <td class="py-4 px-6 hidden md:table-cell uppercase">${shortDescription}</td>
            <td class="py-4 px-6">
                <a href="${aiTool.url}" target="_blank" class="text-blue-500 hover:underline flex items-center gap-1">
                    <i data-lucide="external-link" class="w-4 h-4"></i> Enlace
                </a>
            </td>
            <td class="py-4 px-6 text-center">${statusText}</td>
            <td class="py-4 px-6 text-center">
                ${editButtonHtml}
                ${deleteButtonHtml}
            </td>
        `;
        lucide.createIcons({ container: row }); // Renderiza los íconos de Lucide dentro de la fila
        return row;
    }

    // Renderiza (dibuja) todas las herramientas IA en la vista seleccionada (cuadrícula o lista)
    function renderAiTools(viewType = currentAiToolView) {
        // Verifica que todos los elementos HTML necesarios existan antes de intentar manipularlos
        if (!aiToolGridView || !aiToolListView || !aiToolsTableBody || !aiToolSearch || !gridViewBtn || !listViewBtn) {
               console.error("[ia-marketing.php] ERROR: Elementos DOM de Herramientas IA no encontrados. Verifique los IDs de los elementos HTML."); return;
        }
        const searchTerm = aiToolSearch.value.toLowerCase(); // Obtiene el texto de búsqueda

        // Convierte el objeto de herramientas IA a un array para poder filtrarlo
        const allAiToolsArray = Object.values(aiToolsActuales);

        console.log("renderAiTools: aiToolsActuales antes de filtrar:", allAiToolsArray); // Depuración

        // Filtra las herramientas IA según el término de búsqueda
        const filteredAiTools = allAiToolsArray.filter(t => {
            const matchesSearch = searchTerm === '' || 
                                    (t.name && t.name.toLowerCase().includes(searchTerm)) || 
                                    (t.description && t.description.toLowerCase().includes(searchTerm)) || 
                                    (t.url && t.url.toLowerCase().includes(searchTerm));
            return matchesSearch;
        });

        console.log("renderAiTools: herramientas IA filtradas:", filteredAiTools); // Depuración


        aiToolGridView.innerHTML = ''; // Limpia la vista de cuadrícula
        aiToolsTableBody.innerHTML = ''; // Limpia la tabla

        if (filteredAiTools.length === 0) {
            // Muestra un mensaje si no se encuentran herramientas IA
            const message = `<p class="text-gray-500 md:col-span-2 lg:col-span-3 text-center uppercase">NO SE ENCONTRARON HERRAMIENTAS IA.</p>`;
            if (viewType === 'grid') {
                aiToolGridView.innerHTML = message;
            } else {
                aiToolsTableBody.innerHTML = `<tr><td colspan="5" class="py-4 px-6 text-center text-gray-500 uppercase">NO SE ENCONTRARON HERRAMIENTAS IA.</td></tr>`;
            }
        } else {
            // Renderiza las herramientas IA en la vista seleccionada
            if (viewType === 'grid') {
                filteredAiTools.forEach(aiTool => aiToolGridView.appendChild(renderAiToolCard(aiTool)));
            } else {
                filteredAiTools.forEach(aiTool => aiToolsTableBody.appendChild(renderAiToolTableRow(aiTool)));
            }
        }

        // Corrige la visibilidad de las vistas y el estado activo de los botones
        if (viewType === 'grid') {
            aiToolGridView.classList.remove('hidden');
            aiToolListView.classList.add('hidden');
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
        } else { // viewType === 'list'
            aiToolGridView.classList.add('hidden');
            aiToolListView.classList.remove('hidden');
            gridViewBtn.classList.remove('active');
            listViewBtn.classList.add('active');
        }


        // Vuelve a configurar los listeners para los botones de eliminar y editar (necesario después de cada renderizado)
        setupDeleteListeners();
        setupEditListeners();
        // Los iconos de Lucide ya se crean dentro de renderAiToolCard/renderAiToolTableRow
    }
    
    // Funciones de formato de teléfono (no usadas en esta página, pero mantenidas para consistencia)
    function formatPhoneNumber(value) {
        if (!value) return '';
        const cleaned = ('' + value).replace(/\D/g, '');    
        const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
        if (match) {
            return `(${match[1]}) ${match[2]}-${match[3]}`;
        }
        return cleaned;    
    }

    function applyInputPhoneFormat(inputElement) {
        if (!inputElement) return;
        inputElement.value = formatPhoneNumber(inputElement.value);
        inputElement.addEventListener('input', (e) => {
            let value = e.target.value.replace(/\D/g, '');    
            e.target.value = formatPhoneNumber(value);
        });
        inputElement.addEventListener('blur', (e) => {
            e.target.value = formatPhoneNumber(e.target.value);
        });
    }

    function applyPhoneFormatToInputs() {
        // No hay campos de teléfono en esta página.
    }


    // --- INICIALIZACIÓN DE LA PÁGINA ---
    // Esta es la función principal que se ejecuta una vez que el DOM está completamente cargado.

    // 1. Mostrar notificación PHP si existe
    const phpNotificationMessage = "<?php echo addslashes($notification_message); ?>";
    const phpNotificationType = "<?php echo addslashes($notification_type); ?>";
    if (phpNotificationMessage) {
        showCustomNotification(phpNotificationMessage, phpNotificationType);
    }

    // 2. Configurar eventos de la barra lateral (menú móvil)
    if (mobileMenuButton) {
        // Asegúrate de que `toggleSidebar` esté definido en `files/header-manager.js`
        mobileMenuButton.addEventListener('click', typeof toggleSidebar === 'function' ? toggleSidebar : () => console.error('toggleSidebar function not found'));
    }

    // Cierra paneles y overlay si se hace clic en el overlay del sidebar (para móviles)
    if (sidebarOverlay) {
        sidebarOverlay.addEventListener('click', () => {
            if (typeof toggleSidebar === 'function') toggleSidebar();
            closePanel('addAiToolPanel'); 
            closePanel('viewAiToolPanel');
        });
    }
    // Este listener en panelOverlay es crucial para cerrar los paneles laterales cuando se hace clic fuera de ellos
    if (panelOverlay) {
        panelOverlay.addEventListener('click', () => {    
            closePanel('addAiToolPanel');
            closePanel('viewAiToolPanel');
        });
    }
    if (sidebarCloseBtn) {
        if (typeof toggleSidebar === 'function') sidebarCloseBtn.addEventListener('click', toggleSidebar);
    }
    
    // Define `toggleSidebar` si no existe en `header-manager.js` (para evitar errores si no está cargada)
    if (typeof window.toggleSidebar === 'undefined') {
        window.toggleSidebar = function() {
            const sidebarElement = document.getElementById('sidebar');
            const sidebarOverlayElement = document.getElementById('sidebar-overlay');
            if (sidebarElement && sidebarOverlayElement) {
                sidebarElement.classList.toggle('-translate-x-full');
                sidebarOverlayElement.classList.toggle('hidden');
            }
        };
    }


    // --- HERRAMIENTAS IA: Lógica de inicialización y eventos ---
    updateTotalAiToolsDisplay(); // Actualiza el conteo total de herramientas IA al cargar la página
    updateNewAiToolsThisMonthDisplay(); // Actualiza el contador de herramientas IA nuevas este mes
    renderAiTools(currentAiToolView); // Renderiza las herramientas IA inicialmente en la vista de cuadrícula
    console.log("[ia-marketing.php] Herramientas IA renderizadas.");

    // Evento de búsqueda para herramientas IA
    if (aiToolSearch) aiToolSearch.addEventListener('input', () => renderAiTools(currentAiToolView));

    // ELIMINADO: Lógica para el botón de descarga CSV
    /*
    if(downloadAiToolsBtn) {
        downloadAiToolsBtn.addEventListener('click', () => {
            descargarComoCSV(aiToolsActuales, 'catalogo_herramientas_ia.csv');
        });
    }
    */
    
    // Lógica para el botón de confirmación de eliminación (compartido para herramientas IA)
    if (confirmDeleteButton) {
        confirmDeleteButton.addEventListener('click', function() {
            const itemId = this.dataset.itemId;
            const itemType = this.dataset.itemType; // 'herramienta IA'
            
            if (itemType === 'herramienta IA') {
                if (aiToolsActuales[itemId]) { 
                    // Simulamos que la eliminación fue exitosa
                    const data = { success: true, message: "Herramienta IA eliminada simuladamente." };
                    if (data.success) {
                        closeModal('confirmDeleteModal');
                        showCustomNotification('Herramienta IA eliminada con éxito (simulado).', 'success');
                        delete aiToolsActuales[itemId]; // Elimina la herramienta IA del objeto de datos
                        updateTotalAiToolsDisplay(); // Actualiza el contador total
                        updateNewAiToolsThisMonthDisplay(); // Actualiza el contador mensual
                        renderAiTools(currentAiToolView); // Vuelve a dibujar la lista de herramientas IA
                    } else {
                        showCustomNotification('Error al eliminar herramienta IA (simulado): ' + data.message, 'error');
                    }
                } else {
                    showCustomNotification('Error: Herramienta IA no encontrada para eliminar (simulado).', 'error');
                }
            }
        });
    }

    // Manejo de clics para los botones de vista (cuadrícula/lista) para herramientas IA
    if (gridViewBtn) {
        gridViewBtn.addEventListener('click', () => {
            currentAiToolView = 'grid';
            renderAiTools('grid');
        });
    }
    if (listViewBtn) {
        listViewBtn.addEventListener('click', () => {
            currentAiToolView = 'list';
            renderAiTools('list');
        });
    }

    // Lógica para el formulario de añadir nuevas herramientas IA
    if (addAiToolForm) {
        addAiToolForm.addEventListener('submit', async function(e) {    
            e.preventDefault(); // Previene el envío del formulario tradicional
            const aiToolData = {
                name: document.getElementById('ai-tool-name').value,
                url: document.getElementById('ai-tool-url').value,
                description: document.getElementById('ai-tool-description').value,
                enabled: addAiToolEnabledCheckbox.checked // Obtiene el valor del checkbox
            };

            try {    
                // Generar un ID único para la nueva herramienta IA simulada
                const currentAiToolValues = Object.values(aiToolsActuales);
                // Si no hay herramientas, empieza en 0 para que Math.max funcione. Luego +1.
                const currentAiToolIds = currentAiToolValues.length > 0 ? currentAiToolValues.map(t => parseInt(t.id.replace('ai-tool-', '')) || 0) : [0];
                const newIdNumeric = Math.max(...currentAiToolIds) + 1; // Encuentra el ID numérico más alto y le suma 1
                const newId = 'ai-tool-' + newIdNumeric; // El ID de string para usar como clave en el objeto JS

                // Simulación de respuesta de éxito del "servidor"
                const data = {    
                    success: true,    
                    message: "Herramienta IA agregada simuladamente.",
                    tool: { // Simula la herramienta que devolvería el backend
                        id: newIdNumeric, // Esto simula el ID que la base de datos daría
                        name: aiToolData.name,
                        url: aiToolData.url,
                        description: aiToolData.description,
                        enabled: aiToolData.enabled,
                        created_at: new Date().toISOString().slice(0, 19).replace('T', ' ') // Fecha actual
                    }
                };

                if (data.success) {
                    closePanel('addAiToolPanel'); // Cierra el panel
                    addAiToolForm.reset(); // Limpia el formulario
                    showCustomNotification('Herramienta IA agregada con éxito (simulado).', 'success');
                    // Añade la nueva herramienta IA a nuestro objeto de datos simulados
                    aiToolsActuales[newId] = {    
                        id: newId, // El ID de string
                        db_id: data.tool.id, // El ID numérico simulado
                        name: data.tool.name,
                        description: data.tool.description,
                        url: data.tool.url,
                        enabled: data.tool.enabled,
                        created_at: data.tool.created_at
                    };
                    updateTotalAiToolsDisplay(); // Actualiza los contadores
                    updateNewAiToolsThisMonthDisplay(); // Actualiza el contador mensual
                    renderAiTools(currentAiToolView); // Vuelve a dibujar las herramientas IA para mostrar la nueva
                } else {
                    showCustomNotification('Error al agregar herramienta IA (simulado): ' + (data.message || 'Error desconocido.'), 'error');
                }
            } catch (error) {
                showCustomNotification('Error de conexión al agregar la herramienta IA (simulado).', 'error');
                console.error('Create AI Tool error (simulado):', error);
            }
        });
    }

    // Lógica para el formulario de ver/editar herramientas IA
    if (viewAiToolForm) {
        viewAiToolForm.addEventListener('submit', async function(e) {    
            e.preventDefault(); // Previene el envío del formulario tradicional
            const aiToolData = {
                id: document.getElementById('view-ai-tool-id').value, // Esto es el `db_id` numérico
                name: document.getElementById('view-ai-tool-name').value,
                url: document.getElementById('view-ai-tool-url').value,
                description: document.getElementById('view-ai-tool-description').value,
                enabled: viewAiToolEnabledCheckbox.checked // Obtiene el valor del checkbox
            };
            
            try {    
                // Encontrar el ID de string (ej. 'ai-tool-1') que corresponde al db_id
                let internalIdToUpdate = null;
                for (const key in aiToolsActuales) {
                    if (aiToolsActuales[key].db_id == aiToolData.id) {
                        internalIdToUpdate = key;
                        break;
                    }
                }

                if (!internalIdToUpdate) {
                    showCustomNotification('Error: Herramienta IA no encontrada para actualizar (simulado).', 'error');
                    console.error('Update AI Tool error (simulado): Internal ID not found for db_id', aiToolData.id);
                    return;
                }

                // Simulación de respuesta de éxito del "servidor"
                const data = {    
                    success: true,    
                    message: "Cambios guardados simuladamente.",
                    tool: { // Simula la herramienta actualizada
                        id: aiToolData.id, // El db_id que se "envió"
                        name: aiToolData.name,
                        url: aiToolData.url,
                        description: aiToolData.description,
                        enabled: aiToolData.enabled,
                        // Mantenemos la fecha de creación original para la simulación
                        created_at: aiToolsActuales[internalIdToUpdate].created_at    
                    }
                };

                if (data.success) {
                    closePanel('viewAiToolPanel'); // Cierra el panel
                    showCustomNotification('Cambios guardados con éxito (simulado).', 'success');
                    // Actualiza la herramienta IA en nuestro objeto de datos simulados
                    if (aiToolsActuales[internalIdToUpdate]) {
                        aiToolsActuales[internalIdToUpdate] = {
                            id: internalIdToUpdate, // Mantener el ID interno
                            db_id: data.tool.id, // Actualizar el db_id
                            name: data.tool.name,
                            description: data.tool.description,
                            url: data.tool.url,
                            enabled: data.tool.enabled,
                            created_at: data.tool.created_at
                        };
                    }
                    renderAiTools(currentAiToolView); // Vuelve a dibujar las herramientas IA para mostrar los cambios
                } else {
                    showCustomNotification('Error al guardar cambios (simulado): ' + (data.message || 'Error desconocido.'), 'error');
                }
            } catch (error) {
                showCustomNotification('Error de conexión al guardar los cambios (simulado).', 'error');
                console.error('Update AI Tool error (simulado):', error);
            }
        });
    }

    // Listener para el botón "Agregar Herramienta IA"
    if (addAiToolBtn) {
        addAiToolBtn.addEventListener('click', () => {
            openPanel('addAiToolPanel');
        });
    }
    
    // Renderiza todos los íconos de Lucide estáticos al final de la carga del DOM
    lucide.createIcons();
});
</script>
</body>
</html>