import React, { useState, useEffect } from 'react';
import { 
  BookOpen, Code, Cpu, Database, Layout, Menu, X, ChevronRight, 
  PlayCircle, FileText, CheckCircle, Shield, Globe, Smartphone, 
  Terminal, Award, Layers, Search, ArrowRight, User, Home, Lock,
  Users, UploadCloud, BarChart2, Calendar, Mail, FileCheck, AlertCircle,
  HelpCircle, RefreshCw
} from 'lucide-react';

// --- STYLE & CONFIG ---
const fontStyle = `
  @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
  body { font-family: 'Prompt', sans-serif; }
`;

// --- DATA: Curriculum Content (M.1 - M.3) ---
const courseData = {
  m1: {
    id: 'm1',
    title: "วิทยาการคำนวณ ม.1",
    subtitle: "รากฐานแห่งการคิดและแก้ปัญหา",
    description: "เรียนรู้แนวคิดเชิงนามธรรม การแก้ปัญหาอย่างเป็นขั้นตอน และพื้นฐานการเขียนโปรแกรม Python/Scratch",
    color: "blue",
    icon: <Layout className="w-12 h-12 text-blue-500" />,
    progress: 30,
    units: [
      {
        id: 'u1',
        title: "หน่วยที่ 1: แนวคิดเชิงนามธรรม",
        description: "Abstraction และการถ่ายทอดรายละเอียดของปัญหา",
        lessons: [
          { 
            id: 'l1-1', title: "แนวคิดเชิงนามธรรมคืออะไร?", type: "video", duration: "10 นาที",
            content: "แนวคิดเชิงนามธรรม (Abstraction) คือการคัดเลือกคุณลักษณะที่จำเป็นออกจากรายละเอียดที่ไม่จำเป็น เพื่อให้การแก้ปัญหามีความกระชับและตรงจุด",
            videoUrl: "https://www.youtube.com/embed/dummy-video-id"
          },
          { 
            id: 'l1-quiz', title: "แบบทดสอบท้ายบทที่ 1", type: "quiz", duration: "15 นาที",
            questions: [
              { q: "ข้อใดคือความหมายของ 'แนวคิดเชิงนามธรรม'?", options: ["การวาดภาพให้สวยงาม", "การคัดเลือกเฉพาะข้อมูลที่จำเป็น", "การเขียนโปรแกรมคอมพิวเตอร์", "การรวบรวมข้อมูลให้มากที่สุด"], correct: 1 },
              { q: "แผนที่รถไฟฟ้า เป็นตัวอย่างของแนวคิดใด?", options: ["Decomposition", "Pattern Recognition", "Abstraction", "Algorithm"], correct: 2 }
            ]
          }
        ]
      },
      {
        id: 'u2',
        title: "หน่วยที่ 2: การออกแบบและการเขียนโปรแกรม",
        description: "อัลกอริทึม, Flowchart และ Python เบื้องต้น",
        lessons: [
          { id: 'l2-1', title: "การเขียนรหัสลำลองและผังงาน", type: "article", duration: "20 นาที", content: "รหัสลำลอง (Pseudo Code) และผังงาน (Flowchart) เป็นเครื่องมือในการออกแบบอัลกอริทึมก่อนเริ่มเขียนโปรแกรมจริง" },
          { id: 'l2-2', title: "ตัวแปร (Variable) ใน Python", type: "code", duration: "25 นาที", content: "ตัวแปรเปรียบเสมือนกล่องเก็บข้อมูล โดยใน Python เราสามารถกำหนดค่าได้เลย เช่น score = 10" },
          { 
            id: 'l2-quiz', title: "แบบทดสอบท้ายบทที่ 2", type: "quiz", duration: "10 นาที",
            questions: [
               { q: "สัญลักษณ์สี่เหลี่ยมข้าวหลามตัดใน Flowchart หมายถึงอะไร?", options: ["เริ่มต้น/สิ้นสุด", "การประมวลผล", "การตัดสินใจ (เงื่อนไข)", "การรับค่าข้อมูล"], correct: 2 },
               { q: "คำสั่งใดใช้แสดงผลข้อมูลใน Python?", options: ["input()", "print()", "show()", "display()"], correct: 1 }
            ]
          }
        ]
      },
      {
        id: 'u3',
        title: "หน่วยที่ 3: การจัดการข้อมูลสารสนเทศ",
        description: "ข้อมูล, สารสนเทศ และการรวบรวมข้อมูล",
        lessons: [
          { id: 'l3-1', title: "ข้อมูล vs สารสนเทศ", type: "video", duration: "15 นาที" }
        ]
      }
    ]
  },
  m2: {
    id: 'm2',
    title: "วิทยาการคำนวณ ม.2",
    subtitle: "ตรรกะและเทคโนโลยีล้ำสมัย",
    description: "เจาะลึกการออกแบบอัลกอริทึม ตรรกะบูลีน Python ระดับกลาง และองค์ประกอบระบบคอมพิวเตอร์",
    color: "indigo",
    icon: <Cpu className="w-12 h-12 text-indigo-500" />,
    progress: 10,
    units: [
      {
        id: 'u2-1', title: "หน่วยที่ 1: แนวคิดเชิงคำนวณ", description: "Decomposition, Pattern Recognition",
        lessons: [{ id: 'm2-l1', title: "การแตกปัญหาใหญ่เป็นปัญหาย่อย", type: "video", duration: "15 นาที" }]
      },
      {
        id: 'u2-2', title: "หน่วยที่ 2: Python และตรรกะบูลีน", description: "Operators, Logic Gates, Functions",
        lessons: [
          { id: 'm2-l2', title: "ตัวดำเนินการทางตรรกะ (AND, OR, NOT)", type: "code", duration: "20 นาที" },
          { id: 'm2-quiz', title: "แบบทดสอบตรรกะ", type: "quiz", duration: "10 นาที", 
            questions: [{ q: "True AND False มีค่าเท่ากับเท่าไหร่?", options: ["True", "False", "Error", "Null"], correct: 1 }] 
          }
        ]
      },
      {
        id: 'u2-3', title: "หน่วยที่ 3: ระบบคอมพิวเตอร์", description: "Hardware, Software, CPU, Memory",
        lessons: [{ id: 'm2-l3', title: "หลักการทำงานของ CPU", type: "article", duration: "15 นาที" }]
      }
    ]
  },
  m3: {
    id: 'm3',
    title: "วิทยาการคำนวณ ม.3",
    subtitle: "นักพัฒนานวัตกรรมแห่งอนาคต",
    description: "สร้างสรรค์แอปพลิเคชัน IoT (Internet of Things) และการรู้เท่าทันสื่อดิจิทัล",
    color: "purple",
    icon: <Database className="w-12 h-12 text-purple-500" />,
    progress: 0,
    units: [
      {
        id: 'u3-1', title: "หน่วยที่ 1: การพัฒนาแอปพลิเคชัน", description: "วงจรพัฒนาระบบ (SDLC), การใช้ Trello",
        lessons: [{ id: 'm3-l1', title: "Software Development Life Cycle", type: "video", duration: "20 นาที" }]
      },
      {
        id: 'u3-2', title: "หน่วยที่ 2: Internet of Things (IoT)", description: "Microcontroller, Sensors, KidBright",
        lessons: [
            { id: 'm3-l2', title: "IoT และ Smart Home", type: "video", duration: "15 นาที" },
            { id: 'm3-quiz', title: "Quiz: ความรู้เบื้องต้น IoT", type: "quiz", duration: "10 นาที",
              questions: [{ q: "อุปกรณ์ใดทำหน้าที่เปรียบเสมือนสมองของระบบ IoT?", options: ["Sensor", "Actuator", "Microcontroller", "Wi-Fi Module"], correct: 2 }]
            }
        ]
      },
      {
        id: 'u3-3', title: "หน่วยที่ 3: การรู้เท่าทันสื่อ", description: "Fake News, Cyberbullying, กฎหมายคอมฯ",
        lessons: [{ id: 'm3-l3', title: "พ.ร.บ. คอมพิวเตอร์ฯ ที่ควรรู้", type: "article", duration: "20 นาที" }]
      }
    ]
  }
};

// --- DATA: Mock Data for Teachers, Assignments, Grades ---
const teachersData = [
  { id: 1, name: "ครูสมชาย ใจดี", role: "หัวหน้ากลุ่มสาระฯ", subject: "วิทยาการคำนวณ ม.3", email: "somchai@school.ac.th", color: "blue", img: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" },
  { id: 2, name: "ครูวิภาดา รักสอน", role: "ครูผู้สอน", subject: "วิทยาการคำนวณ ม.1", email: "wipada@school.ac.th", color: "pink", img: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka" },
  { id: 3, name: "ครูเอกพล คนเก่ง", role: "ครูผู้สอน/IT Support", subject: "วิทยาการคำนวณ ม.2", email: "ekapol@school.ac.th", color: "indigo", img: "https://api.dicebear.com/7.x/avataaars/svg?seed=Jack" }
];

const assignmentsData = [
  { id: 1, title: "ใบงานที่ 1.1: ออกแบบ Flowchart กิจวัตรประจำวัน", course: "วิทยาการคำนวณ ม.1", dueDate: "15 ก.พ. 67", status: "pending", score: null, max: 10 },
  { id: 2, title: "โครงงาน: สิ่งประดิษฐ์สมองกล (IoT)", course: "วิทยาการคำนวณ ม.3", dueDate: "20 ก.พ. 67", status: "submitted", score: null, max: 20 },
  { id: 3, title: "แบบฝึกหัด: เขียน Python คำนวณเกรด", course: "วิทยาการคำนวณ ม.2", dueDate: "10 ม.ค. 67", status: "graded", score: 18, max: 20 },
];

const gradesData = {
  student: "ด.ช. รักเรียน เขียนโค้ด",
  id: "67010555",
  gpa: "3.85",
  terms: [
    { name: "เทอม 1/2566", subject: "วิทยาการคำนวณ 1 (ว21103)", grade: 4.0, score: 85 },
    { name: "เทอม 1/2566", subject: "การออกแบบเทคโนโลยี 1 (ว21104)", grade: 3.5, score: 79 },
  ],
  current: [
    { item: "เข้าเรียน/จิตพิสัย", score: 10, max: 10 },
    { item: "งานมอบหมาย", score: 25, max: 30 },
    { item: "สอบกลางภาค", score: 18, max: 20 },
    { item: "สอบปลายภาค", score: null, max: 40, note: "รอสอบ" }
  ]
};

// --- MAIN APPLICATION COMPONENT ---
const App = () => {
  const [view, setView] = useState('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  
  // LMS State
  const [selectedGrade, setSelectedGrade] = useState(null);
  const [selectedLesson, setSelectedLesson] = useState(null);
  const [activeUnitId, setActiveUnitId] = useState(null);
  
  // Interactive Quiz State
  const [quizState, setQuizState] = useState({ answers: {}, submitted: false, score: 0 });

  // Assignment Upload State
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [uploading, setUploading] = useState(false);

  // --- ACTIONS ---
  const handleEnterCourse = (gradeKey) => {
    setSelectedGrade(courseData[gradeKey]);
    setView('course_overview');
    window.scrollTo(0,0);
  };

  const handleStartLesson = (unit, lesson) => {
    setActiveUnitId(unit.id);
    setSelectedLesson(lesson);
    setQuizState({ answers: {}, submitted: false, score: 0 }); // Reset quiz
    setView('lesson_player');
    window.scrollTo(0,0);
  };

  const handleQuizSelect = (qIdx, optIdx) => {
    setQuizState(prev => ({
      ...prev,
      answers: { ...prev.answers, [qIdx]: optIdx }
    }));
  };

  const handleSubmitQuiz = (questions) => {
    let score = 0;
    questions.forEach((q, idx) => {
      if (quizState.answers[idx] === q.correct) score++;
    });
    setQuizState(prev => ({ ...prev, submitted: true, score }));
  };

  const handleUploadAssignment = (e) => {
    e.preventDefault();
    setUploading(true);
    setTimeout(() => {
      setUploading(false);
      setShowUploadModal(false);
      alert("ส่งงานเรียบร้อยแล้ว! (จำลอง)");
    }, 1500);
  };

  // --- SUB-COMPONENTS ---

  const Navbar = () => (
    <nav className="bg-white/95 backdrop-blur-sm sticky top-0 z-50 border-b border-gray-200 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => setView('home')}>
            <div className="bg-gradient-to-br from-blue-600 to-indigo-600 p-2 rounded-xl shadow-lg shadow-blue-500/20">
              <Terminal className="h-6 w-6 text-white" />
            </div>
            <div>
              <span className="font-bold text-xl text-gray-900 tracking-tight block leading-none">EduTech<span className="text-blue-600">.AI</span></span>
              <span className="text-[10px] text-gray-500 font-medium">ห้องเรียนวิทยาการคำนวณออนไลน์</span>
            </div>
          </div>
          
          <div className="hidden lg:flex items-center bg-gray-50 rounded-full p-1 border border-gray-100">
             {[
               { id: 'home', icon: Home, label: "หน้าแรก" },
               { id: 'teachers', icon: Users, label: "ครูผู้สอน" },
               { id: 'assignments', icon: UploadCloud, label: "ส่งงาน" },
               { id: 'grades', icon: BarChart2, label: "ผลการเรียน" },
             ].map(menu => (
               <button 
                 key={menu.id} 
                 onClick={() => setView(menu.id)}
                 className={`flex items-center gap-2 px-5 py-2 rounded-full text-sm font-medium transition-all ${view === menu.id ? 'bg-white text-blue-600 shadow-md ring-1 ring-black/5' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200/50'}`}
               >
                 <menu.icon size={16} /> {menu.label}
               </button>
             ))}
          </div>

          <div className="hidden md:flex items-center gap-3 pl-4 border-l border-gray-200">
             <div className="text-right hidden xl:block">
                <p className="text-sm font-bold text-gray-800">ด.ช. รักเรียน</p>
                <p className="text-xs text-green-600 font-medium flex items-center justify-end gap-1"><span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span> ออนไลน์</p>
             </div>
             <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center border-2 border-white shadow-md">
                <User className="text-blue-600" size={20} />
             </div>
          </div>

          <div className="lg:hidden">
             <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
               {mobileMenuOpen ? <X /> : <Menu />}
             </button>
          </div>
        </div>
      </div>
      
      {mobileMenuOpen && (
        <div className="lg:hidden bg-white border-t border-gray-100 p-4 space-y-2 animate-slideDown shadow-xl">
           {[
             { id: 'home', label: "หน้าแรก" }, { id: 'teachers', label: "ครูผู้สอน" },
             { id: 'assignments', label: "ส่งงาน" }, { id: 'grades', label: "ผลการเรียน" }
           ].map(item => (
             <button key={item.id} onClick={() => { setView(item.id); setMobileMenuOpen(false); }} className="block w-full text-left px-4 py-3 rounded-xl bg-gray-50 text-gray-700 font-medium hover:bg-blue-50 hover:text-blue-600">
               {item.label}
             </button>
           ))}
        </div>
      )}
    </nav>
  );

  const HomeView = () => (
    <div className="animate-fadeIn pb-20">
      <div className="bg-[#0f172a] text-white py-20 relative overflow-hidden">
         <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-600/20 to-transparent"></div>
         <div className="absolute -bottom-10 -left-10 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl"></div>
         <div className="max-w-7xl mx-auto px-4 relative z-10">
            <span className="inline-block py-1 px-3 rounded-full bg-blue-500/20 border border-blue-400/30 text-blue-300 text-xs font-semibold mb-6">
               🎓 หลักสูตรแกนกลางฯ ฉบับปรับปรุง 2560
            </span>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
              เรียนรู้วิทยาการคำนวณ <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-400">ก้าวทันโลกอนาคต</span>
            </h1>
            <p className="text-slate-300 text-lg max-w-2xl mb-8 font-light">
              แพลตฟอร์มการเรียนรู้อัจฉริยะ ครบครันด้วยเนื้อหา Coding, IoT, Data Science และ Digital Literacy 
              พร้อมระบบติดตามผลการเรียนแบบ Real-time
            </p>
            <div className="flex flex-wrap gap-4">
              <button onClick={() => handleEnterCourse('m1')} className="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold shadow-lg shadow-blue-600/30 transition flex items-center gap-2">
                เริ่มเรียนเลย <ArrowRight size={18} />
              </button>
              <button className="px-8 py-3 bg-white/10 hover:bg-white/20 text-white border border-white/10 rounded-xl font-semibold backdrop-blur-sm transition">
                ดูตัวอย่างบทเรียน
              </button>
            </div>
         </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 -mt-16 relative z-20">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {Object.keys(courseData).map(key => {
            const course = courseData[key];
            return (
              <div key={key} onClick={() => handleEnterCourse(key)} className="bg-white p-6 rounded-2xl shadow-xl border border-gray-100 hover:-translate-y-2 hover:shadow-2xl hover:border-blue-200 transition-all cursor-pointer group">
                <div className="flex justify-between items-start mb-6">
                  <div className={`p-4 rounded-2xl bg-${course.color}-50 text-${course.color}-600 group-hover:bg-${course.color}-600 group-hover:text-white transition-colors duration-300`}>
                    {course.icon}
                  </div>
                  {course.progress > 0 && (
                    <div className="text-right">
                       <span className="text-xs font-bold text-gray-400 uppercase">ความคืบหน้า</span>
                       <div className="text-lg font-bold text-gray-800">{course.progress}%</div>
                    </div>
                  )}
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">{course.title}</h3>
                <p className="text-gray-500 text-sm mb-4 line-clamp-2">{course.description}</p>
                <div className="w-full bg-gray-100 rounded-full h-1.5 mb-4">
                  <div className={`bg-${course.color}-500 h-1.5 rounded-full`} style={{width: `${course.progress}%`}}></div>
                </div>
                <div className="flex items-center text-sm font-semibold text-blue-600 group-hover:gap-2 transition-all">
                   เข้าสู่บทเรียน <ChevronRight size={16} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );

  const CourseOverview = () => (
    <div className="max-w-7xl mx-auto px-4 py-8 animate-fadeIn">
       <button onClick={() => setView('home')} className="flex items-center text-gray-500 hover:text-blue-600 mb-6 font-medium">
         <ChevronRight className="rotate-180 mr-1" size={18} /> กลับหน้าหลัก
       </button>
       
       <div className="flex flex-col md:flex-row gap-8 mb-12 items-center md:items-start bg-white p-8 rounded-3xl border border-gray-200 shadow-sm">
          <div className={`p-6 rounded-3xl bg-${selectedGrade.color}-50 shrink-0`}>
             {React.cloneElement(selectedGrade.icon, { size: 64, className: `text-${selectedGrade.color}-600` })}
          </div>
          <div className="flex-1 text-center md:text-left">
             <div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold mb-3">
               <BookOpen size={12} className="mr-1"/> ภาคเรียนที่ 1/2567
             </div>
             <h1 className="text-3xl font-bold text-gray-900 mb-3">{selectedGrade.title}</h1>
             <p className="text-lg text-gray-600 mb-6">{selectedGrade.description}</p>
             <div className="flex flex-wrap gap-4 justify-center md:justify-start">
                <div className="flex items-center gap-2 text-sm text-gray-500 bg-gray-50 px-3 py-1.5 rounded-lg">
                   <Layers size={16} /> {selectedGrade.units.length} หน่วยการเรียนรู้
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-500 bg-gray-50 px-3 py-1.5 rounded-lg">
                   <Award size={16} /> มีเกียรติบัตร
                </div>
             </div>
          </div>
       </div>

       <div className="space-y-6 max-w-4xl mx-auto">
          <h2 className="text-xl font-bold text-gray-900 border-l-4 border-blue-500 pl-3">โครงสร้างรายวิชา</h2>
          {selectedGrade.units.map((unit) => (
            <div key={unit.id} className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
               <div className="bg-gray-50/50 p-5 border-b border-gray-100 flex justify-between items-center">
                  <div>
                    <h3 className="font-bold text-lg text-gray-800">{unit.title}</h3>
                    <p className="text-sm text-gray-500 mt-1">{unit.description}</p>
                  </div>
               </div>
               <div className="divide-y divide-gray-50">
                  {unit.lessons.map((lesson) => (
                    <div 
                      key={lesson.id} 
                      onClick={() => handleStartLesson(unit, lesson)}
                      className="p-4 flex items-center justify-between hover:bg-blue-50/50 cursor-pointer transition group"
                    >
                       <div className="flex items-center gap-4">
                          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${lesson.type === 'quiz' ? 'bg-orange-100 text-orange-600' : 'bg-blue-100 text-blue-600'}`}>
                             {lesson.type === 'video' && <PlayCircle size={20} />}
                             {lesson.type === 'quiz' && <HelpCircle size={20} />}
                             {lesson.type === 'article' && <FileText size={20} />}
                             {lesson.type === 'code' && <Code size={20} />}
                          </div>
                          <div>
                             <h4 className="font-medium text-gray-700 group-hover:text-blue-700 transition">{lesson.title}</h4>
                             <p className="text-xs text-gray-400 mt-0.5 flex items-center gap-2">
                               {lesson.type === 'quiz' ? 'แบบทดสอบ' : 'บทเรียน'} • {lesson.duration}
                             </p>
                          </div>
                       </div>
                       <button className="text-gray-300 group-hover:text-blue-500 transition">
                          <PlayCircle size={24} />
                       </button>
                    </div>
                  ))}
               </div>
            </div>
          ))}
       </div>
    </div>
  );

  const LessonPlayer = () => {
    // Determine context for sidebar
    const currentUnit = selectedGrade.units.find(u => u.id === activeUnitId);

    return (
      <div className="flex flex-col md:flex-row h-[calc(100vh-64px)] overflow-hidden animate-fadeIn bg-gray-50">
         {/* Sidebar Navigation */}
         <div className="w-full md:w-80 bg-white border-r border-gray-200 flex flex-col h-full shrink-0 z-10">
            <div className="p-4 border-b border-gray-100">
               <button onClick={() => setView('course_overview')} className="text-sm text-gray-500 hover:text-blue-600 flex items-center mb-3">
                  <ChevronRight className="rotate-180 mr-1" size={14} /> ออกจากบทเรียน
               </button>
               <h3 className="font-bold text-gray-800 line-clamp-1" title={currentUnit.title}>{currentUnit.title}</h3>
               <div className="w-full bg-gray-100 h-1 mt-3 rounded-full overflow-hidden">
                  <div className="bg-green-500 h-full w-1/3"></div>
               </div>
               <p className="text-xs text-gray-400 mt-1 text-right">33% สำเร็จ</p>
            </div>
            <div className="flex-1 overflow-y-auto p-2 space-y-1">
               {currentUnit.lessons.map(l => (
                  <div 
                    key={l.id}
                    onClick={() => handleStartLesson(currentUnit, l)}
                    className={`p-3 rounded-lg text-sm font-medium cursor-pointer flex items-center gap-3 transition ${selectedLesson.id === l.id ? 'bg-blue-50 text-blue-700 border border-blue-100' : 'text-gray-600 hover:bg-gray-50'}`}
                  >
                     {l.type === 'quiz' ? <CheckCircle size={16} /> : <div className="w-4 h-4 rounded-full border-2 border-gray-300"></div>}
                     <span className="truncate">{l.title}</span>
                  </div>
               ))}
            </div>
         </div>

         {/* Content Area */}
         <div className="flex-1 overflow-y-auto p-4 md:p-8 relative">
            <div className="max-w-4xl mx-auto pb-12">
               {/* Header */}
               <div className="mb-6">
                  <span className={`inline-block px-2 py-1 rounded text-xs font-bold uppercase tracking-wider mb-2 ${selectedLesson.type === 'quiz' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'}`}>
                     {selectedLesson.type} Lesson
                  </span>
                  <h1 className="text-2xl md:text-3xl font-bold text-gray-900">{selectedLesson.title}</h1>
               </div>

               {/* Dynamic Content based on Type */}
               <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 md:p-8 min-h-[400px]">
                  
                  {/* VIDEO PLAYER */}
                  {selectedLesson.type === 'video' && (
                     <div>
                        <div className="aspect-video bg-gray-900 rounded-xl mb-6 relative group overflow-hidden shadow-lg">
                           <div className="absolute inset-0 flex items-center justify-center">
                              <PlayCircle size={64} className="text-white/80 group-hover:text-white group-hover:scale-110 transition duration-300 cursor-pointer" />
                           </div>
                           <p className="absolute bottom-4 left-4 text-white text-sm bg-black/50 px-2 py-1 rounded">Video Simulation: {selectedLesson.title}</p>
                        </div>
                        <div className="prose prose-slate max-w-none">
                           <h3 className="text-lg font-bold mb-2">คำอธิบายรายวิชา</h3>
                           <p className="text-gray-600 leading-relaxed">{selectedLesson.content || "เนื้อหาบทเรียนวิดีโอ..."}</p>
                        </div>
                     </div>
                  )}

                  {/* ARTICLE / CODE */}
                  {(selectedLesson.type === 'article' || selectedLesson.type === 'code') && (
                     <div className="prose prose-slate max-w-none">
                        <div className="flex items-start gap-4 bg-yellow-50 p-4 rounded-xl border border-yellow-100 mb-6">
                           <BookOpen className="text-yellow-600 shrink-0 mt-1" />
                           <div>
                              <h4 className="font-bold text-yellow-800 m-0">บทความความรู้</h4>
                              <p className="text-yellow-800/80 text-sm m-0">อ่านเนื้อหาและทำความเข้าใจก่อนทำแบบทดสอบ</p>
                           </div>
                        </div>
                        <p className="text-lg text-gray-700 leading-8">{selectedLesson.content}</p>
                        {selectedLesson.type === 'code' && (
                           <div className="mockup-code bg-slate-800 text-green-400 p-4 rounded-lg my-6 font-mono text-sm overflow-x-auto shadow-inner">
                              <pre data-prefix="$"><code>python learn_coding.py</code></pre> 
                              <pre data-prefix=">"><code>Result: Hello World!</code></pre>
                           </div>
                        )}
                     </div>
                  )}

                  {/* INTERACTIVE QUIZ */}
                  {selectedLesson.type === 'quiz' && (
                     <div className="max-w-2xl mx-auto">
                        {!quizState.submitted ? (
                           <div className="space-y-8 animate-fadeIn">
                              <div className="text-center mb-8">
                                 <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <HelpCircle className="text-orange-500 w-8 h-8" />
                                 </div>
                                 <h2 className="text-xl font-bold text-gray-800">แบบทดสอบวัดความรู้</h2>
                                 <p className="text-gray-500">ตอบคำถามให้ถูกต้องเพื่อผ่านด่าน</p>
                              </div>
                              
                              {selectedLesson.questions.map((q, qIdx) => (
                                 <div key={qIdx} className="bg-gray-50 p-6 rounded-xl border border-gray-100">
                                    <p className="font-bold text-gray-900 mb-4 text-lg">{qIdx + 1}. {q.q}</p>
                                    <div className="space-y-3">
                                       {q.options.map((opt, oIdx) => (
                                          <label 
                                             key={oIdx}
                                             className={`flex items-center p-4 rounded-lg border-2 cursor-pointer transition-all ${quizState.answers[qIdx] === oIdx ? 'border-blue-500 bg-blue-50' : 'border-transparent bg-white hover:border-gray-300'}`}
                                          >
                                             <div className={`w-5 h-5 rounded-full border-2 mr-3 flex items-center justify-center ${quizState.answers[qIdx] === oIdx ? 'border-blue-500' : 'border-gray-300'}`}>
                                                {quizState.answers[qIdx] === oIdx && <div className="w-2.5 h-2.5 bg-blue-500 rounded-full"></div>}
                                             </div>
                                             <span className="text-gray-700 font-medium">{opt}</span>
                                             <input type="radio" name={`q-${qIdx}`} className="hidden" onChange={() => handleQuizSelect(qIdx, oIdx)} />
                                          </label>
                                       ))}
                                    </div>
                                 </div>
                              ))}
                              
                              <button 
                                 onClick={() => handleSubmitQuiz(selectedLesson.questions)}
                                 disabled={Object.keys(quizState.answers).length < selectedLesson.questions.length}
                                 className="w-full py-4 bg-blue-600 disabled:bg-gray-300 text-white font-bold rounded-xl shadow-lg shadow-blue-500/30 hover:bg-blue-700 transition transform hover:-translate-y-1"
                              >
                                 ส่งคำตอบ
                              </button>
                           </div>
                        ) : (
                           <div className="text-center py-12 animate-scaleIn">
                              <div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                 <Award className="text-green-600 w-12 h-12" />
                              </div>
                              <h2 className="text-3xl font-bold text-gray-900 mb-2">สรุปผลคะแนน</h2>
                              <p className="text-gray-500 mb-8">คุณทำคะแนนได้</p>
                              <div className="text-6xl font-black text-blue-600 mb-8 tracking-tighter">
                                 {quizState.score} <span className="text-2xl text-gray-400 font-medium">/ {selectedLesson.questions.length}</span>
                              </div>
                              <div className="flex gap-4 justify-center">
                                 <button onClick={() => { setQuizState({answers:{}, submitted:false, score:0}) }} className="px-6 py-2 border border-gray-300 rounded-lg text-gray-600 font-medium hover:bg-gray-50 flex items-center gap-2">
                                    <RefreshCw size={18}/> ทำอีกครั้ง
                                 </button>
                                 <button onClick={() => setView('course_overview')} className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 shadow-md">
                                    บทเรียนถัดไป
                                 </button>
                              </div>
                           </div>
                        )}
                     </div>
                  )}
               </div>

               {/* Navigation Buttons */}
               <div className="flex justify-between mt-8">
                  <button className="text-gray-400 hover:text-gray-600 font-medium px-4">
                     &larr; ก่อนหน้า
                  </button>
                  {selectedLesson.type !== 'quiz' && (
                     <button className="bg-white border border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-bold hover:bg-gray-50 hover:border-blue-300 transition flex items-center gap-2 shadow-sm">
                        ถัดไป <ChevronRight size={18} />
                     </button>
                  )}
               </div>
            </div>
         </div>
      </div>
    );
  };

  // --- SECONDARY VIEWS ---

  const TeachersView = () => (
    <div className="max-w-7xl mx-auto px-4 py-12 animate-fadeIn min-h-screen">
       <h2 className="text-3xl font-bold text-gray-900 mb-8 border-l-8 border-blue-500 pl-4">ทีมครูผู้สอน</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {teachersData.map(t => (
           <div key={t.id} className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 relative overflow-hidden group">
              <div className={`absolute top-0 left-0 w-full h-2 bg-${t.color}-500`}></div>
              <div className="flex flex-col items-center text-center pt-4">
                 <img src={t.img} alt={t.name} className="w-24 h-24 rounded-full bg-gray-100 mb-4 border-4 border-white shadow-md group-hover:scale-110 transition duration-300" />
                 <h3 className="text-xl font-bold text-gray-900">{t.name}</h3>
                 <span className={`px-3 py-1 rounded-full bg-${t.color}-50 text-${t.color}-600 text-xs font-bold mt-2 mb-4`}>{t.role}</span>
                 
                 <div className="w-full bg-gray-50 rounded-xl p-4 text-left space-y-2">
                    <div className="flex items-center gap-3 text-sm text-gray-600">
                       <BookOpen size={16} className="text-gray-400"/> {t.subject}
                    </div>
                    <div className="flex items-center gap-3 text-sm text-gray-600">
                       <Mail size={16} className="text-gray-400"/> {t.email}
                    </div>
                 </div>
                 <button className="w-full mt-4 py-2 border border-blue-100 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition">
                    ส่งข้อความ
                 </button>
              </div>
           </div>
         ))}
       </div>
    </div>
  );

  const AssignmentsView = () => (
    <div className="max-w-5xl mx-auto px-4 py-12 animate-fadeIn min-h-screen">
      <div className="flex justify-between items-center mb-8">
         <h2 className="text-2xl md:text-3xl font-bold text-gray-900 flex items-center gap-3">
            <UploadCloud className="text-blue-600" /> ส่งงานออนไลน์
         </h2>
      </div>

      <div className="grid gap-4">
         {assignmentsData.map(assign => (
            <div key={assign.id} className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm hover:border-blue-400 transition flex flex-col md:flex-row gap-6 items-start md:items-center">
               <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                     <span className="text-xs font-bold text-gray-400 bg-gray-100 px-2 py-1 rounded uppercase">{assign.course}</span>
                     {assign.status === 'pending' && <span className="text-xs font-bold text-yellow-700 bg-yellow-100 px-2 py-1 rounded">รอส่งงาน</span>}
                     {assign.status === 'submitted' && <span className="text-xs font-bold text-blue-700 bg-blue-100 px-2 py-1 rounded">รอตรวจ</span>}
                     {assign.status === 'graded' && <span className="text-xs font-bold text-green-700 bg-green-100 px-2 py-1 rounded">ตรวจแล้ว</span>}
                  </div>
                  <h3 className="text-lg font-bold text-gray-900">{assign.title}</h3>
                  <p className="text-sm text-gray-500 mt-1 flex items-center gap-4">
                     <span className="flex items-center gap-1"><Calendar size={14}/> กำหนดส่ง: {assign.dueDate}</span>
                     <span className="flex items-center gap-1"><Award size={14}/> {assign.max} คะแนน</span>
                  </p>
               </div>
               
               <div className="w-full md:w-auto">
                  {assign.status === 'pending' ? (
                     <button onClick={() => setShowUploadModal(true)} className="w-full md:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg font-bold shadow-lg shadow-blue-500/20 hover:bg-blue-700 transition flex items-center justify-center gap-2">
                        <UploadCloud size={18} /> ส่งงาน
                     </button>
                  ) : assign.status === 'graded' ? (
                     <div className="text-center md:text-right px-4">
                        <span className="block text-2xl font-bold text-green-600">{assign.score}</span>
                        <span className="text-xs text-gray-400">คะแนนที่ได้</span>
                     </div>
                  ) : (
                     <button disabled className="w-full md:w-auto px-6 py-2.5 bg-gray-100 text-gray-400 rounded-lg font-bold cursor-not-allowed flex items-center justify-center gap-2">
                        <FileCheck size={18} /> ส่งแล้ว
                     </button>
                  )}
               </div>
            </div>
         ))}
      </div>

      {showUploadModal && (
         <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fadeIn">
            <div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl transform transition-all scale-100">
               <div className="flex justify-between items-center mb-6">
                  <h3 className="text-xl font-bold text-gray-900">อัปโหลดไฟล์งาน</h3>
                  <button onClick={() => setShowUploadModal(false)} className="text-gray-400 hover:text-gray-600"><X /></button>
               </div>
               <form onSubmit={handleUploadAssignment}>
                  <div className="border-2 border-dashed border-blue-200 bg-blue-50 rounded-xl p-8 text-center cursor-pointer hover:bg-blue-100 transition mb-4 group">
                     <UploadCloud className="mx-auto h-12 w-12 text-blue-400 group-hover:scale-110 transition mb-2" />
                     <p className="text-sm font-medium text-blue-900">คลิกเพื่อเลือกไฟล์ หรือลากมาวางที่นี่</p>
                     <p className="text-xs text-blue-500 mt-1">รองรับ PDF, JPG, DOCX (Max 10MB)</p>
                  </div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">รายละเอียดเพิ่มเติม</label>
                  <textarea className="w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none mb-4" rows="3" placeholder="แจ้งชื่อ-สกุล หรือรายละเอียดงาน..."></textarea>
                  <button type="submit" disabled={uploading} className="w-full py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition flex justify-center items-center gap-2">
                     {uploading ? <RefreshCw className="animate-spin" /> : "ยืนยันการส่ง"}
                  </button>
               </form>
            </div>
         </div>
      )}
    </div>
  );

  const GradesView = () => (
    <div className="max-w-6xl mx-auto px-4 py-12 animate-fadeIn min-h-screen">
       <div className="bg-gradient-to-r from-blue-700 to-indigo-800 rounded-3xl p-8 text-white shadow-xl mb-8 flex flex-col md:flex-row items-center gap-8">
          <div className="w-24 h-24 bg-white/20 backdrop-blur rounded-full flex items-center justify-center border-4 border-white/30 shadow-lg">
             <User size={48} className="text-white" />
          </div>
          <div className="text-center md:text-left flex-1">
             <h2 className="text-3xl font-bold mb-1">{gradesData.student}</h2>
             <p className="text-blue-200">รหัสนักเรียน: {gradesData.id}</p>
          </div>
          <div className="text-center bg-white/10 p-4 rounded-2xl backdrop-blur-md border border-white/10">
             <span className="block text-sm text-blue-200 font-medium mb-1">GPA สะสม</span>
             <span className="block text-4xl font-black text-white">{gradesData.gpa}</span>
          </div>
       </div>

       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
             <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div className="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
                   <BarChart2 className="text-blue-600" size={20}/>
                   <h3 className="font-bold text-gray-800">ผลการเรียนเทอมปัจจุบัน (1/2567)</h3>
                </div>
                <div className="p-6 space-y-6">
                   {gradesData.current.map((item, i) => (
                      <div key={i}>
                         <div className="flex justify-between text-sm font-medium mb-2">
                            <span className="text-gray-600">{item.item}</span>
                            <span className="text-gray-900">{item.score !== null ? item.score : '-'} / {item.max}</span>
                         </div>
                         <div className="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
                            {item.score !== null ? (
                               <div className={`h-full rounded-full ${item.score/item.max < 0.5 ? 'bg-red-500' : 'bg-green-500'}`} style={{width: `${(item.score/item.max)*100}%`}}></div>
                            ) : (
                               <div className="h-full bg-gray-200 w-full opacity-50 relative overflow-hidden">
                                  <div className="absolute inset-0 bg-white/30 w-full animate-[shimmer_2s_infinite]"></div>
                               </div>
                            )}
                         </div>
                         {item.note && <p className="text-xs text-orange-500 mt-1 flex items-center gap-1"><AlertCircle size={12}/> {item.note}</p>}
                      </div>
                   ))}
                </div>
             </div>
          </div>

          <div>
             <div className="bg-white rounded-2xl shadow-sm border border-gray-200 h-full">
                <div className="px-6 py-4 border-b border-gray-100 bg-gray-50">
                   <h3 className="font-bold text-gray-800">ประวัติผลการเรียน</h3>
                </div>
                <div className="divide-y divide-gray-100">
                   {gradesData.terms.map((t, i) => (
                      <div key={i} className="p-5 hover:bg-gray-50 transition">
                         <p className="text-xs font-bold text-gray-400 mb-1">{t.name}</p>
                         <h4 className="font-bold text-gray-800 mb-2">{t.subject}</h4>
                         <div className="flex justify-between items-end">
                            <span className="text-sm text-gray-500">คะแนน {t.score}</span>
                            <span className="px-3 py-1 bg-green-100 text-green-700 rounded-lg font-bold text-sm">เกรด {t.grade}</span>
                         </div>
                      </div>
                   ))}
                </div>
             </div>
          </div>
       </div>
    </div>
  );

  return (
    <>
      <style>{fontStyle}</style>
      <div className="min-h-screen bg-gray-50 text-slate-800">
        <Navbar />
        {view === 'home' && <HomeView />}
        {view === 'teachers' && <TeachersView />}
        {view === 'assignments' && <AssignmentsView />}
        {view === 'grades' && <GradesView />}
        {view === 'course_overview' && selectedGrade && <CourseOverview />}
        {view === 'lesson_player' && selectedGrade && <LessonPlayer />}
      </div>
    </>
  );
};

export default App;