{% extends "superadmin/base_superadmin.html" %}

{% block title %}System Monitor - Superadmin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="border-b border-gray-200 pb-4">
        <h1 class="text-2xl font-bold text-gray-900">System Monitor</h1>
        <p class="text-gray-600 mt-1">Real-time system performance and health monitoring</p>
    </div>

    <!-- System Performance Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- CPU Usage -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-blue-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-microchip text-3xl text-blue-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">CPU Usage</dt>
                            <dd class="text-2xl font-bold text-blue-600">{{ "%.1f"|format(system_stats.cpu_percent) }}%</dd>
                            <dd class="text-xs text-gray-400 mt-1">Current load</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: {{ system_stats.cpu_percent }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Memory Usage -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-green-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-memory text-3xl text-green-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Memory Usage</dt>
                            <dd class="text-2xl font-bold text-green-600">{{ "%.1f"|format(system_stats.memory_used) }}%</dd>
                            <dd class="text-xs text-gray-400 mt-1">RAM utilization</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: {{ system_stats.memory_used }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Disk Usage -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-purple-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-hdd text-3xl text-purple-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Disk Usage</dt>
                            <dd class="text-2xl font-bold text-purple-600">{{ "%.1f"|format(system_stats.disk_used) }}%</dd>
                            <dd class="text-xs text-gray-400 mt-1">Storage utilization</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-purple-500 h-2 rounded-full" style="width: {{ system_stats.disk_used }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Database & Activity Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Database Records -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-orange-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-database text-3xl text-orange-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Database Records</dt>
                            <dd class="text-2xl font-bold text-orange-600">{{ system_stats.total_records }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Total entries</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Weekly New Members -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-red-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-plus text-3xl text-red-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">New Members</dt>
                            <dd class="text-2xl font-bold text-red-600">{{ system_stats.recent_members }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Last 7 days</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Weekly Contributions -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-indigo-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-coins text-3xl text-indigo-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">New Contributions</dt>
                            <dd class="text-2xl font-bold text-indigo-600">{{ system_stats.recent_contributions }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Last 7 days</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-heartbeat text-red-600 mr-2"></i>System Health Status
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Web Server -->
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-server text-2xl text-green-600"></i>
                    </div>
                    <h4 class="text-sm font-medium text-gray-900">Web Server</h4>
                    <p class="text-xs text-green-600 mt-1">Online</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>

                <!-- Database -->
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-database text-2xl text-green-600"></i>
                    </div>
                    <h4 class="text-sm font-medium text-gray-900">Database</h4>
                    <p class="text-xs text-green-600 mt-1">Connected</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>

                <!-- Security -->
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-shield-alt text-2xl text-green-600"></i>
                    </div>
                    <h4 class="text-sm font-medium text-gray-900">Security</h4>
                    <p class="text-xs text-green-600 mt-1">Secure</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>

                <!-- Backup -->
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-cloud-upload-alt text-2xl text-yellow-600"></i>
                    </div>
                    <h4 class="text-sm font-medium text-gray-900">Backup</h4>
                    <p class="text-xs text-yellow-600 mt-1">Pending</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- System Load Chart -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-chart-line text-blue-600 mr-2"></i>System Load (24h)
                </h3>
            </div>
            <div class="p-6">
                <canvas id="systemLoadChart" width="400" height="200"></canvas>
            </div>
        </div>

        <!-- Database Activity -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-database text-green-600 mr-2"></i>Database Activity
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-700">Active Connections</span>
                        <span class="text-sm font-medium text-gray-900">12</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-700">Queries/sec</span>
                        <span class="text-sm font-medium text-gray-900">45</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-700">Cache Hit Rate</span>
                        <span class="text-sm font-medium text-gray-900">98.5%</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-700">Index Usage</span>
                        <span class="text-sm font-medium text-gray-900">95.2%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Alerts -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-bell text-yellow-600 mr-2"></i>System Alerts
            </h3>
        </div>
        <div class="p-6">
            <div class="text-center py-8">
                <i class="fas fa-check-circle text-6xl text-green-600 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900">All Systems Normal</h3>
                <p class="text-sm text-gray-500 mt-2">No alerts or issues detected</p>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// System Load Chart
const ctx = document.getElementById('systemLoadChart').getContext('2d');
const systemLoadChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
        datasets: [{
            label: 'CPU Usage',
            data: [12, 19, 23, 28, 25, 22, 18],
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            tension: 0.1
        }, {
            label: 'Memory Usage',
            data: [15, 22, 27, 32, 30, 28, 25],
            borderColor: 'rgb(34, 197, 94)',
            backgroundColor: 'rgba(34, 197, 94, 0.1)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                max: 100
            }
        }
    }
});
</script>
{% endblock %}