{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 left-0 z-50 w-72 bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 shadow-2xl backdrop-blur-xl border-r border-white/10">
        <!-- Brand Section -->
        <div class="flex items-center h-20 px-6 bg-gradient-to-r from-indigo-600/20 to-purple-600/20 backdrop-blur-sm border-b border-white/10">
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg transform rotate-3 hover:rotate-6 transition-transform duration-300">
                        <i class="fas fa-crown text-white text-xl transform -rotate-3"></i>
                    </div>
                    <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-slate-900 animate-pulse"></div>
                </div>
                <div>
                    <h1 class="text-2xl font-black bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Savly</h1>
                    <div class="flex items-center space-x-2">
                        <span class="text-xs bg-gradient-to-r from-purple-500/30 to-pink-500/30 text-purple-200 px-3 py-1 rounded-full border border-purple-400/30 font-semibold uppercase tracking-wider">SuperAdmin</span>
                        <i class="fas fa-shield-alt text-green-400 text-xs"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Profile Section -->
        <div class="px-6 py-6 border-b border-white/10 bg-gradient-to-r from-slate-800/50 to-indigo-800/50">
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center shadow-lg">
                        <span class="text-white font-bold text-lg">{{ current_user.full_name[0] if current_user.full_name else 'SA' }}</span>
                    </div>
                    <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-slate-900 flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-base font-bold text-white truncate">{{ current_user.full_name }}</p>
                    <p class="text-sm text-purple-300 truncate font-medium">Master Administrator</p>
                    <div class="flex items-center space-x-2 mt-1">
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <span class="text-xs text-green-300 font-medium">Online</span>
                    </div>
                </div>
                <div class="relative">
                    <button class="w-8 h-8 bg-white/10 hover:bg-white/20 rounded-xl flex items-center justify-center transition-all duration-200">
                        <i class="fas fa-cog text-white"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="px-6 py-4 bg-gradient-to-r from-indigo-600/10 to-purple-600/10">
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-white/5 rounded-xl p-3 border border-white/10">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-users text-blue-400"></i>
                        <div>
                            <p class="text-xs text-gray-300">Users</p>
                            <p class="text-sm font-bold text-white">{{ (Member.query.count() if Member else 0) }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white/5 rounded-xl p-3 border border-white/10">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-building text-purple-400"></i>
                        <div>
                            <p class="text-xs text-gray-300">Groups</p>
                            <p class="text-sm font-bold text-white">{{ (Group.query.count() if Group else 0) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Navigation Menu -->
        <nav class="mt-4 px-4">
            <div class="space-y-2">
                <!-- Main Section -->
                <div class="mb-4">
                    <h3 class="px-3 text-xs font-semibold text-purple-400 uppercase tracking-wider mb-3">Overview</h3>
                    
                    <!-- Dashboard -->
                    <a href="{{ url_for('superadmin_dashboard') }}" 
                       class="group flex items-center px-4 py-3 text-sm font-medium rounded-2xl transition-all duration-300 mb-2 {{ 'bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-white border border-blue-400/30 shadow-lg' if request.endpoint == 'superadmin_dashboard' else 'text-gray-300 hover:bg-gradient-to-r hover:from-white/5 hover:to-white/10 hover:text-white' }}">
                        <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl mr-3 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-tachometer-alt text-white"></i>
                        </div>
                        <span class="font-semibold">Dashboard</span>
                        {% if request.endpoint == 'superadmin_dashboard' %}
                        <div class="ml-auto w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
                        {% endif %}
                    </a>
                </div>

                <!-- Management Section -->
                <div class="mb-4">
                    <h3 class="px-3 text-xs font-semibold text-purple-400 uppercase tracking-wider mb-3">Management</h3>
                    
                    <!-- User Management -->
                    <a href="{{ url_for('superadmin_user_management') }}" 
                       class="group flex items-center px-4 py-3 text-sm font-medium rounded-2xl transition-all duration-300 mb-2 {{ 'bg-gradient-to-r from-green-500/20 to-blue-500/20 text-white border border-green-400/30 shadow-lg' if request.endpoint == 'superadmin_user_management' else 'text-gray-300 hover:bg-gradient-to-r hover:from-white/5 hover:to-white/10 hover:text-white' }}">
                        <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-green-500 to-blue-600 rounded-xl mr-3 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-users-cog text-white"></i>
                        </div>
                        <span class="font-semibold">User Management</span>
                        {% if request.endpoint == 'superadmin_user_management' %}
                        <div class="ml-auto w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        {% endif %}
                    </a>

                    <!-- Groups Management -->
                    <a href="{{ url_for('superadmin_groups') }}" 
                       class="group flex items-center px-4 py-3 text-sm font-medium rounded-2xl transition-all duration-300 mb-2 {{ 'bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white border border-purple-400/30 shadow-lg' if request.endpoint == 'superadmin_groups' else 'text-gray-300 hover:bg-gradient-to-r hover:from-white/5 hover:to-white/10 hover:text-white' }}">
                        <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl mr-3 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-layer-group text-white"></i>
                        </div>
                        <span class="font-semibold">Groups</span>
                        {% if request.endpoint == 'superadmin_groups' %}
                        <div class="ml-auto w-2 h-2 bg-purple-400 rounded-full animate-pulse"></div>
                        {% endif %}
                    </a>
                </div>

                <!-- Analytics -->
                <a href="{{ url_for('superadmin_analytics') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_analytics' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-chart-line mr-3 h-5 w-5"></i>
                    <span>Analytics</span>
                </a>

                <!-- Financial Overview -->
                <a href="{{ url_for('superadmin_financial') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_financial' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-money-bill-wave mr-3 h-5 w-5"></i>
                    <span>Financial Overview</span>
                </a>

                <!-- Audit Logs -->
                <a href="{{ url_for('superadmin_audit_logs') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_audit_logs' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-history mr-3 h-5 w-5"></i>
                    <span>Audit Logs</span>
                </a>

                <!-- Backup & Export -->
                <a href="{{ url_for('superadmin_backup') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_backup' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-download mr-3 h-5 w-5"></i>
                    <span>Backup & Export</span>
                </a>

                <!-- Security -->
                <a href="{{ url_for('superadmin_security') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_security' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-shield-alt mr-3 h-5 w-5"></i>
                    <span>Security</span>
                </a>

                <!-- Settings -->
                <a href="{{ url_for('superadmin_settings') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_settings' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-cog mr-3 h-5 w-5"></i>
                    <span>Settings</span>
                </a>

                <!-- Divider -->
                <div class="my-4 border-t border-white/10"></div>

                <!-- Advanced Tools -->
                <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Advanced Tools</p>

                <!-- Bulk Actions -->
                <a href="{{ url_for('superadmin_bulk_actions') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_bulk_actions' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-tasks mr-3 h-5 w-5"></i>
                    <span>Bulk Actions</span>
                </a>

                <!-- System Monitor -->
                <a href="{{ url_for('superadmin_system_monitor') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_system_monitor' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-heartbeat mr-3 h-5 w-5"></i>
                    <span>System Monitor</span>
                </a>

                <!-- User Management -->
                <a href="{{ url_for('superadmin_user_management') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_user_management' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-user-edit mr-3 h-5 w-5"></i>
                    <span>User Management</span>
                </a>

                <!-- Reports -->
                <a href="{{ url_for('superadmin_reports') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl transition-all duration-200 {{ 'bg-red-500/20 text-red-300' if request.endpoint == 'superadmin_reports' else 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fas fa-file-chart-line mr-3 h-5 w-5"></i>
                    <span>Reports</span>
                </a>

                <!-- Divider -->
                <div class="my-4 border-t border-white/10"></div>

                <!-- Admin Portal -->
                <a href="{{ url_for('admin_dashboard') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-300 hover:bg-blue-500/10 hover:text-blue-300 transition-all duration-200">
                    <i class="fas fa-user-shield mr-3 h-5 w-5"></i>
                    <span>Admin Portal</span>
                    <i class="fas fa-external-link-alt ml-auto h-3 w-3 opacity-50"></i>
                </a>

                <!-- Member Portal -->
                <a href="{{ url_for('member_dashboard') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-300 hover:bg-green-500/10 hover:text-green-300 transition-all duration-200">
                    <i class="fas fa-user mr-3 h-5 w-5"></i>
                    <span>Member Portal</span>
                    <i class="fas fa-external-link-alt ml-auto h-3 w-3 opacity-50"></i>
                </a>

                <!-- Home -->
                <a href="{{ url_for('index') }}" 
                   class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-300 hover:bg-purple-500/10 hover:text-purple-300 transition-all duration-200">
                    <i class="fas fa-home mr-3 h-5 w-5"></i>
                    <span>Homepage</span>
                    <i class="fas fa-external-link-alt ml-auto h-3 w-3 opacity-50"></i>
                </a>
            </div>
        </nav>

        <!-- Logout Section -->
        <div class="absolute bottom-0 left-0 right-0 p-3">
            <a href="{{ url_for('logout') }}" 
               class="group flex items-center w-full px-3 py-2 text-sm font-medium text-red-300 rounded-xl hover:bg-red-500/10 hover:text-red-200 transition-all duration-200">
                <i class="fas fa-sign-out-alt mr-3 h-5 w-5"></i>
                <span>Logout</span>
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="ml-64">
        <!-- Top Header -->
        <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-40">
            <div class="px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">{% block page_title %}Superadmin Panel{% endblock %}</h1>
                            <p class="text-sm text-gray-500">{% block page_description %}Master system administration{% endblock %}</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <!-- System Status -->
                        <div class="flex items-center space-x-2 px-3 py-1 bg-green-50 rounded-full">
                            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                            <span class="text-green-700 text-xs font-semibold">System Operational</span>
                        </div>
                        
                        <!-- Profile Dropdown -->
                        <div class="relative">
                            <button class="flex items-center space-x-2 p-2 rounded-xl hover:bg-gray-100 transition-colors duration-200">
                                <div class="w-8 h-8 bg-gradient-to-r from-red-500 to-pink-600 rounded-full flex items-center justify-center">
                                    <span class="text-white font-bold text-xs">{{ current_user.full_name[0] if current_user.full_name else 'SA' }}</span>
                                </div>
                                <div class="text-left hidden sm:block">
                                    <div class="text-sm font-semibold text-gray-900">{{ current_user.full_name }}</div>
                                    <div class="text-xs text-gray-500">Superadmin</div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Page Content -->
        <main class="p-6">
            {% block superadmin_content %}{% endblock %}
        </main>
    </div>
</div>
{% endblock %}