<script setup lang="ts">
import StudentLayout from '@/Layouts/StudentLayout.vue';
import * as baseRoutes from '@/routes';
import student from '@/routes/student';
import { Head, Link } from '@inertiajs/vue3';
import { BookOpen, Calendar, ChevronRight, Clock, GraduationCap, PlayCircle } from 'lucide-vue-next';

defineProps<{
    enrollments: any[];
}>();

const getThumbnail = (path: string | null) => {
    if (!path) return '/images/course-placeholder.jpg';
    return path.startsWith('http') ? path : `/storage/${path}`;
};
</script>

<template>
    <Head :title="__('Student Dashboard')" />

    <StudentLayout>
        <div class="space-y-6">
            <!-- Welcome Header -->
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ __('Welcome back!') }}</h1>
                    <p class="mt-1 text-slate-500 dark:text-slate-400">{{ __('Continue your learning journey.') }}</p>
                </div>
                <Link
                    :href="baseRoutes.home.url()"
                    class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-500/20 transition-all hover:-translate-y-0.5 hover:bg-primary-700"
                >
                    {{ __('Browse Courses') }}
                    <ChevronRight :size="18" />
                </Link>
            </div>

            <!-- Stats Overview -->
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-admin-card-dark">
                    <div class="flex items-center gap-4">
                        <div class="rounded-xl bg-primary-50 p-3 text-primary-600 dark:bg-primary-900/20 dark:text-primary-400">
                            <BookOpen :size="24" />
                        </div>
                        <div>
                            <div class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ __('Enrolled Courses') }}</div>
                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ enrollments.length }}</div>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-admin-card-dark">
                    <div class="flex items-center gap-4">
                        <div class="rounded-xl bg-emerald-50 p-3 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-400">
                            <PlayCircle :size="24" />
                        </div>
                        <div>
                            <div class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ __('Active Courses') }}</div>
                            <div class="text-2xl font-bold text-slate-900 dark:text-white">
                                {{ enrollments.filter((e) => e.status === 'active').length }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-admin-card-dark">
                    <div class="flex items-center gap-4">
                        <div class="rounded-xl bg-amber-50 p-3 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400">
                            <Clock :size="24" />
                        </div>
                        <div>
                            <div class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ __('Pending Courses') }}</div>
                            <div class="text-2xl font-bold text-slate-900 dark:text-white">
                                {{ enrollments.filter((e) => e.status === 'pending').length }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Course Grid -->
            <div>
                <h2 class="mb-4 text-lg font-bold text-slate-900 dark:text-white">{{ __('My Courses') }}</h2>

                <div v-if="enrollments.length > 0" class="grid gap-4 sm:grid-cols-1 lg:grid-cols-2">
                    <div
                        v-for="enrollment in enrollments"
                        :key="enrollment.id"
                        class="group flex overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm transition-all hover:shadow-md dark:border-slate-800 dark:bg-admin-card-dark dark:shadow-none dark:hover:border-primary-500/50"
                        :class="{ 'opacity-75': enrollment.status !== 'active' }"
                    >
                        <!-- Thumbnail -->
                        <div class="relative aspect-4/3 w-40 shrink-0 overflow-hidden sm:w-44 md:w-48">
                            <img
                                :src="getThumbnail(enrollment.course?.thumbnail)"
                                class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                                :alt="enrollment.course?.title"
                            />
                            <div class="absolute inset-0 bg-linear-to-t from-gray-900 via-gray-900/40 to-transparent"></div>

                            <!-- Status Badge -->
                            <div class="absolute top-2 left-2">
                                <span
                                    v-if="enrollment.status === 'pending'"
                                    class="rounded-lg bg-amber-500/90 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm backdrop-blur-sm"
                                >
                                    {{ __('Pending') }}
                                </span>
                                <span
                                    v-else-if="enrollment.status === 'active'"
                                    class="rounded-lg bg-emerald-500/90 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm backdrop-blur-sm"
                                >
                                    {{ __('Active') }}
                                </span>
                                <span
                                    v-else-if="enrollment.status === 'completed'"
                                    class="rounded-lg bg-blue-500/90 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm backdrop-blur-sm"
                                >
                                    {{ __('Completed') }}
                                </span>
                                <span
                                    v-else
                                    class="rounded-lg bg-rose-500/90 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm backdrop-blur-sm"
                                >
                                    {{ enrollment.status }}
                                </span>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="flex flex-1 flex-col p-4">
                            <!-- Category Badge -->
                            <div class="mb-2">
                                <span
                                    class="inline-block rounded-md bg-slate-100 px-2 py-0.5 text-[10px] font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-400"
                                >
                                    {{ enrollment.course?.category?.name || __('Uncategorized') }}
                                </span>
                            </div>

                            <!-- Title -->
                            <h3
                                class="mb-2 line-clamp-2 text-sm font-bold text-slate-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400"
                            >
                                {{ enrollment.course?.title }}
                            </h3>

                            <!-- Progress Bar (Active courses only) -->
                            <div v-if="enrollment.status === 'active'" class="mb-3">
                                <div class="mb-1 flex items-center justify-between text-[10px] font-bold">
                                    <span class="text-slate-500 dark:text-slate-400">{{ __('Progress') }}</span>
                                    <span
                                        :class="{
                                            'text-amber-600 dark:text-amber-400': enrollment.progress_percentage <= 30,
                                            'text-primary-600 dark:text-primary-400':
                                                enrollment.progress_percentage > 30 && enrollment.progress_percentage <= 70,
                                            'text-emerald-600 dark:text-emerald-400': enrollment.progress_percentage > 70,
                                        }"
                                    >
                                        {{ enrollment.progress_percentage }}%
                                    </span>
                                </div>
                                <div class="h-1.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                    <div
                                        class="h-full rounded-full transition-all duration-500"
                                        :class="{
                                            'bg-linear-to-r from-amber-400 to-amber-500': enrollment.progress_percentage <= 30,
                                            'bg-linear-to-r from-primary-400 to-primary-600':
                                                enrollment.progress_percentage > 30 && enrollment.progress_percentage <= 70,
                                            'bg-linear-to-r from-emerald-400 to-emerald-600': enrollment.progress_percentage > 70,
                                        }"
                                        :style="{ width: `${enrollment.progress_percentage}%` }"
                                    ></div>
                                </div>
                            </div>

                            <!-- Meta Info -->
                            <div class="mb-3 flex items-center gap-3 text-[11px] font-medium text-slate-500 dark:text-slate-400">
                                <div class="flex items-center gap-1">
                                    <BookOpen :size="12" class="text-primary-500" />
                                    <span>{{ enrollment.course?.sections_count || 0 }} {{ __('Sections') }}</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <Calendar :size="12" class="text-primary-500" />
                                    <span>{{
                                        new Date(enrollment.enrolled_at || enrollment.created_at).toLocaleDateString('en-US', {
                                            month: 'short',
                                            day: 'numeric',
                                        })
                                    }}</span>
                                </div>
                            </div>

                            <!-- Action Button -->
                            <div class="mt-auto">
                                <template v-if="enrollment.status === 'active' || enrollment.status === 'completed'">
                                    <Link
                                        :href="student.courses.show.url(enrollment.course?.slug)"
                                        class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary-50 px-3 py-2 text-xs font-bold text-primary-600 transition-all hover:bg-primary-600 hover:text-white dark:bg-primary-900/20 dark:text-primary-400 dark:hover:bg-primary-600 dark:hover:text-white"
                                    >
                                        {{ enrollment.status === 'completed' ? __('View Course') : __('Continue Learning') }}
                                        <ChevronRight :size="14" />
                                    </Link>
                                </template>
                                <template v-else>
                                    <button
                                        disabled
                                        class="flex w-full cursor-not-allowed items-center justify-center gap-1.5 rounded-lg bg-slate-100 px-3 py-2 text-xs font-bold text-slate-400 dark:bg-slate-800 dark:text-slate-600"
                                    >
                                        {{ enrollment.status === 'pending' ? __('Awaiting Approval') : __('Access Restricted') }}
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div
                    v-else
                    class="flex flex-col items-center justify-center rounded-2xl border border-slate-100 bg-white py-16 text-center shadow-sm dark:border-slate-800 dark:bg-admin-card-dark"
                >
                    <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-slate-50 dark:bg-slate-800/50">
                        <GraduationCap :size="40" class="text-slate-300 dark:text-slate-600" />
                    </div>
                    <h2 class="mb-2 text-xl font-bold text-slate-900 dark:text-white">{{ __('No Enrolled Courses Yet') }}</h2>
                    <p class="mx-auto mb-8 max-w-md text-slate-500 dark:text-slate-400">
                        {{ __('Browse our library and start your learning journey today.') }}
                    </p>
                    <Link
                        :href="baseRoutes.home.url()"
                        class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 font-bold text-white shadow-lg shadow-primary-500/20 transition-all hover:-translate-y-0.5 hover:bg-primary-700"
                    >
                        {{ __('Browse Courses') }}
                        <ChevronRight :size="18" />
                    </Link>
                </div>
            </div>
        </div>
    </StudentLayout>
</template>
