import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import StudentLayout from '@/Layouts/StudentLayout'; import Card from '@/Components/UI/Card'; import Button from '@/Components/UI/Button'; import ProgressBar from '@/Components/UI/ProgressBar'; interface LessonItem { id: number; title: string; duration_minutes: number | null; content_type: string; is_completed: boolean; is_active: boolean; } interface ModuleItem { id: number; title: string; lessons: LessonItem[]; } export default function Show({ course, activeLesson, progress, }: { course: { id: number; title: string; code: string | null; facilitator_name: string | null; modules: ModuleItem[] }; activeLesson: { id: number; title: string; transcript_text: string | null; duration_minutes: number | null } | null; progress: { completed: number; total: number }; }) { const [tab, setTab] = useState<'transcript' | 'notes' | 'resources'>('transcript'); const percent = progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0; const markComplete = () => { if (!activeLesson) return; router.post(route('student.lessons.complete', activeLesson.id), {}, { preserveScroll: true }); }; return (

{course.code &&

{course.code}

}

{course.title}

{course.facilitator_name && Facilitator: {course.facilitator_name}} {activeLesson?.duration_minutes && {activeLesson.duration_minutes} mins duration}

{(['transcript', 'notes', 'resources'] as const).map((t) => ( ))}

{tab === 'transcript' && (

{activeLesson?.transcript_text ?? 'No transcript available for this lesson yet.'}

)} {tab === 'notes' && (

Your personal notes for this lesson will appear here.

)} {tab === 'resources' && (

Downloadable resources for this lesson will appear here.

)}

{course.title}

{percent}% Completed

{progress.completed} / {progress.total} Lessons

{course.modules.map((module) => (

Module

{module.title}

{module.lessons.map((lesson) => (

{lesson.is_completed ? '✓ ' : lesson.is_active ? '▶ ' : '🔒 '} {lesson.title} {lesson.duration_minutes && ( {lesson.duration_minutes} mins )}

))}

))}

← Back to Dashboard

); }