Course admin panel added

frontend/components/lesson-viewer.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import Link from "next/link"
-
 import { useState, useEffect } from "react"
 import { useAuth } from "@/context/auth-context"
 import { useRouter } from "next/navigation"
@@ -9,26 +8,37 @@ import { toast } from "react-hot-toast"
 import type { Lesson } from "@/lib/types"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { Loader2 } from "lucide-react"
+import { Loader2, Play, BookOpen, Clock } from "lucide-react"
 import ReactMarkdown from "react-markdown"
-import { api } from "@/lib/api"
 
 interface LessonViewerProps {
   courseId: string
   lessonId: string
 }
 
+interface LessonData {
+  id: string
+  title: string
+  type: string
+  video_url: string
+  embed_url: string
+  duration: string
+  description: string
+  content: string
+  course_id: string
+  completed?: boolean
+}
+
 export function LessonViewer({ courseId, lessonId }: LessonViewerProps) {
-  const { user, firebaseUser, isLoadingAuth, authMethod, token } = useAuth() // Check token for access
+  const { user, firebaseUser, isLoadingAuth, authMethod, token } = useAuth()
   const router = useRouter()
-  const [lesson, setLesson] = useState<Lesson | null>(null)
+  const [lesson, setLesson] = useState<LessonData | null>(null)
   const [isLoadingLesson, setIsLoadingLesson] = useState(true)
   const [isMarkingCompleted, setIsMarkingCompleted] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     if (!isLoadingAuth && !user && !firebaseUser) {
-      // Allow either MetaMask or Firebase user
       toast.error("Please login to view lessons.")
       router.push("/")
       return
@@ -38,19 +48,35 @@ export function LessonViewer({ courseId, lessonId }: LessonViewerProps) {
       setIsLoadingLesson(true)
       setError(null)
       try {
-        const response = await api.get<Lesson>(`/api/courses/${courseId}/lessons/${lessonId}`)
-        setLesson(response.data)
+        console.log(`Fetching lesson: ${courseId}/${lessonId}`) // Debug log
+        
+        const response = await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/lessons/${lessonId}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            // Add auth header if token exists
+            ...(token && { 'Authorization': `Bearer ${token}` })
+          }
+        })
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch lesson: ${response.status}`)
+        }
+
+        const lessonData = await response.json()
+        console.log('Lesson data received:', lessonData) // Debug log
+        setLesson(lessonData)
+        
       } catch (err: any) {
         console.error("Failed to fetch lesson:", err)
-        setError(err.response?.data?.message || "Failed to load lesson.")
-        toast.error(err.response?.data?.message || "Failed to load lesson.")
+        setError(err.message || "Failed to load lesson.")
+        toast.error(err.message || "Failed to load lesson.")
       } finally {
         setIsLoadingLesson(false)
       }
     }
 
     if (user || firebaseUser) {
-      // Only fetch if either user type is logged in
       fetchLesson()
     }
   }, [user, firebaseUser, isLoadingAuth, router, courseId, lessonId, token])
@@ -58,24 +84,108 @@ export function LessonViewer({ courseId, lessonId }: LessonViewerProps) {
   const markLessonCompleted = async () => {
     if (!lesson || lesson.completed || !token) {
       toast.error("Please connect your MetaMask wallet to mark lessons as completed.")
-      return // Ensure token exists for this action
+      return
     }
     setIsMarkingCompleted(true)
     try {
-      await api.post(`/api/courses/${courseId}/lessons/${lessonId}/complete`)
-      setLesson((prev) => (prev ? { ...prev, completed: true } : null))
-      toast.success("Lesson marked as completed!")
+      const response = await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/lessons/${lessonId}/complete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        }
+      })
+
+      if (response.ok) {
+        setLesson((prev) => (prev ? { ...prev, completed: true } : null))
+        toast.success("Lesson marked as completed!")
+      } else {
+        throw new Error('Failed to mark lesson as completed')
+      }
     } catch (err: any) {
       console.error("Failed to mark lesson completed:", err)
-      toast.error(err.response?.data?.message || "Failed to mark lesson completed.")
+      toast.error("Failed to mark lesson completed.")
     } finally {
       setIsMarkingCompleted(false)
     }
   }
 
+  // Fixed: Function to render markdown-like content with proper string handling
+  const renderContent = (content: string) => {
+    const lines = content.split('\n')
+    const result = []
+    let inCodeBlock = false
+    let codeBlockContent: string[] = []
+    
+    for (let index = 0; index < lines.length; index++) {
+      const line = lines[index]
+      
+      // Handle code blocks properly
+      if (line.startsWith('```')) {
+        if (!inCodeBlock) {
+          // Opening code block
+          inCodeBlock = true
+          codeBlockContent = []
+        } else {
+          // Closing code block - render accumulated content
+          inCodeBlock = false
+          result.push(
+            <div key={`code-${index}`} className="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm mt-4 mb-4 overflow-x-auto">
+              <div className="flex items-center mb-3">
+                <span className="text-white font-semibold">💻 Code Example:</span>
+              </div>
+              <pre className="text-sm">
+                <code>{codeBlockContent.join('\n')}</code>
+              </pre>
+            </div>
+          )
+          codeBlockContent = []
+        }
+        continue
+      }
+      
+      // If we're inside a code block, accumulate content
+      if (inCodeBlock) {
+        codeBlockContent.push(line)
+        continue
+      }
+      
+      // Handle other markdown elements
+      if (line.startsWith('# ')) {
+        result.push(
+          <h1 key={index} className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
+            {line.substring(2)}
+          </h1>
+        )
+      } else if (line.startsWith('## ')) {
+        result.push(
+          <h2 key={index} className="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200 mt-6">
+            {line.substring(3)}
+          </h2>
+        )
+      } else if (line.startsWith('- ')) {
+        result.push(
+          <li key={index} className="ml-4 text-gray-700 dark:text-gray-300 list-disc">
+            {line.substring(2)}
+          </li>
+        )
+      } else if (line.trim() === '') {
+        result.push(<br key={index} />)
+      } else if (line.trim() !== '') {
+        result.push(
+          <p key={index} className="text-gray-700 dark:text-gray-300 mb-2">
+            {line}
+          </p>
+        )
+      }
+    }
+    
+    return result
+  }
+
   if (isLoadingAuth || isLoadingLesson) {
     return (
-      <div className="flex justify-center items-center flex-1">
+      <div className="flex justify-center items-center flex-1 min-h-[400px]">
         <Loader2 className="h-8 w-8 animate-spin text-primary-purple" />
         <span className="ml-2 text-lg">Loading lesson...</span>
       </div>
@@ -85,7 +195,12 @@ export function LessonViewer({ courseId, lessonId }: LessonViewerProps) {
   if (error) {
     return (
       <div className="flex justify-center items-center flex-1 text-red-500">
-        <p>{error}</p>
+        <div className="text-center">
+          <p className="text-xl mb-4">{error}</p>
+          <Button onClick={() => window.location.reload()} variant="outline">
+            Retry Loading
+          </Button>
+        </div>
       </div>
     )
   }
@@ -99,64 +214,149 @@ export function LessonViewer({ courseId, lessonId }: LessonViewerProps) {
   }
 
   return (
-    <Card className="flex-1 bg-white shadow-md rounded-lg p-6 dark:bg-gray-800 dark:text-gray-100">
-      <CardHeader>
-        <CardTitle className="text-2xl font-bold text-primary-purple">{lesson.title}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {authMethod === "firebase" && !token && (
-          <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-md dark:bg-yellow-900 dark:border-yellow-600 dark:text-yellow-200">
-            <p className="font-bold">Limited Access</p>
-            <p>
+    <div className="flex-1 space-y-6">
+      {/* Lesson Header Card */}
+      <Card className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold mb-2">{lesson.title}</CardTitle>
+          {lesson.description && (
+            <p className="text-blue-100 mb-4">{lesson.description}</p>
+          )}
+          <div className="flex items-center space-x-4 flex-wrap">
+            <span className="bg-white/20 px-3 py-1 rounded-full text-sm flex items-center">
+              {lesson.type === 'video' ? <Play className="w-4 h-4 mr-1" /> : <BookOpen className="w-4 h-4 mr-1" />}
+              {lesson.type === 'video' ? 'Video Lesson' : lesson.type === 'code' ? 'Coding Exercise' : 'Reading'}
+            </span>
+            {lesson.duration && (
+              <span className="bg-white/20 px-3 py-1 rounded-full text-sm flex items-center">
+                <Clock className="w-4 h-4 mr-1" />
+                {lesson.duration}
+              </span>
+            )}
+            {lesson.completed && (
+              <span className="bg-green-500 px-3 py-1 rounded-full text-sm">
+                ✅ Completed
+              </span>
+            )}
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Authentication Warning */}
+      {authMethod === "firebase" && !token && (
+        <Card className="bg-yellow-50 border-l-4 border-yellow-500 dark:bg-yellow-900">
+          <CardContent className="pt-6">
+            <p className="font-bold text-yellow-700 dark:text-yellow-200">Limited Access</p>
+            <p className="text-yellow-700 dark:text-yellow-200">
               You are logged in with email. Full functionality, including progress tracking and data persistence,
               requires connecting your MetaMask wallet.
             </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Video Player */}
+      {lesson.type === "video" && lesson.embed_url && (
+        <Card>
+          <CardContent className="p-6">
+            <h3 className="text-xl font-bold mb-4 flex items-center">
+              <Play className="w-5 h-5 mr-2" />
+              Video Tutorial
+            </h3>
+            <div className="aspect-video rounded-lg overflow-hidden shadow-lg bg-gray-100">
+              <iframe
+                src={lesson.embed_url}
+                title={lesson.title}
+                className="w-full h-full"
+                allowFullScreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                style={{ border: 'none' }}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Lesson Content */}
+      <Card className="bg-white shadow-md rounded-lg dark:bg-gray-800">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-primary-purple flex items-center">
+            <BookOpen className="w-5 h-5 mr-2" />
+            Lesson Content
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {lesson.type === "text" && (
+            <div className="prose dark:prose-invert max-w-none">
+              <ReactMarkdown>{lesson.content}</ReactMarkdown>
+            </div>
+          )}
+          
+          {lesson.type === "video" && lesson.content && (
+            <div className="prose dark:prose-invert max-w-none">
+              <div className="space-y-2">
+                {renderContent(lesson.content)}
+              </div>
+            </div>
+          )}
+          
+          {lesson.type === "code" && (
+            <div className="bg-gray-900 text-white p-4 rounded-md font-mono text-sm overflow-x-auto">
+              <pre>
+                <code>{lesson.content}</code>
+              </pre>
+            </div>
+          )}
+          
+          {lesson.type === "quiz" && (
+            <div className="bg-blue-50 dark:bg-blue-900 p-4 rounded-md text-primary-blue dark:text-blue-200">
+              <p className="font-semibold">Quiz Link:</p>
+              <Link href={`/quizzes/${lesson.content}`} className="underline hover:no-underline">
+                Start Quiz: {lesson.content}
+              </Link>
+            </div>
+          )}
+        </CardContent>
+        
+        <CardFooter className="flex justify-between items-center">
+          <div className="text-sm text-gray-500">
+            Course: {lesson.course_id} | Lesson: {lesson.id}
           </div>
-        )}
-        {lesson.type === "video" && (
-          <div className="aspect-video w-full bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500">
-            <p>Video Player Placeholder: {lesson.content}</p>
-            {/* In a real app, you'd embed a video player here */}
+          <div className="flex space-x-2">
+            {!lesson.completed && (
+              <Button
+                onClick={markLessonCompleted}
+                disabled={isMarkingCompleted || !token}
+                className="bg-primary-purple hover:bg-primary-purple/90 text-white"
+              >
+                {isMarkingCompleted && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Mark as Completed
+              </Button>
+            )}
+            {lesson.completed && (
+              <Button disabled variant="outline" className="text-green-600 border-green-600 bg-transparent">
+                ✅ Completed
+              </Button>
+            )}
           </div>
-        )}
-        {lesson.type === "text" && (
-          <div className="prose dark:prose-invert max-w-none">
-            <ReactMarkdown>{lesson.content}</ReactMarkdown>
-          </div>
-        )}
-        {lesson.type === "code" && (
-          <div className="bg-gray-900 text-white p-4 rounded-md font-mono text-sm overflow-x-auto">
-            <pre>
-              <code>{lesson.content}</code>
-            </pre>
-          </div>
-        )}
-        {lesson.type === "quiz" && (
-          <div className="bg-blue-50 dark:bg-blue-900 p-4 rounded-md text-primary-blue dark:text-blue-200">
-            <p className="font-semibold">Quiz Link:</p>
-            <Link href={`/quizzes/${lesson.content}`} className="underline hover:no-underline">
-              Start Quiz: {lesson.content}
-            </Link>
-          </div>
-        )}
-      </CardContent>
-      <CardFooter className="flex justify-end">
-        {!lesson.completed && (
-          <Button
-            onClick={markLessonCompleted}
-            disabled={isMarkingCompleted || !token} // Disable if no token
-            className="bg-primary-purple hover:bg-primary-purple/90 text-white"
-          >
-            {isMarkingCompleted && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            Mark as Completed
-          </Button>
-        )}
-        {lesson.completed && (
-          <Button disabled variant="outline" className="text-success border-success bg-transparent">
-            Completed
-          </Button>
-        )}
-      </CardFooter>
-    </Card>
+        </CardFooter>
+      </Card>
+
+      {/* Practice Section for Learning */}
+      <Card className="border-l-4 border-l-green-500">
+        <CardContent className="p-6">
+          <h3 className="text-lg font-bold mb-3 text-green-700">🚀 Practice Exercise</h3>
+          <p className="text-gray-700 dark:text-gray-300">
+            Try modifying the code examples! Experiment with:
+          </p>
+          <ul className="list-disc list-inside mt-2 text-gray-700 dark:text-gray-300 space-y-1">
+            <li>Changing colors and shapes</li>
+            <li>Adding your own creative elements</li>
+            <li>Exploring different programming concepts</li>
+            <li>Building upon what you&apos;ve learned</li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
   )
-}
+}