course completed up to module lesson

frontend/app/courses/[courseId]/lesson/[lessonId]/page.tsx

@@ -8,7 +8,43 @@ import api from "@/lib/api"
 import { CourseSidebar } from "@/components/course-sidebar"
 import { LessonViewer } from "@/components/lesson-viewer"
 import { Loader2 } from "lucide-react"
-import type { Course } from "@/lib/types"
+
+interface Course {
+  id: string
+  title: string
+  subject: string
+  description: string
+  difficulty: string
+  mentor: string
+  video_url: string
+  embed_url: string
+  students: number
+  created_at: string
+}
+
+interface Module {
+  id: string
+  course_id: string
+  title: string
+  description: string
+  order: number
+  created_at?: string
+}
+
+interface Lesson {
+  id: string
+  module_id: string
+  course_id: string
+  title: string
+  description: string
+  video_url: string
+  embed_url: string
+  order: number
+  duration?: string
+  type: string
+  content?: string
+  created_at?: string
+}
 
 export default function LessonDetailPage() {
   const params = useParams()
@@ -18,6 +54,9 @@ export default function LessonDetailPage() {
   const { user, firebaseUser, isLoading: isAuthLoading } = useAuth()
 
   const [course, setCourse] = useState<Course | null>(null)
+  const [modules, setModules] = useState<Module[]>([])
+  const [lessons, setLessons] = useState<{ [moduleId: string]: Lesson[] }>({})
+  const [currentLesson, setCurrentLesson] = useState<Lesson | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -29,23 +68,97 @@ export default function LessonDetailPage() {
     }
 
     if ((user || firebaseUser) && courseId) {
-      const fetchCourse = async () => {
-        setLoading(true)
-        setError(null)
-        try {
-          const response = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
-          setCourse(response.data)
-        } catch (err: any) {
-          setError(err.message || "Failed to load course.")
-          toast.error(err.message || "Failed to load course.")
-        } finally {
-          setLoading(false)
-        }
-      }
-      fetchCourse()
+      fetchCourseData()
     }
   }, [user, firebaseUser, isAuthLoading, router, courseId])
 
+  const fetchCourseData = async () => {
+    setLoading(true)
+    setError(null)
+    
+    try {
+      console.log('🔍 Fetching course data for:', courseId)
+      
+      // Fetch course details
+      const courseResponse = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
+      const courseData = courseResponse.data
+      console.log('✅ Course data loaded:', courseData)
+      setCourse(courseData)
+
+      // Fetch modules for the course
+      const modulesResponse = await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/modules`, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      
+      if (modulesResponse.ok) {
+        const modulesData = await modulesResponse.json()
+        console.log('✅ Modules data loaded:', modulesData)
+        
+        let modulesList: Module[] = []
+        if (modulesData.modules && Array.isArray(modulesData.modules)) {
+          modulesList = modulesData.modules
+        } else if (Array.isArray(modulesData)) {
+          modulesList = modulesData
+        }
+        
+        setModules(modulesList)
+        
+        // Fetch lessons for all modules
+        const lessonsData: { [moduleId: string]: Lesson[] } = {}
+        let foundCurrentLesson: Lesson | null = null
+        
+        for (const module of modulesList) {
+          const lessonsResponse = await fetch(`http://127.0.0.1:5000/api/modules/${module.id}/lessons`, {
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          })
+          
+          if (lessonsResponse.ok) {
+            const lessonData = await lessonsResponse.json()
+            console.log(`✅ Lessons loaded for module ${module.id}:`, lessonData)
+            
+            let lessonsList: Lesson[] = []
+            if (lessonData.lessons && Array.isArray(lessonData.lessons)) {
+              lessonsList = lessonData.lessons
+            } else if (Array.isArray(lessonData)) {
+              lessonsList = lessonData
+            }
+            
+            lessonsData[module.id] = lessonsList
+            
+            // Find the current lesson
+            if (lessonId && !foundCurrentLesson) {
+              foundCurrentLesson = lessonsList.find(lesson => lesson.id === lessonId) || null
+            }
+          }
+        }
+        
+        setLessons(lessonsData)
+        
+        if (foundCurrentLesson) {
+          setCurrentLesson(foundCurrentLesson)
+          console.log('✅ Current lesson found:', foundCurrentLesson)
+        } else if (lessonId) {
+          console.log('❌ Lesson not found:', lessonId)
+          toast.error("Lesson not found")
+          router.replace(`/courses/${courseId}`)
+        }
+      } else {
+        throw new Error('Failed to fetch modules')
+      }
+      
+    } catch (err: any) {
+      console.error('❌ Error fetching course data:', err)
+      setError(err.message || "Failed to load course.")
+      toast.error(err.message || "Failed to load course.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
   if (isAuthLoading || loading) {
     return (
       <div className="flex justify-center items-center min-h-screen bg-white">
@@ -57,25 +170,62 @@ export default function LessonDetailPage() {
 
   if (error) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-white text-red-600">
-        <p>{error}</p>
+      <div className="flex flex-col justify-center items-center min-h-screen bg-white text-red-600">
+        <p className="text-lg mb-4">{error}</p>
+        <button 
+          onClick={() => router.back()}
+          className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
+        >
+          Go Back
+        </button>
       </div>
     )
   }
 
   if (!course) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-white text-gray-700">
-        <p>Course not found.</p>
+      <div className="flex flex-col justify-center items-center min-h-screen bg-white text-gray-700">
+        <p className="text-lg mb-4">Course not found.</p>
+        <button 
+          onClick={() => router.push('/courses')}
+          className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
+        >
+          Browse Courses
+        </button>
+      </div>
+    )
+  }
+
+  if (!currentLesson) {
+    return (
+      <div className="flex flex-col justify-center items-center min-h-screen bg-white text-gray-700">
+        <p className="text-lg mb-4">Lesson not found.</p>
+        <button 
+          onClick={() => router.push(`/courses/${courseId}`)}
+          className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
+        >
+          Back to Course
+        </button>
       </div>
     )
   }
 
   return (
     <div className="flex flex-col md:flex-row min-h-screen bg-gray-50">
-      <CourseSidebar courseId={course.id} modules={course.modules} activeLessonId={lessonId} />
+      <CourseSidebar 
+        courseId={course.id} 
+        modules={modules}
+        lessons={lessons}
+        activeLessonId={lessonId}
+        currentLesson={currentLesson}
+      />
       <main className="flex-grow p-8 max-w-4xl mx-auto w-full">
-        <LessonViewer courseId={course.id} lessonId={lessonId} />
+        <LessonViewer 
+          courseId={course.id} 
+          lessonId={lessonId}
+          lesson={currentLesson}
+          course={course}
+        />
       </main>
     </div>
   )