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

{% block page_title %}System Management{% endblock %}
{% block page_description %}Database statistics and system monitoring{% endblock %}

{% block superadmin_content %}
<!-- Database Statistics -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
    <!-- Members -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-users text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Members</p>
                <p class="text-2xl font-bold text-gray-900">{{ db_stats.members }}</p>
            </div>
        </div>
    </div>

    <!-- Contributions -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-coins text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Contributions</p>
                <p class="text-2xl font-bold text-gray-900">{{ db_stats.contributions }}</p>
            </div>
        </div>
    </div>

    <!-- Events -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-calendar-alt text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Events</p>
                <p class="text-2xl font-bold text-gray-900">{{ db_stats.events }}</p>
            </div>
        </div>
    </div>

    <!-- Currencies -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-money-bill-wave text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Currencies</p>
                <p class="text-2xl font-bold text-gray-900">{{ db_stats.currencies }}</p>
            </div>
        </div>
    </div>

    <!-- Participations -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-handshake text-red-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-500">Participations</p>
                <p class="text-2xl font-bold text-gray-900">{{ db_stats.participations }}</p>
            </div>
        </div>
    </div>
</div>

<!-- System Management Tools -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Database Operations -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">Database Operations</h3>
            <i class="fas fa-database text-blue-500"></i>
        </div>
        <div class="space-y-4">
            <div class="p-4 border border-gray-200 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-gray-900">Database Status</span>
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-1"></i>Online
                    </span>
                </div>
                <p class="text-sm text-gray-500">All database connections are operational</p>
            </div>
            
            <button onclick="backupDatabase()" 
                    class="w-full p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-download text-blue-500"></i>
                    <div>
                        <span class="font-semibold text-gray-900 block">Create Backup</span>
                        <span class="text-sm text-gray-500">Export complete database backup</span>
                    </div>
                </div>
            </button>
            
            <button onclick="analyzeDatabase()" 
                    class="w-full p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-search text-green-500"></i>
                    <div>
                        <span class="font-semibold text-gray-900 block">Analyze Database</span>
                        <span class="text-sm text-gray-500">Run database optimization analysis</span>
                    </div>
                </div>
            </button>
        </div>
    </div>

    <!-- System Monitoring -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">System Monitoring</h3>
            <i class="fas fa-server text-purple-500"></i>
        </div>
        <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div class="p-3 bg-gray-50 rounded-lg">
                    <div class="text-sm font-medium text-gray-500">Platform</div>
                    <div class="text-lg font-bold text-gray-900">Replit</div>
                </div>
                <div class="p-3 bg-gray-50 rounded-lg">
                    <div class="text-sm font-medium text-gray-500">Python</div>
                    <div class="text-lg font-bold text-gray-900">3.11</div>
                </div>
            </div>
            
            <div class="p-4 border border-gray-200 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-gray-900">Application Status</span>
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i class="fas fa-play-circle mr-1"></i>Running
                    </span>
                </div>
                <p class="text-sm text-gray-500">Flask application is running normally</p>
            </div>
            
            <div class="p-4 border border-gray-200 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold text-gray-900">Security</span>
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i class="fas fa-shield-alt mr-1"></i>Secure
                    </span>
                </div>
                <p class="text-sm text-gray-500">All security measures are active</p>
            </div>
        </div>
    </div>
</div>

<!-- System Logs -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">System Management</h3>
            <p class="text-sm text-gray-500">Advanced system operations and maintenance</p>
        </div>
        <i class="fas fa-cogs text-gray-400"></i>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <button onclick="clearSystemCache()" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-broom text-blue-500"></i>
                <span class="font-semibold text-gray-900">Clear Cache</span>
            </div>
            <p class="text-sm text-gray-500">Clear system cache and temporary files</p>
        </button>

        <button onclick="regenerateReports()" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-sync-alt text-green-500"></i>
                <span class="font-semibold text-gray-900">Regenerate Reports</span>
            </div>
            <p class="text-sm text-gray-500">Refresh all calculated statistics</p>
        </button>

        <button onclick="performMaintenance()" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-tools text-purple-500"></i>
                <span class="font-semibold text-gray-900">System Maintenance</span>
            </div>
            <p class="text-sm text-gray-500">Run complete system maintenance</p>
        </button>
    </div>
</div>

<script>
function backupDatabase() {
    if (confirm('Create a complete database backup? This may take a few minutes.')) {
        alert('Database backup initiated - Feature implementation in progress');
    }
}

function analyzeDatabase() {
    if (confirm('Run database analysis? This will check for optimization opportunities.')) {
        alert('Database analysis started - Results will be available in the reports section');
    }
}

function clearSystemCache() {
    if (confirm('Clear system cache? This may temporarily slow down the application.')) {
        alert('System cache cleared successfully');
    }
}

function regenerateReports() {
    if (confirm('Regenerate all reports? This will recalculate all statistics.')) {
        alert('Report regeneration initiated - This may take a few minutes');
    }
}

function performMaintenance() {
    if (confirm('Run system maintenance? This includes cache clearing and report updates.')) {
        alert('System maintenance started - All operations running in background');
    }
}
</script>
{% endblock %}