elearning/Frontend-Learner/pages/classroom/learning.vue

<script setup lang="ts">
/**
 * @file learning.vue
 * @description หน้าเรียนออนไลน์ (Classroom Interface)
 * จัดการแสดงผลวิดีโอรายการบทเรียน และติดตามความคืบหน้า
 * ออกแบบให้เหมือนระบบ LMS มาตรฐาน
 */

definePageMeta({
  layout: false,
  middleware: 'auth'
})

useHead({
  title: 'ห้องเรียนออนไลน์ - e-Learning'
})

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const { user } = useAuth()
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements, markLessonComplete, getLocalizedText } = useCourse()
const $q = useQuasar()

// การจัดการสถานะ (State management)
const sidebarOpen = ref(false)
const courseId = computed(() => Number(route.query.course_id))

// ==========================================
// 1. ตัวแปร State (สถานะของ UI)
// ==========================================
// courseData: เก็บข้อมูลโครงสร้างคอร์ส (บทเรียนต่างๆ)
const courseData = ref<any>(null)
const announcements = ref<any[]>([]) // สถานะของประกาศ (Announcements state)
const showAnnouncementsModal = ref(false) // สถานะของป๊อปอัป (Modal state)
const hasUnreadAnnouncements = ref(false) // ติดตามสถานะที่ยังไม่ได้อ่าน (Unread state tracking)

// ฟังก์ชันช่วยเหลือสำหรับเก็บสถานะการอ่านถาวร (Helper for persistent read status)
const getAnnouncementStorageKey = () => {
    if (!user.value?.id || !courseId.value) return ''
    return `read_announcements:${user.value.id}:${courseId.value}`
}

const checkUnreadAnnouncements = () => {
    if (!announcements.value || announcements.value.length === 0) {
        hasUnreadAnnouncements.value = false
        return
    }
    
    if (typeof window === 'undefined') return 

    const key = getAnnouncementStorageKey()
    if (!key) return 

    const lastRead = localStorage.getItem(key)
    if (!lastRead) {
        hasUnreadAnnouncements.value = true
        return
    }

    const lastReadDate = new Date(lastRead).getTime()
    const hasNew = announcements.value.some(a => {
        const annDate = new Date(a.created_at || Date.now()).getTime()
        // ตรวจสอบว่าประกาศใหม่กว่าที่อ่านครั้งล่าสุดหรือไม่ (Check if announcement is strictly newer than last read)
        return annDate > lastReadDate
    })
    
    hasUnreadAnnouncements.value = hasNew
}

// ฟังก์ชันจัดการเมื่อเปิดประกาศ (Handler for opening announcements)
const handleOpenAnnouncements = () => {
    showAnnouncementsModal.value = true
    hasUnreadAnnouncements.value = false // ลบป้ายแจ้งเตือนเมื่อคลิก (Clear unread badge on click)
    
    const key = getAnnouncementStorageKey()
    if (key) {
        localStorage.setItem(key, new Date().toISOString())
    }
}

// currentLesson: บทเรียนที่กำลังเรียนอยู่ปัจจุบัน
const currentLesson = ref<any>(null)
const isLoading = ref(true)        // โหลดข้อมูลคอร์ส
const isLessonLoading = ref(false) // โหลดเนื้อหาบทเรียน

// Video Player State (สถานะวิดีโอ)
const videoRef = ref<HTMLVideoElement | null>(null)
const isPlaying = ref(false)
const videoProgress = ref(0)
const currentTime = ref(0)
const duration = ref(0)
const activeTab = ref('content')



const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}

// การจัดการตรรกะจำนวนครั้งในการทำแบบทดสอบ (Logic Quiz Attempt Management)
const quizStatus = computed(() => {
  if (!currentLesson.value || currentLesson.value.type !== 'QUIZ' || !currentLesson.value.quiz) return null
  
  const quiz = currentLesson.value.quiz
  const latestAttempt = quiz.latest_attempt
  const allowMultiple = quiz.allow_multiple_attempts

  // หากยังไม่เคยทดสอบ (If never attempted)
  if (!latestAttempt) {
    return {
      canStart: true,
      label: t('quiz.startBtn'),
      icon: 'play_arrow',
      showScore: false
    }
  }

  // หากอนุญาตให้ทดสอบได้หลายครั้ง (If multiple attempts allowed)
  if (allowMultiple) {
    return {
      canStart: true,
      label: t('quiz.retryBtn'),
      icon: 'refresh',
      showScore: true,
      score: latestAttempt.score,
      isPassed: latestAttempt.is_passed
    }
  }

  // ไม่อนุญาตให้สอบได้หลายครั้ง (allowMultiple is false (Single attempt only))
  // ล็อกแบบทดสอบหลังทำเสร็จไม่ว่าจะผ่านหรือไม่ผ่าน (Lock the quiz regardless of pass/fail once attempted)
  return {
    canStart: false,
    label: latestAttempt.is_passed ? t('quiz.passedStatus') : t('quiz.failedStatus'),
    icon: latestAttempt.is_passed ? 'check_circle' : 'cancel',
    showScore: true,
    score: latestAttempt.score,
    isPassed: latestAttempt.is_passed
  }
})

const handleStartQuiz = () => {
    if (!currentLesson.value || !currentLesson.value.quiz) return

    const quiz = currentLesson.value.quiz
    
    // หากทำได้ครั้งเดียวและนี่เป็นครั้งแรก (If multiple attempts are disabled and it's the first time)
    if (!quiz.allow_multiple_attempts && !quiz.latest_attempt) {
        $q.dialog({
            title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
            message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.singleAttemptWarning')}</div>`,
            html: true,
            persistent: true,
            class: 'rounded-[24px]',
            ok: {
                label: t('quiz.continue'),
                color: 'primary',
                unelevated: true,
                rounded: true,
                class: 'px-8 font-black'
            },
            cancel: {
                label: t('common.cancel'),
                color: 'grey-7',
                flat: true,
                rounded: true,
                class: 'font-bold'
            }
        }).onOk(() => {
            router.push(`/classroom/quiz?course_id=${courseId.value}&lesson_id=${currentLesson.value.id}`)
        })
    } else {
        router.push(`/classroom/quiz?course_id=${courseId.value}&lesson_id=${currentLesson.value.id}`)
    }
}

// Helper สำหรับรีเซ็ตข้อมูลและย้ายหน้า (Hard Reload)
const resetAndNavigate = (path: string) => {
  if (import.meta.client) {
    // 1. เก็บข้อมูลที่ต้องการรักษาไว้ (Whitelist)
    const whitelist: Record<string, string> = {}
    const keepKeys = ['remembered_email', 'theme', 'auth_token'] // เพิ่ม auth_token เพื่อไม่ให้หลุด login
    
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i)
        if (!key) continue
        
        // เก็บเฉพาะ key ที่อยู่ใน whitelist หรือเป็นข้อมูลประกาศ/แจ้งเตือน
        if (keepKeys.includes(key) || key.startsWith('read_announcements:')) {
            const value = localStorage.getItem(key)
            if (value !== null) whitelist[key] = value
        }
    }
    
    // 2. ลบข้อมูลใน localStorage ทั้งหมด (Clear all localStorage)
    localStorage.clear()
    
    // 3. คืนค่าเฉพาะคีย์ที่อนุญาต (Restore ONLY whitelisted keys)
    Object.keys(whitelist).forEach(key => {
        localStorage.setItem(key, whitelist[key])
    })
    
    // 4. บังคับโหลดหน้าเว็บใหม่ไปยังเส้นทางใหม่ (Force hard reload to the new path)
    window.location.href = path
  } else {
    // การทำงานสำรองสำหรับ SSR (SSR Fallback)
    router.push(path)
  }
}

// Logic loadLesson ให้ลื่นไหลแบบ SPA
const handleLessonSelect = (lessonId: number) => {
  if (currentLesson.value?.id === lessonId) return
  
  // 1. อัปเดตพารามิเตอร์ใน URL (Update URL query params)
  router.push({ query: { ...route.query, lesson_id: lessonId.toString() } })
  
  // 2. โหลดเนื้อหาโดยไม่ต้องรีเฟรชหน้าเว็บ (Load content without refresh)
  loadLesson(lessonId)
  
  // ปิดแถบด้านข้างบนมือถือ (Close sidebar on mobile)
  if (sidebarOpen.value) {
    sidebarOpen.value = false
  }
}

// Logic สำหรับการกดย้อนกลับหรือออกจากหน้าเรียน (ใช้ Hard Reload ตามเดิม)
const handleExit = (path: string) => {
  resetAndNavigate(path)
}

// Data Fetching
// ==========================================
// 2. ฟังก์ชันโหลดข้อมูล (Data Fetching)
// ==========================================

// โหลดโครงสร้างคอร์สและบทเรียนทั้งหมด
const loadCourseData = async () => {
  if (!courseId.value) return
  isLoading.value = true
  
  try {
    const res = await fetchCourseLearningInfo(courseId.value)
    if (res.success) {
      courseData.value = res.data
      
      // ตรรกะการโหลดอัตโนมัติ: เช็ค URL ก่อน หากไม่มีให้โหลดบทเรียนแรก (Auto-load logic: Check URL first, fallback to first available lesson)
      const urlLessonId = route.query.lesson_id ? Number(route.query.lesson_id) : null
      
      if (urlLessonId) {
          loadLesson(urlLessonId)
      } else if (!currentLesson.value) {
          const firstChapter = res.data.chapters[0]
          if (firstChapter && firstChapter.lessons.length > 0) {
              const availableLesson = firstChapter.lessons.find((l: any) => !l.is_locked) || firstChapter.lessons[0]
              loadLesson(availableLesson.id)
          }
      }

      // ดึงข้อมูลประกาศของคอร์สเรียน (Fetch Course Announcements)
      const annRes = await fetchCourseAnnouncements(courseId.value)
      if (annRes.success) {
          announcements.value = annRes.data || []
          checkUnreadAnnouncements()
      }
    }
  } catch (error) {
    console.error('Error loading course data:', error)
  } finally {
    isLoading.value = false
  }
}

const loadLesson = async (lessonId: number) => {
  if (currentLesson.value?.id === lessonId) return
  
  // ล้างสถานะวิดีโอเดิมเพื่อบังคับตั้งค่าใหม่ (Clear previous video state & unload component to force reset)
  isPlaying.value = false
  videoProgress.value = 0
  currentTime.value = 0
  initialSeekTime.value = 0
  maxWatchedTime.value = 0
  lastSavedTime.value = -1
  lastSavedTimestamp.value = 0
  lastLocalSaveTimestamp.value = 0
  currentDuration.value = 0
  currentLesson.value = null // ตัวนี้จะทำการซ่อนวิดีโอและซ่อนเนื้อหา (This will unmount VideoPlayer and hide content)
  
  isLessonLoading.value = true
  try {
    // ป้องกันไว้ก่อน: ตรวจสอบสิทธิ์การเข้าถึง (Optional: Check access first)
    const accessRes = await checkLessonAccess(courseId.value, lessonId)
    if (accessRes.success && !accessRes.data.is_accessible) {
        let msg = t('classroom.notAvailable')
        
        // จัดการเหตุผลล็อกเฉพาะจุด (Handle specific lock reasons)
        if (accessRes.data.lock_reason) {
            msg = accessRes.data.lock_reason
        } else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
             const quizTitle = getLocalizedText(accessRes.data.required_quiz_pass.title)
             msg = t('classroom.quizRequired', { title: quizTitle })
        } else if (accessRes.data.required_lessons && accessRes.data.required_lessons.length > 0) {
             const reqLesson = accessRes.data.required_lessons.find((l: any) => !l.is_completed)
             if (reqLesson) {
                msg = t('classroom.lessonRequired', { title: getLocalizedText(reqLesson.title) })
             }
        } else if (accessRes.data.is_enrolled === false) {
             msg = t('classroom.notEnrolled')
        }

        alert(msg)
        isLessonLoading.value = false
        return
    }

    // 1. ดึงข้อมูลเนื้อหา (Fetch content)
    const res = await fetchLessonContent(courseId.value, lessonId)
    if (res.success) {
      currentLesson.value = res.data
      
      // กำหนดค่าออบเจ็กต์ความคืบหน้าหากไม่มี (สำคัญสำหรับผู้ใช้ใหม่) (Initialize progress object if missing)
      if (!currentLesson.value.progress) {
          currentLesson.value.progress = {}
      }
      
      // อัปเดตสถานะสำเร็จของบทเรียนบน UI อย่างปลอดภัย (Update Lesson Completion UI status safely)
      if (currentLesson.value?.progress?.is_completed && courseData.value) {
          for (const chapter of courseData.value.chapters) {
              const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
              if (lesson) {
                  if (!lesson.progress) lesson.progress = {}
                  lesson.progress.is_completed = true
                  lesson.is_completed = true // ตั้งค่าสถานะสำเร็จให้เป็นมาตรฐาน (Standardize completion property)
                  break
              }
          }
      }

      // 2. ดึงความคืบหน้าเริ่มต้นเพื่อเล่นต่อ (Fetch Initial Progress (Resume Playback))
      if (currentLesson.value.type === 'VIDEO') {
           // หากเรียนจบแล้ว ให้ล้างจุดที่ดูล่าสุดเพื่อดูใหม่ได้ (If already completed, clear local resume point to allow fresh re-watch)
           const isCompleted = currentLesson.value.progress?.is_completed || false
           
           if (isCompleted) {
               const key = getLocalProgressKey(lessonId)
               if (key && typeof window !== 'undefined') {
                   localStorage.removeItem(key)
               }
               initialSeekTime.value = 0
               maxWatchedTime.value = 0
               currentTime.value = 0
           } else {
               // ถ้ายังเรียนไม่จบ? กลับไปเล่นจากจุดเดิม (Not completed? Resume from where we left off)
               const progressRes = await fetchVideoProgress(lessonId)
               let serverProgress = 0
               if (progressRes.success && progressRes.data?.video_progress_seconds) {
                   serverProgress = progressRes.data.video_progress_seconds
               }

               const localProgress = getLocalProgress(lessonId)
               const resumeTime = Math.max(serverProgress, localProgress)
               
               if (resumeTime > 0) {
                   initialSeekTime.value = resumeTime
                   maxWatchedTime.value = resumeTime 
                   currentTime.value = resumeTime
               } else {
                   initialSeekTime.value = 0
                   maxWatchedTime.value = 0
               }
           }
      }
    }
  } catch (error) {
    console.error('Error loading lesson:', error)
  } finally {
    isLessonLoading.value = false
  }
}

// ข้อมูลอ้างอิงวิดีโอ (Video Player Ref (Component))
const videoPlayerComp = ref(null)

// สถานะความก้าวหน้าและวิดีโอ (Video & Progress State)
const initialSeekTime = ref(0)
const maxWatchedTime = ref(0) // การติดตามแบบไม่ย้อนกลับ (Anti-rewind monotonic tracking)
const lastSavedTime = ref(-1)
const lastSavedTimestamp = ref(0) // เวลาบันทึกในเซิร์ฟเวอร์ (Server throttle timestamp)
const lastLocalSaveTimestamp = ref(0) // เวลาบันทึกในเครื่อง (Local throttle timestamp)
const currentDuration = ref(0) // ติดตามเวลาของวิดีโอ (Track duration for save logic)

// ฟังก์ชันช่วยเหลือ: ชื่อคีย์สำหรับ Local Storage (Helper: Get Local Storage Key)
const getLocalProgressKey = (lessonId: number) => {
    if (!user.value?.id) return null
    return `progress:${user.value.id}:${lessonId}`
}

// ฟังก์ชันช่วยเหลือ: ดึงความคืบหน้าจากเครื่อง (Helper: Get Local Progress)
const getLocalProgress = (lessonId: number): number => {
    try {
        const key = getLocalProgressKey(lessonId)
        if (!key) return 0
        const stored = localStorage.getItem(key)
        return stored ? parseFloat(stored) : 0
    } catch (e) {
        return 0
    }
}

// ฟังก์ชันช่วยเหลือ: บันทึกลงเครื่อง (Helper: Save to Local Storage)
const saveLocalProgress = (lessonId: number, time: number) => {
    try {
        const key = getLocalProgressKey(lessonId)
        if (key) {
           localStorage.setItem(key, time.toString())
        }
    } catch (e) {
        // ข้ามกรณีเกิดข้อผิดพลาดในการบันทึก (Ignore storage errors)
    }
}

// ฟังก์ชันจัดการเวลาของวิดีโอ (จาก Component) (Handler: Video Time Update (from Component))
const handleVideoTimeUpdate = (cTime: number, dur: number) => {
  currentDuration.value = dur || 0
  
  // อัปเดตความคืบหน้าแบบทางเดียว (Update Monotonic Progress)
  if (cTime > maxWatchedTime.value) {
      maxWatchedTime.value = cTime
  }
  
  // ตรรกะ: บันทึกเป็นระยะ (Logic: Periodic Save) 
  if (currentLesson.value?.id) {
      const now = Date.now()
      
      // 1. การหน่วงเวลาบันทึกในเครื่อง (5 วินาที) (Local Save Throttle (5 seconds))
      if (now - lastLocalSaveTimestamp.value > 5000) {
          saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
          lastLocalSaveTimestamp.value = now
      }
      
      // 2. การหน่วงเวลาบันทึกบนเซิร์ฟเวอร์ (จัดการใน performSaveProgress)
      // หมายเหตุ: เราไม่เช็ค isPlaying ตรงนี้เพราะถ้าเวลาเดินแปลว่าเล่นอยู่ (Note: We don't check isPlaying here because if time is updating, it IS playing.)
      performSaveProgress(false, false)
  }
}

const onVideoMetadataLoaded = (duration: number) => {
    if (duration > 0) {
        currentDuration.value = duration
    }
}

const isCompleting = ref(false) // ตัวแปรกันการแย่งกันทำงานตอนเรียนจบ (Flag to prevent race conditions during completion)

// -----------------------------------------------------
// ระบบบันทึกความคืบหน้าที่แข็งแกร่ง (ไฮบริด: ในเครื่อง + เซิร์ฟเวอร์) (ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server))
// -----------------------------------------------------

// ฟังก์ชันหลักสำหรับบันทึกลงเซิร์ฟเวอร์ (Main Server Save Function)
const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
    const lesson = currentLesson.value
    if (!lesson || lesson.type !== 'VIDEO') return
    
    // ทำให้แน่ใจว่ามีออบเจ็กต์ความคืบหน้าอยู่ (Ensure progress object exists)
    if (!lesson.progress) lesson.progress = {}

    // 1. ป้องกันเมื่อดูจบแล้ว: ไม่ต้องบันทึกอีกถ้าดูจบไปแล้ว (Completed Guard: Stop everything if already completed)
    if (lesson.progress.is_completed) return

    // 2. ป้องกันการเรียกซ้ำ: ไม่ทำงานถ้ากำลังบันทึกเวลาจบอยู่ (Race Condition Guard: Stop if currently completing)
    if (isCompleting.value) return

    const now = Date.now()
    const maxSec = Math.floor(maxWatchedTime.value) // ใช้เวลาที่ดูไปมากที่สุด (Use max watched time)
    const durationSec = Math.floor(currentDuration.value || 0)

    // 3. ตรวจสอบการเดินหน้า: ยอมให้บันทึก 0 ได้ถ้าเป็นการบันทึกครั้งแรก (lastSavedTime is -1) (Monotonic Check: Allow saving 0 if it's the very first save)
    if (!force) {
        if (lastSavedTime.value === -1) {
            // บันทึกครั้งแรก: ยอมรับ 0 หรือมากกว่า (First time save: allow 0 or more)
            if (maxSec < 0) return 
        } else if (maxSec <= lastSavedTime.value) {
            // การบันทึกครั้งถัดไป: ต้องมากกว่าครั้งล่าสุด (Subsequent saves: must be greater than last saved)
            return
        }
    }
    
    // 4. ตรวจสอบการหน่วงเวลา: เซิร์ฟเวอร์ (15 วินาที) (Throttle Check: Server Throttle (15 seconds))
    if (!force && (now - lastSavedTimestamp.value < 15000)) return

    // เตรียมบันทึก (Prepare for Save)
    lastSavedTime.value = maxSec 
    lastSavedTimestamp.value = now

    // เช็คว่าการบันทึกนี้จะทำให้จบบทเรียนหรือไม่ (เช่น 100% หรือบังคับจบ) (Check if this save might complete the lesson)
    const isFinishing = force || (durationSec > 0 && maxSec >= durationSec)
    
    if (isFinishing) {
        isCompleting.value = true
    }

    try {
        const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
        
        // จัดการเมื่อดูจบ (กลยุทธ์เฉพาะฝั่งหน้าเว็บ: ให้ผ่านที่ 95%) (Handle Completion (Frontend-only strategy: 95% threshold))
        // เพื่อให้เครื่องหมายถูกขึ้นที่ 95% ตรงกับหลังบ้าน (This ensures the checkmark appears at 95% to match backend.)
        const progressPercentage = durationSec > 0 ? (maxSec / durationSec) : 0
        const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)

        if (isCompletedNow) {
             const wasAlreadyCompleted = lesson.progress?.is_completed
             markLessonAsCompletedLocally(lesson.id)
             if (lesson.progress) lesson.progress.is_completed = true
             
             // หากเพิ่งเรียนจบใหม่ ให้โหลดเนื้อหาใหม่เพื่อปลดล็อกบทถัดไป (If newly completed, reload course data to unlock next lesson in sidebar)
             if (!wasAlreadyCompleted) {
                 await loadCourseData()
             }
        }
    } catch (err) {
        console.error('Save progress failed', err)
    } finally {
        if (isFinishing) {
            isCompleting.value = false
        }
    }
}

// ฟังก์ชันช่วยเหลือสำหรับอัปเดตแถบด้านข้าง (Helper to update Sidebar UI)
const markLessonAsCompletedLocally = (lessonId: number) => {
    if (courseData.value) {
        for (const chapter of courseData.value.chapters) {
            const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
            if (lesson) {
                // สอดคล้องกับโครงสร้าง API (Compatible with API structure)
                lesson.is_completed = true
                if (!lesson.progress) lesson.progress = {}
                lesson.progress.is_completed = true
                break
            }
        }
    }
}

const videoSrc = computed(() => {
  if (!currentLesson.value) return ''
  let url = ''
  
  // ใช่ video_url โดยตรงจาก API ก่อน (Use explicit video_url from API first)
  if (currentLesson.value.video_url) {
    url = currentLesson.value.video_url
  } else {
    // สำรอง (ตรรกะแบบเก่า)
    const content = getLocalizedText(currentLesson.value.content)
    if (content && (content.startsWith('http') || content.startsWith('/')) && !content.includes(' ')) {
      url = content
    }
  }

  if (!url) return ''

  // รองรับการเล่นต่อสำหรับ YouTube (Support Resume for YouTube)
  const isYoutube = url.toLowerCase().includes('youtube.com') || url.toLowerCase().includes('youtu.be')
  if (isYoutube && initialSeekTime.value > 0) {
      const separator = url.includes('?') ? '&' : '?'
      return `${url}${separator}t=${Math.floor(initialSeekTime.value)}`
  }
  
  return url
})

// เมื่อวิดีโอจบ ให้บันทึกว่าเรียนจบ (Complete)
const onVideoEnded = async () => {
    const lesson = currentLesson.value
    if (!lesson) return

    // ล้าง localStorage เนื่องจากดจบแล้ว (Clear local storage on end since it's completed)
    const key = getLocalProgressKey(lesson.id)
    if (key && typeof window !== 'undefined') {
        localStorage.removeItem(key)
    }

    if (lesson.progress?.is_completed || isCompleting.value) return

    isCompleting.value = true
    try {
        await performSaveProgress(true, false)
    } catch (err) {
        console.error('Failed to save progress on end:', err)
    } finally {
        isCompleting.value = false
    }
}

onMounted(() => {
  loadCourseData()
})

onBeforeUnmount(() => {
  // ล้างสถานะเมื่อออกจากหน้าเพื่อให้หน้าเหมือนใหม่ตอนกลับมา (Clear state when leaving the page to ensure fresh start on return)
  courseData.value = null
  currentLesson.value = null
})
</script>

<template>
  <q-layout view="hHh lpR lFf" class="bg-[var(--bg-body)] text-[var(--text-main)]">
    
    <!-- Header -->
    <q-header bordered class="bg-[var(--bg-surface)] border-b border-gray-200 dark:border-white/5 text-[var(--text-main)] h-16">
      <q-toolbar class="h-full px-4">
        <!-- 1. Left Side: Back & Title -->
        <div class="flex items-center gap-4 flex-grow overflow-hidden">
            <!-- Back Button -->
            <q-btn 
              flat 
              round
              dense
              color="primary"
              class="bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
              @click="handleExit('/dashboard/my-courses')"
            >
              <q-icon name="arrow_back" size="20px" />
              <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
            </q-btn>
            
            <!-- Course Title -->
            <div class="flex flex-col">

                <h1 class="text-base md:text-lg font-bold text-slate-900 dark:text-white truncate max-w-[200px] md:max-w-md leading-tight">
                    {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
                </h1>
            </div>
        </div>

        <!-- 2. Right Side: Actions -->
        <div class="flex items-center gap-3">
           <!-- Sidebar Toggle (Right Side) -->
           <q-btn 
              flat 
              round 
              dense 
              class="text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" 
              @click="toggleSidebar"
            >
               <q-icon name="menu_open" size="24px" class="transform rotate-180" />
               <q-tooltip>{{ $t('classroom.curriculum') }}</q-tooltip>
            </q-btn>

           <!-- Announcements Button (Refined) -->
           <q-btn
             flat
             round
             dense
             class="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-700 transition-all relative overflow-visible"
             @click="handleOpenAnnouncements"
           >
             <q-icon name="campaign" size="22px" />
             <!-- Red Dot Notification -->
             <span v-if="hasUnreadAnnouncements" class="absolute top-2 right-2 w-2.5 h-2.5 bg-rose-500 border-2 border-white dark:border-slate-900 rounded-full"></span>
             <q-tooltip>{{ $t('classroom.announcements') }}</q-tooltip>
           </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <!-- แถบด้านข้าง (บทเรียน) - วางชิดขวาผ่านพร็อพพ์ -->
    <CurriculumSidebar
      v-model="sidebarOpen"
      :courseData="courseData"
      :currentLessonId="currentLesson?.id"
      :isLoading="isLoading"
      :hasUnreadAnnouncements="hasUnreadAnnouncements"
      @select-lesson="handleLessonSelect"
      @open-announcements="handleOpenAnnouncements"
    />

    <!-- พื้นที่เนื้อหาหลัก (Main Content) -->
    <q-page-container class="bg-white dark:bg-slate-900">
      <q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
         <!-- กรอบวิดีโอและพื้นที่เนื้อหา (Video Player & Content Area) -->
         <div class="w-full h-full p-4 md:p-6 flex-grow overflow-y-auto">
            <!-- 1. สถานะกำลังโหลด (โครงสร้างเสมือน (Skeleton) สมบูรณ์แบบ) (LOADING STATE (Comprehensive Skeleton)) -->
            <div v-if="isLessonLoading" class="animate-fade-in">
                <!-- โครงภาพวิดีโอ (Video Skeleton) -->
                <div class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-3xl animate-pulse flex items-center justify-center mb-10 overflow-hidden relative shadow-xl focus:outline-none">
                    <img 
                        v-if="courseData?.course?.thumbnail_url"
                        :src="courseData.course.thumbnail_url" 
                        class="absolute inset-0 w-full h-full object-cover opacity-20 blur-md"
                    />
                    <div class="absolute inset-0 bg-gradient-to-br from-slate-200/50 to-slate-300/50 dark:from-slate-900/80 dark:to-slate-800/80"></div>
                    <div class="z-10 flex flex-col items-center">
                        <q-spinner size="3.5rem" color="primary" :thickness="2" />
                        <p class="mt-4 text-slate-500 font-bold text-xs uppercase tracking-[0.2em]">{{ $t('common.loading') }}</p>
                    </div>
                </div>
                
                <!-- โครงข้อมูล (Info Skeleton) -->
                <div class="bg-white dark:bg-slate-800/50 p-8 rounded-3xl border border-slate-100 dark:border-white/5 shadow-sm">
                    <div class="h-10 bg-slate-200 dark:bg-slate-800 rounded-xl w-3/4 mb-4 animate-pulse"></div>
                    <div class="h-4 bg-slate-100 dark:bg-slate-800 rounded-lg w-full mb-2 animate-pulse"></div>
                    <div class="h-4 bg-slate-100 dark:bg-slate-800 rounded-lg w-2/3 animate-pulse"></div>
                </div>
            </div>
            
            <!-- 2. สถานะพร้อมใช้งาน (ข้อมูลบทเรียนจริง) (READY STATE (Real Lesson Content)) -->
            <div v-else-if="currentLesson" class="animate-fade-in">
                <!-- ส่วนการเล่นวิดีโอ (Video Player) -->
                <VideoPlayer
                   v-if="videoSrc"
                   ref="videoPlayerComp"
                   :src="videoSrc"
                   :poster="courseData?.course?.thumbnail_url"
                   :initialSeekTime="initialSeekTime"
                   @timeupdate="handleVideoTimeUpdate"
                   @ended="onVideoEnded"
                   @loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
                />
            
              <!-- ข้อมูลบทเรียน (Lesson Info) -->
              <div class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
                <div class="flex items-start justify-between gap-4 mb-4">
                    <h1 class="text-3xl md:text-5xl font-black text-slate-900 dark:text-white leading-tight tracking-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
                </div>
                
                <p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
                
                <!-- ช่องบทเรียน (Text/HTML) (Lesson Content Area) -->
                <div v-if="currentLesson.type === 'QUIZ'" class="p-8 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:from-slate-800/50 dark:to-slate-900/50 rounded-2xl border border-blue-100 dark:border-white/5 text-center">
                    <div class="bg-white dark:bg-slate-800 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm text-blue-500 dark:text-blue-400 border dark:border-white/10">
                        <q-icon name="quiz" size="40px" />
                    </div>
                    <h2 class="text-xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('quiz.startTitle') }}</h2>
                    <p class="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">{{ getLocalizedText(currentLesson.quiz?.description || currentLesson.description) }}</p>
                    
                    <div class="flex justify-center flex-wrap gap-3 text-sm mb-8">
                         <span v-if="currentLesson.quiz?.questions?.length" class="px-4 py-1.5 bg-white dark:bg-slate-800 rounded-full border border-gray-100 dark:border-white/5 shadow-sm flex items-center gap-2 text-slate-700 dark:text-slate-300 font-bold">
                            <q-icon name="format_list_numbered" size="14px" class="text-blue-500" /> {{ currentLesson.quiz.questions.length }} {{ $t('quiz.questions') }}
                         </span>
                         <span v-if="currentLesson.quiz?.time_limit" class="px-4 py-1.5 bg-white dark:bg-slate-800 rounded-full border border-gray-100 dark:border-white/5 shadow-sm flex items-center gap-2 text-slate-700 dark:text-slate-300 font-bold">
                            <q-icon name="schedule" size="14px" class="text-orange-500" /> {{ currentLesson.quiz.time_limit }} {{ $t('quiz.minutes') }}
                         </span>
                    </div>

                    <div v-if="quizStatus?.showScore" class="mb-8 p-6 bg-white dark:!bg-slate-800/80 rounded-[32px] border border-blue-50 dark:border-white/5 shadow-xl max-w-sm mx-auto backdrop-blur-md">
                        <div class="text-[10px] uppercase font-black tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-4">{{ $t('quiz.latestScore') }}</div>
                        <div class="flex items-center justify-center gap-6">
                            <div class="text-5xl font-black" :class="quizStatus.isPassed ? 'text-emerald-500' : 'text-rose-500'">
                                {{ quizStatus.score }}
                            </div>
                            <div class="h-12 w-px bg-slate-100 dark:bg-white/10"></div>
                            <div class="flex flex-col items-start gap-1">
                                <span class="text-[10px] font-black px-2.5 py-1 rounded-lg uppercase tracking-wider" :class="quizStatus.isPassed ? 'bg-emerald-500/10 text-emerald-500' : 'bg-rose-500/10 text-rose-500'">
                                    {{ quizStatus.isPassed ? $t('quiz.passedStatus') : $t('quiz.failedStatus') }}
                                </span>
                                <span class="text-[10px] text-slate-400 dark:text-slate-500 font-bold">{{ $t('quiz.passingScore') }} {{ currentLesson.quiz.passing_score }}%</span>
                            </div>
                        </div>
                    </div>

                    <q-btn 
                        v-if="quizStatus?.canStart"
                        class="bg-blue-600 text-white shadow-lg shadow-blue-600/30 hover:shadow-blue-600/50 transition-all font-bold px-8"
                        size="lg" 
                        rounded 
                        no-caps
                        :label="quizStatus.label" 
                        :icon="quizStatus.icon"
                        @click="handleStartQuiz"
                    />
                    <div v-else-if="quizStatus" 
                         class="inline-flex items-center gap-2 px-6 py-3 rounded-full font-bold"
                         :class="quizStatus.isPassed ? 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400'"
                    >
                        <q-icon :name="quizStatus.icon" size="20px" />
                        {{ quizStatus.label }}
                    </div>
                </div>
                <div v-else-if="currentLesson.content" class="prose prose-lg dark:prose-invert max-w-none p-6 md:p-8 bg-gray-50 dark:bg-slate-800/50 rounded-2xl border border-gray-100 dark:border-white/5">
                    <div v-html="getLocalizedText(currentLesson.content)" class="leading-relaxed text-slate-800 dark:text-slate-200"></div>
                </div>

                <!-- ส่วนเอกสารแนบ (Attachments Section) -->
                <div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8 pt-6 border-t border-gray-100 dark:border-white/5">
                    <h3 class="text-lg font-bold mb-4 text-slate-900 dark:text-white flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
                            <q-icon name="attach_file" size="18px" />
                        </div>
                        {{ $t('classroom.attachments') }}
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <a 
                            v-for="file in currentLesson.attachments" 
                            :key="file.file_name"
                            :href="file.presigned_url"
                            target="_blank"
                            class="flex items-center gap-4 p-4 rounded-xl border border-slate-200 dark:!border-white/10 bg-white dark:!bg-slate-800 hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-md transition-all group relative overflow-hidden"
                        >
                            <div class="w-12 h-12 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-500 flex items-center justify-center flex-shrink-0">
                                <q-icon name="picture_as_pdf" size="24px" />
                            </div>
                            <div class="flex-1 min-w-0 z-10">
                                <div class="font-bold text-slate-900 dark:text-slate-200 truncate group-hover:text-blue-600 transition-colors text-sm md:text-base">
                                    {{ file.file_name }}
                                </div>
                                <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                                    {{ (file.file_size / 1024 / 1024).toFixed(2) }} MB
                                </div>
                            </div>
                            <div class="absolute inset-0 bg-blue-50/50 dark:bg-blue-900/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                            <q-icon name="download" class="text-slate-300 group-hover:text-blue-500 z-10" />
                        </a>
                    </div>
                </div> <!-- End Attachments -->
              </div> <!-- End Lesson Info -->
            </div> <!-- End Ready State Wrapper -->
         </div> <!-- End Main Content Wrapper -->
      </q-page>
    </q-page-container>

    <!-- Announcements Modal -->
    <AnnouncementModal
      v-model="showAnnouncementsModal"
      :announcements="announcements"
    />

  </q-layout>
</template>

<style>
.mobile-hide-label .q-btn__content span {
  display: none;
}
@media (min-width: 768px) {
  .mobile-hide-label .q-btn__content span {
    display: inline;
    margin-left: 8px;
  }
}
</style>