@extends('layouts.dashboard')

@section('title', 'Mon Dashboard - Sciences Afrique')
@section('page-title', 'Tableau de Bord')
@section('page-subtitle', 'Bienvenue, ' . Auth::user()->name . '. Prêt pour votre session d\'apprentissage ?')

@section('content')
<!-- Stats Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
    <x-stat-card 
        :value="$enrollments->count()" 
        label="Cours Inscrits" 
        icon="fa-solid fa-book-open" 
        color="royal"
        trend="+2 ce mois"
        :trendUp="true"
    />
    <x-stat-card 
        :value="$assignments->count()" 
        label="Devoirs à faire" 
        icon="fa-solid fa-file-alt" 
        color="blue"
    />
    <x-stat-card 
        :value="$liveSessions->count()" 
        label="Sessions Live" 
        icon="fa-solid fa-video" 
        color="purple"
    />
    <x-stat-card 
        :value="auth()->user()->total_points ?? 0" 
        label="Points XP" 
        icon="fa-solid fa-star" 
        color="gold"
        trend="+150 cette semaine"
        :trendUp="true"
    />
</div>

<!-- Main Content Grid -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    <!-- Left Column - Courses -->
    <div class="xl:col-span-2 space-y-8">
        <!-- Mes Cours -->
        <div>
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-display font-bold text-gray-900 flex items-center gap-3">
                    <span class="w-1.5 h-6 bg-royal-blue rounded-full"></span>
                    Mes Cours
                </h2>
                <a href="{{ route('courses.catalog') }}" class="text-sm font-semibold text-royal-blue hover:text-royal-blue-dark transition-colors">
                    Voir tout le catalogue →
                </a>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                @forelse($enrollments->take(4) as $enrollment)
                    <x-course-card 
                        :course="$enrollment->course" 
                        :enrollment="$enrollment"
                        :showProgress="true"
                    />
                @empty
                    <div class="col-span-2 bg-white p-12 rounded-2xl border border-gray-100 text-center">
                        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa-solid fa-book-open text-3xl text-gray-400"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-2">Aucun cours pour le moment</h3>
                        <p class="text-gray-500 mb-6">Explorez notre catalogue et commencez votre apprentissage</p>
                        <a href="{{ route('courses.catalog') }}" class="inline-block px-6 py-3 bg-royal-blue text-white font-bold rounded-xl hover:bg-royal-blue-dark transition-colors">
                            Découvrir les cours
                        </a>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Devoirs à venir -->
        <div>
            <h2 class="text-xl font-display font-bold text-gray-900 flex items-center gap-3 mb-6">
                <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span>
                Devoirs à Rendre
            </h2>
            
            <div class="space-y-4">
                @forelse($assignments->take(5) as $assignment)
                    <div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm flex items-center justify-between group hover:border-blue-200 hover:shadow-md transition-all">
                        <div class="flex gap-4 items-center">
                            <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                                <i class="fa-solid fa-file-alt text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 group-hover:text-blue-600 transition-colors">{{ $assignment->title }}</h3>
                                <p class="text-sm text-gray-500">{{ $assignment->course->title }}</p>
                                <p class="text-xs text-red-500 font-semibold mt-1">
                                    <i class="fa-regular fa-clock mr-1"></i>
                                    Limite: {{ \Carbon\Carbon::parse($assignment->deadline)->format('d/m/Y à H:i') }}
                                </p>
                            </div>
                        </div>
                        <a href="{{ route('assignments.show', $assignment) }}" class="px-5 py-2.5 bg-blue-600 text-white font-bold rounded-xl text-sm shadow-lg shadow-blue-500/20 hover:bg-blue-700 transition-all">
                            Déposer
                        </a>
                    </div>
                @empty
                    <div class="bg-white p-8 rounded-2xl border border-gray-100 text-center">
                        <i class="fa-solid fa-check-circle text-4xl text-green-500 mb-3"></i>
                        <p class="text-gray-600 font-medium">Aucun devoir en attente ! Profitez de votre temps libre.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Right Column - Sidebar -->
    <div class="space-y-8">
        <!-- Sessions Live -->
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <h3 class="text-lg font-display font-bold text-gray-900 flex items-center gap-3">
                    <span class="w-2 h-6 bg-purple-600 rounded-full"></span>
                    Sessions Live
                </h3>
            </div>
            
            <div class="p-6 space-y-4">
                @forelse($liveSessions->take(3) as $session)
                    <div class="p-4 bg-purple-50 rounded-xl border border-purple-100 relative overflow-hidden">
                        <div class="absolute top-3 right-3">
                            <span class="flex h-3 w-3 relative">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                            </span>
                        </div>
                        <span class="text-[10px] font-bold uppercase text-purple-600 tracking-widest">{{ strtoupper($session->provider) }}</span>
                        <h4 class="font-bold text-gray-900 mt-1">{{ $session->topic }}</h4>
                        <p class="text-sm text-gray-500 mt-1">{{ $session->course->title }}</p>
                        <p class="text-xs text-gray-400 mt-2">
                            <i class="fa-regular fa-calendar mr-1"></i>
                            {{ \Carbon\Carbon::parse($session->scheduled_at)->format('d/m à H:i') }}
                        </p>
                        <a href="{{ $session->meeting_url }}" target="_blank" class="mt-3 block w-full py-2.5 bg-purple-600 text-white text-center font-bold rounded-lg text-sm hover:bg-purple-700 transition-colors">
                            Rejoindre
                        </a>
                    </div>
                @empty
                    <div class="text-center py-6">
                        <i class="fa-solid fa-video text-3xl text-gray-300 mb-3"></i>
                        <p class="text-sm text-gray-500 italic">Aucune session programmée</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Classement -->
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <h3 class="text-lg font-display font-bold text-gray-900 flex items-center gap-3">
                    <span class="w-2 h-6 bg-amber-500 rounded-full"></span>
                    Mon Classement
                </h3>
            </div>
            
            <div class="p-6 text-center">
                <div class="w-24 h-24 mx-auto mb-4 relative">
                    <svg class="w-full h-full transform -rotate-90">
                        <circle cx="48" cy="48" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                        <circle cx="48" cy="48" r="40" stroke="url(#gradient)" stroke-width="8" fill="none" 
                                stroke-dasharray="251.2" stroke-dashoffset="50" stroke-linecap="round"/>
                        <defs>
                            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                <stop offset="0%" style="stop-color:#c9a227"/>
                                <stop offset="100%" style="stop-color:#d4b84a"/>
                            </linearGradient>
                        </defs>
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-2xl font-display font-bold text-gray-900">#23</span>
                    </div>
                </div>
                <p class="text-sm text-gray-500 mb-4">sur 150 étudiants</p>
                
                <div class="flex justify-center gap-6 text-center">
                    <div>
                        <span class="block text-2xl font-display font-bold text-amber-600">{{ auth()->user()->total_points ?? 0 }}</span>
                        <span class="text-xs text-gray-500 font-semibold">Points XP</span>
                    </div>
                    <div>
                        <span class="block text-2xl font-display font-bold text-green-600">{{ auth()->user()->badges->count() ?? 0 }}</span>
                        <span class="text-xs text-gray-500 font-semibold">Badges</span>
                    </div>
                </div>
                
                <a href="{{ route('gamification.leaderboard') }}" class="mt-6 block w-full py-3 bg-amber-50 text-amber-700 font-bold rounded-xl hover:bg-amber-100 transition-colors">
                    Voir le classement complet
                </a>
            </div>
        </div>

        <!-- Prochain Badge -->
        <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-100 p-6">
            <h3 class="text-lg font-display font-bold text-gray-900 mb-4 flex items-center gap-3">
                <i class="fa-solid fa-trophy text-amber-500"></i>
                Prochain Badge
            </h3>
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center">
                    <i class="fa-solid fa-code text-2xl text-amber-600"></i>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-gray-900">Expert Python</h4>
                    <p class="text-sm text-gray-600 mb-2">Complétez 3 cours Python</p>
                    <div class="w-full h-2 bg-amber-200 rounded-full overflow-hidden">
                        <div class="h-full bg-amber-500 rounded-full" style="width: 66%"></div>
                    </div>
                    <p class="text-xs text-amber-700 font-semibold mt-1">2/3 complétés</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection