import React, { useState } from 'react';
import { useCollege } from '../context/CollegeContext';
import {
  BookOpen,
  CalendarCheck,
  CheckCircle2,
  AlertCircle,
  Award,
  Users,
  Plus,
  Radio,
  FileText,
  Upload,
  Clock,
  Send,
  MessageSquare,
  Sparkles,
  ChevronRight,
  TrendingUp,
  Lock,
  ShieldAlert,
  ShieldCheck,
  FileCheck,
} from 'lucide-react';
import { GradeItem, AttendanceRecord } from '../types';

interface TeacherDashboardProps {
  onOpenReportCard: (studentId: string) => void;
  onOpenNewAssignment?: () => void;
  onOpenMessages?: () => void;
}

export const TeacherDashboard: React.FC<TeacherDashboardProps> = ({
  onOpenReportCard,
  onOpenMessages,
}) => {
  const {
    currentUser,
    courses,
    grades,
    attendance,
    fees,
    markAttendance,
    bulkMarkAttendance,
    saveGrade,
    publishGradesForCourse,
    assignments,
    addNewAssignment,
    uploadMaterial,
    studyMaterials,
    gradeAssignmentWork,
  } = useCollege();

  const [selectedCourseCode, setSelectedCourseCode] = useState<string>('CG1004');
  const [activeTab, setActiveTab] = useState<'attendance' | 'grades' | 'assignments' | 'materials'>('attendance');

  // Attendance Register state
  const [sessionDate, setSessionDate] = useState(new Date().toISOString().split('T')[0]);
  const [sessionName, setSessionName] = useState('Practical Laboratory Session');
  const [attendanceStatuses, setAttendanceStatuses] = useState<Record<string, 'Present' | 'Absent' | 'Late' | 'Excused'>>({
    'STC/2026/ICT-108': 'Present',
    'STC/2026/ICAM-042': 'Present',
  });
  const [attendanceFeedback, setAttendanceFeedback] = useState('');

  // Grade edit modal
  const [editingGrade, setEditingGrade] = useState<GradeItem | null>(null);

  // New assignment modal
  const [showNewAsnModal, setShowNewAsnModal] = useState(false);
  const [asnForm, setAsnForm] = useState({
    title: '',
    instructions: '',
    dueDate: '2026-09-02 23:59',
    totalMarks: 30,
  });

  // New Study Material modal
  const [showNewMatModal, setShowNewMatModal] = useState(false);
  const [matForm, setMatForm] = useState({
    title: '',
    description: '',
    category: 'Lecture Notes' as const,
    fileType: 'PDF' as const,
    fileSize: '3.4 MB',
    examBoard: 'City and Guilds',
  });

  const selectedCourse = courses.find(c => c.code === selectedCourseCode) || courses[0];
  const courseGrades = grades.filter(g => g.courseCode === selectedCourseCode);
  const courseMaterials = studyMaterials.filter(m => m.courseCode === selectedCourseCode);
  const courseAssignments = assignments.filter(a => a.courseCode === selectedCourseCode);

  // Active students enrolled in the college
  const enrolledStudents = fees.map(f => ({
    studentId: f.studentId,
    name: f.studentName,
    course: f.courseName,
  }));

  const handleBatchSubmitAttendance = (e: React.FormEvent) => {
    e.preventDefault();
    const records: Omit<AttendanceRecord, 'id'>[] = enrolledStudents.map(student => ({
      studentId: student.studentId,
      courseCode: selectedCourseCode,
      date: sessionDate,
      status: attendanceStatuses[student.studentId] || 'Present',
      sessionName: `${selectedCourse.name} - ${sessionName}`,
      markedBy: currentUser.name,
      alertSentToParent: attendanceStatuses[student.studentId] === 'Absent' || attendanceStatuses[student.studentId] === 'Late',
    }));

    bulkMarkAttendance(records);
    setAttendanceFeedback(`Attendance marked for ${records.length} students on ${sessionDate}. Automated guardian notifications dispatched for any absences.`);
    setTimeout(() => setAttendanceFeedback(''), 5000);
  };

  const handleSaveGradeForm = (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingGrade) return;

    const coursework = Number(editingGrade.courseworkScore) || 0;
    const midterm = Number(editingGrade.midtermScore) || 0;
    const practical = Number(editingGrade.practicalScore) || 0;
    const finalExam = Number(editingGrade.finalExamScore) || 0;
    const total = coursework + midterm + practical + finalExam;

    let letter: GradeItem['letterGrade'] = 'F';
    let gpa = 0.0;
    if (total >= 85) { letter = 'A+'; gpa = 4.0; }
    else if (total >= 80) { letter = 'A'; gpa = 3.75; }
    else if (total >= 75) { letter = 'B+'; gpa = 3.3; }
    else if (total >= 70) { letter = 'B'; gpa = 3.0; }
    else if (total >= 60) { letter = 'C'; gpa = 2.5; }
    else if (total >= 50) { letter = 'D'; gpa = 2.0; }

    saveGrade({
      ...editingGrade,
      courseworkScore: coursework,
      midtermScore: midterm,
      practicalScore: practical,
      finalExamScore: finalExam,
      totalScore: total,
      letterGrade: letter,
      gpa,
    });

    setEditingGrade(null);
  };

  const handleCreateAssignment = (e: React.FormEvent) => {
    e.preventDefault();
    addNewAssignment({
      courseCode: selectedCourseCode,
      courseName: selectedCourse.name,
      title: asnForm.title,
      instructions: asnForm.instructions,
      dueDate: asnForm.dueDate,
      totalMarks: Number(asnForm.totalMarks),
      uploadedBy: currentUser.name,
    });
    setShowNewAsnModal(false);
    setAsnForm({ title: '', instructions: '', dueDate: '2026-09-02 23:59', totalMarks: 30 });
  };

  const handleUploadMaterial = (e: React.FormEvent) => {
    e.preventDefault();
    uploadMaterial({
      courseCode: selectedCourseCode,
      courseName: selectedCourse.name,
      title: matForm.title,
      description: matForm.description,
      category: matForm.category,
      fileType: matForm.fileType,
      fileSize: matForm.fileSize,
      uploadedBy: currentUser.name,
      examBoard: matForm.examBoard,
    });
    setShowNewMatModal(false);
    setMatForm({
      title: '',
      description: '',
      category: 'Lecture Notes',
      fileType: 'PDF',
      fileSize: '3.4 MB',
      examBoard: 'City and Guilds',
    });
  };

  return (
    <div className="space-y-6">
      
      {/* Lecturer Top Banner & Permissions Summary */}
      <div className="bg-slate-900 text-white rounded-2xl p-6 shadow-md border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <span className="bg-emerald-500 text-slate-950 font-mono text-[10px] font-bold px-2 py-0.5 rounded uppercase">
              Lecturer Portal
            </span>
            <span className="text-xs text-slate-400">{currentUser.department || 'Engineering & Business'}</span>
            <span className="text-slate-500">|</span>
            <span className="text-xs text-slate-300 font-medium">{currentUser.name}</span>
            {currentUser.employmentType && (
              <span className="text-[10px] bg-slate-800 text-indigo-300 border border-slate-700 px-2 py-0.5 rounded">
                {currentUser.employmentType}
              </span>
            )}
          </div>
          <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-white">
            Classroom, Gradebook & Examination Center
          </h1>
          <p className="text-xs sm:text-sm text-slate-300">
            Record continuous assessments, prepare examinations, publish class works & assignments, and manage syllabus materials.
          </p>

          {/* Operational Permissions Status Badges */}
          <div className="flex flex-wrap items-center gap-2 pt-2">
            <span className={`text-[10px] font-bold px-2 py-0.5 rounded flex items-center gap-1 border ${
              currentUser.canPrepareExams && currentUser.status === 'active'
                ? 'bg-emerald-950/80 text-emerald-300 border-emerald-700'
                : 'bg-slate-800 text-slate-400 border-slate-700'
            }`}>
              {currentUser.canPrepareExams && currentUser.status === 'active' ? '✓ Exam Preparation: Authorized' : '🔒 Exam Prep: Restricted'}
            </span>

            <span className={`text-[10px] font-bold px-2 py-0.5 rounded flex items-center gap-1 border ${
              currentUser.canCreateClasswork && currentUser.status === 'active'
                ? 'bg-blue-950/80 text-blue-300 border-blue-700'
                : 'bg-slate-800 text-slate-400 border-slate-700'
            }`}>
              {currentUser.canCreateClasswork && currentUser.status === 'active' ? '✓ Class Works: Authorized' : '🔒 Class Works: Restricted'}
            </span>

            <span className={`text-[10px] font-bold px-2 py-0.5 rounded flex items-center gap-1 border ${
              currentUser.canEnterGrades && currentUser.status === 'active'
                ? 'bg-purple-950/80 text-purple-300 border-purple-700'
                : 'bg-slate-800 text-slate-400 border-slate-700'
            }`}>
              {currentUser.canEnterGrades && currentUser.status === 'active' ? '✓ Grade Scoring: Authorized' : '🔒 Grade Scoring: Restricted'}
            </span>
          </div>
        </div>

        <div className="flex items-center gap-3 shrink-0">
          <div className="bg-slate-800 px-3 py-2 rounded-xl border border-slate-700">
            <label className="block text-[10px] text-slate-400 font-semibold uppercase mb-0.5">Active Class:</label>
            <select
              value={selectedCourseCode}
              onChange={e => setSelectedCourseCode(e.target.value)}
              className="bg-transparent text-white font-bold text-xs focus:outline-none cursor-pointer"
            >
              {courses.map(c => (
                <option key={c.code} value={c.code} className="bg-slate-900 text-white">
                  {c.code}: {c.name} ({c.examBoard})
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* CONDITIONAL WARNING BANNER IF PENDING APPROVAL OR SUSPENDED */}
      {currentUser.status === 'pending_approval' && (
        <div className="bg-amber-50 border-2 border-amber-300 rounded-2xl p-5 shadow-sm space-y-3">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-xl bg-amber-500 text-slate-950 flex items-center justify-center font-bold shrink-0 mt-0.5">
              <Clock className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-sm font-bold text-amber-950">
                  Lecturer Account Awaiting Principal / Academic Registry Approval
                </h3>
                <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-200 text-amber-900 border border-amber-300 uppercase">
                  Pending Commissioning
                </span>
              </div>
              <p className="text-xs text-amber-900 mt-1 leading-relaxed">
                Your teaching profile is currently pending official clearance by College Principal (<strong>Dr. Eddie Njunga</strong>) and the Academic Board. In accordance with college examination policy, <strong>preparing semester examination papers and posting class works</strong> is locked until your credentials are verified in the Admin Dashboard.
              </p>
            </div>
          </div>
          <div className="bg-white/80 rounded-xl p-3 border border-amber-200 text-xs flex flex-col sm:flex-row sm:items-center justify-between gap-2">
            <span className="text-slate-700 font-medium">
              Want to test the approval flow right now? Switch to the Principal Admin account to approve this teacher.
            </span>
            <button
              onClick={() => {
                const { switchRole } = (window as any).__stc_context_hack || {};
              }}
              className="text-amber-800 font-bold underline hover:text-amber-950 whitespace-nowrap"
            >
              Switch to Principal via top menu
            </button>
          </div>
        </div>
      )}

      {currentUser.status === 'suspended' && (
        <div className="bg-rose-50 border-2 border-rose-300 rounded-2xl p-5 shadow-sm space-y-2">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-rose-600 text-white flex items-center justify-center font-bold shrink-0">
              <AlertCircle className="w-6 h-6" />
            </div>
            <div>
              <h3 className="text-sm font-bold text-rose-950">
                Lecturer Account Temporarily Suspended
              </h3>
              <p className="text-xs text-rose-800 mt-0.5">
                {currentUser.rejectionReason || 'Your teaching access has been temporarily suspended by the Academic Registry.'}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Main Classroom Hub Card */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
        
        {/* Navigation Tabs */}
        <div className="flex border-b border-slate-200 bg-slate-50 px-6 pt-3 gap-4 overflow-x-auto no-scrollbar">
          <button
            onClick={() => setActiveTab('attendance')}
            className={`pb-3 text-xs font-bold transition border-b-2 flex items-center gap-2 whitespace-nowrap ${
              activeTab === 'attendance'
                ? 'border-emerald-600 text-emerald-800'
                : 'border-transparent text-slate-500 hover:text-slate-900'
            }`}
          >
            <CalendarCheck className="w-4 h-4" />
            Daily Attendance Register
          </button>

          <button
            onClick={() => setActiveTab('grades')}
            className={`pb-3 text-xs font-bold transition border-b-2 flex items-center gap-2 whitespace-nowrap ${
              activeTab === 'grades'
                ? 'border-emerald-600 text-emerald-800'
                : 'border-transparent text-slate-500 hover:text-slate-900'
            }`}
          >
            <Award className="w-4 h-4" />
            Gradebook & CATs ({courseGrades.length} Modules)
          </button>

          <button
            onClick={() => setActiveTab('assignments')}
            className={`pb-3 text-xs font-bold transition border-b-2 flex items-center gap-2 whitespace-nowrap ${
              activeTab === 'assignments'
                ? 'border-emerald-600 text-emerald-800'
                : 'border-transparent text-slate-500 hover:text-slate-900'
            }`}
          >
            <FileText className="w-4 h-4" />
            Assignments & Labs ({courseAssignments.length})
          </button>

          <button
            onClick={() => setActiveTab('materials')}
            className={`pb-3 text-xs font-bold transition border-b-2 flex items-center gap-2 whitespace-nowrap ${
              activeTab === 'materials'
                ? 'border-emerald-600 text-emerald-800'
                : 'border-transparent text-slate-500 hover:text-slate-900'
            }`}
          >
            <Upload className="w-4 h-4" />
            Cloud Study Hub ({courseMaterials.length})
          </button>
        </div>

        {/* Tab 1: Attendance Register */}
        {activeTab === 'attendance' && (
          <div className="p-4 sm:p-6 space-y-5">
            {attendanceFeedback && (
              <div className="p-3 bg-emerald-50 border border-emerald-300 rounded-xl text-xs font-semibold text-emerald-900 flex items-center gap-2 animate-in fade-in">
                <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                {attendanceFeedback}
              </div>
            )}

            <form onSubmit={handleBatchSubmitAttendance} className="space-y-4">
              <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">DATE OF SESSION</label>
                  <input
                    type="date"
                    value={sessionDate}
                    onChange={e => setSessionDate(e.target.value)}
                    className="w-full p-2 bg-white border border-slate-300 rounded-lg text-xs font-medium"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">SESSION TOPIC / WORKSHOP</label>
                  <input
                    type="text"
                    value={sessionName}
                    onChange={e => setSessionName(e.target.value)}
                    className="w-full p-2 bg-white border border-slate-300 rounded-lg text-xs font-medium"
                  />
                </div>

                <div className="flex items-end">
                  <div className="text-[11px] text-slate-500 bg-amber-50 p-2 rounded border border-amber-200 w-full">
                    <span className="font-bold text-amber-900 block">Automated Guardian Alert:</span>
                    Absences and late entries automatically dispatch push alerts to registered parents.
                  </div>
                </div>
              </div>

              {/* Student Attendance Roll */}
              <div className="border border-slate-200 rounded-xl overflow-hidden">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="bg-slate-100 text-slate-700 font-semibold border-b border-slate-200">
                      <th className="p-3">Student Name & ID</th>
                      <th className="p-3">Enrolled Course</th>
                      <th className="p-3">Roll-Call Status</th>
                      <th className="p-3 text-right">Quick Set</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {enrolledStudents.map(st => {
                      const currentStatus = attendanceStatuses[st.studentId] || 'Present';
                      return (
                        <tr key={st.studentId} className="hover:bg-slate-50">
                          <td className="p-3">
                            <span className="font-bold text-slate-900 block">{st.name}</span>
                            <span className="font-mono text-[10px] text-slate-500">{st.studentId}</span>
                          </td>
                          <td className="p-3 text-slate-600">{st.course}</td>
                          <td className="p-3">
                            <div className="flex flex-wrap items-center gap-1.5">
                              {(['Present', 'Late', 'Absent', 'Excused'] as const).map(statusVal => (
                                <button
                                  type="button"
                                  key={statusVal}
                                  onClick={() =>
                                    setAttendanceStatuses(prev => ({
                                      ...prev,
                                      [st.studentId]: statusVal,
                                    }))
                                  }
                                  className={`px-2.5 py-1 rounded-md text-[11px] font-bold transition ${
                                    currentStatus === statusVal
                                      ? statusVal === 'Present'
                                        ? 'bg-emerald-600 text-white'
                                        : statusVal === 'Late'
                                        ? 'bg-amber-500 text-white'
                                        : statusVal === 'Absent'
                                        ? 'bg-rose-600 text-white'
                                        : 'bg-slate-600 text-white'
                                      : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                  }`}
                                >
                                  {statusVal}
                                </button>
                              ))}
                            </div>
                          </td>
                          <td className="p-3 text-right">
                            <button
                              type="button"
                              onClick={() => onOpenReportCard(st.studentId)}
                              className="text-[11px] font-semibold text-emerald-700 hover:text-emerald-900"
                            >
                              View History
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              <div className="flex justify-end pt-2">
                <button
                  type="submit"
                  className="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-lg transition shadow-md flex items-center gap-2"
                >
                  <CheckCircle2 className="w-4 h-4" />
                  Save Roll-Call & Broadcast Guardian Alerts
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Tab 2: Gradebook & CATs */}
        {activeTab === 'grades' && (
          <div className="p-4 sm:p-6 space-y-4">
            
            {/* Examination Preparation Authorization Status Banner */}
            {(!currentUser.canPrepareExams || currentUser.status !== 'active') && (
              <div className="p-3 bg-amber-50 border border-amber-300 rounded-xl text-xs text-amber-950 flex items-start gap-2.5">
                <Lock className="w-4 h-4 text-amber-700 shrink-0 mt-0.5" />
                <div>
                  <span className="font-bold text-amber-900 block">Examination Preparation & Moderation Restricted</span>
                  <span className="text-[11px] text-amber-800">
                    Your account does not currently hold official Examination Board Commissioning from the Principal. Final exam scores and registry grade publishing can only be submitted by approved examination officers.
                  </span>
                </div>
              </div>
            )}

            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-slate-50 p-4 rounded-xl border border-slate-200 text-xs">
              <div>
                <h3 className="font-bold text-slate-900 text-sm">
                  {selectedCourse.name} ({selectedCourse.examBoard})
                </h3>
                <p className="text-slate-600 text-[11px]">
                  Grading Scale: Coursework (30%) • Midterm (20%) • Practicals (10%) • Final Exam (40%) = 100% Total.
                </p>
              </div>

              {currentUser.canPrepareExams && currentUser.status === 'active' ? (
                <button
                  onClick={() => publishGradesForCourse(selectedCourseCode)}
                  className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs flex items-center gap-1.5 shadow-sm active:scale-95 transition"
                >
                  <CheckCircle2 className="w-4 h-4" />
                  Publish & Notify Registry
                </button>
              ) : (
                <span className="px-3 py-1.5 bg-slate-200 text-slate-500 rounded-lg text-xs font-semibold flex items-center gap-1.5 cursor-not-allowed">
                  <Lock className="w-3.5 h-3.5" />
                  Publishing Restricted
                </span>
              )}
            </div>

            {/* Grades Table */}
            <div className="border border-slate-200 rounded-xl overflow-x-auto">
              <table className="w-full text-left text-xs">
                <thead>
                  <tr className="bg-slate-100 text-slate-700 font-semibold border-b border-slate-200">
                    <th className="p-3">Student & Subject</th>
                    <th className="p-3 text-center">Coursework (30%)</th>
                    <th className="p-3 text-center">Midterm (20%)</th>
                    <th className="p-3 text-center">Practicals (10%)</th>
                    <th className="p-3 text-center">Exam (40%)</th>
                    <th className="p-3 text-center">Total Score</th>
                    <th className="p-3 text-center">Grade</th>
                    <th className="p-3 text-center">GPA</th>
                    <th className="p-3 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                  {courseGrades.map(grd => {
                    const student = fees.find(f => f.studentId === grd.studentId);
                    const canEditThisGrade = (currentUser.canEnterGrades || currentUser.canPrepareExams) && currentUser.status === 'active';

                    return (
                      <tr key={grd.id} className="hover:bg-slate-50">
                        <td className="p-3">
                          <span className="font-bold text-slate-900 block">{grd.subjectName}</span>
                          <span className="text-[10px] text-slate-500">
                            Candidate: {student?.studentName || grd.studentId} ({grd.studentId})
                          </span>
                        </td>
                        <td className="p-3 text-center font-mono">{grd.courseworkScore}</td>
                        <td className="p-3 text-center font-mono">{grd.midtermScore}</td>
                        <td className="p-3 text-center font-mono">{grd.practicalScore}</td>
                        <td className="p-3 text-center font-mono">{grd.finalExamScore}</td>
                        <td className="p-3 text-center font-mono font-bold text-slate-900">
                          {grd.totalScore}%
                        </td>
                        <td className="p-3 text-center">
                          <span className="px-2 py-0.5 rounded font-bold text-xs bg-emerald-100 text-emerald-900 border border-emerald-300">
                            {grd.letterGrade}
                          </span>
                        </td>
                        <td className="p-3 text-center font-mono font-semibold">{grd.gpa.toFixed(2)}</td>
                        <td className="p-3 text-right">
                          <div className="flex items-center justify-end gap-1.5">
                            {canEditThisGrade ? (
                              <button
                                onClick={() => setEditingGrade(grd)}
                                className="px-2.5 py-1 bg-slate-800 hover:bg-slate-900 text-white rounded font-semibold text-[11px]"
                              >
                                Edit Marks
                              </button>
                            ) : (
                              <button
                                disabled
                                title="Requires grade scoring permission from Principal"
                                className="px-2.5 py-1 bg-slate-200 text-slate-400 rounded font-semibold text-[11px] cursor-not-allowed flex items-center gap-1"
                              >
                                <Lock className="w-3 h-3" />
                                Locked
                              </button>
                            )}
                            <button
                              onClick={() => onOpenReportCard(grd.studentId)}
                              className="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded font-semibold text-[11px]"
                            >
                              Transcript
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Tab 3: Assignments */}
        {activeTab === 'assignments' && (
          <div className="p-4 sm:p-6 space-y-4">
            {(!currentUser.canCreateClasswork || currentUser.status !== 'active') && (
              <div className="p-3 bg-blue-50 border border-blue-300 rounded-xl text-xs text-blue-950 flex items-start gap-2.5">
                <Lock className="w-4 h-4 text-blue-700 shrink-0 mt-0.5" />
                <div>
                  <span className="font-bold text-blue-900 block">Class Work Creation Permission Pending</span>
                  <span className="text-[11px] text-blue-800">
                    Posting assignments and laboratory practicals requires classwork commissioning by the Principal / Academic Board.
                  </span>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between">
              <h3 className="font-bold text-slate-900 text-sm">
                Practical Coursework & Assignments ({selectedCourse.name})
              </h3>
              {currentUser.canCreateClasswork && currentUser.status === 'active' ? (
                <button
                  onClick={() => setShowNewAsnModal(true)}
                  className="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg transition flex items-center gap-1.5 shadow-sm active:scale-95"
                >
                  <Plus className="w-4 h-4" />
                  Post New Assignment
                </button>
              ) : (
                <button
                  disabled
                  className="px-3.5 py-2 bg-slate-200 text-slate-400 text-xs font-bold rounded-lg flex items-center gap-1.5 cursor-not-allowed"
                >
                  <Lock className="w-4 h-4" />
                  Post New Assignment (Restricted)
                </button>
              )}
            </div>

            <div className="grid grid-cols-1 gap-4">
              {courseAssignments.map(asn => (
                <div
                  key={asn.id}
                  className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-3 text-xs"
                >
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                    <div>
                      <h4 className="font-bold text-sm text-slate-900">{asn.title}</h4>
                      <span className="text-slate-500 font-mono text-[11px]">Due: {asn.dueDate} • Total Marks: {asn.totalMarks}</span>
                    </div>
                    <span className="bg-white px-3 py-1 rounded-full border border-slate-300 font-bold text-emerald-800 text-[11px] self-start">
                      {asn.submissionsCount} Submissions Received
                    </span>
                  </div>

                  <p className="text-slate-700 leading-relaxed">{asn.instructions}</p>

                  {/* Submission review simulation */}
                  {asn.mySubmission && (
                    <div className="p-3 bg-white border border-slate-200 rounded-lg space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="font-bold text-slate-800">
                          Student Submission: {asn.mySubmission.fileName} ({asn.mySubmission.fileSize})
                        </span>
                        <span className="text-emerald-700 font-bold bg-emerald-100 px-2 py-0.5 rounded text-[10px]">
                          {asn.mySubmission.status}
                        </span>
                      </div>
                      <p className="text-slate-600 italic">Notes: "{asn.mySubmission.notes}"</p>

                      <div className="flex items-center gap-2 pt-1">
                        <input
                          type="number"
                          defaultValue={asn.mySubmission.score || 25}
                          placeholder="Score"
                          id={`score-${asn.id}`}
                          className="w-20 p-1.5 border border-slate-300 rounded font-mono text-xs"
                        />
                        <input
                          type="text"
                          defaultValue={asn.mySubmission.feedback || 'Good network configuration.'}
                          placeholder="Lecturer feedback..."
                          id={`feed-${asn.id}`}
                          className="flex-1 p-1.5 border border-slate-300 rounded text-xs"
                        />
                        <button
                          onClick={() => {
                            const sc = (document.getElementById(`score-${asn.id}`) as HTMLInputElement)?.value;
                            const fb = (document.getElementById(`feed-${asn.id}`) as HTMLInputElement)?.value;
                            gradeAssignmentWork(asn.id, Number(sc) || 25, fb || 'Graded');
                          }}
                          className="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded font-bold text-xs"
                        >
                          Save Grade
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Tab 4: Study Materials */}
        {activeTab === 'materials' && (
          <div className="p-4 sm:p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-bold text-slate-900 text-sm">
                Cloud Study Repository ({selectedCourse.name})
              </h3>
              {currentUser.canUploadMaterials && currentUser.status === 'active' ? (
                <button
                  onClick={() => setShowNewMatModal(true)}
                  className="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg transition flex items-center gap-1.5 shadow-sm active:scale-95"
                >
                  <Upload className="w-4 h-4" />
                  Upload Course Notes / Past Paper
                </button>
              ) : (
                <button
                  disabled
                  className="px-3.5 py-2 bg-slate-200 text-slate-400 text-xs font-bold rounded-lg flex items-center gap-1.5 cursor-not-allowed"
                >
                  <Lock className="w-4 h-4" />
                  Upload Materials (Restricted)
                </button>
              )}
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {courseMaterials.map(mat => (
                <div
                  key={mat.id}
                  className="border border-slate-200 rounded-xl p-4 bg-slate-50 flex flex-col justify-between space-y-3 text-xs"
                >
                  <div className="space-y-1.5">
                    <div className="flex items-center justify-between">
                      <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-100 text-blue-900 border border-blue-200">
                        {mat.category}
                      </span>
                      <span className="font-mono text-slate-500 text-[10px]">{mat.fileType} • {mat.fileSize}</span>
                    </div>
                    <h4 className="font-bold text-sm text-slate-900">{mat.title}</h4>
                    <p className="text-slate-600 leading-relaxed text-[11px]">{mat.description}</p>
                  </div>

                  <div className="flex items-center justify-between pt-2 border-t border-slate-200 text-[11px] text-slate-500">
                    <span>Uploaded: {mat.uploadDate}</span>
                    <span className="text-emerald-700 font-semibold">{mat.uploadedBy}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Grade Edit Modal */}
      {editingGrade && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4 border border-slate-200 animate-in fade-in">
            <h3 className="font-bold text-slate-900 text-base">
              Edit Marks: {editingGrade.subjectName}
            </h3>

            <form onSubmit={handleSaveGradeForm} className="space-y-3 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">COURSEWORK (/30)</label>
                  <input
                    type="number"
                    max={30}
                    min={0}
                    value={editingGrade.courseworkScore}
                    onChange={e => setEditingGrade({ ...editingGrade, courseworkScore: Number(e.target.value) })}
                    className="w-full p-2 border border-slate-300 rounded font-mono"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">MIDTERM TEST (/20)</label>
                  <input
                    type="number"
                    max={20}
                    min={0}
                    value={editingGrade.midtermScore}
                    onChange={e => setEditingGrade({ ...editingGrade, midtermScore: Number(e.target.value) })}
                    className="w-full p-2 border border-slate-300 rounded font-mono"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">PRACTICALS (/10)</label>
                  <input
                    type="number"
                    max={10}
                    min={0}
                    value={editingGrade.practicalScore}
                    onChange={e => setEditingGrade({ ...editingGrade, practicalScore: Number(e.target.value) })}
                    className="w-full p-2 border border-slate-300 rounded font-mono"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">FINAL EXAM (/40)</label>
                  <input
                    type="number"
                    max={40}
                    min={0}
                    value={editingGrade.finalExamScore}
                    onChange={e => setEditingGrade({ ...editingGrade, finalExamScore: Number(e.target.value) })}
                    className="w-full p-2 border border-slate-300 rounded font-mono"
                  />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">LECTURER REMARKS</label>
                <input
                  type="text"
                  value={editingGrade.remarks}
                  onChange={e => setEditingGrade({ ...editingGrade, remarks: e.target.value })}
                  className="w-full p-2 border border-slate-300 rounded text-xs"
                />
              </div>

              <div className="flex justify-end gap-2 pt-3">
                <button
                  type="button"
                  onClick={() => setEditingGrade(null)}
                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded shadow"
                >
                  Save Marks & GPA
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* New Assignment Modal */}
      {showNewAsnModal && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4 border border-slate-200 animate-in fade-in">
            <h3 className="font-bold text-slate-900 text-base">
              Create Assignment: {selectedCourse.name}
            </h3>

            <form onSubmit={handleCreateAssignment} className="space-y-3 text-xs">
              <div>
                <label className="block font-semibold text-slate-700 mb-1">ASSIGNMENT TITLE *</label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Cisco Packet Tracer VLAN Implementation"
                  value={asnForm.title}
                  onChange={e => setAsnForm({ ...asnForm, title: e.target.value })}
                  className="w-full p-2 border border-slate-300 rounded text-xs"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">INSTRUCTIONS</label>
                <textarea
                  rows={3}
                  required
                  placeholder="Detailed requirements, file formats, and submission criteria..."
                  value={asnForm.instructions}
                  onChange={e => setAsnForm({ ...asnForm, instructions: e.target.value })}
                  className="w-full p-2 border border-slate-300 rounded text-xs"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">DUE DATE & TIME</label>
                  <input
                    type="text"
                    value={asnForm.dueDate}
                    onChange={e => setAsnForm({ ...asnForm, dueDate: e.target.value })}
                    className="w-full p-2 border border-slate-300 rounded text-xs font-mono"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">MAX MARKS</label>
                  <input
                    type="number"
                    value={asnForm.totalMarks}
                    onChange={e => setAsnForm({ ...asnForm, totalMarks: Number(e.target.value) })}
                    className="w-full p-2 border border-slate-300 rounded font-mono"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-3">
                <button
                  type="button"
                  onClick={() => setShowNewAsnModal(false)}
                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded shadow"
                >
                  Publish Assignment
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* New Material Modal */}
      {showNewMatModal && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4 border border-slate-200 animate-in fade-in">
            <h3 className="font-bold text-slate-900 text-base">
              Upload Study Material: {selectedCourse.name}
            </h3>

            <form onSubmit={handleUploadMaterial} className="space-y-3 text-xs">
              <div>
                <label className="block font-semibold text-slate-700 mb-1">MATERIAL TITLE *</label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Subnetting & IP Addressing Guide 2026"
                  value={matForm.title}
                  onChange={e => setMatForm({ ...matForm, title: e.target.value })}
                  className="w-full p-2 border border-slate-300 rounded text-xs"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">DESCRIPTION</label>
                <textarea
                  rows={2}
                  value={matForm.description}
                  onChange={e => setMatForm({ ...matForm, description: e.target.value })}
                  className="w-full p-2 border border-slate-300 rounded text-xs"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">CATEGORY</label>
                  <select
                    value={matForm.category}
                    onChange={e => setMatForm({ ...matForm, category: e.target.value as any })}
                    className="w-full p-2 border border-slate-300 rounded text-xs"
                  >
                    <option value="Lecture Notes">Lecture Notes</option>
                    <option value="Past Exam Paper">Past Exam Paper</option>
                    <option value="Syllabus">Syllabus</option>
                    <option value="Lab Manual">Lab Manual</option>
                  </select>
                </div>

                <div>
                  <label className="block font-semibold text-slate-700 mb-1">EXAM BOARD</label>
                  <input
                    type="text"
                    value={matForm.examBoard}
                    onChange={e => setMatForm({ ...matForm, examBoard: e.target.value })}
                    className="w-full p-2 border border-slate-300 rounded text-xs"
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-3">
                <button
                  type="button"
                  onClick={() => setShowNewMatModal(false)}
                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded shadow"
                >
                  Upload Material
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};