<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 getLocalizedText = (text: any) => {
    if (!text) return ''
    if (typeof text === 'string') return text
    return text.th || text.en || ''
}

const formatPrice = (price: number) => {
    return new Intl.NumberFormat('th-TH', { 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">
        <q-btn 
            flat 
            icon="arrow_back" 
            label="ย้อนกลับ" 
            class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors"
            @click="emit('back')"
        />

        <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 bg-black">
                     <template v-if="course.media?.video_url">
                         <video 
                             controls 
                             class="w-full h-full object-cover" 
                             :poster="course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
                         >
                             <source :src="course.media.video_url" type="video/mp4">
                             Your browser does not support the video tag.
                         </video>
                     </template>
                     <!-- Placeholder if no video -->
                     <template v-else>
                         <img 
                            :src="course.cover_image || 'https://placehold.co/800x450?text=No+Preview'" 
                            class="w-full h-full object-cover opacity-60"
                        />
                         <div class="absolute inset-0 flex items-center justify-center">
                             <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
                                 <q-icon name="play_arrow" size="40px" class="text-white" />
                             </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="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
                        <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
                            <q-icon name="category" size="16px" class="text-blue-500" />
                            {{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
                        </span>
                         <span class="flex items-center gap-1">
                            <q-icon name="schedule" size="16px" />
                            {{ course.duration_minutes || 60 }} นาที
                        </span>
                         <span class="flex items-center gap-1">
                            <q-icon name="person" size="16px" />
                            {{ course.instructor?.first_name }} {{ course.instructor?.last_name }}
                        </span>
                    </div>

                    <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-white/5 rounded-3xl p-6 md:p-8">
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                         <q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
                         เนื้อหาบทเรียน
                    </h3>
                    
                    <div class="space-y-4">
                        <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                             <div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
                                 <span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
                                 <span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
                             </div>
                             <div class="divide-y divide-slate-100 dark:divide-slate-800">
                                 <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                     <q-icon 
                                        :name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'" 
                                        :class="lesson.type === 'VIDEO' ? 'text-blue-500 dark:text-blue-400' : 'text-orange-500 dark:text-orange-400'" 
                                        size="18px"
                                     />
                                     <span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
                                     <span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_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="text-center text-slate-400 dark:text-slate-600 py-8">
                             ยังไม่มีเนื้อหาในขณะนี้
                        </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-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-slate-800 relative overflow-hidden">
                          <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                          
                          <div class="relative">
                            <div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display">
                                {{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
                            </div>
                            <div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
                                 {{ formatPrice(course.price * 2) }}
                            </div>

                            <q-btn
                                unelevated
                                rounded
                                size="lg"
                                color="primary"
                                class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
                                :label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
                                :loading="enrollmentLoading"
                                @click="handleEnroll"
                            />
                            
                            <div class="text-xs text-center text-slate-400 dark:text-slate-500">
                                รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
                            </div>

                            <hr class="my-6 border-slate-100 dark:border-slate-800">
                             
                            <div class="space-y-3 block">
                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                    <q-icon name="check_circle" class="text-green-500" />
                                    เข้าเรียนได้ตลอดชีพ
                                </div>
                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                    <q-icon name="check_circle" class="text-green-500" />
                                    ทำแบบทดสอบไม่จำกัด
                                </div>
                                <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                    <q-icon name="check_circle" class="text-green-500" />
                                    ใบประกาศนียบัตรเมื่อเรียนจบ
                                </div>
                            </div>
                          </div>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</template>
