import { Head, Link, router, useHttp } from '@inertiajs/react'; import { Bookmark, BookmarkCheck, BookOpen, Bot, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Circle, ClipboardList, FileText, MessageSquare, NotebookPen, Play, } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type SimpleLesson = { id: number; title: string; type: string; order: number }; type SimpleQuiz = { id: number; title: string; order: number }; type SimpleAssignment = { id: number; title: string; order: number }; type Chapter = { id: number; title: string; order: number; lessons: SimpleLesson[]; quizzes: SimpleQuiz[]; assignments: SimpleAssignment[]; }; type Lesson = { id: number; title: string; type: 'video' | 'article' | 'text' | 'pdf' | 'file'; content: string | null; video_url: string | null; file_path: string | null; duration_minutes: number; chapter: { id: number; course_id: number }; }; type NavigationItem = { id: number; type: 'lesson' | 'quiz' | 'assignment'; url: string } | null; type Props = { course: { id: number; title: string; slug: string; chapters: Chapter[] }; lesson: Lesson; enrollment: { id: number; target_completion_date: string | null }; completedLessonIds: number[]; progress: { total: number; completed: number; percent: number }; isBookmarked: boolean; note: string | null; prev_item: NavigationItem; next_item: NavigationItem; }; const BRAND = '#118AB2'; const SUCCESS = '#06D6A0'; function lessonTypeIcon(type: string) { if (type === 'video') return ; if (type === 'pdf' || type === 'file') return ; return ; } export default function LearningShow({ course, lesson, enrollment, completedLessonIds, progress, isBookmarked: initialBookmarked, note: initialNote, prev_item, next_item, }: Props) { const [openChapters, setOpenChapters] = useState>({ [lesson.chapter.id]: true }); const [showNotes, setShowNotes] = useState(!!initialNote); const [noteContent, setNoteContent] = useState(initialNote ?? ''); const [bookmarked, setBookmarked] = useState(initialBookmarked); const noteTimer = useRef>(); const http = useHttp({ content: initialNote ?? '' }); const isCompleted = completedLessonIds.includes(lesson.id); useEffect(() => { setNoteContent(initialNote ?? ''); setBookmarked(initialBookmarked); http.setData({ content: initialNote ?? '' }); setShowNotes(!!initialNote); }, [lesson.id]); function markComplete() { router.patch(`/courses/${course.slug}/learn/${lesson.id}/complete`, {}, { preserveScroll: true }); } async function toggleBookmark() { const originalState = bookmarked; // Optimistic update: toggle state instantly for zero-latency UI response setBookmarked(!originalState); try { const response = (await http.post(`/bookmarks/lessons/${lesson.id}`, {})) as { bookmarked: boolean }; if (response && typeof response.bookmarked === 'boolean') { setBookmarked(response.bookmarked); } } catch (error) { // Rollback to original state if the request fails setBookmarked(originalState); } } function handleNoteChange(value: string) { setNoteContent(value); http.setData('content', value); } function saveNote() { http.put(`/lessons/${lesson.id}/note`); } return ( <>
{/* ── SIDEBAR ────────────────────────────────────────────── */} {/* ── MAIN CONTENT ───────────────────────────────────────── */}
{/* Scrollable lesson body */}
{/* Title */}

{lesson.title}

{/* Video */} {lesson.type === 'video' && lesson.video_url && (
{lesson.video_url.includes('youtube') || lesson.video_url.includes('youtu.be') ? (