@extends('layouts.goberdata')

@section('title', 'Auditoría Global')
@section('page_title', 'Auditoría Global')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<div id="app" class="min-h-screen">
        <!-- Sidebar -->
<div class="flex flex-col">
            <!-- Header -->
            <header class="flex justify-between items-center p-6 gd-header shadow-sm">
                <div class="flex items-center space-x-4">
                    <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-slate-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🔍 Auditoría Global
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Super Admin</span>
                    <i class="fas fa-user-circle text-white text-2xl"></i>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
                    <!-- Estadísticas Globales -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <p class="text-gray-500 text-sm">Total Logs</p>
                            <p id="statTotal" class="text-3xl font-bold text-purple-600">0</p>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <p class="text-gray-500 text-sm">Hoy</p>
                            <p id="statToday" class="text-3xl font-bold text-green-600">0</p>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <p class="text-gray-500 text-sm">Usuarios Activos</p>
                            <p id="statUsers" class="text-3xl font-bold text-blue-600">0</p>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <p class="text-gray-500 text-sm">Campañas</p>
                            <p id="statCampaigns" class="text-3xl font-bold text-orange-600">0</p>
                        </div>
                    </div>

        <!-- Filtros -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
            <h3 class="text-lg font-bold mb-4">🔍 Filtros de Auditoría</h3>
            <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Acción</label>
                    <select id="filterAction" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Todas las acciones</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Modelo</label>
                    <select id="filterModel" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Todos los modelos</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Campaña</label>
                    <select id="filterCampaign" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Todas las campañas</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Usuario</label>
                    <select id="filterUser" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <option value="">Todos los usuarios</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Desde</label>
                    <input type="date" id="filterDateFrom" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Hasta</label>
                    <input type="date" id="filterDateTo" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
            </div>
            <div class="mt-4 flex gap-2">
                <button onclick="applyFilters()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700">
                    <i class="fas fa-search mr-2"></i> Aplicar Filtros
                </button>
                <button onclick="clearFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                    <i class="fas fa-times mr-2"></i> Limpiar
                </button>
                <button onclick="exportLogs()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                    <i class="fas fa-download mr-2"></i> Exportar CSV
                </button>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">📊 Actividad por Día (30 días)</h3>
                <div style="height: 300px;">
                    <canvas id="chartByDay"></canvas>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">⏰ Actividad por Hora (24h)</h3>
                <div style="height: 300px;">
                    <canvas id="chartByHour"></canvas>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">🎯 Acciones Más Comunes</h3>
                <div style="height: 300px;">
                    <canvas id="chartActions"></canvas>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">📋 Modelos Más Auditados</h3>
                <div style="height: 300px;">
                    <canvas id="chartModels"></canvas>
                </div>
            </div>
        </div>

        <!-- Tabla de Logs -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">📋 Logs de Auditoría</h3>
                <div class="flex gap-2">
                    <select id="perPage" class="border border-gray-300 rounded-lg px-3 py-2">
                        <option value="25">25 por página</option>
                        <option value="50" selected>50 por página</option>
                        <option value="100">100 por página</option>
                    </select>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="px-4 py-2 text-left">ID</th>
                            <th class="px-4 py-2 text-left">Usuario</th>
                            <th class="px-4 py-2 text-left">Campaña</th>
                            <th class="px-4 py-2 text-left">Acción</th>
                            <th class="px-4 py-2 text-left">Modelo</th>
                            <th class="px-4 py-2 text-left">IP</th>
                            <th class="px-4 py-2 text-left">Fecha</th>
                            <th class="px-4 py-2 text-left">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="logsTable">
                        <!-- Se llenará dinámicamente -->
                    </tbody>
                </table>
            </div>
            <div id="pagination" class="mt-4 flex justify-center">
                <!-- Paginación -->
            </div>
        </div>
    </div>

    <!-- Modal de Detalles -->
    <div id="logModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-auto">
            <div class="px-6 py-4 border-b flex items-center justify-between bg-purple-50">
                <h3 class="text-xl font-bold text-purple-800">Detalles del Log de Auditoría</h3>
                <button onclick="closeLogModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            <div id="logDetails" class="p-6">
                <!-- Se llenará dinámicamente -->
            </div>
        </div>
    </div>

    
                </div>
            </main>
        </div>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) window.location.href = '/login';

        let currentPage = 1;
        let currentFilters = {};

        loadDashboard();
        loadFilters();

        async function loadDashboard() {
            try {
                const response = await fetch('/api/superadmin/audit/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                const data = await response.json();
                console.log('Audit Dashboard Data:', data);

                document.getElementById('statTotal').textContent = data.stats.total_logs.toLocaleString();
                document.getElementById('statToday').textContent = data.stats.today_logs.toLocaleString();
                document.getElementById('statUsers').textContent = data.stats.unique_users.toLocaleString();
                document.getElementById('statCampaigns').textContent = data.stats.unique_campaigns.toLocaleString();

                // Gráfico por día
                new Chart(document.getElementById('chartByDay'), {
                    type: 'line',
                    data: {
                        labels: data.activity_by_day.map(d => d.date),
                        datasets: [{
                            label: 'Logs',
                            data: data.activity_by_day.map(d => d.count),
                            borderColor: 'rgb(147, 51, 234)',
                            backgroundColor: 'rgba(147, 51, 234, 0.1)',
                            fill: true,
                            tension: 0.3
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // Gráfico por hora
                new Chart(document.getElementById('chartByHour'), {
                    type: 'bar',
                    data: {
                        labels: data.activity_by_hour.map(h => h.hour + ':00'),
                        datasets: [{
                            label: 'Logs',
                            data: data.activity_by_hour.map(h => h.count),
                            backgroundColor: 'rgba(34, 197, 94, 0.8)'
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // Gráfico de acciones
                new Chart(document.getElementById('chartActions'), {
                    type: 'doughnut',
                    data: {
                        labels: data.top_actions.map(a => a.action),
                        datasets: [{
                            data: data.top_actions.map(a => a.count),
                            backgroundColor: ['#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // Gráfico de modelos
                new Chart(document.getElementById('chartModels'), {
                    type: 'doughnut',
                    data: {
                        labels: data.top_models.map(m => m.model_type.split('\\').pop()),
                        datasets: [{
                            data: data.top_models.map(m => m.count),
                            backgroundColor: ['#f97316', '#84cc16', '#06b6d4', '#8b5cf6', '#ec4899']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

            } catch (err) {
                console.error('Error:', err);
            }
        }

        async function loadFilters() {
            try {
                const response = await fetch('/api/superadmin/audit/filters', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                const data = await response.json();

                // Llenar filtros
                const actionSelect = document.getElementById('filterAction');
                data.actions.forEach(action => {
                    const option = document.createElement('option');
                    option.value = action;
                    option.textContent = action;
                    actionSelect.appendChild(option);
                });

                const modelSelect = document.getElementById('filterModel');
                data.model_types.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model;
                    option.textContent = model.split('\\').pop();
                    modelSelect.appendChild(option);
                });

                const campaignSelect = document.getElementById('filterCampaign');
                data.campaigns.forEach(campaign => {
                    const option = document.createElement('option');
                    option.value = campaign.id;
                    option.textContent = campaign.name;
                    campaignSelect.appendChild(option);
                });

                const userSelect = document.getElementById('filterUser');
                data.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.name + ' (' + user.email + ')';
                    userSelect.appendChild(option);
                });

            } catch (err) {
                console.error('Error loading filters:', err);
            }
        }

        async function loadLogs() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    per_page: document.getElementById('perPage').value,
                    ...currentFilters
                });

                const response = await fetch(`/api/superadmin/audit/logs?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                const data = await response.json();

                const tbody = document.getElementById('logsTable');
                tbody.innerHTML = data.data.map(log => `
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-2">${log.id}</td>
                        <td class="px-4 py-2">${log.user ? log.user.name : 'N/A'}</td>
                        <td class="px-4 py-2">${log.campaign ? log.campaign.name : 'N/A'}</td>
                        <td class="px-4 py-2">
                            <span class="px-2 py-1 rounded text-xs ${getActionColor(log.action)}">${log.action}</span>
                        </td>
                        <td class="px-4 py-2">${log.model_type ? log.model_type.split('\\').pop() : 'N/A'}</td>
                        <td class="px-4 py-2">${log.ip_address || 'N/A'}</td>
                        <td class="px-4 py-2">${new Date(log.created_at).toLocaleString()}</td>
                        <td class="px-4 py-2">
                            <button onclick="viewLogDetails(${log.id})" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                `).join('');

                // Paginación
                updatePagination(data);

            } catch (err) {
                console.error('Error loading logs:', err);
            }
        }

        function getActionColor(action) {
            const colors = {
                'created': 'bg-green-100 text-green-800',
                'updated': 'bg-blue-100 text-blue-800',
                'deleted': 'bg-red-100 text-red-800',
                'login': 'bg-purple-100 text-purple-800',
                'logout': 'bg-gray-100 text-gray-800'
            };
            return colors[action] || 'bg-gray-100 text-gray-800';
        }

        function applyFilters() {
            currentFilters = {
                action: document.getElementById('filterAction').value,
                model_type: document.getElementById('filterModel').value,
                campaign_id: document.getElementById('filterCampaign').value,
                user_id: document.getElementById('filterUser').value,
                date_from: document.getElementById('filterDateFrom').value,
                date_to: document.getElementById('filterDateTo').value
            };

            // Remover filtros vacíos
            Object.keys(currentFilters).forEach(key => {
                if (!currentFilters[key]) delete currentFilters[key];
            });

            currentPage = 1;
            loadLogs();
        }

        function clearFilters() {
            document.getElementById('filterAction').value = '';
            document.getElementById('filterModel').value = '';
            document.getElementById('filterCampaign').value = '';
            document.getElementById('filterUser').value = '';
            document.getElementById('filterDateFrom').value = '';
            document.getElementById('filterDateTo').value = '';

            currentFilters = {};
            currentPage = 1;
            loadLogs();
        }

        async function exportLogs() {
            try {
                const params = new URLSearchParams(currentFilters);
                const response = await fetch(`/api/superadmin/audit/export?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                const data = await response.json();

                // Crear y descargar CSV
                const csvContent = data.data.map(row => row.join(',')).join('\n');
                const blob = new Blob([csvContent], { type: 'text/csv' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = data.filename;
                a.click();
                window.URL.revokeObjectURL(url);

            } catch (err) {
                console.error('Error exporting logs:', err);
                alert('Error al exportar logs');
            }
        }

        async function viewLogDetails(logId) {
            try {
                const response = await fetch(`/api/superadmin/audit/logs/${logId}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                const log = await response.json();

                document.getElementById('logDetails').innerHTML = `
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="font-semibold">ID:</label>
                                <p>${log.id}</p>
                            </div>
                            <div>
                                <label class="font-semibold">Fecha:</label>
                                <p>${new Date(log.created_at).toLocaleString()}</p>
                            </div>
                            <div>
                                <label class="font-semibold">Usuario:</label>
                                <p>${log.user ? log.user.name + ' (' + log.user.email + ')' : 'N/A'}</p>
                            </div>
                            <div>
                                <label class="font-semibold">Campaña:</label>
                                <p>${log.campaign ? log.campaign.name : 'N/A'}</p>
                            </div>
                            <div>
                                <label class="font-semibold">Acción:</label>
                                <p><span class="px-2 py-1 rounded text-xs ${getActionColor(log.action)}">${log.action}</span></p>
                            </div>
                            <div>
                                <label class="font-semibold">Modelo:</label>
                                <p>${log.model_type || 'N/A'}</p>
                            </div>
                            <div>
                                <label class="font-semibold">IP:</label>
                                <p>${log.ip_address || 'N/A'}</p>
                            </div>
                            <div>
                                <label class="font-semibold">User Agent:</label>
                                <p class="text-sm text-gray-600">${log.user_agent || 'N/A'}</p>
                            </div>
                        </div>

                        ${log.old_values ? `
                        <div>
                            <label class="font-semibold">Valores Anteriores:</label>
                            <pre class="bg-gray-100 p-3 rounded text-sm overflow-x-auto">${JSON.stringify(log.old_values, null, 2)}</pre>
                        </div>
                        ` : ''}

                        ${log.new_values ? `
                        <div>
                            <label class="font-semibold">Valores Nuevos:</label>
                            <pre class="bg-gray-100 p-3 rounded text-sm overflow-x-auto">${JSON.stringify(log.new_values, null, 2)}</pre>
                        </div>
                        ` : ''}

                        ${log.metadata ? `
                        <div>
                            <label class="font-semibold">Metadatos:</label>
                            <pre class="bg-gray-100 p-3 rounded text-sm overflow-x-auto">${JSON.stringify(log.metadata, null, 2)}</pre>
                        </div>
                        ` : ''}
                    </div>
                `;

                document.getElementById('logModal').classList.remove('hidden');

            } catch (err) {
                console.error('Error loading log details:', err);
            }
        }

        function closeLogModal() {
            document.getElementById('logModal').classList.add('hidden');
        }

        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            let html = '';

            if (data.prev_page_url) {
                html += `<button onclick="changePage(${data.current_page - 1})" class="px-3 py-2 bg-gray-200 rounded-lg mr-2">Anterior</button>`;
            }

            html += `<span class="px-3 py-2">Página ${data.current_page} de ${data.last_page}</span>`;

            if (data.next_page_url) {
                html += `<button onclick="changePage(${data.current_page + 1})" class="px-3 py-2 bg-gray-200 rounded-lg ml-2">Siguiente</button>`;
            }

            pagination.innerHTML = html;
        }

        function changePage(page) {
            currentPage = page;
            loadLogs();
        }

        // Cargar logs iniciales
        loadLogs();
    </script>
@endpush