{% extends "admin/base.html" %}

{% block content %}
<div class="container mx-auto">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-primary to-secondary p-6 rounded-xl shadow-lg mb-8 text-white">
        <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold mb-2">Welcome, {{ current_user.username }}</h1>
                <p class="opacity-90">Here's what's happening on your language learning platform today.</p>
            </div>
            <div class="mt-4 lg:mt-0">
                <!-- Fix the last_login display to handle when it's not a datetime object -->
                <div class="text-xs opacity-75">
                    Last login: 
                    {% if current_user.last_login and current_user.last_login is not string %}
                        {{ current_user.last_login|timeago }}
                    {% else %}
                        Not available
                    {% endif %}
                </div>
                <div class="text-xs opacity-75 mt-1">Current time: {{ now().strftime('%B %d, %Y %H:%M') }}</div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Students Card -->
        <div class="stat-card students bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-gray-500 text-sm font-medium uppercase tracking-wider">Total Students</div>
                    <div class="mt-2 text-3xl font-bold text-gray-800">{{ stats.total_students }}</div>
                    <div class="mt-1 text-xs text-gray-500">Active users in the system</div>
                </div>
                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
                    <i class="fas fa-user-graduate text-indigo-600 text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ url_for('admin.manage_students') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 transition-colors flex items-center">
                    View All Students
                    <i class="fas fa-arrow-right text-xs ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Teachers Card -->
        <div class="stat-card teachers bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-gray-500 text-sm font-medium uppercase tracking-wider">Total Teachers</div>
                    <div class="mt-2 text-3xl font-bold text-gray-800">{{ stats.total_teachers }}</div>
                    <div class="mt-1 text-xs text-gray-500">Instructors managing content</div>
                </div>
                <div class="w-14 h-14 rounded-full bg-cyan-100 flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-cyan-600 text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ url_for('admin.manage_teachers') }}" class="text-sm font-medium text-cyan-600 hover:text-cyan-800 transition-colors flex items-center">
                    View All Teachers
                    <i class="fas fa-arrow-right text-xs ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Topics Card -->
        <div class="stat-card topics bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-gray-500 text-sm font-medium uppercase tracking-wider">Total Topics</div>
                    <div class="mt-2 text-3xl font-bold text-gray-800">{{ stats.total_topics }}</div>
                    <div class="mt-1 text-xs text-gray-500">Learning materials available</div>
                </div>
                <div class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center">
                    <i class="fas fa-book text-amber-600 text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ url_for('admin.topics') }}" class="text-sm font-medium text-amber-600 hover:text-amber-800 transition-colors flex items-center">
                    View All Topics
                    <i class="fas fa-arrow-right text-xs ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Pending Approvals Card -->
        <div class="stat-card pending bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-gray-500 text-sm font-medium uppercase tracking-wider">Pending Approvals</div>
                    <div class="mt-2 text-3xl font-bold text-gray-800">{{ stats.pending_approvals }}</div>
                    <div class="mt-1 text-xs text-gray-500">Students awaiting approval</div>
                </div>
                <div class="w-14 h-14 rounded-full bg-red-100 flex items-center justify-center">
                    <i class="fas fa-user-clock text-red-600 text-2xl"></i>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ url_for('admin.approvals') }}" class="text-sm font-medium text-red-600 hover:text-red-800 transition-colors flex items-center">
                    View Pending Requests
                    <i class="fas fa-arrow-right text-xs ml-1"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Quick Action Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Add Teacher Card -->
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-center mb-5">
                <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fas fa-user-plus text-primary text-2xl"></i>
                </div>
            </div>
            <h3 class="text-center font-bold text-lg mb-3">Add New Teacher</h3>
            <p class="text-center text-gray-500 text-sm mb-4">Create a new teacher account with content creation permissions.</p>
            <div class="flex justify-center">
                <a href="{{ url_for('admin.manage_teachers') }}#add-teacher" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus mr-2"></i> Add Teacher
                </a>
            </div>
        </div>

        <!-- Add Student Card -->
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-center mb-5">
                <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center">
                    <i class="fas fa-user-graduate text-indigo-600 text-2xl"></i>
                </div>
            </div>
            <h3 class="text-center font-bold text-lg mb-3">Add New Student</h3>
            <p class="text-center text-gray-500 text-sm mb-4">Register a new student and assign them to a teacher.</p>
            <div class="flex justify-center">
                <a href="{{ url_for('admin.manage_students') }}#add-student" class="btn btn-indigo btn-sm" style="background-color: #4f46e5; color: white;">
                    <i class="fas fa-plus mr-2"></i> Add Student
                </a>
            </div>
        </div>

        <!-- View Topics Card -->
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-center mb-5">
                <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
                    <i class="fas fa-book text-amber-600 text-2xl"></i>
                </div>
            </div>
            <h3 class="text-center font-bold text-lg mb-3">Manage Topics</h3>
            <p class="text-center text-gray-500 text-sm mb-4">View and manage all learning topics in the system.</p>
            <div class="flex justify-center">
                <a href="{{ url_for('admin.topics') }}" class="btn btn-sm" style="background-color: #ca8a04; color: white;">
                    <i class="fas fa-list mr-2"></i> View Topics
                </a>
            </div>
        </div>
    </div>

    <!-- Two Column Layout for Recent Activities and System Statistics -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Recent Activities -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-bold text-gray-800">Recent Activities</h2>
                        <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">Last 24 hours</span>
                    </div>
                </div>
                
                <div class="divide-y divide-gray-100 max-h-[32rem] overflow-y-auto">
                    {% if recent_activities %}
                        {% for activity in recent_activities %}
                        <div class="p-5 hover:bg-gray-50 transition-colors">
                            <div class="flex items-start gap-4">
                                {% set icon_class = 'text-gray-400' %}
                                {% set bg_class = 'bg-gray-100' %}
                                
                                {% if 'TEACHER_ADDED' in activity.action %}
                                    {% set icon_class = 'text-cyan-500' %}
                                    {% set bg_class = 'bg-cyan-50' %}
                                    {% set icon = 'user-plus' %}
                                {% elif 'STUDENT_ADDED' in activity.action %}
                                    {% set icon_class = 'text-indigo-500' %}
                                    {% set bg_class = 'bg-indigo-50' %}
                                    {% set icon = 'user-graduate' %}
                                {% elif 'USER_APPROVED' in activity.action %}
                                    {% set icon_class = 'text-green-500' %}
                                    {% set bg_class = 'bg-green-50' %}
                                    {% set icon = 'check-circle' %}
                                {% elif 'USER_REJECTED' in activity.action %}
                                    {% set icon_class = 'text-red-500' %}
                                    {% set bg_class = 'bg-red-50' %}
                                    {% set icon = 'times-circle' %}
                                {% elif 'TOPIC_' in activity.action %}
                                    {% set icon_class = 'text-amber-500' %}
                                    {% set bg_class = 'bg-amber-50' %}
                                    {% set icon = 'book' %}
                                {% elif 'LOGIN' in activity.action %}
                                    {% set icon_class = 'text-blue-500' %}
                                    {% set bg_class = 'bg-blue-50' %}
                                    {% set icon = 'sign-in-alt' %}
                                {% elif 'DELETED' in activity.action %}
                                    {% set icon_class = 'text-red-500' %}
                                    {% set bg_class = 'bg-red-50' %}
                                    {% set icon = 'trash' %}
                                {% else %}
                                    {% set icon = 'circle' %}
                                {% endif %}
                                
                                <div class="w-10 h-10 rounded-full {{ bg_class }} flex-shrink-0 flex items-center justify-center">
                                    <i class="fas fa-{{ icon }} {{ icon_class }}"></i>
                                </div>
                                
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700">{{ activity.details }}</p>
                                    <div class="flex items-center mt-1 text-xs text-gray-500">
                                        <span>{{ activity.created_at|timeago }}</span>
                                        <span class="mx-2">•</span>
                                        <span>{{ activity.user.username }}</span>
                                        {% if activity.target_user %}
                                        <span class="mx-2">→</span>
                                        <span>{{ activity.target_user.username }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="p-8 text-center">
                            <div class="w-16 h-16 mx-auto rounded-full bg-gray-100 flex items-center justify-center mb-4">
                                <i class="fas fa-history text-gray-400 text-2xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900 mb-1">No Recent Activities</h3>
                            <p class="text-gray-500">Activity logs will appear here as users interact with the system.</p>
                        </div>
                    {% endif %}
                </div>
                
                {% if recent_activities %}
                <div class="p-4 border-t border-gray-100 bg-gray-50">
                    <a href="#" class="text-sm text-primary hover:text-primary-focus font-medium flex items-center justify-center">
                        View All Activities
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- System Status -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-6 border-b border-gray-100">
                    <h2 class="text-xl font-bold text-gray-800">System Status</h2>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Usage Statistics -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">Usage Statistics</h3>
                        
                        <div class="space-y-4">
                            <!-- Students Progress -->
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">Student Engagement</span>
                                    <span class="text-sm text-gray-500">68%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 68%"></div>
                                </div>
                            </div>
                            
                            <!-- Topic Completion -->
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">Topic Completion</span>
                                    <span class="text-sm text-gray-500">45%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-amber-500 h-2.5 rounded-full" style="width: 45%"></div>
                                </div>
                            </div>
                            
                            <!-- Teacher Activity -->
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium text-gray-700">Teacher Activity</span>
                                    <span class="text-sm text-gray-500">82%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-cyan-500 h-2.5 rounded-full" style="width: 82%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Stats -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">Quick Stats</h3>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="text-gray-500 text-xs">Avg. Completion Time</div>
                                <div class="text-lg font-bold text-gray-800">3.2 days</div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="text-gray-500 text-xs">Avg. Student Score</div>
                                <div class="text-lg font-bold text-gray-800">78%</div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="text-gray-500 text-xs">New Users (7d)</div>
                                <div class="text-lg font-bold text-gray-800">+{{ stats.total_students // 10 }}</div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="text-gray-500 text-xs">New Topics (7d)</div>
                                <div class="text-lg font-bold text-gray-800">+{{ stats.total_topics // 8 }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- System Health -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">System Health</h3>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-3 bg-green-50 text-green-700 rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium">Database</span>
                                </div>
                                <span class="text-xs">Operational</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 bg-green-50 text-green-700 rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium">API Services</span>
                                </div>
                                <span class="text-xs">Operational</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 bg-green-50 text-green-700 rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium">Storage</span>
                                </div>
                                <span class="text-xs">Operational</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="flex flex-wrap gap-4 justify-center mt-8">
  <a href="{{ url_for('admin.add_short_course') }}" class="btn btn-primary">Add Short Course</a>
  <a href="{{ url_for('admin.add_learning_course') }}" class="btn btn-primary">Add Learning Course</a>
  <a href="{{ url_for('admin.manage_courses') }}" class="btn btn-info">Manage Courses</a>
  <a href="{{ url_for('admin.manage_team') }}" class="btn btn-secondary">Manage Team</a>
</div>

<style>
/* Custom button color for the indigo button */
.btn-indigo {
    background-color: #4f46e5;
    color: white;
}
.btn-indigo:hover {
    background-color: #4338ca;
}
</style>
{% endblock %}