a2:I[903690,["/chat-static/_next/static/immutable/chunks/01sl0c9pl0qdb.js","/chat-static/_next/static/immutable/chunks/2s3szdh4sj8a9.js","/chat-static/_next/static/immutable/chunks/3xyjq7r3rp-0l.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/1o_8apc9t7n_q.js","/chat-static/_next/static/immutable/chunks/0fyg5jcc_36eb.js","/chat-static/_next/static/immutable/chunks/0-_o4hpte0vl3.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1y9-5e-fp9k6t.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/23x0uxq0ixyge.js","/chat-static/_next/static/immutable/chunks/114n8e2ac_jia.js","/chat-static/_next/static/immutable/chunks/2-zc2feaz59tm.js","/chat-static/_next/static/immutable/chunks/1kujltmqborp7.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3z2ytqe4qbkve.js","/chat-static/_next/static/immutable/chunks/06bkmbcp63szl.js","/chat-static/_next/static/immutable/chunks/2o77ap5zb_ifo.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/0tx1sb8vbv047.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3cvxogyz6xpjg.js","/chat-static/_next/static/immutable/chunks/2hg_3ekwt--82.js","/chat-static/_next/static/immutable/chunks/2s-5grvetxapr.js","/chat-static/_next/static/immutable/chunks/2u6_2ad6hwbai.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/3pxk47hjn0did.js","/chat-static/_next/static/immutable/chunks/16zj9sw641gd2.js","/chat-static/_next/static/immutable/chunks/2a9fmanud-0qk.js","/chat-static/_next/static/immutable/chunks/3pdq-c388l9_h.js","/chat-static/_next/static/immutable/chunks/3i0hsvtp8_zyb.js","/chat-static/_next/static/immutable/chunks/30wjd0d3chuo2.js","/chat-static/_next/static/immutable/chunks/173j6xmtmh4oi.js","/chat-static/_next/static/immutable/chunks/25pdw1jaoktdv.js","/chat-static/_next/static/immutable/chunks/2xhm3hu58vgu1.js","/chat-static/_next/static/immutable/chunks/3cp0_dcpi5nys.js","/chat-static/_next/static/immutable/chunks/3go10woo2mrb2.js","/chat-static/_next/static/immutable/chunks/1_3nupe4fj8_j.js","/chat-static/_next/static/immutable/chunks/0xa9xi8l47fr3.js","/chat-static/_next/static/immutable/chunks/0y27d8q31qg82.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3c7iszittff44.js","/chat-static/_next/static/immutable/chunks/30j2i298ftw9a.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js","/chat-static/_next/static/immutable/chunks/1o67gobwzeh_t.js","/chat-static/_next/static/immutable/chunks/1bv9u4x8lpd3-.js","/chat-static/_next/static/immutable/chunks/1uyvxmf6g9w1o.js","/chat-static/_next/static/immutable/chunks/3ebmwt6vbfb3-.js"],"ExplicitChatIdProvider"] a3:I[838238,["/chat-static/_next/static/immutable/chunks/01sl0c9pl0qdb.js","/chat-static/_next/static/immutable/chunks/2s3szdh4sj8a9.js","/chat-static/_next/static/immutable/chunks/3xyjq7r3rp-0l.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/1o_8apc9t7n_q.js","/chat-static/_next/static/immutable/chunks/0fyg5jcc_36eb.js","/chat-static/_next/static/immutable/chunks/0-_o4hpte0vl3.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1y9-5e-fp9k6t.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/23x0uxq0ixyge.js","/chat-static/_next/static/immutable/chunks/114n8e2ac_jia.js","/chat-static/_next/static/immutable/chunks/2-zc2feaz59tm.js","/chat-static/_next/static/immutable/chunks/1kujltmqborp7.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3z2ytqe4qbkve.js","/chat-static/_next/static/immutable/chunks/06bkmbcp63szl.js","/chat-static/_next/static/immutable/chunks/2o77ap5zb_ifo.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/0tx1sb8vbv047.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3cvxogyz6xpjg.js","/chat-static/_next/static/immutable/chunks/2hg_3ekwt--82.js","/chat-static/_next/static/immutable/chunks/2s-5grvetxapr.js","/chat-static/_next/static/immutable/chunks/2u6_2ad6hwbai.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/3pxk47hjn0did.js","/chat-static/_next/static/immutable/chunks/16zj9sw641gd2.js","/chat-static/_next/static/immutable/chunks/2a9fmanud-0qk.js","/chat-static/_next/static/immutable/chunks/3pdq-c388l9_h.js","/chat-static/_next/static/immutable/chunks/3i0hsvtp8_zyb.js","/chat-static/_next/static/immutable/chunks/30wjd0d3chuo2.js","/chat-static/_next/static/immutable/chunks/173j6xmtmh4oi.js","/chat-static/_next/static/immutable/chunks/25pdw1jaoktdv.js","/chat-static/_next/static/immutable/chunks/2xhm3hu58vgu1.js","/chat-static/_next/static/immutable/chunks/3cp0_dcpi5nys.js","/chat-static/_next/static/immutable/chunks/3go10woo2mrb2.js","/chat-static/_next/static/immutable/chunks/1_3nupe4fj8_j.js","/chat-static/_next/static/immutable/chunks/0xa9xi8l47fr3.js","/chat-static/_next/static/immutable/chunks/0y27d8q31qg82.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3c7iszittff44.js","/chat-static/_next/static/immutable/chunks/30j2i298ftw9a.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js","/chat-static/_next/static/immutable/chunks/1o67gobwzeh_t.js","/chat-static/_next/static/immutable/chunks/1bv9u4x8lpd3-.js","/chat-static/_next/static/immutable/chunks/1uyvxmf6g9w1o.js","/chat-static/_next/static/immutable/chunks/3ebmwt6vbfb3-.js"],"SWRDataProvider"] a5:Ta3951,v0 App

超級函授

法學緒論3

正在播放：法學緒論3

User ID: 882563

0:00 / 02:50:00

本課詳述院際權力制衡，包含行政院的覆議程序與時限、立委的言論免責與不逮捕特權，並結合最新的憲法判決解析國會職權

法學緒論韋伯老師

你的進度21% 已完成

法學緒論1

3小時15分

進度 : 100%

法學緒論2

2小時52分

進度 : 100%

法學緒論3

2小時50分

進度 : 0%

法學緒論4

2小時45分

進度 : 0%

法學緒論5

3小時10分

進度 : 0%

法學緒論6

2小時55分

進度 : 0%

法學緒論7

3小時05分

進度 : 0%

法學緒論8

2小時40分

進度 : 0%

法學緒論9

3小時20分

進度 : 0%

法學緒論10

2小時58分

進度 : 0%

a6:[] a7:[["Wtvy5KnqkXq","b_LZicc9sgFdR"],["b_Cydqi3ZezOH",null],["b_DMe5M0yNJ8T",null],["b_FpuvdRaNqVv",null],["b_wblqeJD5p4q",null],["b_5mmWgD1HSR4",null],["b_nYJC0JLfm4U",null]] a8:[["Wtvy5KnqkXq",{"templateVersionId":null,"templateCanonId":null}],["b_Cydqi3ZezOH",{"templateVersionId":null,"templateCanonId":null}],["b_DMe5M0yNJ8T",{"templateVersionId":null,"templateCanonId":null}],["b_FpuvdRaNqVv",{"templateVersionId":null,"templateCanonId":null}],["b_wblqeJD5p4q",{"templateVersionId":null,"templateCanonId":null}],["b_5mmWgD1HSR4",{"templateVersionId":null,"templateCanonId":null}],["b_nYJC0JLfm4U",{"templateVersionId":null,"templateCanonId":null}]] a9:[["Wtvy5KnqkXq","$D2026-08-06T05:09:54.491Z"],["b_Cydqi3ZezOH","$D2026-08-06T05:11:18.036Z"],["b_DMe5M0yNJ8T","$D2026-08-06T05:11:30.104Z"],["b_FpuvdRaNqVv","$D2026-08-06T05:18:30.774Z"],["b_wblqeJD5p4q","$D2026-08-06T05:18:36.297Z"],["b_5mmWgD1HSR4","$D2026-08-06T05:18:40.136Z"],["b_nYJC0JLfm4U","$D2026-08-06T05:18:44.455Z"]] aa:[["Wtvy5KnqkXq",false],["b_Cydqi3ZezOH",false],["b_DMe5M0yNJ8T",false],["b_FpuvdRaNqVv",false],["b_wblqeJD5p4q",false],["b_5mmWgD1HSR4",false],["b_nYJC0JLfm4U",false]] ab:[["Wtvy5KnqkXq","$undefined"],["b_Cydqi3ZezOH",{"git":{"ref":"main","sha":"77525ffa56ccdc2027f4ee35a75d4b052bd28ed2","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course player text and add course outline tab\n\nUpdated text for quiz and course names. Added new \"Course Outline\" tab with content placeholder."}}],["b_DMe5M0yNJ8T",{"git":{"ref":"main","sha":"77525ffa56ccdc2027f4ee35a75d4b052bd28ed2","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course player text and add course outline tab\n\nUpdated text for quiz and course names. Added new \"Course Outline\" tab with content placeholder."}}],["b_FpuvdRaNqVv",{"git":{"ref":"main","sha":"21c55e177f424148f84f997ac006851fd77f51a0","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course text and titles for better clarity"}}],["b_wblqeJD5p4q",{"git":{"ref":"main","sha":"21c55e177f424148f84f997ac006851fd77f51a0","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course text and titles for better clarity"}}],["b_5mmWgD1HSR4",{"git":{"ref":"main","sha":"21c55e177f424148f84f997ac006851fd77f51a0","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course text and titles for better clarity"}}],["b_nYJC0JLfm4U",{"git":{"ref":"main","sha":"21c55e177f424148f84f997ac006851fd77f51a0","type":"github","repoId":0,"repoName":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","ownerName":"v0-git-s3-storage","commitMessage":"feat: update course text and titles for better clarity"},"deploymentId":"dpl_9666r3BnQdk74banLXoWUzqLfxut","showV0Button":false}]] ac:[["Wtvy5KnqkXq",null],["b_Cydqi3ZezOH",null],["b_DMe5M0yNJ8T",null],["b_FpuvdRaNqVv",null],["b_wblqeJD5p4q",null],["b_5mmWgD1HSR4",null],["b_nYJC0JLfm4U",null]] ad:[["Wtvy5KnqkXq",true],["b_Cydqi3ZezOH",true],["b_DMe5M0yNJ8T",true],["b_FpuvdRaNqVv",true],["b_wblqeJD5p4q",true],["b_5mmWgD1HSR4",true],["b_nYJC0JLfm4U",true]] ae:[["Wtvy5KnqkXq",true],["b_Cydqi3ZezOH",true],["b_DMe5M0yNJ8T",true],["b_FpuvdRaNqVv",true],["b_wblqeJD5p4q",true],["b_5mmWgD1HSR4",true],["b_nYJC0JLfm4U",true]] af:[] b0:T5ba,**Title:** Text Refinements, Branding Update, and Layout Cleanup **Prompt:** Please make the following specific text and UI adjustments to the current layout: **1. Update Top-Left Brand Name:** * Locate the main brand logo text in the top-left corner of the header. * Change the text from "LearnHub" to "超級函授". * Ensure the styling (color, font weight, size) remains consistent with the original brand logo design. **2. Update Top-Right Menu Text:** * Locate the dropdown menu trigger in the top-right corner of the header. * Change the text from "學員中心" (Student Center) to "學員專區" (Student Area). **3. Clean Up Right-Side Course Info:** * In the right-side course list column, look at the header section just below the teacher's name ("法學緒論韋伯老師") and above the progress bar. * DELETE the entire line of text that displays the course count and total duration (e.g., "課程堂數 : 10 | 總時長 : 02:50:00"). Leave only the teacher's name and the progress bar section. **4. Update "Course Outline" Tab Content:** * Locate the `TabsContent` area for the "課程大綱" (Course Outline) tab below the video player. * Replace the current placeholder text with the following specific content: `

本課詳述院際權力制衡，包含行政院的覆議程序與時限、立委的言論免責與不逮捕特權，並結合最新的憲法判決解析國會職權

`b1:T1bc8c,[V0_FILE]typescriptreact:file="/components/course-player.tsx" "use client" import { useState, useRef, useEffect } from "react" import { Sparkles, Play, Pause, Volume2, Maximize, Minimize, Settings, ChevronDown, Check, X, Download, Bell, LogOut, RotateCcw, RotateCw, Heart, RectangleHorizontal, MessageSquare, ClipboardList, Clock, Plus, FileText, Pencil, Trash2, CheckCircle2, XCircle, Megaphone, History, BookOpen, Search, ArrowLeft, LayoutDashboard, User, } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { ScrollArea } from "@/components/ui/scroll-area" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" // Added Input component for search import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import AiAssistantModal from "@/components/ai-assistant-modal" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" // Import Card components import { ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } from "recharts" const courseContent = [ { id: 1, title: "法學緒論1", duration: "3小時15分", progress: 100, completed: true }, { id: 2, title: "法學緒論2", duration: "2小時52分", progress: 100, completed: true }, { id: 3, title: "法學緒論3", duration: "2小時50分", progress: 0, completed: false }, { id: 4, title: "法學緒論4", duration: "2小時45分", progress: 0, completed: false }, { id: 5, title: "法學緒論5", duration: "3小時10分", progress: 0, completed: false }, { id: 6, title: "法學緒論6", duration: "2小時55分", progress: 0, completed: false }, { id: 7, title: "法學緒論7", duration: "3小時05分", progress: 0, completed: false }, { id: 8, title: "法學緒論8", duration: "2小時40分", progress: 0, completed: false }, { id: 9, title: "法學緒論9", duration: "3小時20分", progress: 0, completed: false }, { id: 10, title: "法學緒論10", duration: "2小時58分", progress: 0, completed: false }, ] const sampleQuiz = [ { id: 1, question: "What is the main purpose of understanding the basics in this course?", options: [ "To memorize all concepts", "To build a strong foundation for advanced topics", "To complete the course quickly", "To skip intermediate lessons", ], correctAnswer: 1, }, { id: 2, question: "Which of the following is a core principle covered in this lesson?", options: [ "Advanced debugging techniques", "Fundamental concepts and real-world applications", "Expert-level optimization", "Framework-specific tools", ], correctAnswer: 1, }, { id: 3, question: "What should you focus on when learning the basics?", options: [ "Speed over understanding", "Memorization without practice", "Understanding core concepts thoroughly", "Skipping practice examples", ], correctAnswer: 2, }, { id: 4, question: "How can you best apply the basics in real-world scenarios?", options: [ "Ignore practical examples", "Practice with hands-on projects and exercises", "Only read theoretical content", "Wait until advanced lessons", ], correctAnswer: 1, }, ] const downloadableMaterials = [ { id: 1, name: "Lesson 3 Slides.PDF", size: "12.4 MB", type: "PDF", }, { id: 2, name: "Practice Exercises.DOCX", size: "3.2 MB", type: "DOCX", }, { id: 3, name: "Reference Guide.PDF", size: "25.6 MB", type: "PDF", }, { id: 4, name: "Code Examples.ZIP", size: "8.9 MB", type: "ZIP", }, ] type TimeStampedNote = { id: string timestamp: number // in seconds content: string createdAt: Date } export default function CoursePlayer() { const [currentView, setCurrentView] = useState<"player" | "student-area">("player") const [studentAreaTab, setStudentAreaTab] = useState< "watch-history" | "saved-courses" | "ai-history" | "quiz-history" | "dashboard" >("watch-history") const [isModalOpen, setIsModalOpen] = useState(false) const [subtitleSearchQuery, setSubtitleSearchQuery] = useState("") const [isAnnouncementOpen, setIsAnnouncementOpen] = useState(false) const [isAIExpanded, setIsAIExpanded] = useState(false) // Added state for AI expansion const [isPlaying, setIsPlaying] = useState(true) const [activeLessonId, setActiveLessonId] = useState(3) const [currentTime, setCurrentTime] = useState(0) const [volume, setVolume] = useState(80) const [activeTab, setActiveTab] = useState("notes") const [playbackSpeed, setPlaybackSpeed] = useState(1) const [isTheaterMode, setIsTheaterMode] = useState(false) const [isStudentMenuOpen, setIsStudentMenuOpen] = useState(false) const [isFavorite, setIsFavorite] = useState(true) // Added state for favorite/bookmark status (default to favorited) const [isFullscreen, setIsFullscreen] = useState(false) // Added state to track fullscreen status const [startDate, setStartDate] = useState("") const [endDate, setEndDate] = useState("") const [quizAnswers, setQuizAnswers] = useState>({}) const [quizSubmitted, setQuizSubmitted] = useState(false) const [quizScore, setQuizScore] = useState(0) const [studentNotes, setStudentNotes] = useState("") const [currentNote, setCurrentNote] = useState("") const [timeStampedNotes, setTimeStampedNotes] = useState([ { id: "1", timestamp: 324, content: "這個概念很重要，需要多複習幾次", createdAt: new Date("2024-01-15T10:30:00"), }, { id: "2", timestamp: 156, content: "講解埒清楚，理解了基本原理", createdAt: new Date("2024-01-15T10:25:00"), }, { id: "3", timestamp: 489, content: "實作範例部分要再多練習", createdAt: new Date("2024-01-15T10:35:00"), }, ]) const [editingNoteId, setEditingNoteId] = useState(null) const [editingContent, setEditingContent] = useState("") // State to manage video progress const [progress, setProgress] = useState(0) // Added state for video progress const videoRef = useRef(null) const playerContainerRef = useRef(null) // Added ref for the player container const activeLesson = courseContent.find((lesson) => lesson.id === activeLessonId) || courseContent[0] const handleNavigateToStudentArea = ( tab: "watch-history" | "saved-courses" | "ai-history" | "quiz-history" | "dashboard", ) => { setStudentAreaTab(tab) setCurrentView("student-area") setIsStudentMenuOpen(false) } const parseDurationToSeconds = (duration: string): number => { const hourMatch = duration.match(/(\d+)小時/) const minuteMatch = duration.match(/(\d+)分/) const hours = hourMatch ? Number.parseInt(hourMatch[1]) : 0 const minutes = minuteMatch ? Number.parseInt(minuteMatch[1]) : 0 return hours * 3600 + minutes * 60 } const formatTimeDisplay = (seconds: number): string => { const hrs = Math.floor(seconds / 3600) const mins = Math.floor((seconds % 3600) / 60) const secs = Math.floor(seconds % 60) if (hrs > 0) { return `${hrs.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } return `${mins}:${secs.toString().padStart(2, "0")}` } const calculateGlobalProgress = (): number => { let totalWatchedSeconds = 0 let totalCourseSeconds = 0 courseContent.forEach((lesson) => { const lessonDurationSeconds = parseDurationToSeconds(lesson.duration) const watchedSeconds = (lesson.progress / 100) * lessonDurationSeconds totalWatchedSeconds += watchedSeconds totalCourseSeconds += lessonDurationSeconds }) if (totalCourseSeconds === 0) return 0 return Math.round((totalWatchedSeconds / totalCourseSeconds) * 100) } const globalProgress = calculateGlobalProgress() const totalDurationSeconds = activeLesson ? parseDurationToSeconds(activeLesson.duration) : 0 const handleSeek = (seconds: number) => { // In a real implementation, this would seek the video console.log(`Seeking ${seconds > 0 ? "+" : ""}${seconds}s`) // Update the progress state to reflect the seeked time // setProgress((prevProgress) => Math.max(0, Math.min(100, prevProgress + (seconds / totalDurationSeconds) * 100))) // Seek the actual video player if (videoRef.current) { videoRef.current.currentTime += seconds } } const parseTimeToSeconds = (timeString: string): number => { const parts = timeString.split(":").map(Number) if (parts.length === 2) { // MM:SS format return parts[0] * 60 + parts[1] } else if (parts.length === 3) { // HH:MM:SS format return parts[0] * 3600 + parts[1] * 60 + parts[2] } return 0 } const highlightText = (text: string, query: string) => { if (!query.trim()) { return {text} } // Split text by query, keeping the matched parts using capturing group const parts = text.split(new RegExp(`(${query})`, "gi")) return ( <> {parts.map((part, index) => { // Check if this part matches the query (case-insensitive) if (part.toLowerCase() === query.toLowerCase()) { return ( {part} ) } return {part} })} ) } const handleSegmentClick = (timeString: string) => { if (videoRef.current) { const seconds = parseTimeToSeconds(timeString) videoRef.current.currentTime = seconds setCurrentTime(seconds) // Update currentTime state setIsPlaying(true) toast({ title: "跳轉成功", description: `已跳轉至 ${timeString}`, }) } } const handleAnswerChange = (questionId: number, answerIndex: number) => { setQuizAnswers((prev) => ({ ...prev, [questionId]: answerIndex })) } const handleSubmitQuiz = () => { let correct = 0 sampleQuiz.forEach((q) => { if (quizAnswers[q.id] === q.correctAnswer) { correct++ } }) const score = Math.round((correct / sampleQuiz.length) * 100) setQuizScore(score) setQuizSubmitted(true) } const handleGenerateNewQuiz = () => { setQuizAnswers({}) setQuizSubmitted(false) setQuizScore(0) } const handleSaveNotes = () => { console.log("Saving notes:", studentNotes) // In a real implementation, this would save to a database alert("備註已儲存！") } const handleDownload = (fileName: string) => { console.log("Downloading:", fileName) // In a real implementation, this would trigger a file download alert(`下載 ${fileName}`) } const toggleTheaterMode = () => { setIsTheaterMode((prev) => !prev) } // Use the new formatTimeDisplay and currentTime state for display const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const handleAddTimeStampedNote = () => { if (currentNote.trim()) { const newNote: TimeStampedNote = { id: Date.now().toString(), // Use currentTime state for timestamp timestamp: Math.floor(currentTime), // Assuming currentTime is in seconds content: currentNote, createdAt: new Date(), } setTimeStampedNotes([...timeStampedNotes, newNote].sort((a, b) => a.timestamp - b.timestamp)) setCurrentNote("") toast({ title: "筆記已新增", description: `已標記時間點：${formatTime(newNote.timestamp)}`, }) } } const handleJumpToTime = (timestamp: number) => { // Update currentTime state and video player time setCurrentTime(timestamp) const newProgress = (timestamp / totalDurationSeconds) * 100 setProgress(newProgress) // Assuming progress is linked to video playback // Jump video to the timestamp if (videoRef.current) { videoRef.current.currentTime = timestamp setIsPlaying(true) // Ensure video plays after jump } toast({ title: "跳轉至標記時間", description: `${formatTime(timestamp)}`, }) } const handleDeleteNote = (noteId: string) => { setTimeStampedNotes(timeStampedNotes.filter((note) => note.id !== noteId)) toast({ title: "筆記已刪除", }) } const handleStartEdit = (note: TimeStampedNote) => { setEditingNoteId(note.id) setEditingContent(note.content) } const handleSaveEdit = (noteId: string) => { setTimeStampedNotes( timeStampedNotes.map((note) => (note.id === noteId ? { ...note, content: editingContent } : note)), ) setEditingNoteId(null) setEditingContent("") toast({ title: "筆記已更新", }) } const handleCancelEdit = () => { setEditingNoteId(null) setEditingContent("") } const toggleFavorite = () => { setIsFavorite((prev) => !prev) } const currentLessonTitle = activeLesson.title // Update video player event listeners const handleTimeUpdate = () => { if (videoRef.current) { setCurrentTime(videoRef.current.currentTime) setProgress((videoRef.current.currentTime / totalDurationSeconds) * 100) } } const handleLessonClick = (lessonId: number) => { setActiveLessonId(lessonId) setCurrentTime(0) if (videoRef.current) { videoRef.current.currentTime = 0 const playPromise = videoRef.current.play() if (playPromise !== undefined) { playPromise.catch((error) => { // Auto-play was prevented or interrupted, which is fine if (error.name !== "AbortError") { console.error("Video playback error:", error) } }) } } } const filteredSubtitles = [ { time: "00:00:00", text: "各位學員大家好，我是韋伯老師。歡迎來到我們今天的《法學緒論》課程。", }, { time: "00:01:25", text: "好，那首先我們第一個要問的問題是：到底什麼是法律？你可能覺得這個問題很簡單，但其實它有很多層次。", }, { time: "00:03:50", text: "從哲學的角度來看，法律是正義的體現，這是我們必須先理解的大前提。", }, { time: "00:05:40", text: "接著，我們來看法律的分類。在公職考試中，大家最常被問到的就是公法、私法和社會法的區別。", }, { time: "00:08:10", text: "來，我們把重點畫起來，公法強調國家跟人民之間的垂直關係；私法則是人民彼此間的水平關係。", }, { time: "00:11:05", text: "這裡有個常��的觀念，像是買賣契約，它屬於私法的範疇，因為是兩個平等個體之間的約定。", }, { time: "00:13:30", text: "好的，接下來我們跳到法源的部分。法源有成文法和不成文法，這兩個概念在命題趨勢上非常重要。", }, { time: "00:16:00", text: "所謂的成文法，最典型的例子就是我們的憲法、法律和命令，它們都是經過立法院或行政機關制定的。", }, { time: "00:18:45", text: "那不成文法呢？像是習慣法和法理，特別是法理，它是補充法律漏洞時非常重要的工具。", }, { time: "00:21:20", text: "我們用一個實際的案例來理解，當一個案件找不到適用的法條時，法官就要引用法理來做判決依據。", }, { time: "00:23:55", text: "休息一下，我們馬上要進入法律的效力層次。這也是考試中一個比較燒腦的部分，但非常關鍵。", }, { time: "00:26:30", text: "記住，憲法永遠是最高位階。如果普通法律跟憲法有所牴觸，那普通法律就是無效的。", }, { time: "00:28:45", text: "好了，今天的重點我們已經講解完畢，請大家務必回去複習公法、私法的區別和法源的分類。謝謝大家！", }, ].filter((subtitle) => subtitle.text.toLowerCase().includes(subtitleSearchQuery.toLowerCase())) useEffect(() => { const handleFullscreenChange = () => { // Check both standard and webkit prefixed properties const isCurrentlyFullscreen = !!( document.fullscreenElement || (document as any).webkitFullscreenElement || (document as any).mozFullScreenElement || (document as any).msFullscreenElement ) setIsFullscreen(isCurrentlyFullscreen) } // Listen to all possible fullscreen change events document.addEventListener("fullscreenchange", handleFullscreenChange) document.addEventListener("webkitfullscreenchange", handleFullscreenChange) document.addEventListener("mozfullscreenchange", handleFullscreenChange) document.addEventListener("MSFullscreenChange", handleFullscreenChange) return () => { document.removeEventListener("fullscreenchange", handleFullscreenChange) document.removeEventListener("webkitfullscreenchange", handleFullscreenChange) document.removeEventListener("mozfullscreenchange", handleFullscreenChange) document.removeEventListener("MSFullscreenChange", handleFullscreenChange) } }, []) const toggleFullscreen = () => { if (!playerContainerRef.current) return try { const elem = playerContainerRef.current as any const doc = document as any // Check if already in fullscreen const isCurrentlyFullscreen = !!( document.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement ) if (!isCurrentlyFullscreen) { // Enter fullscreen - try standard first, then vendor prefixes if (elem.requestFullscreen) { elem.requestFullscreen() } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen() // Safari } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen() // Firefox } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen() // IE/Edge } else { console.warn("[v0] Fullscreen API not supported on this browser") } } else { // Exit fullscreen - try standard first, then vendor prefixes if (doc.exitFullscreen) { doc.exitFullscreen() } else if (doc.webkitExitFullscreen) { doc.webkitExitFullscreen() // Safari } else if (doc.mozCancelFullScreen) { doc.mozCancelFullScreen() // Firefox } else if (doc.msExitFullscreen) { doc.msExitFullscreen() // IE/Edge } } } catch (error) { console.error("[v0] Fullscreen error:", error) // Silently fail - don't crash the app } } const filterByDateRange = (dateString: string) => { if (!startDate && !endDate) return true const itemDate = new Date(dateString) const start = startDate ? new Date(startDate) : null const end = endDate ? new Date(endDate) : null if (start && end) { return itemDate >= start && itemDate <= end } else if (start) { return itemDate >= start } else if (end) { return itemDate <= end } return true } const clearDateFilter = () => { setStartDate("") setEndDate("") } // Function to render content based on studentAreaTab const renderStudentAreaContent = () => { switch (studentAreaTab) { case "dashboard": return (

學習儀表板

您的整體學習進度與數據概覽

個人學習戰力分析

{/* Radar Chart */}

{value}} />

{/* Insight Section */}

學習洞察

{/* Strong Point */}

優勢科目

民法表現優異，投入度與掌握度均達到 90 分以上，持續保持！

{/* Needs Improvement */}

改善建議

行政法投入度高達 88 分，但分數僅 65 分，建議加強觀念複習與錯題訂正。

{/* Weak Point */}

待加強科目

英文兩項指標均偏低，建議增加練習時間並搭配單字背誦計畫。

同儕競爭力分析

{/* Cohort Context Badges */}

115年度高考三級一般行政

{/* Left Column: PR Metric (35%) */}

PR 94

領先 94% 的學員

{/* Right Column: Position Chart (65%) */}

同儕競爭位置圖

{/* Linear Scale */}

{/* Background Bar */}

{/* Markers */} {/* Average Marker at 50% */}

平均水準

{/* Top 10% Marker at 90% */}

頂標

{/* User Position at 94% */}

您

{/* Scale Labels */}

0% 25% 50% 75% 100%

{/* Total Courses Card */}

總課程數

12

{/* Courses in Progress Card */}

進行中課程

5

{/* Completed Courses Card */}

已完成課程

7

{/* Recent Activity Section */}

近期活動

觀看「法學緒論 - 第三章」今天 15:30
完成「刑法總則 - 第一章」測驗昨天 14:00
新增筆記於「民法概要 - 第五章」 1月18日 21:15

) case "watch-history": const watchHistoryData = [ { id: 1, title: "法學緒論 - 第三章法律的起源與發展", course: "法學緒論韋伯老師", progress: 67, duration: "3小時15分", watchedAt: "2024-01-20 15:30", watchDate: "2024-01-20", }, { id: 2, title: "刑法總則 - 第一章刑法的基本概念", course: "刑法總則韋伯老師", progress: 45, duration: "2小時40分", watchedAt: "2024-01-19 10:15", watchDate: "2024-01-19", }, { id: 3, title: "民法概要 - 第五章債權關係", course: "民法概要陳老師", progress: 89, duration: "1小時55分", watchedAt: "2024-01-18 20:45", watchDate: "2024-01-18", }, { id: 4, title: "行政法 - 第二章行政組織", course: "行政法林老師", progress: 32, duration: "2小時20分", watchedAt: "2024-01-15 14:20", watchDate: "2024-01-15", }, { id: 5, title: "憲法 - 第一章憲法概論", course: "憲法張老師", progress: 78, duration: "1小時45分", watchedAt: "2024-01-10 09:30", watchDate: "2024-01-10", }, ] const filteredWatchHistory = watchHistoryData.filter((item) => filterByDateRange(item.watchDate)) return (

觀看紀錄

最近觀看的課程記錄

開始日期 setStartDate(e.target.value)} className="w-full" />

結束日期 setEndDate(e.target.value)} className="w-full" />

{(startDate || endDate) && (

找到 {filteredWatchHistory.length} 筆記錄

)}

{filteredWatchHistory.length > 0 ? ( filteredWatchHistory.map((item) => (

{item.title}

{item.course}

{item.duration} 觀看時間: {item.watchedAt}

觀看進度 {item.progress}%

)) ) : (

此日期範圍內沒有觀看紀錄

)}

) case "saved-courses": const savedCoursesData = [ { id: 1, title: "法學緒論", instructor: "韋伯老師", progress: 67, totalLessons: 24, completedLessons: 16, savedDate: "2024-01-18", }, { id: 2, title: "刑法總則", instructor: "韋伯老師", progress: 45, totalLessons: 30, completedLessons: 13, savedDate: "2024-01-15", }, { id: 3, title: "民法概要", instructor: "陳老師", progress: 89, totalLessons: 20, completedLessons: 18, savedDate: "2024-01-20", }, { id: 4, title: "行政法", instructor: "林老師", progress: 12, totalLessons: 28, completedLessons: 3, savedDate: "2024-01-10", }, { id: 5, title: "憲法", instructor: "張老師", progress: 55, totalLessons: 22, completedLessons: 12, savedDate: "2024-01-05", }, ] const filteredSavedCourses = savedCoursesData.filter((item) => filterByDateRange(item.savedDate)) return (

收藏課程

您收藏的課程列表

開始日期 setStartDate(e.target.value)} className="w-full" />

結束日期 setEndDate(e.target.value)} className="w-full" />

{(startDate || endDate) && (

找到 {filteredSavedCourses.length} 筆記錄

)} {filteredSavedCourses.length > 0 ? (

{filteredSavedCourses.map((course) => (

{course.title}

{course.instructor}

收藏於: {course.savedDate}

{course.completedLessons} / {course.totalLessons} 課程 {course.progress}%

))}

) : (

此日期範圍內沒有收藏課程

)}

) case "ai-history": const aiHistoryData = [ { id: 1, date: "2024-01-20 15:45", interactionDate: "2024-01-20", course: "法學緒論", question: "法律的效力層次是什麼？", summary: "憲法 > 法律 > 命令，並詳細說明了...", }, { id: 2, date: "2024-01-19 11:20", interactionDate: "2024-01-19", course: "刑法總則", question: "正當防衛的構成要件？", summary: "需滿足現在不法侵害、防衛意思等要件...", }, { id: 3, date: "2024-01-18 21:10", interactionDate: "2024-01-18", course: "民法概要", question: "契約的成立要件有哪些？", summary: "要約與承諾的意思表示一致即可成立...", }, { id: 4, date: "2024-01-15 09:30", interactionDate: "2024-01-15", course: "行政法", question: "行政處分的定義？", summary: "指行政機關就公法上具體事件所為之決定...", }, { id: 5, date: "2024-01-10 16:45", interactionDate: "2024-01-10", course: "憲法", question: "基本權利的分類？", summary: "可分為自由權、平等權、受益權等...", }, ] const filteredAIHistory = aiHistoryData.filter((item) => filterByDateRange(item.interactionDate)) return (

AI問答紀錄

您與AI助教的對話記錄

開始日期 setStartDate(e.target.value)} className="w-full" />

結束日期 setEndDate(e.target.value)} className="w-full" />

{(startDate || endDate) && (

找到 {filteredAIHistory.length} 筆記錄

)}

{filteredAIHistory.length > 0 ? (

{filteredAIHistory.map((item) => ( ))}

提問時間	課程	問題	回覆摘要	操作
{item.date}	{item.course}	{item.question}	{item.summary}

) : (

此日期範圍內沒有AI問答紀錄

)}

) case "quiz-history": const quizHistoryData = [ { id: 1, date: "2024-01-20 16:30", quizDate: "2024-01-20", course: "法學緒論", title: "第三章隨堂測驗", score: 85, status: "已通過", }, { id: 2, date: "2024-01-19 14:00", quizDate: "2024-01-19", course: "刑法總則", title: "第一章測驗", score: 72, status: "已通過", }, { id: 3, date: "2024-01-18 22:15", quizDate: "2024-01-18", course: "民法概要", title: "第五章綜合測驗", score: 95, status: "優秀", }, { id: 4, date: "2024-01-17 19:20", quizDate: "2024-01-17", course: "��緒論", title: "第二章隨堂測驗", score: 58, status: "未通過", }, { id: 5, date: "2024-01-15 10:30", quizDate: "2024-01-15", course: "行政法", title: "第一章測驗", score: 88, status: "已通過", }, { id: 6, date: "2024-01-10 14:15", quizDate: "2024-01-10", course: "憲法", title: "第二章測驗", score: 92, status: "優秀", }, ] const filteredQuizHistory = quizHistoryData.filter((item) => filterByDateRange(item.quizDate)) return (

課程測驗紀錄

您的測驗成績與答題記錄

開始日期 setStartDate(e.target.value)} className="w-full" />

結束日期 setEndDate(e.target.value)} className="w-full" />

{(startDate || endDate) && (

找到 {filteredQuizHistory.length} 筆記錄

)}

{filteredQuizHistory.length > 0 ? (

{filteredQuizHistory.map((item) => ( ))}

測驗日期	課程名稱	測驗標題	成績	狀態	操作
{item.date}	{item.course}	{item.title}	= 90 ? "text-green-600" : item.score >= 60 ? "text-orange-600" : "text-red-600" }`} > {item.score}分	{item.status}

) : (

此日期範圍內沒有測驗紀錄

)}

) default: return null } } return ( // Changed outer div to white background and removed flex-col from it to allow inner content to control layout

{/* Top Navigation */}

{/* Left: Logo & Course Title */}

超級函授

{currentLessonTitle}

{/* Right: User Actions */}

handleNavigateToStudentArea("dashboard")} className="cursor-pointer py-3 text-base" > 學習儀表板 handleNavigateToStudentArea("watch-history")} className="cursor-pointer py-3 text-base" > 觀看記錄 handleNavigateToStudentArea("saved-courses")} className="cursor-pointer py-3 text-base" > 收藏課程 handleNavigateToStudentArea("ai-history")} className="cursor-pointer py-3 text-base" > AI 對話記錄 handleNavigateToStudentArea("quiz-history")} className="cursor-pointer py-3 text-base" > 測驗記錄登出

{currentView === "player" ? ( <> {/* Main Content Area */}

{/* Main Content Area */}

{/* Video Player Section */}

{!isTheaterMode && (

正在播放： {currentLessonTitle}

)}

{/* Video Background */}

User ID: 882563

{/* Video Controls */}

{ // Seek video when slider is used if (videoRef.current) { videoRef.current.currentTime = value[0] setCurrentTime(value[0]) } }} max={totalDurationSeconds} step={0.1} className="cursor-pointer [&_[role=slider]]:bg-orange-500 [&_[role=slider]]:border-orange-500 [&_.bg-primary]:bg-orange-500" />

{formatTimeDisplay(currentTime)} / {formatTimeDisplay(totalDurationSeconds)}

{ setVolume(value[0]) // Adjust video volume if (videoRef.current) { videoRef.current.volume = value[0] / 100 } }} max={100} step={1} className="w-24 [&_[role=slider]]:bg-white [&_[role=slider]]:border-white" />

{[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map((speed) => ( { setPlaybackSpeed(speed) // Set video playback speed if (videoRef.current) { videoRef.current.playbackRate = speed } }} className={`cursor-pointer ${ playbackSpeed === speed ? "bg-orange-50 text-orange-600 font-semibold" : "text-slate-700" }`} > {speed}x {speed === 1 && "(Normal)"} ))}

{/* Tabs Section - Overview / 測驗 / 搭配教材與課程說明 */} {!isTheaterMode && ( <>

課程大綱隨堂測驗電子筆記搭配教材與課程說明字幕小幫手

本課詳述院際權力制衡，包含行政院的覆議程序與時限、立委的言論免責與不逮捕特權，並結合最新的憲法判決解析國會職權

{/* Generate New Quiz Button */}

課程測驗

{/* Quiz Results (shown after submission) */} {quizSubmitted && (

測驗結果

{quizScore}/100

分數

測驗紀錄: {new Date().toLocaleDateString("zh-TW")}{" "} {new Date().toLocaleTimeString("zh-TW", { hour: "2-digit", minute: "2-digit" })}

正確答案: {sampleQuiz.filter((q) => quizAnswers[q.id] === q.correctAnswer).length} /{" "} {sampleQuiz.length}

)} {/* Quiz Questions */}

{sampleQuiz.map((question, index) => { const isCorrect = quizSubmitted && quizAnswers[question.id] === question.correctAnswer const isIncorrect = quizSubmitted && quizAnswers[question.id] !== question.correctAnswer return (

{question.completed && }

{/* Middle: Title and Duration */}

{question.question}

{quizSubmitted && (

{isCorrect ? ( <> 正確 ) : ( <> 錯誤 )}

)}

handleAnswerChange(question.id, Number.parseInt(value))} disabled={quizSubmitted} className="space-y-3" > {question.options.map((option, optionIndex) => { const isSelectedAnswer = quizAnswers[question.id] === optionIndex const isCorrectOption = optionIndex === question.correctAnswer const showAsCorrect = quizSubmitted && isCorrectOption const showAsIncorrect = quizSubmitted && isSelectedAnswer && !isCorrectOption return (

{option} {quizSubmitted && isCorrectOption && ( )} {quizSubmitted && showAsIncorrect && ( )}

) })}

{/* Submit Button */} {!quizSubmitted && ( )}

{/* New Note Input Area */}

即時線上標寫

setCurrentNote(e.target.value)}
                                className="min-h-[120px] resize-none border-2 border-gray-200 bg-white text-slate-900 placeholder:text-gray-400 focus:border-orange-500 focus:ring-orange-500"
                              />
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2 text-sm text-slate-600">
                                  <Clock className="h-4 w-4 text-orange-500" />
                                  {/* Use formatTime for current time display */}
                                  <span>
                                    當前時間點:{" "}
                                    <span className="font-semibold text-orange-600">{formatTime(currentTime)}</span>
                                  </span>
                                </div>
                                <Button
                                  onClick={handleAddTimeStampedNote}
                                  disabled={!currentNote.trim()}
                                  className="bg-orange-500 text-white hover:bg-orange-600 disabled:bg-gray-300"
                                >
                                  <Plus className="mr-2 h-4 w-4" />
                                  新增筆記並標記時間點
                                </Button>
                              </div>
                            </div>
                          </div>

{/* Notes List */}
                          <div>
                            <div className="mb-3 flex items-center justify-between">
                              <h3 className="text-lg font-semibold text-slate-900">筆記列表</h3>
                              <span className="text-sm text-slate-500">依時間由小到大排序</span>
                            </div>

{timeStampedNotes.length === 0 ? (
                              <div className="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
                                <FileText className="mx-auto mb-2 h-8 w-8 text-gray-400" />
                                <p className="text-sm text-slate-600">尚無筆記，開始新增您的第一則筆記吧！</p>
                              </div>
                            ) : (
                              <div className="space-y-3">
                                {timeStampedNotes.map((note) => (
                                  <div
                                    key={note.id}
                                    className="rounded-lg border-2 border-gray-200 bg-white p-4 transition-colors hover:border-gray-300"
                                  >
                                    <div className="mb-2 flex items-start justify-between gap-3">
                                      <button
                                        onClick={() => handleJumpToTime(note.timestamp)}
                                        className="flex items-center gap-2 text-orange-600 transition-colors hover:text-orange-700"
                                      >
                                        <Play className="h-4 w-4" />
                                        <span className="font-mono text-sm font-semibold">
                                          [{formatTime(note.timestamp)}]
                                        </span>
                                      </button>
                                      <div className="flex items-center gap-2">
                                        {editingNoteId === note.id ? (
                                          <>
                                            <Button
                                              onClick={() => handleSaveEdit(note.id)}
                                              size="sm"
                                              variant="ghost"
                                              className="h-7 px-2 text-green-600 hover:bg-green-50 hover:text-green-700"
                                            >
                                              <Check className="h-4 w-4" />
                                            </Button>
                                            <Button
                                              onClick={handleCancelEdit}
                                              size="sm"
                                              variant="ghost"
                                              className="h-7 px-2 text-slate-600 hover:bg-gray-100 hover:text-slate-700"
                                            >
                                              <X className="h-4 w-4" />
                                            </Button>
                                          </>
                                        ) : (
                                          <>
                                            <Button
                                              onClick={() => handleStartEdit(note)}
                                              size="sm"
                                              variant="ghost"
                                              className="h-7 px-2 text-slate-600 hover:bg-gray-100 hover:text-slate-700"
                                            >
                                              <Pencil className="h-4 w-4" />
                                              <span className="ml-1 text-xs">編輯</span>
                                            </Button>
                                            <Button
                                              onClick={() => handleDeleteNote(note.id)}
                                              size="sm"
                                              variant="ghost"
                                              className="h-7 px-2 text-red-600 hover:bg-red-50 hover:text-red-700"
                                            >
                                              <Trash2 className="h-4 w-4" />
                                              <span className="ml-1 text-xs">刪除</span>
                                            </Button>
                                          </>
                                        )}
                                      </div>
                                    </div>
                                    {editingNoteId === note.id ? (
                                      <Textarea
                                        value={editingContent}
                                        onChange={(e) => setEditingContent(e.target.value)}
                                        className="min-h-[80px] resize-none border-2 border-orange-300 bg-orange-50 text-slate-900 focus:border-orange-500 focus:ring-orange-500"
                                      />
                                    ) : (
                                      <p className="text-sm leading-relaxed text-slate-700">{note.content}</p>
                                    )}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </div>
                      </TabsContent>

<TabsContent value="resources" className="p-6">
                        <div className="space-y-6">
                          {/* A. Lesson Description/Overview */}
                          <div>
                            <h3 className="mb-3 text-lg font-semibold text-slate-900">課程說明</h3>
                            <div className="rounded-lg border-2 border-gray-200 bg-gray-50 p-4">
                              <p className="text-sm leading-relaxed text-slate-700">
                                本影片將深入探討課程的基礎概念。建議學員在觀看時特別留意以下重點：
                              </p>
                              <ul className="mt-3 space-y-2 text-sm text-slate-700">
                                <li className="flex items-start gap-2">
                                  <span className="mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-orange-500" />
                                  <span>須搭配教材：Chapter 3, Page 45-52</span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <span className="mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-orange-500" />
                                  <span>
                                    核心概念：Understanding the fundamental principles and their real-world applications
                                  </span>
                                </li>
                                <li className="flex items-start gap-2">
                                  <span className="mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-orange-500" />
                                  <span>重要提醒：建議完成練習題後再繼續下一課</span>
                                </li>
                              </ul>
                            </div>
                          </div>

{/* B. Student Notes Section */}
                          <div>
                            <h3 className="mb-3 text-lg font-semibold text-slate-900">我的備註</h3>
                            <div className="space-y-3">
                              <Textarea
                                placeholder="在此輸入您對本課程的筆記或心得..."
                                value={studentNotes}
                                onChange={(e) => setStudentNotes(e.target.value)}
                                className="min-h-[200px] resize-none border-2 border-gray-200 bg-white text-slate-900 placeholder:text-gray-400 focus:border-orange-500 focus:ring-orange-500"
                              />
                              <Button
                                onClick={handleSaveNotes}
                                className="bg-orange-500 px-6 text-white hover:bg-orange-600"
                              >
                                儲存備註
                              </Button>
                            </div>
                          </div>

{/* C. Downloadable Materials */}
                          <div>
                            <h3 className="mb-3 text-lg font-semibold text-slate-900">下載講義</h3>
                            <div className="space-y-3">
                              {downloadableMaterials.map((material) => (
                                <div
                                  key={material.id}
                                  className="flex items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-4 transition-colors hover:border-gray-300"
                                >
                                  <div className="flex items-center gap-3">
                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-50">
                                      <FileText className="h-5 w-5 text-orange-500" />
                                    </div>
                                    <div>
                                      <div className="font-medium text-slate-900">{material.name}</div>
                                      <div className="text-sm text-slate-500">{material.size}</div>
                                    </div>
                                  </div>
                                  <Button
                                    onClick={() => handleDownload(material.name)}
                                    className="bg-green-500 text-white hover:bg-green-600"
                                    size="sm"
                                  >
                                    <Download className="mr-2 h-4 w-4" />
                                    下載
                                  </Button>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </TabsContent>

<TabsContent value="subtitles" className="p-6">
                        <div className="space-y-4">
                          <div className="mb-4 flex items-center justify-between">
                            {" "}
                            {/* Changed to flex for alignment */}
                            <div>
                              <h3 className="text-lg font-semibold text-slate-900">字幕小幫手</h3>
                              <p className="text-sm text-slate-600 mt-1">點擊任意字幕可快速跳轉至對應時間點</p>
                            </div>
                            {/* SEARCH BAR FOR SUBTITLES */}
                            <div className="relative">
                              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                              <Input
                                type="text"
                                placeholder="搜尋字幕..."
                                value={subtitleSearchQuery}
                                onChange={(e) => setSubtitleSearchQuery(e.target.value)}
                                className="w-64 rounded-full border border-slate-300 bg-white py-2 pl-10 pr-3 text-sm focus:border-orange-500 focus:ring-orange-500"
                              />
                            </div>
                          </div>

<div className="space-y-2 max-h-[600px] overflow-y-auto pr-2">
                            {filteredSubtitles.map((subtitle, index) => (
                              <button
                                key={index}
                                onClick={() => {
                                  if (videoRef.current) {
                                    const seconds = parseTimeToSeconds(subtitle.time)
                                    videoRef.current.currentTime = seconds
                                    setCurrentTime(seconds)
                                    setIsPlaying(true)
                                    if (videoRef.current.paused) {
                                      const playPromise = videoRef.current.play()
                                      if (playPromise !== undefined) {
                                        playPromise.catch((error) => {
                                          // Auto-play was prevented or interrupted, which is fine
                                          if (error.name !== "AbortError") {
                                            console.error("Video playback error:", error)
                                          }
                                        })
                                      }
                                    }
                                    toast({
                                      title: "跳轉成功",
                                      description: `已跳轉至 ${subtitle.time}`,
                                    })
                                  }
                                }}
                                className="w-full text-left rounded-lg border-2 border-gray-200 bg-white p-4 transition-all hover:border-orange-300 hover:bg-orange-50 cursor-pointer group"
                              >
                                <div className="flex items-start gap-3">
                                  <div className="flex items-center gap-2 flex-shrink-0">
                                    <Play className="h-4 w-4 text-orange-500 group-hover:text-orange-600" />
                                    <span className="font-mono text-sm font-semibold text-orange-600 group-hover:text-orange-700">
                                      [{subtitle.time}]
                                    </span>
                                  </div>
                                  <p className="text-sm leading-relaxed text-slate-700 group-hover:text-slate-900">
                                    {highlightText(subtitle.text, subtitleSearchQuery)}
                                  </p>
                                </div>
                              </button>
                            ))}
                          </div>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </div>
                </>
              )}
            </div>

{/* Course Content Sidebar (Desktop) */}
            {!isTheaterMode && (
              <div className="hidden w-1/4 border-l border-gray-200 bg-white lg:flex lg:flex-col">
                <div className="border-b border-gray-200 p-4">
                  <h2 className="text-lg font-bold text-slate-900">法學緒論 韋伯老師</h2>

<div className="mt-4 space-y-2">
                    <div className="flex items-center justify-between text-xs font-medium">
                      <span className="text-slate-600">你的進度</span>
                      <span className="text-slate-900">{globalProgress}% 已完成</span>
                    </div>
                    <div className="relative h-4 w-full overflow-hidden rounded-md bg-gray-100 shadow-inner">
                      <div
                        className="h-full bg-gradient-to-r from-orange-500 to-orange-600 transition-all duration-300"
                        style={{ width: `${globalProgress}%` }}
                      />
                    </div>
                  </div>
                </div>
                <ScrollArea className="flex-1">
                  <div className="p-4">
                    <div className="space-y-1">
                      {courseContent.map((lesson) => {
                        const isActive = lesson.id === activeLessonId
                        return (
                          <div
                            key={lesson.id}
                            // Use handleLessonClick to switch lessons
                            onClick={() => handleLessonClick(lesson.id)}
                            className={`group flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors ${
                              isActive
                                ? "border-l-4 border-orange-500 bg-orange-50"
                                : "border-l-4 border-transparent hover:bg-gray-50"
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              {lesson.completed ? (
                                <CheckCircle2 className="h-5 w-5 text-green-500" />
                              ) : (
                                <div className="h-5 w-5 rounded-full border-2 border-slate-300" />
                              )}
                              <div>
                                <h3
                                  className={`text-sm font-medium ${
                                    isActive ? "text-orange-700" : "text-slate-900 group-hover:text-slate-700"
                                  }`}
                                >
                                  {lesson.title}
                                </h3>
                                <div className="flex items-center gap-2 text-xs text-slate-500">
                                  <span className="flex items-center gap-1">
                                    <Clock className="h-3 w-3" />
                                    {lesson.duration}
                                  </span>
                                </div>
                              </div>
                            </div>
                            <div className="text-xs font-medium text-slate-500">進度 : {lesson.progress}%</div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </ScrollArea>
              </div>
            )}
          </div>

<Dialog open={isAnnouncementOpen} onOpenChange={setIsAnnouncementOpen}>
            <DialogContent className="sm:max-w-[600px] bg-white">
              <DialogHeader>
                <DialogTitle className="text-2xl font-bold text-slate-900">最新公告</DialogTitle>
                <DialogDescription className="text-slate-600">重要通知與課程更新資訊</DialogDescription>
              </DialogHeader>
              <Accordion type="single" collapsible className="w-full">
                <AccordionItem value="item-1" className="border-b border-gray-200">
                  <AccordionTrigger className="hover:no-underline">
                    <div className="flex items-center gap-3 text-left">
                      <span className="rounded-md bg-red-100 px-2 py-1 text-xs font-semibold text-red-600">重要</span>
                      <span className="font-medium text-slate-900">系統維護通知</span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="pt-4 pb-4 text-slate-700 leading-relaxed">
                    本週日凌晨 02:00 ~ 04:00 將進行系統維護，屆時將無法觀看課程，造成不便請見諒。
                  </AccordionContent>
                </AccordionItem>

<AccordionItem value="item-2" className="border-b border-gray-200">
                  <AccordionTrigger className="hover:no-underline">
                    <div className="flex items-center gap-3 text-left">
                      <span className="rounded-md bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-600">新課</span>
                      <span className="font-medium text-slate-900">113年刑法總則新課程上架</span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="pt-4 pb-4 text-slate-700 leading-relaxed">
                    韋伯老師的最新刑法課程已經上架，歡迎同學前往觀看。
                  </AccordionContent>
                </AccordionItem>

<AccordionItem value="item-3" className="border-none">
                  <AccordionTrigger className="hover:no-underline">
                    <div className="flex items-center gap-3 text-left">
                      <span className="rounded-md bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-600">提醒</span>
                      <span className="font-medium text-slate-900">考前衝刺班報名提醒</span>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="pt-4 pb-4 text-slate-700 leading-relaxed">
                    距離高普考剩餘 60 天，考前衝刺班現正報名中。
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            </DialogContent>
          </Dialog>

{/* iOS Home Indicator - Trigger Zone (Hidden State) */}
          {!isAIExpanded && (
            <button
              onClick={() => setIsAIExpanded(true)}
              className="fixed bottom-0 left-0 right-0 z-50 flex h-8 items-start justify-center bg-transparent pt-2 transition-opacity hover:opacity-80"
              aria-label="Show AI Assistant"
            >
              <div className="h-1.5 w-32 rounded-full bg-gray-400/60" />
            </button>
          )}

{/* Floating AI Assistant Capsule (Expanded State) */}
          <div
            className={`fixed left-1/2 z-50 flex h-12 w-full max-w-md -translate-x-1/2 items-center gap-2 rounded-full border border-white/50 px-6 backdrop-blur-[20px] transition-all duration-300 ${
              isAIExpanded
                ? "bottom-6 translate-y-0 opacity-100"
                : "bottom-0 translate-y-20 opacity-0 pointer-events-none"
            }`}
            style={{
              background: "linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3))",
              boxShadow:
                "inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.05)",
            }}
          >
            <button
              onClick={() => setIsModalOpen(true)}
              className="flex flex-1 items-center gap-2 transition-transform hover:scale-105"
            >
              <Sparkles className="h-5 w-5 text-orange-500" />
              <span className="text-slate-600 font-medium">Ask AI Assistant...</span>
            </button>

{/* Minimize Button */}
            <button
              onClick={() => setIsAIExpanded(false)}
              className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-gray-200/50"
              aria-label="Minimize AI Assistant"
            >
              <ChevronDown className="h-5 w-5 text-slate-500" />
            </button>
          </div>

{/* AI Assistant Modal */}
          <AiAssistantModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
        </>
      ) : (
        // Student Area View - Unified view for all student area tabs including dashboard
        <div className="flex flex-1 overflow-hidden">
          {/* Left Sidebar Navigation */}
          <div className="w-64 border-r bg-white shadow-sm">
            <div className="p-4">
              <Button
                onClick={() => setCurrentView("player")}
                variant="outline"
                className="w-full justify-start gap-2 border-orange-500 text-orange-600 hover:bg-orange-50"
              >
                <ArrowLeft className="h-4 w-4" />
                返回課程
              </Button>
            </div>
            <nav className="space-y-1 px-2">
              <button
                onClick={() => setStudentAreaTab("dashboard")}
                className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors ${
                  studentAreaTab === "dashboard"
                    ? "bg-orange-50 text-orange-600 font-medium"
                    : "text-slate-700 hover:bg-gray-50"
                }`}
              >
                <LayoutDashboard className="h-5 w-5" />
                學習儀表板
              </button>
              <button
                onClick={() => setStudentAreaTab("watch-history")}
                className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors ${
                  studentAreaTab === "watch-history"
                    ? "bg-orange-50 text-orange-600 font-medium"
                    : "text-slate-700 hover:bg-gray-50"
                }`}
              >
                <History className="h-5 w-5" />
                觀看紀錄
              </button>
              <button
                onClick={() => setStudentAreaTab("saved-courses")}
                className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors ${
                  studentAreaTab === "saved-courses"
                    ? "bg-orange-50 text-orange-600 font-medium"
                    : "text-slate-700 hover:bg-gray-50"
                }`}
              >
                <Heart className="h-5 w-5" />
                收藏課程
              </button>
              <button
                onClick={() => setStudentAreaTab("ai-history")}
                className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors ${
                  studentAreaTab === "ai-history"
                    ? "bg-orange-50 text-orange-600 font-medium"
                    : "text-slate-700 hover:bg-gray-50"
                }`}
              >
                <MessageSquare className="h-5 w-5" />
                AI問答紀錄
              </button>
              <button
                onClick={() => setStudentAreaTab("quiz-history")}
                className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors ${
                  studentAreaTab === "quiz-history"
                    ? "bg-orange-50 text-orange-600 font-medium"
                    : "text-slate-700 hover:bg-gray-50"
                }`}
              >
                <ClipboardList className="h-5 w-5" />
                課程測驗紀錄
              </button>
            </nav>
          </div>

{/* Main Content Area */}
          <div className="flex-1 overflow-auto bg-gray-50 p-8">{renderStudentAreaContent()}</div>
        </div>
      )}
    </div>
  )
}b2:T1bc8c,[V0_FILE]typescriptreact:file="/components/course-player.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import {
  Sparkles,
  Play,
  Pause,
  Volume2,
  Maximize,
  Minimize,
  Settings,
  ChevronDown,
  Check,
  X,
  Download,
  Bell,
  LogOut,
  RotateCcw,
  RotateCw,
  Heart,
  RectangleHorizontal,
  MessageSquare,
  ClipboardList,
  Clock,
  Plus,
  FileText,
  Pencil,
  Trash2,
  CheckCircle2,
  XCircle,
  Megaphone,
  History,
  BookOpen,
  Search,
  ArrowLeft,
  LayoutDashboard,
  User,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input" // Added Input component for search
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import AiAssistantModal from "@/components/ai-assistant-modal"
import { toast } from "@/components/ui/use-toast"
import { Card, CardContent } from "@/components/ui/card" // Import Card components
import { ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } from "recharts"

const courseContent = [
  { id: 1, title: "法學緒論1", duration: "3小時15分", progress: 100, completed: true },
  { id: 2, title: "法學緒論2", duration: "2小時52分", progress: 100, completed: true },
  { id: 3, title: "法學緒論3", duration: "2小時50分", progress: 0, completed: false },
  { id: 4, title: "法學緒論4", duration: "2小時45分", progress: 0, completed: false },
  { id: 5, title: "法學緒論5", duration: "3小時10分", progress: 0, completed: false },
  { id: 6, title: "法學緒論6", duration: "2小時55分", progress: 0, completed: false },
  { id: 7, title: "法學緒論7", duration: "3小時05分", progress: 0, completed: false },
  { id: 8, title: "法學緒論8", duration: "2小時40分", progress: 0, completed: false },
  { id: 9, title: "法學緒論9", duration: "3小時20分", progress: 0, completed: false },
  { id: 10, title: "法學緒論10", duration: "2小時58分", progress: 0, completed: false },
]

const sampleQuiz = [
  {
    id: 1,
    question: "What is the main purpose of understanding the basics in this course?",
    options: [
      "To memorize all concepts",
      "To build a strong foundation for advanced topics",
      "To complete the course quickly",
      "To skip intermediate lessons",
    ],
    correctAnswer: 1,
  },
  {
    id: 2,
    question: "Which of the following is a core principle covered in this lesson?",
    options: [
      "Advanced debugging techniques",
      "Fundamental concepts and real-world applications",
      "Expert-level optimization",
      "Framework-specific tools",
    ],
    correctAnswer: 1,
  },
  {
    id: 3,
    question: "What should you focus on when learning the basics?",
    options: [
      "Speed over understanding",
      "Memorization without practice",
      "Understanding core concepts thoroughly",
      "Skipping practice examples",
    ],
    correctAnswer: 2,
  },
  {
    id: 4,
    question: "How can you best apply the basics in real-world scenarios?",
    options: [
      "Ignore practical examples",
      "Practice with hands-on projects and exercises",
      "Only read theoretical content",
      "Wait until advanced lessons",
    ],
    correctAnswer: 1,
  },
]

const downloadableMaterials = [
  {
    id: 1,
    name: "Lesson 3 Slides.PDF",
    size: "12.4 MB",
    type: "PDF",
  },
  {
    id: 2,
    name: "Practice Exercises.DOCX",
    size: "3.2 MB",
    type: "DOCX",
  },
  {
    id: 3,
    name: "Reference Guide.PDF",
    size: "25.6 MB",
    type: "PDF",
  },
  {
    id: 4,
    name: "Code Examples.ZIP",
    size: "8.9 MB",
    type: "ZIP",
  },
]

type TimeStampedNote = {
  id: string
  timestamp: number // in seconds
  content: string
  createdAt: Date
}

export default function CoursePlayer() {
  const [currentView, setCurrentView] = useState<"player" | "student-area">("player")
  const [studentAreaTab, setStudentAreaTab] = useState<
    "watch-history" | "saved-courses" | "ai-history" | "quiz-history" | "dashboard"
  >("watch-history")
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [subtitleSearchQuery, setSubtitleSearchQuery] = useState("")
  const [isAnnouncementOpen, setIsAnnouncementOpen] = useState(false)
  const [isAIExpanded, setIsAIExpanded] = useState(false) // Added state for AI expansion
  const [isPlaying, setIsPlaying] = useState(true)
  const [activeLessonId, setActiveLessonId] = useState(3)
  const [currentTime, setCurrentTime] = useState(0)
  const [volume, setVolume] = useState(80)
  const [activeTab, setActiveTab] = useState("notes")
  const [playbackSpeed, setPlaybackSpeed] = useState(1)
  const [isTheaterMode, setIsTheaterMode] = useState(false)
  const [isStudentMenuOpen, setIsStudentMenuOpen] = useState(false)
  const [isFavorite, setIsFavorite] = useState(true) // Added state for favorite/bookmark status (default to favorited)
  const [isFullscreen, setIsFullscreen] = useState(false) // Added state to track fullscreen status

const [startDate, setStartDate] = useState("")
  const [endDate, setEndDate] = useState("")

const [quizAnswers, setQuizAnswers] = useState<Record<number, number>>({})
  const [quizSubmitted, setQuizSubmitted] = useState(false)
  const [quizScore, setQuizScore] = useState(0)

const [studentNotes, setStudentNotes] = useState("")
  const [currentNote, setCurrentNote] = useState("")
  const [timeStampedNotes, setTimeStampedNotes] = useState<TimeStampedNote[]>([
    {
      id: "1",
      timestamp: 324,
      content: "這個概念很重要，需要多複習幾次",
      createdAt: new Date("2024-01-15T10:30:00"),
    },
    {
      id: "2",
      timestamp: 156,
      content: "講解埒清楚，理解了基本原理",
      createdAt: new Date("2024-01-15T10:25:00"),
    },
    {
      id: "3",
      timestamp: 489,
      content: "實作範例部分要再多練習",
      createdAt: new Date("2024-01-15T10:35:00"),
    },
  ])
  const [editingNoteId, setEditingNoteId] = useState<string | null>(null)
  const [editingContent, setEditingContent] = useState("")

// State to manage video progress
  const [progress, setProgress] = useState(0) // Added state for video progress

const videoRef = useRef<HTMLVideoElement>(null)
  const playerContainerRef = useRef<HTMLDivElement>(null) // Added ref for the player container

const activeLesson = courseContent.find((lesson) => lesson.id === activeLessonId) || courseContent[0]

const handleNavigateToStudentArea = (
    tab: "watch-history" | "saved-courses" | "ai-history" | "quiz-history" | "dashboard",
  ) => {
    setStudentAreaTab(tab)
    setCurrentView("student-area")
    setIsStudentMenuOpen(false)
  }

const parseDurationToSeconds = (duration: string): number => {
    const hourMatch = duration.match(/(\d+)小時/)
    const minuteMatch = duration.match(/(\d+)分/)

const hours = hourMatch ? Number.parseInt(hourMatch[1]) : 0
    const minutes = minuteMatch ? Number.parseInt(minuteMatch[1]) : 0

return hours * 3600 + minutes * 60
  }

const formatTimeDisplay = (seconds: number): string => {
    const hrs = Math.floor(seconds / 3600)
    const mins = Math.floor((seconds % 3600) / 60)
    const secs = Math.floor(seconds % 60)

if (hrs > 0) {
      return `${hrs.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
    }
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

const calculateGlobalProgress = (): number => {
    let totalWatchedSeconds = 0
    let totalCourseSeconds = 0

courseContent.forEach((lesson) => {
      const lessonDurationSeconds = parseDurationToSeconds(lesson.duration)
      const watchedSeconds = (lesson.progress / 100) * lessonDurationSeconds

totalWatchedSeconds += watchedSeconds
      totalCourseSeconds += lessonDurationSeconds
    })

if (totalCourseSeconds === 0) return 0
    return Math.round((totalWatchedSeconds / totalCourseSeconds) * 100)
  }

const globalProgress = calculateGlobalProgress()

const totalDurationSeconds = activeLesson ? parseDurationToSeconds(activeLesson.duration) : 0

const handleSeek = (seconds: number) => {
    // In a real implementation, this would seek the video
    console.log(`Seeking ${seconds > 0 ? "+" : ""}${seconds}s`)
    // Update the progress state to reflect the seeked time
    // setProgress((prevProgress) => Math.max(0, Math.min(100, prevProgress + (seconds / totalDurationSeconds) * 100)))
    // Seek the actual video player
    if (videoRef.current) {
      videoRef.current.currentTime += seconds
    }
  }

const parseTimeToSeconds = (timeString: string): number => {
    const parts = timeString.split(":").map(Number)
    if (parts.length === 2) {
      // MM:SS format
      return parts[0] * 60 + parts[1]
    } else if (parts.length === 3) {
      // HH:MM:SS format
      return parts[0] * 3600 + parts[1] * 60 + parts[2]
    }
    return 0
  }

const highlightText = (text: string, query: string) => {
    if (!query.trim()) {
      return <span>{text}</span>
    }

// Split text by query, keeping the matched parts using capturing group
    const parts = text.split(new RegExp(`(${query})`, "gi"))

return (
      <>
        {parts.map((part, index) => {
          // Check if this part matches the query (case-insensitive)
          if (part.toLowerCase() === query.toLowerCase()) {
            return (
              <span key={index} className="bg-yellow-300 text-black font-medium">
                {part}
              </span>
            )
          }
          return <span key={index}>{part}</span>
        })}
      </>
    )
  }

const handleSegmentClick = (timeString: string) => {
    if (videoRef.current) {
      const seconds = parseTimeToSeconds(timeString)
      videoRef.current.currentTime = seconds
      setCurrentTime(seconds) // Update currentTime state
      setIsPlaying(true)
      toast({
        title: "跳轉成功",
        description: `已跳轉至 ${timeString}`,
      })
    }
  }

const handleAnswerChange = (questionId: number, answerIndex: number) => {
    setQuizAnswers((prev) => ({ ...prev, [questionId]: answerIndex }))
  }

const handleSubmitQuiz = () => {
    let correct = 0
    sampleQuiz.forEach((q) => {
      if (quizAnswers[q.id] === q.correctAnswer) {
        correct++
      }
    })
    const score = Math.round((correct / sampleQuiz.length) * 100)
    setQuizScore(score)
    setQuizSubmitted(true)
  }

const handleGenerateNewQuiz = () => {
    setQuizAnswers({})
    setQuizSubmitted(false)
    setQuizScore(0)
  }

const handleSaveNotes = () => {
    console.log("Saving notes:", studentNotes)
    // In a real implementation, this would save to a database
    alert("備註已儲存！")
  }

const handleDownload = (fileName: string) => {
    console.log("Downloading:", fileName)
    // In a real implementation, this would trigger a file download
    alert(`下載 ${fileName}`)
  }

const toggleTheaterMode = () => {
    setIsTheaterMode((prev) => !prev)
  }

// Use the new formatTimeDisplay and currentTime state for display
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

const handleAddTimeStampedNote = () => {
    if (currentNote.trim()) {
      const newNote: TimeStampedNote = {
        id: Date.now().toString(),
        // Use currentTime state for timestamp
        timestamp: Math.floor(currentTime), // Assuming currentTime is in seconds
        content: currentNote,
        createdAt: new Date(),
      }
      setTimeStampedNotes([...timeStampedNotes, newNote].sort((a, b) => a.timestamp - b.timestamp))
      setCurrentNote("")
      toast({
        title: "筆記已新增",
        description: `已標記時間點：${formatTime(newNote.timestamp)}`,
      })
    }
  }

const handleJumpToTime = (timestamp: number) => {
    // Update currentTime state and video player time
    setCurrentTime(timestamp)
    const newProgress = (timestamp / totalDurationSeconds) * 100
    setProgress(newProgress) // Assuming progress is linked to video playback
    // Jump video to the timestamp
    if (videoRef.current) {
      videoRef.current.currentTime = timestamp
      setIsPlaying(true) // Ensure video plays after jump
    }
    toast({
      title: "跳轉至標記時間",
      description: `${formatTime(timestamp)}`,
    })
  }

const handleDeleteNote = (noteId: string) => {
    setTimeStampedNotes(timeStampedNotes.filter((note) => note.id !== noteId))
    toast({
      title: "筆記已刪除",
    })
  }

const handleStartEdit = (note: TimeStampedNote) => {
    setEditingNoteId(note.id)
    setEditingContent(note.content)
  }

const handleSaveEdit = (noteId: string) => {
    setTimeStampedNotes(
      timeStampedNotes.map((note) => (note.id === noteId ? { ...note, content: editingContent } : note)),
    )
    setEditingNoteId(null)
    setEditingContent("")
    toast({
      title: "筆記已更新",
    })
  }

const handleCancelEdit = () => {
    setEditingNoteId(null)
    setEditingContent("")
  }

const toggleFavorite = () => {
    setIsFavorite((prev) => !prev)
  }

const currentLessonTitle = activeLesson.title

// Update video player event listeners
  const handleTimeUpdate = () => {
    if (videoRef.current) {
      setCurrentTime(videoRef.current.currentTime)
      setProgress((videoRef.current.currentTime / totalDurationSeconds) * 100)
    }
  }

const handleLessonClick = (lessonId: number) => {
    setActiveLessonId(lessonId)
    setCurrentTime(0)
    if (videoRef.current) {
      videoRef.current.currentTime = 0
      const playPromise = videoRef.current.play()
      if (playPromise !== undefined) {
        playPromise.catch((error) => {
          // Auto-play was prevented or interrupted, which is fine
          if (error.name !== "AbortError") {
            console.error("Video playback error:", error)
          }
        })
      }
    }
  }

const filteredSubtitles = [
    {
      time: "00:00:00",
      text: "各位學員大家好，我是韋伯老師。歡迎來到我們今天的《法學緒論》課程。",
    },
    {
      time: "00:01:25",
      text: "好，那首先我們第一個要問的問題是：到底什麼是法律？你可能覺得這個問題很簡單，但其實它有很多層次。",
    },
    {
      time: "00:03:50",
      text: "從哲學的角度來看，法律是正義的體現，這是我們必須先理解的大前提。",
    },
    {
      time: "00:05:40",
      text: "接著，我們來看法律的分類。在公職考試中，大家最常被問到的就是公法、私法和社會法的區別。",
    },
    {
      time: "00:08:10",
      text: "來，我們把重點畫起來，公法強調國家跟人民之間的垂直關係；私法則是人民彼此間的水平關係。",
    },
    {
      time: "00:11:05",
      text: "這裡有個常���的觀念，像是買賣契約，它屬於私法的範疇，因為是兩個平等個體之間的約定。",
    },
    {
      time: "00:13:30",
      text: "好的，接下來我們跳到法源的部分。法源有成文法和不成文法，這兩個概念在命題趨勢上非常重要。",
    },
    {
      time: "00:16:00",
      text: "所謂的成文法，最典型的例子就是我們的憲法、法律和命令，它們都是經過立法院或行政機關制定的。",
    },
    {
      time: "00:18:45",
      text: "那不成文法呢？像是習慣法和法理，特別是法理，它是補充法律漏洞時非常重要的工具。",
    },
    {
      time: "00:21:20",
      text: "我們用一個實際的案例來理解，當一個案件找不到適用的法條時，法官就要引用法理來做判決依據。",
    },
    {
      time: "00:23:55",
      text: "休息一下，我們馬上要進入法律的效力層次。這也是考試中一個比較燒腦的部分，但非常關鍵。",
    },
    {
      time: "00:26:30",
      text: "記住，憲法永遠是最高位階。如果普通法律跟憲法有所牴觸，那普通法律就是無效的。",
    },
    {
      time: "00:28:45",
      text: "好了，今天的重點我們已經講解完畢，請大家務必回去複習公法、私法的區別和法源的分類。謝謝大家！",
    },
  ].filter((subtitle) => subtitle.text.toLowerCase().includes(subtitleSearchQuery.toLowerCase()))

useEffect(() => {
    const handleFullscreenChange = () => {
      // Check both standard and webkit prefixed properties
      const isCurrentlyFullscreen = !!(
        document.fullscreenElement ||
        (document as any).webkitFullscreenElement ||
        (document as any).mozFullScreenElement ||
        (document as any).msFullscreenElement
      )
      setIsFullscreen(isCurrentlyFullscreen)
    }

// Listen to all possible fullscreen change events
    document.addEventListener("fullscreenchange", handleFullscreenChange)
    document.addEventListener("webkitfullscreenchange", handleFullscreenChange)
    document.addEventListener("mozfullscreenchange", handleFullscreenChange)
    document.addEventListener("MSFullscreenChange", handleFullscreenChange)

return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange)
      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange)
      document.removeEventListener("mozfullscreenchange", handleFullscreenChange)
      document.removeEventListener("MSFullscreenChange", handleFullscreenChange)
    }
  }, [])

const toggleFullscreen = () => {
    if (!playerContainerRef.current) return

try {
      const elem = playerContainerRef.current as any
      const doc = document as any

// Check if already in fullscreen
      const isCurrentlyFullscreen = !!(
        document.fullscreenElement ||
        doc.webkitFullscreenElement ||
        doc.mozFullScreenElement ||
        doc.msFullscreenElement
      )

if (!isCurrentlyFullscreen) {
        // Enter fullscreen - try standard first, then vendor prefixes
        if (elem.requestFullscreen) {
          elem.requestFullscreen()
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen() // Safari
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen() // Firefox
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen() // IE/Edge
        } else {
          console.warn("[v0] Fullscreen API not supported on this browser")
        }
      } else {
        // Exit fullscreen - try standard first, then vendor prefixes
        if (doc.exitFullscreen) {
          doc.exitFullscreen()
        } else if (doc.webkitExitFullscreen) {
          doc.webkitExitFullscreen() // Safari
        } else if (doc.mozCancelFullScreen) {
          doc.mozCancelFullScreen() // Firefox
        } else if (doc.msExitFullscreen) {
          doc.msExitFullscreen() // IE/Edge
        }
      }
    } catch (error) {
      console.error("[v0] Fullscreen error:", error)
      // Silently fail - don't crash the app
    }
  }

const filterByDateRange = (dateString: string) => {
    if (!startDate && !endDate) return true
    const itemDate = new Date(dateString)
    const start = startDate ? new Date(startDate) : null
    const end = endDate ? new Date(endDate) : null

if (start && end) {
      return itemDate >= start && itemDate <= end
    } else if (start) {
      return itemDate >= start
    } else if (end) {
      return itemDate <= end
    }
    return true
  }

const clearDateFilter = () => {
    setStartDate("")
    setEndDate("")
  }

// Function to render content based on studentAreaTab
  const renderStudentAreaContent = () => {
    switch (studentAreaTab) {
      case "dashboard":
        return (
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">學習儀表板</h2>
              <p className="text-slate-600 mt-1">您的整體學習進度與數據概覽</p>
            </div>

<Card className="bg-white p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <h3 className="text-xl font-bold text-slate-900 mb-6">個人學習戰力分析</h3>
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  {/* Radar Chart */}
                  <div className="lg:col-span-2">
                    <ResponsiveContainer width="100%" height={400}>
                      <RadarChart
                        data={[
                          { subject: "憲法", effort: 75, mastery: 72 },
                          { subject: "行政法", effort: 88, mastery: 65 },
                          { subject: "民法", effort: 92, mastery: 90 },
                          { subject: "刑法", effort: 80, mastery: 78 },
                          { subject: "法學緒論", effort: 70, mastery: 68 },
                          { subject: "英文", effort: 45, mastery: 42 },
                        ]}
                      >
                        <PolarGrid stroke="#e2e8f0" />
                        <PolarAngleAxis dataKey="subject" tick={{ fill: "#475569", fontSize: 14, fontWeight: 500 }} />
                        <PolarRadiusAxis angle={90} domain={[0, 100]} tick={{ fill: "#94a3b8", fontSize: 12 }} />
                        <Radar
                          name="學習投入度"
                          dataKey="effort"
                          stroke="#10b981"
                          fill="#10b981"
                          fillOpacity={0.6}
                          strokeWidth={2}
                        />
                        <Radar
                          name="學科掌握度"
                          dataKey="mastery"
                          stroke="#f97316"
                          fill="#f97316"
                          fillOpacity={0.6}
                          strokeWidth={2}
                        />
                        <Legend
                          wrapperStyle={{ paddingTop: "20px" }}
                          iconType="circle"
                          formatter={(value) => <span className="text-sm font-medium text-slate-700">{value}</span>}
                        />
                      </RadarChart>
                    </ResponsiveContainer>
                  </div>

{/* Insight Section */}
                  <div className="space-y-4">
                    <div>
                      <h4 className="text-lg font-semibold text-slate-900 mb-3">學習洞察</h4>
                      <div className="space-y-3">
                        {/* Strong Point */}
                        <div className="p-3 bg-green-50 rounded-lg border border-green-200">
                          <div className="flex items-center gap-2 mb-1">
                            <CheckCircle2 className="h-4 w-4 text-green-600" />
                            <span className="text-sm font-semibold text-green-900">優勢科目</span>
                          </div>
                          <p className="text-sm text-green-800">
                            民法表現優異，投入度與掌握度均達到 90 分以上，持續保持！
                          </p>
                        </div>

{/* Needs Improvement */}
                        <div className="p-3 bg-orange-50 rounded-lg border border-orange-200">
                          <div className="flex items-center gap-2 mb-1">
                            <Megaphone className="h-4 w-4 text-orange-600" />
                            <span className="text-sm font-semibold text-orange-900">改善建議</span>
                          </div>
                          <p className="text-sm text-orange-800">
                            行政法投入度高達 88 分，但分數僅 65 分，建議加強觀念複習與錯題訂正。
                          </p>
                        </div>

{/* Weak Point */}
                        <div className="p-3 bg-red-50 rounded-lg border border-red-200">
                          <div className="flex items-center gap-2 mb-1">
                            <XCircle className="h-4 w-4 text-red-600" />
                            <span className="text-sm font-semibold text-red-900">待加強科目</span>
                          </div>
                          <p className="text-sm text-red-800">
                            英文兩項指標均偏低，建議增加練習時間並搭配單字背誦計畫。
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <h3 className="text-xl font-bold text-slate-900 mb-3">同儕競爭力分析</h3>

{/* Cohort Context Badges */}
                <div className="flex flex-wrap gap-2 mb-5">
                  <span className="px-3 py-1 bg-slate-100 text-slate-700 text-sm font-medium rounded-full">
                    115年度
                  </span>
                  <span className="px-3 py-1 bg-slate-100 text-slate-700 text-sm font-medium rounded-full">
                    高考三級
                  </span>
                  <span className="px-3 py-1 bg-slate-100 text-slate-700 text-sm font-medium rounded-full">
                    一般行政
                  </span>
                </div>

<div className="flex gap-6">
                  {/* Left Column: PR Metric (35%) */}
                  <div className="w-[35%] flex flex-col items-center justify-center border-r border-slate-200 pr-6">
                    <div className="text-center">
                      <div className="text-6xl font-bold text-blue-600 mb-2">PR 94</div>
                      <p className="text-sm text-slate-500">領先 94% 的學員</p>
                    </div>
                  </div>

{/* Right Column: Position Chart (65%) */}
                  <div className="w-[65%] flex flex-col justify-center">
                    <h4 className="text-sm font-semibold text-slate-700 mb-3">同儕競爭位置圖</h4>

{/* Linear Scale */}
                    <div className="relative h-16 mb-4">
                      {/* Background Bar */}
                      <div className="absolute top-8 left-0 right-0 h-2 bg-gradient-to-r from-red-200 via-yellow-200 to-green-200 rounded-full" />

{/* Markers */}
                      {/* Average Marker at 50% */}
                      <div className="absolute top-0" style={{ left: "50%" }}>
                        <div className="relative -translate-x-1/2">
                          <div className="w-0.5 h-6 bg-slate-400" />
                          <span className="absolute top-7 -translate-x-1/2 left-1/2 text-xs font-medium text-slate-600 whitespace-nowrap">
                            平均水準
                          </span>
                        </div>
                      </div>

{/* Top 10% Marker at 90% */}
                      <div className="absolute top-0" style={{ left: "90%" }}>
                        <div className="relative -translate-x-1/2">
                          <div className="w-0.5 h-6 bg-green-600" />
                          <span className="absolute top-7 -translate-x-1/2 left-1/2 text-xs font-medium text-green-700 whitespace-nowrap">
                            頂標
                          </span>
                        </div>
                      </div>

{/* User Position at 94% */}
                      <div className="absolute top-0" style={{ left: "94%" }}>
                        <div className="relative -translate-x-1/2">
                          <div className="w-8 h-8 bg-orange-500 rounded-full border-4 border-white shadow-lg flex items-center justify-center -mt-3">
                            <User className="h-4 w-4 text-white" />
                          </div>
                          <span className="absolute top-9 -translate-x-1/2 left-1/2 text-xs font-bold text-orange-600 whitespace-nowrap">
                            您
                          </span>
                        </div>
                      </div>
                    </div>

{/* Scale Labels */}
                    <div className="flex justify-between text-xs text-slate-500">
                      <span>0%</span>
                      <span>25%</span>
                      <span>50%</span>
                      <span>75%</span>
                      <span>100%</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Total Courses Card */}
              <Card className="bg-white hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-500">總課程數</p>
                      <h3 className="text-4xl font-bold text-orange-600 mt-2">12</h3>
                    </div>
                    <LayoutDashboard className="h-12 w-12 text-orange-300 opacity-70" />
                  </div>
                </CardContent>
              </Card>

{/* Courses in Progress Card */}
              <Card className="bg-white hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-500">進行中課程</p>
                      <h3 className="text-4xl font-bold text-blue-600 mt-2">5</h3>
                    </div>
                    <BookOpen className="h-12 w-12 text-blue-300 opacity-70" />
                  </div>
                </CardContent>
              </Card>

{/* Completed Courses Card */}
              <Card className="bg-white hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-500">已完成課程</p>
                      <h3 className="text-4xl font-bold text-green-600 mt-2">7</h3>
                    </div>
                    <CheckCircle2 className="h-12 w-12 text-green-300 opacity-70" />
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Recent Activity Section */}
            <Card className="bg-white p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <h3 className="text-lg font-semibold text-slate-900 mb-4">近期活動</h3>
                <ul className="space-y-3">
                  <li className="flex items-center justify-between text-sm text-slate-700">
                    <span>觀看「法學緒論 - 第三章」</span>
                    <span className="text-slate-500">今天 15:30</span>
                  </li>
                  <li className="flex items-center justify-between text-sm text-slate-700">
                    <span>完成「刑法總則 - 第一章」測驗</span>
                    <span className="text-slate-500">昨天 14:00</span>
                  </li>
                  <li className="flex items-center justify-between text-sm text-slate-700">
                    <span>新增筆記於「民法概要 - 第五章」</span>
                    <span className="text-slate-500">1月18日 21:15</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        )
      case "watch-history":
        const watchHistoryData = [
          {
            id: 1,
            title: "法學緒論 - 第三章 法律的起源與發展",
            course: "法學緒論 韋伯老師",
            progress: 67,
            duration: "3小時15分",
            watchedAt: "2024-01-20 15:30",
            watchDate: "2024-01-20",
          },
          {
            id: 2,
            title: "刑法總則 - 第一章 刑法的基本概念",
            course: "刑法總則 韋伯老師",
            progress: 45,
            duration: "2小時40分",
            watchedAt: "2024-01-19 10:15",
            watchDate: "2024-01-19",
          },
          {
            id: 3,
            title: "民法概要 - 第五章 債權關係",
            course: "民法概要 陳老師",
            progress: 89,
            duration: "1小時55分",
            watchedAt: "2024-01-18 20:45",
            watchDate: "2024-01-18",
          },
          {
            id: 4,
            title: "行政法 - 第二章 行政組織",
            course: "行政法 林老師",
            progress: 32,
            duration: "2小時20分",
            watchedAt: "2024-01-15 14:20",
            watchDate: "2024-01-15",
          },
          {
            id: 5,
            title: "憲法 - 第一章 憲法概論",
            course: "憲法 張老師",
            progress: 78,
            duration: "1小時45分",
            watchedAt: "2024-01-10 09:30",
            watchDate: "2024-01-10",
          },
        ]

const filteredWatchHistory = watchHistoryData.filter((item) => filterByDateRange(item.watchDate))

return (
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">觀看紀錄</h2>
              <p className="text-slate-600 mt-1">最近觀看的課程記錄</p>
            </div>

<Card className="bg-white">
              <CardContent className="p-4">
                <div className="flex flex-wrap items-end gap-4">
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">開始日期</label>
                    <Input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">結束日期</label>
                    <Input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <Button
                    variant="outline"
                    onClick={clearDateFilter}
                    className="border-slate-300 text-slate-700 hover:bg-slate-50 bg-transparent"
                  >
                    清除篩選
                  </Button>
                </div>
                {(startDate || endDate) && (
                  <div className="mt-3 text-sm text-slate-600">
                    找到 <span className="font-semibold text-orange-600">{filteredWatchHistory.length}</span> 筆記錄
                  </div>
                )}
              </CardContent>
            </Card>

<div className="space-y-4">
              {filteredWatchHistory.length > 0 ? (
                filteredWatchHistory.map((item) => (
                  <Card key={item.id} className="bg-white hover:shadow-md transition-shadow">
                    <CardContent className="p-6">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <h3 className="font-semibold text-slate-900 mb-1">{item.title}</h3>
                          <p className="text-sm text-slate-600 mb-3">{item.course}</p>
                          <div className="flex items-center gap-4 text-sm text-slate-500">
                            <span className="flex items-center gap-1">
                              <Clock className="h-4 w-4" />
                              {item.duration}
                            </span>
                            <span>觀看時間: {item.watchedAt}</span>
                          </div>
                          <div className="mt-4">
                            <div className="flex items-center justify-between mb-2">
                              <span className="text-sm text-slate-600">觀看進度</span>
                              <span className="text-sm font-medium text-orange-600">{item.progress}%</span>
                            </div>
                            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                              <div
                                className="h-full bg-orange-500 rounded-full"
                                style={{ width: `${item.progress}%` }}
                              />
                            </div>
                          </div>
                        </div>
                        <Button className="ml-4 bg-orange-500 hover:bg-orange-600 text-white">繼續觀看</Button>
                      </div>
                    </CardContent>
                  </Card>
                ))
              ) : (
                <Card className="bg-white">
                  <CardContent className="p-12 text-center">
                    <p className="text-slate-500">此日期範圍內沒有觀看紀錄</p>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        )
      case "saved-courses":
        const savedCoursesData = [
          {
            id: 1,
            title: "法學緒論",
            instructor: "韋伯老師",
            progress: 67,
            totalLessons: 24,
            completedLessons: 16,
            savedDate: "2024-01-18",
          },
          {
            id: 2,
            title: "刑法總則",
            instructor: "韋伯老師",
            progress: 45,
            totalLessons: 30,
            completedLessons: 13,
            savedDate: "2024-01-15",
          },
          {
            id: 3,
            title: "民法概要",
            instructor: "陳老師",
            progress: 89,
            totalLessons: 20,
            completedLessons: 18,
            savedDate: "2024-01-20",
          },
          {
            id: 4,
            title: "行政法",
            instructor: "林老師",
            progress: 12,
            totalLessons: 28,
            completedLessons: 3,
            savedDate: "2024-01-10",
          },
          {
            id: 5,
            title: "憲法",
            instructor: "張老師",
            progress: 55,
            totalLessons: 22,
            completedLessons: 12,
            savedDate: "2024-01-05",
          },
        ]

const filteredSavedCourses = savedCoursesData.filter((item) => filterByDateRange(item.savedDate))

return (
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">收藏課程</h2>
              <p className="text-slate-600 mt-1">您收藏的課程列表</p>
            </div>

<Card className="bg-white">
              <CardContent className="p-4">
                <div className="flex flex-wrap items-end gap-4">
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">開始日期</label>
                    <Input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">結束日期</label>
                    <Input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <Button
                    variant="outline"
                    onClick={clearDateFilter}
                    className="border-slate-300 text-slate-700 hover:bg-slate-50 bg-transparent"
                  >
                    清除篩選
                  </Button>
                </div>
                {(startDate || endDate) && (
                  <div className="mt-3 text-sm text-slate-600">
                    找到 <span className="font-semibold text-orange-600">{filteredSavedCourses.length}</span> 筆記錄
                  </div>
                )}
              </CardContent>
            </Card>

{filteredSavedCourses.length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredSavedCourses.map((course) => (
                  <Card key={course.id} className="bg-white hover:shadow-lg transition-shadow">
                    <CardContent className="p-6">
                      <div className="space-y-4">
                        <div className="flex items-start justify-between">
                          <div>
                            <h3 className="font-bold text-lg text-slate-900">{course.title}</h3>
                            <p className="text-sm text-slate-600 mt-1">{course.instructor}</p>
                            <p className="text-xs text-slate-400 mt-1">收藏於: {course.savedDate}</p>
                          </div>
                          <Button size="icon" variant="ghost" className="text-orange-500 hover:bg-orange-50">
                            <Heart className="h-5 w-5 fill-orange-500" />
                          </Button>
                        </div>
                        <div>
                          <div className="flex items-center justify-between mb-2">
                            <span className="text-sm text-slate-600">
                              {course.completedLessons} / {course.totalLessons} 課程
                            </span>
                            <span className="text-sm font-medium text-orange-600">{course.progress}%</span>
                          </div>
                          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div
                              className="h-full bg-orange-500 rounded-full"
                              style={{ width: `${course.progress}%` }}
                            />
                          </div>
                        </div>
                        <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">前往課程</Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            ) : (
              <Card className="bg-white">
                <CardContent className="p-12 text-center">
                  <p className="text-slate-500">此日期範圍內沒有收藏課程</p>
                </CardContent>
              </Card>
            )}
          </div>
        )
      case "ai-history":
        const aiHistoryData = [
          {
            id: 1,
            date: "2024-01-20 15:45",
            interactionDate: "2024-01-20",
            course: "法學緒論",
            question: "法律的效力層次是什麼？",
            summary: "憲法 > 法律 > 命令，並詳細說明了...",
          },
          {
            id: 2,
            date: "2024-01-19 11:20",
            interactionDate: "2024-01-19",
            course: "刑法總則",
            question: "正當防衛的構成要件？",
            summary: "需滿足現在不法侵害、防衛意思等要件...",
          },
          {
            id: 3,
            date: "2024-01-18 21:10",
            interactionDate: "2024-01-18",
            course: "民法概要",
            question: "契約的成立要件有哪些？",
            summary: "要約與承諾的意思表示一致即可成立...",
          },
          {
            id: 4,
            date: "2024-01-15 09:30",
            interactionDate: "2024-01-15",
            course: "行政法",
            question: "行政處分的定義？",
            summary: "指行政機關就公法上具體事件所為之決定...",
          },
          {
            id: 5,
            date: "2024-01-10 16:45",
            interactionDate: "2024-01-10",
            course: "憲法",
            question: "基本權利的分類？",
            summary: "可分為自由權、平等權、受益權等...",
          },
        ]

const filteredAIHistory = aiHistoryData.filter((item) => filterByDateRange(item.interactionDate))

return (
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">AI問答紀錄</h2>
              <p className="text-slate-600 mt-1">您與AI助教的對話記錄</p>
            </div>

<Card className="bg-white">
              <CardContent className="p-4">
                <div className="flex flex-wrap items-end gap-4">
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">開始日期</label>
                    <Input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">結束日期</label>
                    <Input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <Button
                    variant="outline"
                    onClick={clearDateFilter}
                    className="border-slate-300 text-slate-700 hover:bg-slate-50 bg-transparent"
                  >
                    清除篩選
                  </Button>
                </div>
                {(startDate || endDate) && (
                  <div className="mt-3 text-sm text-slate-600">
                    找到 <span className="font-semibold text-orange-600">{filteredAIHistory.length}</span> 筆記錄
                  </div>
                )}
              </CardContent>
            </Card>

<Card className="bg-white">
              <CardContent className="p-6">
                <div className="space-y-4">
                  {filteredAIHistory.length > 0 ? (
                    <div className="overflow-x-auto">
                      <table className="w-full">
                        <thead>
                          <tr className="border-b border-gray-200">
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">提問時間</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">課程</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">問題</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">回覆摘要</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredAIHistory.map((item) => (
                            <tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
                              <td className="py-4 px-4 text-sm text-slate-600">{item.date}</td>
                              <td className="py-4 px-4 text-sm text-slate-900">{item.course}</td>
                              <td className="py-4 px-4 text-sm text-slate-900 font-medium">{item.question}</td>
                              <td className="py-4 px-4 text-sm text-slate-600">{item.summary}</td>
                              <td className="py-4 px-4">
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="text-orange-600 border-orange-300 bg-transparent"
                                >
                                  查看完整對話
                                </Button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <div className="p-12 text-center">
                      <p className="text-slate-500">此日期範圍內沒有AI問答紀錄</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        )
      case "quiz-history":
        const quizHistoryData = [
          {
            id: 1,
            date: "2024-01-20 16:30",
            quizDate: "2024-01-20",
            course: "法學緒論",
            title: "第三章 隨堂測驗",
            score: 85,
            status: "已通過",
          },
          {
            id: 2,
            date: "2024-01-19 14:00",
            quizDate: "2024-01-19",
            course: "刑法總則",
            title: "第一章 測驗",
            score: 72,
            status: "已通過",
          },
          {
            id: 3,
            date: "2024-01-18 22:15",
            quizDate: "2024-01-18",
            course: "民法概要",
            title: "第五章 綜合測驗",
            score: 95,
            status: "優秀",
          },
          {
            id: 4,
            date: "2024-01-17 19:20",
            quizDate: "2024-01-17",
            course: "����緒論",
            title: "第二章 隨堂測驗",
            score: 58,
            status: "未通過",
          },
          {
            id: 5,
            date: "2024-01-15 10:30",
            quizDate: "2024-01-15",
            course: "行政法",
            title: "第一章 測驗",
            score: 88,
            status: "已通過",
          },
          {
            id: 6,
            date: "2024-01-10 14:15",
            quizDate: "2024-01-10",
            course: "憲法",
            title: "第二章 測驗",
            score: 92,
            status: "優秀",
          },
        ]

const filteredQuizHistory = quizHistoryData.filter((item) => filterByDateRange(item.quizDate))

return (
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">課程測驗紀錄</h2>
              <p className="text-slate-600 mt-1">您的測驗成績與答題記錄</p>
            </div>

<Card className="bg-white">
              <CardContent className="p-4">
                <div className="flex flex-wrap items-end gap-4">
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">開始日期</label>
                    <Input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-slate-700 mb-2">結束日期</label>
                    <Input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <Button
                    variant="outline"
                    onClick={clearDateFilter}
                    className="border-slate-300 text-slate-700 hover:bg-slate-50 bg-transparent"
                  >
                    清除篩選
                  </Button>
                </div>
                {(startDate || endDate) && (
                  <div className="mt-3 text-sm text-slate-600">
                    找到 <span className="font-semibold text-orange-600">{filteredQuizHistory.length}</span> 筆記錄
                  </div>
                )}
              </CardContent>
            </Card>

<Card className="bg-white">
              <CardContent className="p-6">
                <div className="space-y-4">
                  {filteredQuizHistory.length > 0 ? (
                    <div className="overflow-x-auto">
                      <table className="w-full">
                        <thead>
                          <tr className="border-b border-gray-200">
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">測驗日期</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">課程名稱</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">測驗標題</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">成績</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">狀態</th>
                            <th className="text-left py-3 px-4 font-semibold text-slate-700">操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredQuizHistory.map((item) => (
                            <tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
                              <td className="py-4 px-4 text-sm text-slate-600">{item.date}</td>
                              <td className="py-4 px-4 text-sm text-slate-900">{item.course}</td>
                              <td className="py-4 px-4 text-sm text-slate-900 font-medium">{item.title}</td>
                              <td className="py-4 px-4">
                                <span
                                  className={`text-lg font-bold ${
                                    item.score >= 90
                                      ? "text-green-600"
                                      : item.score >= 60
                                        ? "text-orange-600"
                                        : "text-red-600"
                                  }`}
                                >
                                  {item.score}分
                                </span>
                              </td>
                              <td className="py-4 px-4">
                                <span
                                  className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${
                                    item.status === "優秀"
                                      ? "bg-green-100 text-green-700"
                                      : item.status === "已通過"
                                        ? "bg-blue-100 text-blue-700"
                                        : "bg-red-100 text-red-700"
                                  }`}
                                >
                                  {item.status}
                                </span>
                              </td>
                              <td className="py-4 px-4">
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="text-orange-600 border-orange-300 bg-transparent"
                                >
                                  查看詳情
                                </Button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <div className="p-12 text-center">
                      <p className="text-slate-500">此日期範圍內沒有測驗紀錄</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        )
      default:
        return null
    }
  }

return (
    // Changed outer div to white background and removed flex-col from it to allow inner content to control layout
    <div className="flex h-screen flex-col bg-gray-50">
      {/* Top Navigation */}
      <header className="flex items-center justify-between border-b border-gray-200 bg-white/95 backdrop-blur-[8px] px-6 py-4 shadow-sm">
        {/* Left: Logo & Course Title */}
        <div className="flex items-center gap-4">
          <h1 className="text-2xl font-bold text-orange-600">超級函授</h1>
          <span className="text-gray-300">|</span>
          <h2 className="text-xl font-semibold text-slate-900">{currentLessonTitle}</h2>
        </div>

{/* Right: User Actions */}
        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleFavorite}
            className={`h-11 w-11 ${
              isFavorite
                ? "text-orange-500 hover:text-orange-600 hover:bg-orange-50"
                : "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
            }`}
            title={isFavorite ? "已收藏" : "加入收藏"}
          >
            <Heart className={`h-6 w-6 ${isFavorite ? "fill-current" : ""}`} />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsAnnouncementOpen(true)}
            className="relative h-11 w-11 text-slate-600 hover:bg-gray-100 hover:text-orange-600"
          >
            <Bell className="h-6 w-6" />
            <span className="absolute right-1 top-1 flex h-2.5 w-2.5">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-orange-500"></span>
            </span>
          </Button>

<DropdownMenu open={isStudentMenuOpen} onOpenChange={setIsStudentMenuOpen}>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="flex items-center gap-2 px-4 py-6 text-slate-700 hover:bg-gray-100">
                <User className="h-6 w-6" />
                <span className="text-lg font-medium">學員專區</span>
                <ChevronDown className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuItem
                onClick={() => handleNavigateToStudentArea("dashboard")}
                className="cursor-pointer py-3 text-base"
              >
                <LayoutDashboard className="mr-3 h-5 w-5" />
                學習儀表板
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => handleNavigateToStudentArea("watch-history")}
                className="cursor-pointer py-3 text-base"
              >
                <History className="mr-3 h-5 w-5" />
                觀看記錄
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => handleNavigateToStudentArea("saved-courses")}
                className="cursor-pointer py-3 text-base"
              >
                <Heart className="mr-3 h-5 w-5" />
                收藏課程
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => handleNavigateToStudentArea("ai-history")}
                className="cursor-pointer py-3 text-base"
              >
                <MessageSquare className="mr-3 h-5 w-5" />
                AI 對話記錄
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => handleNavigateToStudentArea("quiz-history")}
                className="cursor-pointer py-3 text-base"
              >
                <ClipboardList className="mr-3 h-5 w-5" />
                測驗記錄
              </DropdownMenuItem>
              <DropdownMenuItem className="cursor-pointer border-t py-3 text-base text-red-600 hover:bg-red-50 focus:bg-red-50 focus:text-red-600">
                <LogOut className="mr-3 h-5 w-5" />
                登出
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>

{currentView === "player" ? (
        <>
          {/* Main Content Area */}
          <div className={`flex flex-1 ${isTheaterMode ? "flex-col" : "flex-col lg:flex-row"}`}>
            {/* Main Content Area */}
            <div className={`flex flex-col ${isTheaterMode ? "w-full" : "w-full lg:w-3/4"}`}>
              {/* Video Player Section */}
              <div className={`${isTheaterMode ? "h-screen" : "bg-black"}`}>
                {!isTheaterMode && (
                  <div className="flex items-center gap-2 border-b border-gray-800 bg-zinc-900 px-6 py-3 text-sm text-white">
                    <div className="flex h-2 w-2 relative">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
                    </div>
                    <span className="text-gray-400">正在播放：</span>
                    <span className="font-medium text-orange-400">{currentLessonTitle}</span>
                  </div>
                )}

<div
                  ref={playerContainerRef} // Added ref to the player container
                  className="relative aspect-video w-full bg-black"
                >
                  {/* Video Background */}
                  <video
                    ref={videoRef}
                    autoPlay
                    loop
                    muted
                    playsInline
                    className="h-full w-full object-cover"
                    onTimeUpdate={handleTimeUpdate} // Added onTimeUpdate event
                  >
                    <source src="/placeholder-video.mp4" type="video/mp4" />
                  </video>

{/* Video Controls */}
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                    <div className="mb-3">
                      <Slider
                        value={[currentTime]}
                        onValueChange={(value) => {
                          // Seek video when slider is used
                          if (videoRef.current) {
                            videoRef.current.currentTime = value[0]
                            setCurrentTime(value[0])
                          }
                        }}
                        max={totalDurationSeconds}
                        step={0.1}
                        className="cursor-pointer [&_[role=slider]]:bg-orange-500 [&_[role=slider]]:border-orange-500 [&_.bg-primary]:bg-orange-500"
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center gap-1">
                          <Button
                            size="icon"
                            variant="ghost"
                            onClick={() => handleSeek(-10)}
                            className="h-9 w-9 text-white hover:bg-white/20 hover:text-orange-400"
                            title="Rewind 10 seconds"
                          >
                            <div className="relative">
                              <RotateCcw className="h-5 w-5" />
                              <span className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 text-[9px] font-bold">
                                10
                              </span>
                            </div>
                          </Button>
                          <Button
                            size="icon"
                            variant="ghost"
                            onClick={() => {
                              if (videoRef.current) {
                                if (videoRef.current.paused) {
                                  const playPromise = videoRef.current.play()
                                  if (playPromise !== undefined) {
                                    playPromise.catch((error) => {
                                      // Auto-play was prevented or interrupted, which is fine
                                      if (error.name !== "AbortError") {
                                        console.error("Video playback error:", error)
                                      }
                                    })
                                  }
                                } else {
                                  videoRef.current.pause()
                                }
                              }
                              setIsPlaying(!isPlaying)
                            }}
                            className="h-9 w-9 text-white hover:bg-white/20 hover:text-orange-400"
                          >
                            {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
                          </Button>
                          <Button
                            size="icon"
                            variant="ghost"
                            onClick={() => handleSeek(10)}
                            className="h-9 w-9 text-white hover:bg-white/20 hover:text-orange-400"
                            title="Forward 10 seconds"
                          >
                            <div className="relative">
                              <RotateCw className="h-5 w-5" />
                              <span className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 text-[9px] font-bold">
                                10
                              </span>
                            </div>
                          </Button>
                        </div>
                        <span className="text-sm text-white">
                          {formatTimeDisplay(currentTime)} / {formatTimeDisplay(totalDurationSeconds)}
                        </span>
                        <div className="flex items-center gap-2">
                          <Volume2 className="h-4 w-4 text-white" />
                          <Slider
                            value={[volume]}
                            onValueChange={(value) => {
                              setVolume(value[0])
                              // Adjust video volume
                              if (videoRef.current) {
                                videoRef.current.volume = value[0] / 100
                              }
                            }}
                            max={100}
                            step={1}
                            className="w-24 [&_[role=slider]]:bg-white [&_[role=slider]]:border-white"
                          />
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="gap-1.5 text-white hover:bg-white/20 hover:text-orange-400"
                            >
                              <Settings className="h-4 w-4" />
                              <span>{playbackSpeed}x</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="w-32">
                            {[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map((speed) => (
                              <DropdownMenuItem
                                key={speed}
                                onClick={() => {
                                  setPlaybackSpeed(speed)
                                  // Set video playback speed
                                  if (videoRef.current) {
                                    videoRef.current.playbackRate = speed
                                  }
                                }}
                                className={`cursor-pointer ${
                                  playbackSpeed === speed
                                    ? "bg-orange-50 text-orange-600 font-semibold"
                                    : "text-slate-700"
                                }`}
                              >
                                {speed}x {speed === 1 && "(Normal)"}
                              </DropdownMenuItem>
                            ))}
                          </DropdownMenuContent>
                        </DropdownMenu>
                        <Button
                          size="icon"
                          variant="ghost"
                          onClick={toggleTheaterMode}
                          className="h-9 w-9 text-white hover:bg-white/20 hover:text-orange-400"
                          title="劇院模式 (Theater Mode)"
                        >
                          <RectangleHorizontal className="h-5 w-5" />
                        </Button>
                        <Button
                          size="icon"
                          variant="ghost"
                          onClick={toggleFullscreen}
                          className="h-9 w-9 text-white hover:bg-white/20 hover:text-orange-400"
                          title={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
                        >
                          {isFullscreen ? <Minimize className="h-5 w-5" /> : <Maximize className="h-5 w-5" />}
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Tabs Section - Overview / 測驗 / 搭配教材與課程說明 */}
              {!isTheaterMode && (
                <>
                  <div className="border-b border-gray-200 bg-white">
                    <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 bg-white">
                      <TabsList className="w-full justify-start rounded-none border-b border-gray-200 bg-white p-0">
                        <TabsTrigger
                          value="outline"
                          className="rounded-none border-b-2 border-transparent text-slate-600 data-[state=active]:border-orange-500 data-[state=active]:bg-transparent data-[state=active]:text-orange-600"
                        >
                          課程大綱
                        </TabsTrigger>
                        <TabsTrigger
                          value="quiz"
                          className="rounded-none border-b-2 border-transparent text-slate-600 data-[state=active]:border-orange-500 data-[state=active]:bg-transparent data-[state=active]:text-orange-600"
                        >
                          隨堂測驗
                        </TabsTrigger>
                        <TabsTrigger
                          value="notes"
                          className="rounded-none border-b-2 border-transparent text-slate-600 data-[state=active]:border-orange-500 data-[state=active]:bg-transparent data-[state=active]:text-orange-600"
                        >
                          電子筆記
                        </TabsTrigger>
                        <TabsTrigger
                          value="resources"
                          className="rounded-none border-b-2 border-transparent text-slate-600 data-[state=active]:border-orange-500 data-[state=active]:bg-transparent data-[state=active]:text-orange-600"
                        >
                          搭配教材與課程說明
                        </TabsTrigger>
                        <TabsTrigger
                          value="subtitles"
                          className="rounded-none border-b-2 border-transparent text-slate-600 data-[state=active]:border-orange-500 data-[state=active]:bg-transparent data-[state=active]:text-orange-600"
                        >
                          字幕小幫手
                        </TabsTrigger>
                      </TabsList>

<TabsContent value="outline">
                        <div className="p-6 text-slate-700 leading-relaxed text-sm">本課詳述院際權力制衡，包含行政院的覆議程序與時限、立委的言論免責與不逮捕特權，並結合最新的憲法判決解析國會職權</div>
                      </TabsContent>

<TabsContent value="quiz" className="p-6">
                        <div className="space-y-6">
                          {/* Generate New Quiz Button */}
                          <div className="flex items-center justify-between">
                            <h3 className="text-lg font-semibold text-slate-900">課程測驗</h3>
                            <Button
                              onClick={handleGenerateNewQuiz}
                              className="bg-orange-500 text-white hover:bg-orange-600"
                            >
                              <Sparkles className="mr-2 h-4 w-4" />
                              利用 AI 生成新測驗
                            </Button>
                          </div>

{/* Quiz Results (shown after submission) */}
                          {quizSubmitted && (
                            <div className="rounded-lg border-2 border-green-500 bg-green-50 p-6">
                              <div className="mb-4 flex items-center justify-between">
                                <h4 className="text-xl font-bold text-slate-900">測驗結果</h4>
                                <div className="text-right">
                                  <div className="text-3xl font-bold text-green-600">{quizScore}/100</div>
                                  <div className="text-sm text-slate-600">分數</div>
                                </div>
                              </div>
                              <div className="mb-4 rounded-lg bg-white p-4">
                                <div className="text-sm text-slate-600">
                                  <div className="flex items-center gap-2">
                                    <span className="font-semibold">測驗紀錄:</span>
                                    <span>
                                      {new Date().toLocaleDateString("zh-TW")}{" "}
                                      {new Date().toLocaleTimeString("zh-TW", { hour: "2-digit", minute: "2-digit" })}
                                    </span>
                                  </div>
                                  <div className="mt-1">
                                    正確答案: {sampleQuiz.filter((q) => quizAnswers[q.id] === q.correctAnswer).length} /{" "}
                                    {sampleQuiz.length}
                                  </div>
                                </div>
                              </div>
                            </div>
                          )}

{/* Quiz Questions */}
                          <div className="space-y-6">
                            {sampleQuiz.map((question, index) => {
                              const isCorrect = quizSubmitted && quizAnswers[question.id] === question.correctAnswer
                              const isIncorrect = quizSubmitted && quizAnswers[question.id] !== question.correctAnswer

return (
                                <div
                                  key={question.id}
                                  className={`rounded-lg border-2 p-5 ${
                                    quizSubmitted
                                      ? isCorrect
                                        ? "border-green-500 bg-green-50"
                                        : "border-red-400 bg-red-50"
                                      : "border-gray-200 bg-white"
                                  }`}
                                >
                                  <div className="mb-4 flex items-start gap-3">
                                    <div
                                      className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full ${
                                        question.completed ? "bg-green-500" : "border-2 border-gray-300"
                                      }`}
                                    >
                                      {question.completed && <Check className="h-3 w-3 text-white" />}
                                    </div>

{/* Middle: Title and Duration */}
                                    <div className="flex-1">
                                      <p className="text-sm font-medium text-slate-900">{question.question}</p>
                                      {quizSubmitted && (
                                        <div className="mt-2 flex items-center gap-2">
                                          {isCorrect ? (
                                            <>
                                              <CheckCircle2 className="h-5 w-5 text-green-600" />
                                              <span className="text-sm font-medium text-green-600">正確</span>
                                            </>
                                          ) : (
                                            <>
                                              <XCircle className="h-5 w-5 text-red-600" />
                                              <span className="text-sm font-medium text-red-600">錯誤</span>
                                            </>
                                          )}
                                        </div>
                                      )}
                                    </div>
                                  </div>

<RadioGroup
                                    value={quizAnswers[question.id]?.toString()}
                                    onValueChange={(value) => handleAnswerChange(question.id, Number.parseInt(value))}
                                    disabled={quizSubmitted}
                                    className="space-y-3"
                                  >
                                    {question.options.map((option, optionIndex) => {
                                      const isSelectedAnswer = quizAnswers[question.id] === optionIndex
                                      const isCorrectOption = optionIndex === question.correctAnswer
                                      const showAsCorrect = quizSubmitted && isCorrectOption
                                      const showAsIncorrect = quizSubmitted && isSelectedAnswer && !isCorrectOption

return (
                                        <div
                                          key={optionIndex}
                                          className={`flex items-center space-x-3 rounded-lg border-2 p-3 ${
                                            showAsCorrect
                                              ? "border-green-500 bg-green-100"
                                              : showAsIncorrect
                                                ? "border-red-400 bg-red-100"
                                                : isSelectedAnswer
                                                  ? "border-orange-500 bg-orange-50"
                                                  : "border-gray-200 bg-white"
                                          }`}
                                        >
                                          <RadioGroupItem
                                            value={optionIndex.toString()}
                                            id={`q${question.id}-${optionIndex}`}
                                          />
                                          <Label
                                            htmlFor={`q${question.id}-${optionIndex}`}
                                            className="flex-1 cursor-pointer text-sm text-slate-900"
                                          >
                                            {option}
                                          </Label>
                                          {quizSubmitted && isCorrectOption && (
                                            <CheckCircle2 className="h-5 w-5 text-green-600" />
                                          )}
                                          {quizSubmitted && showAsIncorrect && (
                                            <XCircle className="h-5 w-5 text-red-600" />
                                          )}
                                        </div>
                                      )
                                    })}
                                  </RadioGroup>
                                </div>
                              )
                            })}
                          </div>

{/* Submit Button */}
                          {!quizSubmitted && (
                            <Button
                              onClick={handleSubmitQuiz}
                              disabled={Object.keys(quizAnswers).length !== sampleQuiz.length}
                              className="w-full bg-orange-500 py-6 text-base font-semibold text-white hover:bg-orange-600 disabled:bg-gray-300"
                            >
                              提交測驗
                            </Button>
                          )}
                        </div>
                      </TabsContent>

<TabsContent value="notes" className="p-6">
                        <div className="space-y-6">
                          {/* New Note Input Area */}
                          <div>
                            <h3 className="mb-3 text-lg font-semibold text-slate-900">即時線上標寫</h3>
                            <div className="space-y-3">
                              <Textarea
                                placeholder="在此輸入您的筆記內容..."
                                value={currentNote}
                                onChange={(e) => setCurrentNote(e.target.value)}
                                className="min-h-[120px] resize-none border-2 border-gray-200 bg-white text-slate-900 placeholder:text-gray-400 focus:border-orange-500 focus:ring-orange-500"
                              />
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2 text-sm text-slate-600">
                                  <Clock className="h-4 w-4 text-orange-500" />
                                  {/* Use formatTime for current time display */}
                                  <span>
                                    當前時間點:{" "}
                                    <span className="font-semibold text-orange-600">{formatTime(currentTime)}</span>
                                  </span>
                                </div>
                                <Button
                                  onClick={handleAddTimeStampedNote}
                                  disabled={!currentNote.trim()}
                                  className="bg-orange-500 text-white hover:bg-orange-600 disabled:bg-gray-300"
                                >
                                  <Plus className="mr-2 h-4 w-4" />
                                  新增筆記並標記時間點
                                </Button>
                              </div>
                            </div>
                          </div>

{/* Main Content Area */}
          <div className="flex-1 overflow-auto bg-gray-50 p-8">{renderStudentAreaContent()}</div>
        </div>
      )}
    </div>
  )
}4a:["$","$L91",null,{"params":{"chatId":"jLDLx7zMVz5"},"promises":{"attributes":"$@9b","externalMeta":"$@9c","latest":"$@9d","messagesRange":"$@9e","messages":"$@9f","template":"$@a0","gitStatus":"$@a1"},"children":["$","$La2",null,{"chatId":"jLDLx7zMVz5","children":["$","$La3",null,{"seedOnlyKeys":["@\"chat:state\",\"jLDLx7zMVz5\","],"data":{"block:output:initial":{"id":"b_nYJC0JLfm4U","result":"$@a4"},"/chat/api/snapshots/proxy?chatId=jLDLx7zMVz5&messageId=9OmRsVb6ZVGHY09elCY4Tl9FGRZ2ZXMv&v=v2":"$a5","@\"block:mappings\",\"jLDLx7zMVz5\",":{"sqlBlockExecutionStates":"$Qa6","blocksForkedFrom":"$Qa7","blocksTemplateIds":"$Qa8","blocksCreatedAt":"$Qa9","blocksShared":"$Qaa","blocksDeployed":"$Qab","blocksSubdomains":"$Qac","brandedBlocks":"$Qad","unlistedBlocks":"$Qae","blockOutputs":"$Qaf"},"@\"chat:state\",\"jLDLx7zMVz5\",":{"messages":[{"content":{"type":"parts","parts":[{"type":"mdx","content":"Please duplicate this block."}],"version":1},"role":"user","id":"U1AZQ0a7MhfBAlgeboLAynEDITZmy58A","type":"forked-block","authorId":"f3QfJXe9PN7DUw9pZwDQVAZ5","createdAt":"$D2026-08-06T05:09:54.501Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["strong",{},["text",{},"機上盒-在家補課-視訊版 (2)"]],["text",{}," was duplicated from "],["a",{"href":"https://v0.app/chat/COu4E1kcBe7"},["text",{},"機上盒-在家補課-視訊版"]]],["p",{},["text",{},"Continue chatting to ask questions about or make changes to it."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-Wtvy5KnqkXq","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[],"source":"[V0_FILE]tsx:file=\"empty.tsx\"\n...","sourceVersionKey":"v_1_vexj5_s3","needsBlockSource":true,"isAllImages":false,"blockId":"Wtvy5KnqkXq","meta":{"type":"code-project","taskNameActive":"Initializing project","taskNameComplete":"Initialized project","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Initializing project","taskNameComplete":"Initialized project"},"id":"block-Wtvy5KnqkXq"}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"HwA0u4LlBgZSCywPgOIjOpiWotEtsHxG","gitRevision":null,"streaming":false,"finishReason":"forked-block","parentId":"U1AZQ0a7MhfBAlgeboLAynEDITZmy58A","type":"forked-block","workMetrics":{"diffMap":{"app/globals.css":{"addedLines":43,"removedLines":1},"components/course-player.tsx":{"addedLines":0,"removedLines":28},"components/ai-assistant-modal.tsx":{"addedLines":75,"removedLines":14}}},"createdAt":"$D2026-08-06T05:09:55.501Z","updatedAt":"$D2026-08-06T05:09:54.491Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"**Title:** Update Bottom Tabs: Add \"Course Outline\" and Rename \"Quiz\"\n**Prompt:**\nPlease update the Tabs component located directly below the video player according to the following requirements:\n**1. Rename Existing Tab:**\n* Locate the tab trigger currently named \"測驗\" (Quiz).\n* Rename it to \"隨堂測驗\" (In-Class Quiz).\n**2. Insert New Tab (Far Left):**\n* Create a new tab trigger named \"課程大綱\" (Course Outline).\n* Insert this new tab at the very beginning of the tab list (the far-left position).\n* Ensure the new tab order from left to right is strictly:\n  1. 課程大綱\n  2. 隨堂測驗\n  3. 電子筆記\n  4. 搭配教材與課程說明\n  5. 字幕小幫手 (and any other tabs that might exist)\n**3. Tab Content Placeholder:**\n* Create a corresponding `TabsContent` area for the new \"課程大綱\" tab.\n* For now, just insert a simple placeholder inside it, such as: \n  `<div className=\"p-6 text-slate-500\">此處顯示課程大綱內容...</div>`\n* Ensure the content of all other existing tabs remains completely unchanged and correctly linked to their respective triggers."}],"version":1},"role":"user","id":"tiPlpjcfsEfGStd82MwL8GMoxr4lwQX3","attachments":[],"parentId":"HwA0u4LlBgZSCywPgOIjOpiWotEtsHxG","type":"message","authorId":"f3QfJXe9PN7DUw9pZwDQVAZ5","createdAt":"$D2026-08-06T05:10:48.201Z"},{"v0ModelId":"v0-pro","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1785993052485,"finishedAt":1785993053314,"lastPartSentAt":1785993053314,"taskNameActive":null,"id":"7lrQYIQJqkXL9g1p","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":1,"thought":"Let me read the current course-player.tsx file to understand the current tab structure before making changes."}]}}],["AssistantMessageContentPart",{"part":{"createdAt":1785993053877,"finishedAt":1785993056239,"lastPartSentAt":null,"taskNameActive":"Reading course-player.tsx","taskNameComplete":"Read course-player.tsx","toolCallId":"toolu_01QBuqXKEMcQLbgfP67NNUvT","agentTurnId":"turn_L1MLxnwXdZ5XOeyG","filePath":null,"id":"iEeC7hAIqTpY1brL","type":"task-read-file-v1","parts":[]}}],["p",{},["text",{},"Let me find the Tabs section in the file to see the current tab triggers and content:"]],["AssistantMessageContentPart",{"part":{"createdAt":1785993060660,"finishedAt":1785993061046,"lastPartSentAt":1785993061022,"taskNameActive":"Finding tab triggers","taskNameComplete":"Found tab triggers","toolCallId":"toolu_01LNfQBWKsA1jxSkzoYtR2qj","agentTurnId":"turn_a05cb9kDOQ06wG9a","filePath":null,"id":"Vhc3Z8h7ArIceQUD","type":"task-grep-repo-v1","parts":[{"type":"grepping-repo","pattern":"TabsTrigger|TabsContent|TabsList|activeTab"},{"type":"grep-file-results","numFileMatches":2}]}}],["AssistantMessageContentPart",{"part":{"createdAt":1785993073227,"finishedAt":1785993073583,"lastPartSentAt":1785993073563,"taskNameActive":"Reading tab section","taskNameComplete":"Read tab section","toolCallId":"toolu_01EbSpce2dtTqyv5JJkUmwab","agentTurnId":"turn_mEStND0z3HiYNAjk","filePath":null,"id":"ouzBlthWGDZIWruw","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"/vercel/share/v0-project/components/course-player.tsx"},{"type":"reading-file","filePath":"/vercel/share/v0-project/components/course-player.tsx","offset":1741,"limit":35}]}}],["p",{},["text",{},"Now I have a clear picture of the current tabs. I'll make the two changes: add the \"課程大綱\" tab at the far left, rename \"測驗\" to \"隨堂測驗\", and add the corresponding "],["code",{},"TabsContent"],["text",{},"."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_Cydqi3ZezOH","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/course-player.tsx\" \nGENERATING","latestDeploymentInfo":"$ab:1:1","lastDeployedAt":"2026-08-06T05:11:39.627Z","sourceVersionKey":"v_1_6ssuv_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_Cydqi3ZezOH","meta":{"taskNameActive":"Updating tabs","taskNameComplete":"Updated tabs","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating tabs","taskNameComplete":"Updated tabs"},"id":"block-b_Cydqi3ZezOH"}],["p",{},["text",{},"Now add the "],["code",{},"TabsContent"],["text",{}," for the new \"課程大綱\" tab, inserting it just before the existing "],["code",{},"quiz"],["text",{}," TabsContent:"]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_DMe5M0yNJ8T","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/course-player.tsx\" \nGENERATING","latestDeploymentInfo":"$ab:2:1","lastDeployedAt":"2026-08-06T05:11:39.627Z","sourceVersionKey":"v_1_ofuha_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_DMe5M0yNJ8T","meta":{"taskNameActive":"Adding course outline tab content","taskNameComplete":"Added course outline tab content","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Adding course outline tab content","taskNameComplete":"Added course outline tab content"},"id":"block-b_DMe5M0yNJ8T"}],["p",{},["text",{},"The tabs have been updated with three changes: a new \"課程大綱\" tab inserted at the far-left position with its placeholder "],["code",{},"TabsContent"],["text",{},", the \"測驗\" tab renamed to \"隨堂測驗\", and all other tabs (電子筆記, 搭配教材與課程說明, 字幕小幫手) remain in their original order with their content completely unchanged. The new tab uses the value "],["code",{},"\"outline\""],["text",{}," to keep it distinct from the existing tab values."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"R9DjU7Q2wNEEU7Da6dy22fvsE8oZYeHY","gitRevision":{"baseSha":"c13339366096a8b4d8a8ccf46533724e73f409d6","headSha":"77525ffa56ccdc2027f4ee35a75d4b052bd28ed2","readyAt":"2026-08-06T05:11:39.611Z","version":1},"streaming":false,"finishReason":"stop","parentId":"tiPlpjcfsEfGStd82MwL8GMoxr4lwQX3","type":"message","creditCost":0.1065062,"workMetrics":{"diffMap":{},"linesRead":35,"agentActions":5},"createdAt":"$D2026-08-06T05:10:48.202Z","updatedAt":"$D2026-08-06T05:11:39.621Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"$b0"}],"version":1},"role":"user","id":"iyd1ovENLcKeoKQEdbA6RFY4RpsiwVFq","attachments":[],"parentId":"R9DjU7Q2wNEEU7Da6dy22fvsE8oZYeHY","type":"message","authorId":"f3QfJXe9PN7DUw9pZwDQVAZ5","createdAt":"$D2026-08-06T05:18:16.578Z"},{"v0ModelId":"v0-pro","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1785993499309,"finishedAt":1785993499988,"lastPartSentAt":1785993499988,"taskNameActive":null,"id":"b0p73HwKPg4k2jbZ","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":1,"thought":"Let me read the relevant files to find the exact text I need to change."}]}}],["AssistantMessageContentPart",{"part":{"createdAt":1785993501554,"finishedAt":1785993502979,"lastPartSentAt":1785993502431,"taskNameActive":"Finding target text","taskNameComplete":"Found target text","toolCallId":"toolu_01KoUfG239w9ydqjBTFHcZ4F","agentTurnId":"turn_1JyYAFMrB7Hg4wIB","filePath":null,"id":"afxxSGoBN7DWaMyB","type":"task-grep-repo-v1","parts":[{"type":"grepping-repo","pattern":"LearnHub|學員中心|課程堂數|此處顯示課程大綱","path":"/vercel/share/v0-project"},{"type":"grep-file-results","numFileMatches":1}]}}],["p",{},["text",{},"All four targets are in "],["code",{},"course-player.tsx"],["text",{},". Let me read the context around line 2214 to understand the surrounding structure before deleting it:"]],["AssistantMessageContentPart",{"part":{"createdAt":1785993506661,"finishedAt":1785993507249,"lastPartSentAt":1785993507228,"taskNameActive":"Reading surrounding lines","taskNameComplete":"Read surrounding lines","toolCallId":"toolu_01XaFVsSmGvKi6QFFeCAMF5D","agentTurnId":"turn_Og1yow01fOdTCvRv","filePath":null,"id":"p7YyDRwKl5D5exXd","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"/vercel/share/v0-project/components/course-player.tsx"},{"type":"reading-file","filePath":"/vercel/share/v0-project/components/course-player.tsx","offset":2207,"limit":14}]}}],["p",{},["text",{},"Now I have all the context I need. I'll apply all four changes:"]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_FpuvdRaNqVv","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/course-player.tsx\" \nGENERATING","latestDeploymentInfo":"$ab:3:1","lastDeployedAt":"2026-08-06T05:18:56.339Z","sourceVersionKey":"v_1_xg2jf_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_FpuvdRaNqVv","meta":{"taskNameActive":"Updating brand name","taskNameComplete":"Updated brand name","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating brand name","taskNameComplete":"Updated brand name"},"id":"block-b_FpuvdRaNqVv"}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_wblqeJD5p4q","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/course-player.tsx\" \nGENERATING","latestDeploymentInfo":"$ab:4:1","lastDeployedAt":"2026-08-06T05:18:56.339Z","sourceVersionKey":"v_1_0ylxw_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_wblqeJD5p4q","meta":{"taskNameActive":"Updating menu text","taskNameComplete":"Updated menu text","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating menu text","taskNameComplete":"Updated menu text"},"id":"block-b_wblqeJD5p4q"}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_5mmWgD1HSR4","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/course-player.tsx\" \nGENERATING","latestDeploymentInfo":"$ab:5:1","lastDeployedAt":"2026-08-06T05:18:56.339Z","sourceVersionKey":"v_1_6bmi7_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_5mmWgD1HSR4","meta":{"taskNameActive":"Removing course count line","taskNameComplete":"Removed course count line","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Removing course count line","taskNameComplete":"Removed course count line"},"id":"block-b_5mmWgD1HSR4"}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_nYJC0JLfm4U","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/components/course-player.tsx","baseName":"course-player.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$b1","latestDeploymentInfo":"$ab:6:1","lastDeployedAt":"2026-08-06T05:21:54.847Z","sourceVersionKey":"v_1_7sot6_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_nYJC0JLfm4U","meta":{"taskNameActive":"Updating course outline tab content","taskNameComplete":"Updated course outline tab content","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating course outline tab content","taskNameComplete":"Updated course outline tab content"},"id":"block-b_nYJC0JLfm4U"}],["p",{},["text",{},"All four changes have been applied to "],["code",{},"course-player.tsx"],["text",{},":"]],["ol",{"start":1},["li",{"index":1},["strong",{},["text",{},"Brand name"]],["text",{}," — \"LearnHub\" → \"超級函授\" (same styling preserved)."]],["li",{"index":2},["strong",{},["text",{},"Menu trigger"]],["text",{}," — \"學員中心\" → \"學員專區\"."]],["li",{"index":3},["strong",{},["text",{},"Course count/duration line"]],["text",{}," — the entire "],["code",{},"<p>"],["text",{}," containing 課程堂數 and 總時長 has been removed; the teacher name and progress bar remain untouched."]],["li",{"index":4},["strong",{},["text",{},"Course outline tab"]],["text",{}," — placeholder swapped for the specified descriptive text with "],["code",{},"text-slate-700 leading-relaxed text-sm"],["text",{}," styling."]]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"9OmRsVb6ZVGHY09elCY4Tl9FGRZ2ZXMv","gitRevision":{"baseSha":"77525ffa56ccdc2027f4ee35a75d4b052bd28ed2","headSha":"21c55e177f424148f84f997ac006851fd77f51a0","readyAt":"2026-08-06T05:18:56.323Z","version":1},"streaming":false,"finishReason":"stop","parentId":"iyd1ovENLcKeoKQEdbA6RFY4RpsiwVFq","type":"message","creditCost":0.0880898,"workMetrics":{"diffMap":{},"linesRead":14,"agentActions":6},"createdAt":"$D2026-08-06T05:18:16.579Z","updatedAt":"$D2026-08-06T05:18:56.337Z"}],"lastSyncedAt":1787635187498,"undo":null,"activeForkKey":["U1AZQ0a7MhfBAlgeboLAynEDITZmy58A","HwA0u4LlBgZSCywPgOIjOpiWotEtsHxG","tiPlpjcfsEfGStd82MwL8GMoxr4lwQX3","R9DjU7Q2wNEEU7Da6dy22fvsE8oZYeHY","iyd1ovENLcKeoKQEdbA6RFY4RpsiwVFq","9OmRsVb6ZVGHY09elCY4Tl9FGRZ2ZXMv"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"jLDLx7zMVz5\",":{"id":"b_nYJC0JLfm4U","meta":{"taskNameActive":"Updating course outline tab content","taskNameComplete":"Updated course outline tab content","type":"code-project","id":"Code"},"initial":true,"type":"code-project","messageId":"9OmRsVb6ZVGHY09elCY4Tl9FGRZ2ZXMv","language":"typescriptreact","source":"$b2","closed":true,"hasSourceBeenEdited":false,"lastDeployedAt":"2026-08-06T05:21:54.847Z","latestDeploymentInfo":"$ab:6:1","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"jLDLx7zMVz5\",":{"title":"機上盒-在家補課-視訊版 (2)","authorId":"f3QfJXe9PN7DUw9pZwDQVAZ5","ownerId":"f3QfJXe9PN7DUw9pZwDQVAZ5","storageEntityType":"v0-git-s3-storage","storageEntityId":"v0-1-f3QfJXe9PN7DUw9pZwDQVAZ5-jLDLx7zMVz5","tailwindV4Default":true,"vercelProjectId":"prj_Hm67AvU0GPyjlnsdhc9CJ22nGQzC","canWriteToChat":false},"@\"chat:privacy\",\"jLDLx7zMVz5\",":"public","@\"chat:vm-mode\",\"jLDLx7zMVz5\",":true,"@\"chat:vercel-project\",\"jLDLx7zMVz5\",":"$@b3","@\"team:sensitive-environment-variable-policy\",\"jLDLx7zMVz5\",":"$@b4","@\"block-view\",\"jLDLx7zMVz5\",":true,"integrations:figma":"$@b5"},"children":["$Lb6","$Lb7","$Lb8","$Lb9"]}]}]}]
</article></body></html>

法學緒論 韋伯老師

法學緒論1

法學緒論2

法學緒論3

法學緒論4

法學緒論5

法學緒論6

法學緒論7

法學緒論8

法學緒論9

法學緒論10

學習儀表板

個人學習戰力分析

學習洞察

同儕競爭力分析

同儕競爭位置圖

12

5

7

近期活動

觀看紀錄

{item.title}

收藏課程

{course.title}

AI問答紀錄

課程測驗紀錄

課程測驗

測驗結果

即時線上標寫

法學緒論韋伯老師