/**
 * IT Live System Monitoring Dashboard
 * Complete overzicht van alle systemen, health checks, en performance metrics
 */

// Page metadata
$page_title = "System Monitoring Dashboard - IT Live";
$page_description = "Real-time monitoring van alle IT Live systemen en services";
$page_keywords = "monitoring, dashboard, system health, performance, analytics";
$page_author = "IT Live";
$page_image = "/assets/images/system-monitoring.jpg";
$page_url = "/system-monitoring-dashboard.php";
$page_type = "dashboard";
$page_site_name = "IT Live";
$page_locale = "nl_NL";

// Include unified template
require_once 'includes/itlive-template.php';
?>

<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
    <!-- Hero Section -->
    <section class="relative py-20 px-4">
        <div class="absolute inset-0 bg-gradient-to-r from-purple-600/20 to-blue-600/20 backdrop-blur-3xl"></div>
        <div class="relative max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-600 rounded-2xl mb-6">
                    <i class="fas fa-heartbeat text-3xl text-white"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
                    System <span class="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">Monitoring</span>
                </h1>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
                    Real-time monitoring van alle IT Live systemen. Health checks, performance metrics, en alerting in één dashboard.
                </p>
            </div>

            <!-- System Stats -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <div class="text-3xl font-bold text-white mb-2" id="totalSystems">1887</div>
                    <div class="text-gray-300 text-sm">Totale Systemen</div>
                </div>
                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <div class="text-3xl font-bold text-green-400 mb-2" id="healthySystems">1845</div>
                    <div class="text-gray-300 text-sm">Gezond</div>
                </div>
                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <div class="text-3xl font-bold text-yellow-400 mb-2" id="warningSystems">32</div>
                    <div class="text-gray-300 text-sm">Waarschuwingen</div>
                </div>
                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <div class="text-3xl font-bold text-red-400 mb-2" id="criticalSystems">10</div>
                    <div class="text-gray-300 text-sm">Kritiek</div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button onclick="runHealthCheck()" class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-3 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-stethoscope mr-2"></i> Health Check
                </button>
                <button onclick="generateReport()" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-6 py-3 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-file-alt mr-2"></i> Genereer Rapport
                </button>
                <button onclick="refreshData()" class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-6 py-3 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-sync-alt mr-2"></i> Ververs Data
                </button>
                <button onclick="exportData()" class="bg-gradient-to-r from-orange-500 to-red-600 text-white px-6 py-3 rounded-lg hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-download mr-2"></i> Exporteer
                </button>
            </div>
        </div>
    </section>

    <!-- System Categories -->
    <section class="py-16 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-3xl font-bold text-white mb-8 text-center">System Categorieën</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="systemCategories">
                
                <!-- Admin Systems -->
                <div class="system-category bg-gradient-to-br from-red-600/20 to-red-800/20 backdrop-blur-md rounded-2xl p-8 border border-red-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-red-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-cogs text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Admin Systems</h3>
                            <span class="text-red-400 text-sm">42 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Admin Dashboard</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">User Management</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Module Management</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Page Maker</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>

                <!-- Customer Systems -->
                <div class="system-category bg-gradient-to-br from-blue-600/20 to-blue-800/20 backdrop-blur-md rounded-2xl p-8 border border-blue-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-users text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Customer Systems</h3>
                            <span class="text-blue-400 text-sm">68 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Customer Dashboard</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Portal Navigation</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Modules Overview</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Website Builder</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>

                <!-- AI Systems -->
                <div class="system-category bg-gradient-to-br from-purple-600/20 to-purple-800/20 backdrop-blur-md rounded-2xl p-8 border border-purple-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-brain text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">AI Systems</h3>
                            <span class="text-purple-400 text-sm">156 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">AI Orchestrator</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">RAG Chatbot</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Content Generator</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">AI Image Creator</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>

                <!-- API Systems -->
                <div class="system-category bg-gradient-to-br from-green-600/20 to-green-800/20 backdrop-blur-md rounded-2xl p-8 border border-green-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-plug text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">API Systems</h3>
                            <span class="text-green-400 text-sm">89 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Live Builder API</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Analytics API</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Webhook API</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Multi-Language API</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>

                <!-- Tools Systems -->
                <div class="system-category bg-gradient-to-br from-orange-600/20 to-orange-800/20 backdrop-blur-md rounded-2xl p-8 border border-orange-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-tools text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Tools Systems</h3>
                            <span class="text-orange-400 text-sm">234 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Website Builder</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Bedrijvencheck</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">AI Tools</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Premium Tools</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>

                <!-- Database Systems -->
                <div class="system-category bg-gradient-to-br from-cyan-600/20 to-cyan-800/20 backdrop-blur-md rounded-2xl p-8 border border-cyan-500/30">
                    <div class="flex items-center mb-6">
                        <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-database text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Database Systems</h3>
                            <span class="text-cyan-400 text-sm">28 systemen</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">MySQL Database</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Redis Cache</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">File Storage</span>
                            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-300">Backup Systems</span>
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Performance Metrics -->
    <section class="py-16 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-3xl font-bold text-white mb-8 text-center">Performance Metrics</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <h3 class="text-lg font-semibold text-white mb-4">Response Time</h3>
                    <div class="text-3xl font-bold text-green-400 mb-2">127ms</div>
                    <div class="text-gray-400 text-sm mb-4">Average API response</div>
                    <div class="w-full bg-gray-700 rounded-full h-2">
                        <div class="bg-green-400 h-2 rounded-full" style="width: 75%"></div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <h3 class="text-lg font-semibold text-white mb-4">Uptime</h3>
                    <div class="text-3xl font-bold text-green-400 mb-2">99.9%</div>
                    <div class="text-gray-400 text-sm mb-4">Last 30 days</div>
                    <div class="w-full bg-gray-700 rounded-full h-2">
                        <div class="bg-green-400 h-2 rounded-full" style="width: 99.9%"></div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <h3 class="text-lg font-semibold text-white mb-4">Memory Usage</h3>
                    <div class="text-3xl font-bold text-yellow-400 mb-2">68%</div>
                    <div class="text-gray-400 text-sm mb-4">System memory</div>
                    <div class="w-full bg-gray-700 rounded-full h-2">
                        <div class="bg-yellow-400 h-2 rounded-full" style="width: 68%"></div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20">
                    <h3 class="text-lg font-semibold text-white mb-4">CPU Usage</h3>
                    <div class="text-3xl font-bold text-green-400 mb-2">42%</div>
                    <div class="text-gray-400 text-sm mb-4">Average load</div>
                    <div class="w-full bg-gray-700 rounded-full h-2">
                        <div class="bg-green-400 h-2 rounded-full" style="width: 42%"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Recent Alerts -->
    <section class="py-16 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-3xl font-bold text-white mb-8 text-center">Recente Alerts</h2>
            
            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20">
                <div class="space-y-4" id="alertsContainer">
                    <div class="flex items-center justify-between p-4 bg-red-500/20 rounded-lg border border-red-500/30">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-400 rounded-full mr-3"></div>
                            <div>
                                <div class="text-white font-semibold">Critical: Database Connection Failed</div>
                                <div class="text-gray-400 text-sm">RAG Chatbot API - 2 minuten geleden</div>
                            </div>
                        </div>
                        <button class="text-red-400 hover:text-red-300">View Details</button>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-yellow-500/20 rounded-lg border border-yellow-500/30">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-yellow-400 rounded-full mr-3"></div>
                            <div>
                                <div class="text-white font-semibold">Warning: High Memory Usage</div>
                                <div class="text-gray-400 text-sm">AI Orchestrator - 15 minuten geleden</div>
                            </div>
                        </div>
                        <button class="text-yellow-400 hover:text-yellow-300">View Details</button>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-green-500/20 rounded-lg border border-green-500/30">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-400 rounded-full mr-3"></div>
                            <div>
                                <div class="text-white font-semibold">Info: System Backup Completed</div>
                                <div class="text-gray-400 text-sm">All systems - 1 uur geleden</div>
                            </div>
                        </div>
                        <button class="text-green-400 hover:text-green-300">View Details</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
// System monitoring JavaScript
function runHealthCheck() {
    console.log('Running health check...');
    // Simulate health check
    updateSystemStatus();
}

function generateReport() {
    console.log('Generating system report...');
    window.open('/api/system-report-api.php?action=generate', '_blank');
}

function refreshData() {
    console.log('Refreshing system data...');
    location.reload();
}

function exportData() {
    console.log('Exporting system data...');
    window.open('/api/system-monitoring-api.php?action=export', '_blank');
}

function updateSystemStatus() {
    // Simulate real-time updates
    const healthy = document.getElementById('healthySystems');
    const warning = document.getElementById('warningSystems');
    const critical = document.getElementById('criticalSystems');
    
    // Animate counter changes
    animateCounter(healthy, 1845, 1850);
    animateCounter(warning, 32, 28);
    animateCounter(critical, 10, 9);
}

function animateCounter(element, start, end) {
    const duration = 2000;
    const startTime = Date.now();
    
    function update() {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const current = Math.floor(start + (end - start) * progress);
        element.textContent = current;
        
        if (progress < 1) {
            requestAnimationFrame(update);
        }
    }
    
    update();
}

// Auto-refresh every 30 seconds
setInterval(() => {
    console.log('Auto-refreshing system data...');
    updateSystemStatus();
}, 30000);

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    updateSystemStatus();
});
</script>

<style>
.system-category {
    transition: all 0.3s ease;
}

.system-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s infinite;
}
</style>