@extends('layouts.app')

@section('content')
<x-dashboard-hero
    title="Trainees Dashboard"
    icon="fa-graduation-cap">
</x-dashboard-hero>

<div class="p-6">
    <div class="space-y-8">

        {{-- Contextual Notifications --}}
        @if($stats['active_registrations'] === 0)
            <x-contextual-notification
                type="info"
                message="You are not enrolled in any training packages yet. Browse available packages to get started."
                :dismissible="false" />
        @endif

        @if($stats['registrations']->where('status', 'pending')->count() > 0)
            <x-contextual-notification
                type="info"
                message="{{ $stats['registrations']->where('status', 'pending')->count() }} registration(s) are awaiting approval. You will be notified once approved."
                :dismissible="true" />
        @endif

        @foreach($stats['certificates'] as $cert)
            @if($cert->expiry_date && $cert->expiry_date->diffInDays(now()) <= 30 && !$cert->isExpired())
                <x-contextual-notification
                    type="warning"
                    message="Your certificate for {{ $cert->trainingPackage?->name }} expires on {{ $cert->expiry_date->format('d M Y') }}."
                    :dismissible="true" />
            @endif
        @endforeach

        {{-- Stats Cards --}}
        <x-adaptive-grid :cols="3" :gap="6" class="mb-8">
            {{-- Active Registrations --}}
            <x-glassmorphism-card title="Active Registrations" icon="📚" color="blue">
                <p class="text-3xl font-bold text-gray-800">{{ $stats['active_registrations'] }}</p>
                <p class="text-sm text-gray-500 mt-1">Packages you are enrolled in</p>
            </x-glassmorphism-card>

            {{-- Certificates Earned --}}
            <x-glassmorphism-card title="Certificates Earned" icon="🏆" color="cyan">
                <p class="text-3xl font-bold text-gray-800">{{ $stats['cert_count'] }}</p>
                <p class="text-sm text-gray-500 mt-1">Valid certificates issued to you</p>
            </x-glassmorphism-card>

            {{-- Days Active --}}
            <x-glassmorphism-card title="Days Active" icon="📅" color="purple">
                <p class="text-3xl font-bold text-gray-800">{{ $stats['days_active'] }}</p>
                <p class="text-sm text-gray-500 mt-1">Days since you joined</p>
            </x-glassmorphism-card>
        </x-adaptive-grid>

        {{-- Progress Bars + Spider Chart --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <div class="lg:col-span-2">
                <x-knowledge-progress-bar :registrations="$stats['registrations']" />
            </div>
            <div class="lg:col-span-1">
                <x-skill-spider-chart :completed-by-category="$stats['completed_by_category']" />
            </div>
        </div>

        {{-- Upcoming Sessions + Certificates --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

            {{-- Upcoming Sessions --}}
            <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calendar-alt text-blue-600 text-sm"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">Upcoming Sessions</h3>
                </div>

                @forelse($stats['upcoming_sessions'] as $session)
                    <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-100 last:mb-0">
                        <div class="flex items-start justify-between gap-2">
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-gray-800 text-sm truncate">{{ $session->session_name }}</p>
                                <p class="text-xs text-gray-500 mt-0.5">{{ $session->trainingPackage?->name }}</p>
                                <p class="text-xs text-gray-500 mt-1">
                                    <i class="fas fa-calendar mr-1"></i>
                                    {{ \Carbon\Carbon::parse($session->session_date)->format('D, d M Y') }}
                                    @if($session->start_time)
                                        &nbsp;·&nbsp;{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }}
                                        @if($session->end_time)
                                            – {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
                                        @endif
                                    @endif
                                </p>
                            </div>
                            <div class="flex-shrink-0">
                                @if($session->session_type === 'online')
                                    <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs">Online</span>
                                @elseif($session->session_type === 'hybrid')
                                    <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full text-xs">Hybrid</span>
                                @else
                                    <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs">In Person</span>
                                @endif
                            </div>
                        </div>
                        @if($session->session_type === 'online' && $session->meeting_link)
                            <a href="{{ $session->meeting_link }}" target="_blank" rel="noopener"
                               class="mt-2 inline-flex items-center gap-1 text-xs text-blue-500 hover:text-blue-700 transition">
                                <i class="fas fa-video"></i> Join Meeting
                            </a>
                        @elseif($session->venue_name)
                            <p class="mt-2 text-xs text-gray-400">
                                <i class="fas fa-map-marker-alt mr-1"></i>{{ $session->venue_name }}
                            </p>
                        @endif
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center py-8 text-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                            <i class="fas fa-calendar-times text-gray-400 text-lg"></i>
                        </div>
                        <p class="text-gray-500 text-sm">No upcoming sessions scheduled.</p>
                    </div>
                @endforelse
            </div>

            {{-- Certificates Section --}}
            <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-8 h-8 bg-cyan-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-certificate text-cyan-600 text-sm"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">My Certificates</h3>
                </div>

                @can('view training certificates')
                    @forelse($stats['certificates'] as $cert)
                        <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-100 last:mb-0">
                            <div class="flex items-start justify-between gap-2">
                                <div class="flex-1 min-w-0">
                                    <p class="font-medium text-gray-800 text-sm truncate">
                                        {{ $cert->title ?? $cert->trainingPackage?->name ?? 'Certificate' }}
                                    </p>
                                    <p class="text-xs text-gray-500 mt-0.5">
                                        #{{ $cert->certificate_number }}
                                    </p>
                                    <p class="text-xs text-gray-400 mt-1">
                                        Issued: {{ $cert->issue_date?->format('d M Y') ?? 'N/A' }}
                                        @if($cert->expiry_date)
                                            &nbsp;·&nbsp; Expires: {{ $cert->expiry_date->format('d M Y') }}
                                        @endif
                                    </p>
                                </div>
                                <div class="flex-shrink-0 flex flex-col items-end gap-1">
                                    @if($cert->isExpired())
                                        <span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded-full text-xs">Expired</span>
                                    @elseif($cert->isValid())
                                        <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs">Valid</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs">Invalid</span>
                                    @endif
                                </div>
                            </div>
                            @can('download training certificates')
                                @if($cert->pdf_path)
                                    <a href="{{ route('training.certificates.download', $cert) }}"
                                       class="mt-2 inline-flex items-center gap-1 text-xs text-cyan-600 hover:text-cyan-800 font-medium transition">
                                        <i class="fas fa-download"></i> Download PDF
                                    </a>
                                @endif
                            @endcan
                        </div>
                    @empty
                        <div class="flex flex-col items-center justify-center py-8 text-center">
                            <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                                <i class="fas fa-award text-gray-400 text-lg"></i>
                            </div>
                            <p class="text-gray-500 text-sm">No certificates earned yet.</p>
                            <p class="text-gray-400 text-xs mt-1">Complete a training package to earn your first certificate.</p>
                        </div>
                    @endforelse
                @else
                    <p class="text-gray-400 text-sm py-4 text-center">You do not have permission to view certificates.</p>
                @endcan
            </div>
        </div>

        {{-- Self-Paced Learning Portal Card --}}
        @can('access self-paced learner portal')
        <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl p-6 shadow-lg mb-8">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-book-reader text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">My Self-Paced Courses</h3>
                        <p class="text-blue-200 text-sm">Study at your own pace and earn certificates</p>
                    </div>
                </div>
                <a href="{{ route('self-paced.public.index') }}"
                   class="flex items-center gap-2 px-5 py-2.5 bg-white text-blue-700 font-semibold rounded-lg hover:bg-blue-50 transition text-sm flex-shrink-0">
                    <i class="fas fa-arrow-right"></i>Browse Courses
                </a>
            </div>
        </div>
        @endcan

        {{-- Training Profile & Quick Actions --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            {{-- Training Profile --}}
            <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Training Profile</h3>
                <div class="space-y-3">
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Email</span>
                        <span class="text-gray-800 text-sm">{{ $user->email }}</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Fitness Level</span>
                        <span class="text-gray-800 text-sm capitalize">{{ $user->profile?->fitness_level ?? 'Not Set' }}</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Goals</span>
                        <span class="text-gray-800 text-sm">{{ $user->profile?->goals ?? 'Not Set' }}</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Trainer Preference</span>
                        <span class="text-gray-800 text-sm">{{ $user->profile?->trainer_preference ?? 'Not Set' }}</span>
                    </div>
                    <div class="flex justify-between py-2">
                        <span class="text-gray-500 text-sm">Medical Conditions</span>
                        <span class="text-gray-800 text-sm">{{ $user->profile?->medical_conditions ?? 'None' }}</span>
                    </div>
                </div>
                <a href="{{ route('profile.edit') }}"
                   class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition text-sm">
                    <i class="fas fa-edit"></i> Edit Profile
                </a>
            </div>

            {{-- Quick Actions --}}
            <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3>
                <div class="grid grid-cols-2 gap-4">

                    {{-- Schedule → My Registrations --}}
                    <a href="{{ route('training.registrations.my') }}"
                       x-data="{ hovered: false }"
                       @mouseenter="hovered = true"
                       @mouseleave="hovered = false"
                       :style="hovered
                           ? 'transform: scale(1.05); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'
                           : 'transform: scale(1); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'"
                       class="p-4 bg-gray-50 hover:bg-blue-50 rounded-lg text-center block">
                        <i class="fas fa-calendar-check text-2xl text-blue-500 mb-2 block"></i>
                        <p class="text-gray-600 text-sm">Schedule</p>
                    </a>

                    {{-- My Trainer → Browse Packages (no direct trainer assignment) --}}
                    <a href="{{ route('training.packages.index') }}"
                       x-data="{ hovered: false }"
                       @mouseenter="hovered = true"
                       @mouseleave="hovered = false"
                       :style="hovered
                           ? 'transform: scale(1.05); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'
                           : 'transform: scale(1); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'"
                       class="p-4 bg-gray-50 hover:bg-cyan-50 rounded-lg text-center block">
                        <i class="fas fa-user-friends text-2xl text-cyan-500 mb-2 block"></i>
                        <p class="text-gray-600 text-sm">My Trainer</p>
                    </a>

                    {{-- Progress → My Registrations --}}
                    <a href="{{ route('training.registrations.my') }}"
                       x-data="{ hovered: false }"
                       @mouseenter="hovered = true"
                       @mouseleave="hovered = false"
                       :style="hovered
                           ? 'transform: scale(1.05); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'
                           : 'transform: scale(1); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'"
                       class="p-4 bg-gray-50 hover:bg-purple-50 rounded-lg text-center block">
                        <i class="fas fa-chart-line text-2xl text-purple-500 mb-2 block"></i>
                        <p class="text-gray-600 text-sm">Progress</p>
                    </a>

                    {{-- Workouts → Browse Packages (no workouts module) --}}
                    <a href="{{ route('training.packages.index') }}"
                       x-data="{ hovered: false }"
                       @mouseenter="hovered = true"
                       @mouseleave="hovered = false"
                       :style="hovered
                           ? 'transform: scale(1.05); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'
                           : 'transform: scale(1); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1)'"
                       class="p-4 bg-gray-50 hover:bg-amber-50 rounded-lg text-center block">
                        <i class="fas fa-dumbbell text-2xl text-amber-500 mb-2 block"></i>
                        <p class="text-gray-600 text-sm">Workouts</p>
                    </a>

                </div>
            </div>
        </div>

    </div>
</div>
@endsection
