<script setup lang="ts">
/**
 * @file CurriculumSidebar.vue
 * @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
 * Handles lesson navigation, locked status display, and unread announcement badge.
 */

const props = defineProps<{
  modelValue: boolean; // Sidebar open state (v-model)
  courseData: any;
  currentLessonId?: number;
  isLoading: boolean;
  hasUnreadAnnouncements: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'select-lesson', lessonId: number): void;
  (e: 'open-announcements'): void;
}>();

const { locale } = useI18n()

// State for expansion items
const chapterOpenState = ref<Record<string, boolean>>({})

// Helper for localization
const getLocalizedText = (text: any) => {
  if (!text) return ''
  if (typeof text === 'string') return text
  
  // Safe locale access
  const currentLocale = (locale?.value || 'th') as 'th' | 'en'
  return text[currentLocale] || text.th || text.en || ''
}

// Helper: Check if lesson is completed
const isLessonCompleted = (lesson: any) => {
    return lesson.is_completed === true || lesson.progress?.is_completed === true
}

// Reactive Chapter Completion Status
// Computes a map of chapterId -> boolean (true if all lessons are completed)
const chapterCompletionStatus = computed(() => {
    const status: Record<string, boolean> = {}
    if (!props.courseData || !props.courseData.chapters) return status
    
    props.courseData.chapters.forEach((chapter: any) => {
        if (chapter.lessons && chapter.lessons.length > 0) {
            status[chapter.id] = chapter.lessons.every((l: any) => isLessonCompleted(l))
        } else {
            status[chapter.id] = false
        }
    })
    return status
})

// Local Progress Calculation
const progressPercentage = computed(() => {
  if (!props.courseData || !props.courseData.chapters) return 0
  let total = 0
  let completed = 0
  props.courseData.chapters.forEach((c: any) => {
    c.lessons.forEach((l: any) => {
      total++
      if (isLessonCompleted(l)) completed++
    })
  })
  return total > 0 ? Math.round((completed / total) * 100) : 0
})

// Auto-expand chapter containing current lesson
watch(() => props.currentLessonId, (newId) => {
    if (newId && props.courseData?.chapters) {
        props.courseData.chapters.forEach((chapter: any) => {
            const hasLesson = chapter.lessons.some((l: any) => l.id === newId)
            if (hasLesson) {
                chapterOpenState.value[chapter.id] = true
            }
        })
    }
}, { immediate: true })

// Initialize all chapters as open by default on load
watch(() => props.courseData, (newData) => {
    if (newData?.chapters) {
        newData.chapters.forEach((chapter: any) => {
            if (chapterOpenState.value[chapter.id] === undefined) {
                chapterOpenState.value[chapter.id] = true
            }
        })
    }
}, { immediate: true })
</script>

<template>
    <q-drawer
      :model-value="modelValue"
      @update:model-value="(val) => emit('update:modelValue', val)"
      show-if-above
      bordered
      side="right"
      :width="300"
      :breakpoint="1024"
      class="bg-slate-50 dark:bg-slate-900 shadow-xl"
    >
      <!-- Main Container: Enforce Column Layout and Full Width -->
      <div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:text-white relative">
        
        <!-- 1. Header Section (Fixed at Top) -->
        <div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900 z-10 w-full">
           <h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full">{{ getLocalizedText(courseData.course.title) }}</h2>
           
           <div class="flex justify-between items-center mb-2 w-full">
            <span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
            <span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span>
          </div>
          <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
            <div 
              class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out" 
              :style="{ width: `${progressPercentage}%` }"
            ></div>
          </div>
        </div>

        <!-- 2. Curriculum List (Scrollable Area) -->
         <div class="flex-1 overflow-y-auto bg-slate-50 dark:bg-[#0f1219] w-full p-4 space-y-3">
             <q-list class="block w-full">
                <div v-for="(chapter, idx) in courseData.chapters" :key="chapter.id" class="block w-full mb-3">
                    <!-- Chapter Accordion -->
                    <q-expansion-item
                        v-model="chapterOpenState[chapter.id]"
                        class="bg-white dark:bg-[#1a1e29] rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-800 w-full"
                        header-class="rounded-t-xl w-full"
                        expand-icon-class="text-slate-400"
                    >
                        <template v-slot:header>
                            <div class="flex items-center w-full py-3 text-slate-900 dark:text-white">
                                <div class="mr-3 flex-shrink-0">
                                    <!-- Chapter Indicator (Check or Number) -->
                                    <div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-colors font-bold"
                                         :class="chapterCompletionStatus[chapter.id]
                                            ? 'border-green-500 text-green-500 bg-green-50 dark:bg-green-500/10' 
                                            : 'border-slate-300 dark:border-slate-600 text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800'">
                                        <q-icon v-if="chapterCompletionStatus[chapter.id]" name="check" size="14px" class="font-bold" />
                                        <span v-else class="text-[10px]">{{ Number(idx) + 1 }}</span>
                                    </div>
                                </div>
                                <!-- Explicitly handle text overflow -->
                                <div class="flex-1 min-w-0 pr-2 overflow-hidden">
                                    <div class="font-bold text-sm leading-tight mb-0.5 truncate block w-full">{{ getLocalizedText(chapter.title) }}</div>
                                    <div class="text-[10px] text-slate-500 dark:text-slate-400 font-normal truncate block w-full">
                                        {{ chapter.lessons.length }} {{ $t('course.lessonsUnit') }}
                                    </div>
                                </div>
                            </div>
                        </template>

                        <!-- Lessons List -->
                        <div class="bg-slate-50 dark:bg-[#0f1219]/50 border-t border-slate-100 dark:border-slate-800 w-full">
                            <div 
                                v-for="(lesson, lIdx) in chapter.lessons" 
                                :key="lesson.id"
                                class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:bg-slate-800/50 w-full"
                                :class="currentLessonId === lesson.id 
                                    ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/10' 
                                    : 'border-transparent'"
                                @click="!lesson.is_locked && emit('select-lesson', lesson.id)"
                            >
                                <!-- Lesson Status Icon -->
                                <div class="mr-3 flex-shrink-0">
                                    <!-- Completed (Takes Precedence) -->
                                    <q-icon v-if="isLessonCompleted(lesson)" 
                                            name="check_circle" 
                                            class="text-green-500" 
                                            size="20px" 
                                    />
                                    <!-- Active/Playing (If not completed) -->
                                    <q-icon v-else-if="currentLessonId === lesson.id" 
                                            name="play_circle_filled" 
                                            class="text-blue-600 dark:text-blue-400 animate-pulse" 
                                            size="20px" 
                                    />
                                    <!-- Locked -->
                                    <q-icon v-else-if="lesson.is_locked" 
                                            name="lock" 
                                            class="text-slate-400 opacity-70" 
                                            size="18px" 
                                    />
                                    <!-- Not Started -->
                                    <div v-else class="w-[18px] h-[18px] rounded-full border-2 border-slate-300 dark:border-slate-600"></div>
                                </div>

                                <div class="flex-1 min-w-0 overflow-hidden">
                                    <div class="text-xs font-bold truncate leading-snug block w-full"
                                        :class="currentLessonId === lesson.id ? 'text-blue-700 dark:text-blue-300' : 'text-slate-600 dark:text-slate-300'"
                                    >
                                        {{ getLocalizedText(lesson.title) }}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </q-expansion-item>
                </div>
             </q-list>
         </div>
      </div>
      <div v-else-if="isLoading" class="p-6 text-center text-slate-500">
         <q-spinner color="primary" size="2em" />
         <div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
      </div>
    </q-drawer>
</template>

<style scoped>
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
</style>
