<script setup lang="ts">
/**
 * @file CourseDetailView.vue
 * @description Quick view of course details including video preview, curriculum, and enroll logic
 */
import { ref, computed } from 'vue'

const props = defineProps<{
    course: any;
    user: any;
}>();

const emit = defineEmits<{
    (e: 'back'): void;
    (e: 'enroll', courseId: number): void;
}>();

const { locale, t } = useI18n();

const getLocalizedText = (text: any) => {
    if (!text) return ''
    if (typeof text === 'string') return text
    
    const currentLocale = locale.value as 'th' | 'en'
    return text[currentLocale] || text.th || text.en || ''
}

const formatPrice = (price: number) => {
    return new Intl.NumberFormat(locale.value === 'th' ? 'th-TH' : 'en-US', { 
        style: 'currency', 
        currency: 'THB' 
    }).format(price);
}

const enrollmentLoading = ref(false);

const handleEnroll = () => {
    if(!props.course) return;
    enrollmentLoading.value = true;
    emit('enroll', props.course.id);
    // Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
    // In this pattern, we just emit.
    setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
};

</script>

<template>
    <div class="animate-fade-in-up">
        <div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
            <q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
            <span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left: Content Detail -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- Video Preview Section -->
                <div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group cursor-pointer bg-slate-900 border-4 border-white dark:border-slate-800 transition-transform duration-500 hover:scale-[1.01]">
                     <template v-if="course.media?.video_url">
                         <video 
                             controls 
                             class="w-full h-full object-cover" 
                             :poster="course.thumbnail_url || course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
                         >
                             <source :src="course.media.video_url" type="video/mp4">
                             {{ $t('course.videoNotSupported') }}
                         </video>
                         <!-- Custom Play Overlay when not playing - simple version is often best -->
                     </template>
                     <!-- Beautiful Image Showcase if no video -->
                     <template v-else>
                         <div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950 group">
                             <!-- Blurred background fill -->
                             <img 
                                v-if="course.thumbnail_url || course.cover_image"
                                :src="course.thumbnail_url || course.cover_image"
                                class="absolute inset-0 w-full h-full object-cover opacity-40 blur-2xl scale-125"
                             />
                             
                             <!-- Main Sharp Image -->
                             <img 
                                v-if="course.thumbnail_url || course.cover_image"
                                :src="course.thumbnail_url || course.cover_image"
                                class="relative z-10 w-full h-full object-cover shadow-2xl transition-transform duration-700 group-hover:scale-105"
                             />

                             <div v-if="!course.thumbnail_url && !course.cover_image" class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
                                 <q-icon name="image" size="80px" class="text-slate-700 opacity-50" />
                             </div>
                         </div>
                     </template>
                </div>

                <!-- Course Title & Description -->
                <div>
                    <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
                        {{ getLocalizedText(course.title) }}
                    </h1>

                    <div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light">
                        <p>{{ getLocalizedText(course.description) }}</p>
                    </div>
                </div>

                <!-- Curriculum Preview -->
                <div class="bg-slate-50 dark:bg-slate-900 rounded-3xl p-6 md:p-8 border border-slate-200 dark:border-white/5">
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <h3 class="text-xl font-black text-slate-900 dark:text-white mb-1 flex items-center gap-2">
                                {{ $t('course.courseContent') }}
                            </h3>
                        </div>
                        <q-icon name="keyboard_command_key" class="text-slate-200 dark:text-slate-800" size="32px" />
                    </div>
                    
                    <div class="space-y-4">
                        <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
                             <div class="px-6 py-4 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/5 font-black text-slate-800 dark:text-white flex justify-between items-center mb-2 shadow-sm">
                                 <span class="flex items-center gap-3">
                                     <span class="w-7 h-7 flex items-center justify-center bg-slate-100 dark:bg-white/10 rounded-lg text-xs font-bold font-mono">{{ Number(idx) + 1 }}</span>
                                     {{ getLocalizedText(chapter.title) }}
                                 </span>
                                 <span class="text-[10px] uppercase font-black tracking-widest text-slate-400 opacity-60">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
                             </div>
                             <div class="ml-4 pl-4 border-l-2 border-slate-100 dark:border-slate-800 space-y-1 mt-3">
                                 <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-5 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-white/5 rounded-xl transition-all hover:translate-x-1">
                                     <div class="w-8 h-8 rounded-full flex items-center justify-center" :class="lesson.type === 'VIDEO' ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400'">
                                         <q-icon 
                                            :name="lesson.type === 'VIDEO' ? 'play_arrow' : 'article'" 
                                            size="16px"
                                         />
                                     </div>
                                     <span class="flex-1 font-bold">{{ getLocalizedText(lesson.title) }}</span>
                                     <span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-[10px] font-bold">{{ lesson.duration_minutes }} {{ $t('quiz.minutes') }}</span>
                                     <q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
                                 </div>
                             </div>
                        </div>
                        <div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
                             <q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
                             <p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Right: Enrollment Card -->
            <div class="lg:col-span-1">
                 <div class="sticky top-24">
                     <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl shadow-blue-500/10 dark:shadow-none p-8 border border-slate-100 dark:border-white/5 relative overflow-hidden group">
                           <!-- Decorative background glow -->
                           <div class="absolute -top-12 -right-12 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
                           
                           <div class="relative">
                            <div v-if="course.price > 0" class="mb-4">
                                <span class="text-xs font-black uppercase tracking-widest text-slate-400 mb-1 block">{{ $t('course.price', 'ราคาคอร์ส') }}</span>
                                <div class="text-4xl font-black font-display">
                                    <span class="text-slate-900 dark:text-white">
                                        {{ formatPrice(course.price) }}
                                    </span>
                                </div>
                            </div>

                            <q-btn
                                unelevated
                                rounded
                                size="lg"
                                color="primary"
                                class="w-full h-14 shadow-xl shadow-blue-600/30 font-black tracking-tight"
                                :label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')"
                                :loading="enrollmentLoading"
                                @click="handleEnroll"
                            >
                                <template v-slot:loading>
                                    <q-spinner-facebook />
                                </template>
                            </q-btn>
                            
                            <div class="mt-6 space-y-4">
                                <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-4">{{ $t('course.includes', 'คอร์สนี้รวมอะไรบ้าง') }}</p>
                                
                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
                                    <div class="w-6 h-6 rounded-lg bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center">
                                        <q-icon name="all_inclusive" size="14px" class="text-blue-600 dark:text-blue-400" />
                                    </div>
                                    {{ $t('course.fullLifetimeAccess', 'เข้าเรียนได้ตลอดชีพ') }}
                                </div>

                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
                                    <div class="w-6 h-6 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
                                        <q-icon name="workspace_premium" size="14px" class="text-emerald-600 dark:text-emerald-400" />
                                    </div>
                                    {{ $t('course.certificate') }}
                                </div>

                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
                                    <div class="w-6 h-6 rounded-lg bg-purple-50 dark:bg-purple-500/10 flex items-center justify-center">
                                        <q-icon name="devices" size="14px" class="text-purple-600 dark:text-purple-400" />
                                    </div>
                                    {{ $t('course.accessOnMobile', 'เข้าเรียนได้ทุกอุปกรณ์') }}
                                </div>
                            </div>
                           </div>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</template>
