const { useState, useEffect } = React;

const K5_STORAGE_KEY = 'k5Filters';

const FormatK5 = () => {
  const [students, setStudents] = useState([]);
  const [courses, setCourses] = useState([]);
  const [exams, setExams] = useState([]);
  const [loading, setLoading] = useState(true);
  const [marks, setMarks] = useState({});
  const [selectedCourse, setSelectedCourse] = useState('');
  const [courseSearchQuery, setCourseSearchQuery] = useState('');
  const [selectedExam, setSelectedExam] = useState('');
  const [ctMax, setCtMax] = useState({ ct1: 30, ct2: 30 });

  const [allCourses, setAllCourses] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch('/api/courses').then(res => res.json()),
      fetch('/api/exams').then(res => res.json())
    ]).then(([courseData, examData]) => {
      setAllCourses(courseData);
      setExams(examData);
      const saved = (() => { try { return JSON.parse(localStorage.getItem(K5_STORAGE_KEY)) || {}; } catch(e) { return {}; } })();
      if (saved.exam && examData.find(e => String(e.id) === String(saved.exam))) setSelectedExam(saved.exam);
      else if (examData.length > 0) setSelectedExam(examData[0].id);
      setLoading(false);
    }).catch(err => {
      console.error(err);
      setLoading(false);
    });
  }, []);

  // Dynamic filtering based on selected exam
  useEffect(() => {
    const exam = exams.find(e => String(e.id) === String(selectedExam));
    if (!exam) return;
    const isSummer = exam.season === 'Summer';
    const filtered = allCourses.filter(c => {
      const hasTheory = parseFloat(c.fa_th_max) > 0;
      const isEven = parseInt(c.semester) % 2 === 0;
      return hasTheory && (isSummer ? isEven : !isEven);
    });
    setCourses(filtered);
    
    if (filtered.length > 0 && !filtered.find(c => String(c.id) === String(selectedCourse))) {
      const saved = (() => { try { return JSON.parse(localStorage.getItem(K5_STORAGE_KEY)) || {}; } catch(e) { return {}; } })();
      if (saved.course && filtered.find(c => String(c.id) === String(saved.course))) setSelectedCourse(saved.course);
      else setSelectedCourse(filtered[0].id);
    }
  }, [selectedExam, exams, allCourses]);

  // Persist filter selections
  useEffect(() => {
    if (selectedCourse && selectedExam) {
      try { localStorage.setItem(K5_STORAGE_KEY, JSON.stringify({ course: selectedCourse, exam: selectedExam })); } catch(e) {}
    }
  }, [selectedCourse, selectedExam]);

  useEffect(() => {
    if (courses.length > 0) {
      const filtered = courses.filter(c => (c.code + ' ' + c.name).toLowerCase().includes(courseSearchQuery.toLowerCase()));
      if (filtered.length > 0 && !filtered.find(c => String(c.id) === String(selectedCourse))) {
        setSelectedCourse(filtered[0].id);
      }
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [courseSearchQuery]);

  // Auto-set CT max marks from course master fa_th_max
  useEffect(() => {
    if (selectedCourse && courses.length > 0) {
      const course = courses.find(c => String(c.id) === String(selectedCourse));
      if (course && parseFloat(course.fa_th_max) > 0) {
        const ctVal = parseFloat(course.fa_th_max);
        setCtMax({ ct1: ctVal, ct2: ctVal });
      }
    }
  }, [selectedCourse, courses]);

  const fetchData = () => {
    if (!selectedExam || !selectedCourse) return;
    setLoading(true);
    Promise.all([
      fetch(`/api/courses/${selectedCourse}/eligible-students?exam_id=${selectedExam}&t=${Date.now()}`).then(res => res.json()),
      fetch(`/api/exams/${selectedExam}/roster?t=${Date.now()}`).then(res => res.json()),
      fetch(`/api/theory-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}&t=${Date.now()}`).then(res => res.ok ? res.json() : [])
    ]).then(([eligibleData, rosterData, marksData]) => {
      const mappedStudents = Array.isArray(eligibleData) ? eligibleData.map(student => {
          const registered = Array.isArray(rosterData) ? rosterData.find(r => r.student_id === student.id) : null;
          return { ...student, seat_number: registered ? registered.seat_number : '' };
      }) : [];
      
      setStudents(mappedStudents);

      const initialMarks = {};
      mappedStudents.forEach(student => {
        const smCT1 = Array.isArray(marksData) ? marksData.find(m => m.student_id === student.id && m.test_type === 'CT1') : null;
        const smCT2 = Array.isArray(marksData) ? marksData.find(m => m.student_id === student.id && m.test_type === 'CT2') : null;
        initialMarks[student.id] = { 
            ct1: smCT1 ? smCT1.marks_obtained : '', 
            ct2: smCT2 ? smCT2.marks_obtained : '' 
        };
      });
      setMarks(initialMarks);
      setLoading(false);
    }).catch(err => {
      console.error(err);
      setLoading(false);
    });
  };

  useEffect(() => {
    fetchData();
  }, [selectedExam, selectedCourse]);

  const handleInputChange = (studentId, field, value) => {
    let numValue = parseFloat(value);
    if (isNaN(numValue)) numValue = '';
    else {
      if (field === 'ct1' && numValue > ctMax.ct1) numValue = ctMax.ct1;
      if (field === 'ct2' && numValue > ctMax.ct2) numValue = ctMax.ct2;
      if (numValue < 0) numValue = 0;
    }
    setMarks(prev => ({
      ...prev, [studentId]: { ...prev[studentId], [field]: numValue === '' ? '' : String(numValue) }
    }));
  };

  const calculateAverage = (studentId) => {
    const studentMarks = marks[studentId] || {};
    let ct1 = parseFloat(studentMarks.ct1);
    let ct2 = parseFloat(studentMarks.ct2);
    
    // Only average if both are present, or use the one present, or 0
    let validCount = 0;
    let sum = 0;
    if (!isNaN(ct1)) { sum += ct1; validCount++; }
    if (!isNaN(ct2)) { sum += ct2; validCount++; }

    if (validCount === 0) return 0;
    return sum / validCount;
  };

  const handleSave = () => {
    if (!selectedCourse || !selectedExam) return alert('Please select a course and an exam term first!');
    
    const payload = [];
    students.forEach(student => {
        if (marks[student.id]?.ct1 !== '') {
            payload.push({
                student_id: student.id,
                test_type: 'CT1',
                marks_obtained: marks[student.id]?.ct1 || 0,
                max_marks: ctMax.ct1
            });
        }
        if (marks[student.id]?.ct2 !== '') {
            payload.push({
                student_id: student.id,
                test_type: 'CT2',
                marks_obtained: marks[student.id]?.ct2 || 0,
                max_marks: ctMax.ct2
            });
        }
    });

    if (payload.length === 0) return alert('Please enter marks for at least one student.');

    fetch('/api/theory-assessments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ exam_id: selectedExam, course_id: selectedCourse, marksData: payload })
    })
    .then(res => res.json())
    .then(data => {
      alert(data.message || 'Marks saved successfully!');
      fetchData();
    })
    .catch(err => {
      console.error(err);
      alert('Failed to save marks');
    });
  };

  const handleClearAll = () => {
       if(!confirm("Are you sure you want to clear all K5 UI marks?")) return;
       const newMarks = {...marks};
       Object.keys(newMarks).forEach(k => { newMarks[k] = {ct1: '', ct2: ''}; });
       setMarks(newMarks);
  };

  const handleDeleteAllData = async () => {
       if (!selectedCourse || !selectedExam) return alert("Select course and exam term first.");
       const course = courses.find(c => String(c.id) === String(selectedCourse));
       if (!confirm(`PERMANENTLY DELETE all K5 marks for ${course?.code || 'this course'}?\n\nThis cannot be undone!`)) return;
       try {
           const res = await fetch(`/api/theory-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}`, { method: 'DELETE' });
           if (res.ok) { alert("All K5 data deleted successfully."); fetchData(); }
           else alert("Failed to delete data.");
       } catch(e) { alert("Error deleting data."); }
  };

  const handleClearStudent = (studentId) => {
       setMarks(prev => ({...prev, [studentId]: {ct1: '', ct2: ''}}));
  };

  const handleExportExcel = () => {
    if (!selectedCourse || !selectedExam) return alert('Select course and exam term first');
    const course = courses.find(c => String(c.id) === String(selectedCourse));
    const exam = exams.find(e => String(e.id) === String(selectedExam));
    
    if (!course || !exam) {
       return alert("Failed to fetch course or exam mapping. Please refresh and try again.");
    }
    
    const createRow = () => new Array(9).fill(''); // 9 Columns perfectly matching image
    
    const row0 = createRow(); row0[row0.length - 1] = "CIAAN - 2023";
    const row1 = createRow(); row1[row1.length - 1] = "K5";
    const row2 = createRow(); row2[0] = "For AICTE Diploma Engineering Course"; row2[row2.length - 1] = "wef - 2023-24";
    const row3 = createRow(); row3[4] = "Maharashtra State Board of Technical Education";
    const row4 = createRow(); row4[4] = "FORMATIVE ASSESSMENT OF THEORY (FA-TH)";
    const row5 = createRow();
    const row6 = createRow(); row6[0] = "Institute Name:"; row6[1] = "Government Polytechnic Vikramgad"; row6[2] = "Institute Code: 1547";
    const acYear = exam.season === 'Winter' ? `${exam.year}-${String(Number(exam.year)+1).slice(-2)}` : `${Number(exam.year)-1}-${String(exam.year).slice(-2)}`;
    const row7 = createRow(); row7[0] = "Academic Year"; row7[1] = acYear; row7[7] = "Exam:"; row7[8] = `${exam.season} ${exam.year}`;
    const row8 = createRow(); row8[0] = "Summer / Winter .............";
    const row9 = createRow();
    const row10 = createRow(); row10[0] = "Programme:"; row10[2] = "___________________________"; row10[4] = "Course:"; row10[5] = course.name; row10[7] = "Course Code:"; row10[8] = course.code;
    const row11 = createRow(); row11[0] = "Semester:"; row11[1] = String(course.semester) + 'K';
    const row12 = createRow();
    
    const row13 = createRow();
    row13[0] = "Roll\nNo."; row13[1] = "Enrollment\nNo."; row13[2] = "Exam Seat\nNumber"; row13[3] = "Name of the Student";
    row13[4] = `Marks of\nClass Test-1\n(Out of ${ctMax.ct1})`;
    row13[5] = `Marks of\nClass Test-2\n(Out of ${ctMax.ct2})`;
    row13[6] = "Average\nof 5\n& 6";
    row13[7] = `FA marks of\nTheory\nout of ${course.fa_th_max || 0}`;
    row13[8] = "Signature\nof\nStudent";

    const row14 = createRow();
    row14[0] = "1"; row14[1] = "2"; row14[2] = "3"; row14[3] = "4"; row14[4] = "5"; row14[5] = "6"; row14[6] = "7"; row14[7] = "8"; row14[8] = "";
    
    const wsData = [row0, row1, row2, row3, row4, row5, row6, row7, row8, row9, row10, row11, row12, row13, row14];

    students.forEach(s => {
       const srow = createRow();
       srow[0] = s.roll_no || '-';
       srow[1] = s.enrollment_no;
       srow[2] = s.seat_number || '-';
       srow[3] = s.full_name || s.name;
       
       let smCT1 = marks[s.id]?.ct1;
       let smCT2 = marks[s.id]?.ct2;
       
       srow[4] = smCT1 === '' || smCT1 === undefined ? '-' : smCT1;
       srow[5] = smCT2 === '' || smCT2 === undefined ? '-' : smCT2;
       
       let avg = calculateAverage(s.id);
       
       if ((smCT1 === '' || smCT1 === undefined) && (smCT2 === '' || smCT2 === undefined)) {
           srow[6] = '-';
           srow[7] = '-';
       } else {
           let roundedAvg = Math.ceil(avg);
           srow[6] = roundedAvg;
           srow[7] = roundedAvg;
       }
       srow[8] = '';
       
       wsData.push(srow);
    });

    wsData.push([]);
    wsData.push(["Signature of Faculty", "", "", "", "", "Signature of HoD"]);
    wsData.push(["Name", "", "", "", "", "Name"]);

    const ws = window.XLSX.utils.aoa_to_sheet(wsData);
    
    for (const key in ws) {
       if (key[0] === '!') continue;
       const cellAddress = window.XLSX.utils.decode_cell(key);
       
       ws[key].s = {
           alignment: { 
              wrapText: cellAddress.r === 13,
              vertical: 'center', 
              horizontal: (cellAddress.r >= 13 && cellAddress.c === 3) ? 'left' : (cellAddress.r < 13 && cellAddress.c === 0 ? 'left' : 'center')
           },
           font: { 
              name: 'Times New Roman', 
              sz: cellAddress.r >= 13 ? 11 : 12, 
              bold: cellAddress.r === 3 || cellAddress.r === 4 || cellAddress.r === 14 
           }
       };
       if (cellAddress.r >= 13 && cellAddress.r < wsData.length - 3) {
           ws[key].s.border = { 
              top: {style:'thin'}, bottom: {style:'thin'}, 
              left: {style:'thin'}, right: {style:'thin'} 
           };
       }
    }
    
    ws['!merges'] = [
      { s: {r:3, c:4}, e: {r:3, c: 5} },
      { s: {r:4, c:4}, e: {r:4, c: 5} },
      { s: {r:2, c:0}, e: {r:2, c: 3} }
    ];

    const widthsConfig = [
      {wch: 8}, {wch: 15}, {wch: 15}, {wch: 35}, {wch: 12}, {wch: 12}, {wch: 10}, {wch: 12}, {wch: 15}
    ];
    ws['!cols'] = widthsConfig;

    const wb = window.XLSX.utils.book_new();
    window.XLSX.utils.book_append_sheet(wb, ws, `Format_K5_FA_TH`);
    window.XLSX.writeFile(wb, `K5_FA_TH_Sheet_${course.code}.xlsx`);
  };



  if (loading) return <div className="p-8 text-center text-lg">Loading Assessment Data...</div>;

  const COL_ROLL_W = 70;
  const COL_ENROLL_W = 150;
  const COL_SEAT_W = 130;
  const COL_NAME_W = 280;
  const STICKY_TOTAL = COL_ROLL_W + COL_ENROLL_W + COL_SEAT_W + COL_NAME_W;

  const stickyCol0 = { position: 'sticky', left: 0, zIndex: 12, minWidth: COL_ROLL_W, width: COL_ROLL_W };
  const stickyCol1 = { position: 'sticky', left: COL_ROLL_W, zIndex: 12, minWidth: COL_ENROLL_W, width: COL_ENROLL_W };
  const stickyCol2 = { position: 'sticky', left: COL_ROLL_W + COL_ENROLL_W, zIndex: 12, minWidth: COL_SEAT_W, width: COL_SEAT_W };
  const stickyCol3 = { position: 'sticky', left: COL_ROLL_W + COL_ENROLL_W + COL_SEAT_W, zIndex: 12, minWidth: COL_NAME_W, width: COL_NAME_W, borderRight: '2px solid #cbd5e1' };

  const stickyHeadCol0 = { ...stickyCol0, zIndex: 32 };
  const stickyHeadCol1 = { ...stickyCol1, zIndex: 32 };
  const stickyHeadCol2 = { ...stickyCol2, zIndex: 32 };
  const stickyHeadCol3 = { ...stickyCol3, zIndex: 32 };

  return (
    <div className="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
      <div className="bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200">
        <div className="bg-gradient-to-r from-yellow-700 to-amber-700 p-6 text-white text-center shadow-inner relative">
          <h2 className="text-2xl font-bold tracking-wider">Format-K5</h2>
          <p className="text-yellow-100 text-sm mt-1 uppercase font-semibold tracking-widest">Formative Assessment of Theory (FA-TH)</p>
          <div className="absolute top-4 right-6 opacity-30 text-5xl font-black italic">TH-FA</div>
        </div>
        
        <div className="flex flex-col xl:flex-row justify-between items-start xl:items-center p-4 bg-gray-50 border-b border-gray-200 gap-4">
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 text-sm font-semibold text-gray-700 flex-wrap w-full xl:w-auto">
            <div className="flex flex-col sm:flex-row w-full sm:w-auto">
              <label className="mr-2 mb-1 sm:mb-0">Term:</label>
              <select className="border border-red-300 rounded px-2 py-1 font-bold bg-red-50 text-red-900 w-full sm:w-auto" value={selectedExam} onChange={e => setSelectedExam(e.target.value)}>
                {exams.length === 0 && <option value="">No Terms</option>}
                {exams.map(e => <option key={e.id} value={e.id}>{e.season} {e.year}</option>)}
              </select>
            </div>
            <div className="flex flex-col sm:flex-row w-full sm:w-auto">
              <label className="mr-2 mb-1 sm:mb-0">Course:</label>
              <input 
                 type="text" 
                 placeholder="Search Code/Name..." 
                 value={courseSearchQuery} 
                 onChange={e => setCourseSearchQuery(e.target.value)} 
                 className="w-full sm:w-48 border border-gray-300 rounded px-2 py-1 text-sm bg-white mb-2 sm:mb-0 outline-none sm:mr-2"
              />
              <select className="border border-gray-300 rounded px-2 py-1 font-normal bg-white w-full sm:w-auto" value={selectedCourse} onChange={e => setSelectedCourse(e.target.value)}>
                {courses.length === 0 && <option value="">No Course</option>}
                {courses.filter(c => (c.code + ' ' + c.name).toLowerCase().includes(courseSearchQuery.toLowerCase())).map(c => <option key={c.id} value={c.id}>{c.code} - {c.name}</option>)}
              </select>
            </div>
          </div>
          
          <div className="flex flex-wrap items-center gap-4 bg-white p-3 rounded-lg border border-gray-200 shadow-sm w-full xl:w-auto">
             <div className="flex-1 sm:flex-none">
               <label className="text-[10px] font-bold text-gray-500 uppercase block leading-none mb-1">CT-1 Max</label>
               <input type="number" className="w-full sm:w-20 border border-gray-300 rounded text-center text-sm px-2 py-1 font-bold text-yellow-900" value={ctMax.ct1} onChange={e=>setCtMax(prev=>({...prev, ct1: parseInt(e.target.value)||0}))} />
             </div>
             <div className="flex-1 sm:flex-none">
               <label className="text-[10px] font-bold text-gray-500 uppercase block leading-none mb-1">CT-2 Max</label>
               <input type="number" className="w-full sm:w-20 border border-gray-300 rounded text-center text-sm px-2 py-1 font-bold text-amber-900" value={ctMax.ct2} onChange={e=>setCtMax(prev=>({...prev, ct2: parseInt(e.target.value)||0}))} />
             </div>
             {(() => { const c = courses.find(x => String(x.id) === String(selectedCourse)); return c && c.fa_th_min > 0 ? <div className="border-l pl-3 ml-2 flex flex-col justify-center"><span className="text-[10px] font-bold text-gray-500 uppercase leading-none mb-1">Min Pass</span><span className="text-sm font-black text-emerald-700">{c.fa_th_min}</span></div> : null; })()}
          </div>

          <div className="grid grid-cols-2 sm:flex flex-wrap gap-2 sm:gap-3 w-full xl:w-auto justify-start xl:justify-end">
             <button onClick={handleDeleteAllData} className="w-full sm:w-auto flex items-center justify-center gap-1.5 px-3 sm:px-5 py-2 bg-white border border-red-300 text-red-700 hover:bg-red-600 hover:text-white transition shadow rounded-md font-medium text-xs sm:text-sm">
                <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                Delete
             </button>
             <button onClick={handleClearAll} className="w-full sm:w-auto flex items-center justify-center gap-1.5 px-3 sm:px-5 py-2 bg-white border border-red-200 text-red-600 hover:bg-red-50 transition shadow rounded-md font-medium text-xs sm:text-sm">
               Clear UI
             </button>
             <button onClick={handleExportExcel} className="w-full sm:w-auto col-span-2 sm:col-span-1 flex items-center justify-center gap-1.5 px-3 sm:px-5 py-2 bg-yellow-700 hover:bg-yellow-800 transition shadow rounded-md text-white font-medium text-xs sm:text-sm shadow-yellow-800/30">
               <svg className="w-3.5 h-3.5 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
               Generate Excel
             </button>
             <button onClick={handleSave} className="w-full sm:w-auto col-span-2 sm:col-span-1 flex items-center justify-center gap-1.5 px-3 sm:px-5 py-2 bg-emerald-600 hover:bg-emerald-700 transition shadow rounded-md text-white font-medium text-xs sm:text-sm shadow-emerald-800/30">
               <svg className="w-3.5 h-3.5 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7"/></svg>
               Lock Save
             </button>
          </div>
        </div>

        <div className="overflow-auto bg-white" style={{ maxHeight: 'calc(100vh - 200px)' }}>
          <table className="w-full text-left text-sm text-gray-700 bg-white" style={{ minWidth: STICKY_TOTAL + 600 }}>
            <thead className="bg-gray-100 text-gray-600 uppercase font-bold text-[10px] tracking-wider sticky top-0 border-b border-gray-200 z-20">
              <tr>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-gray-100" style={stickyHeadCol0}>Roll<br/>No.</th>
                <th className="px-4 py-4 border-b border-r border-gray-200 bg-gray-100" style={stickyHeadCol1}>Enrollment<br/>No.</th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center text-emerald-800 bg-gray-100" style={stickyHeadCol2}>Exam Seat<br/>Number</th>
                <th className="px-4 py-4 border-b border-r border-gray-200 bg-gray-100" style={stickyHeadCol3}>Name of the Student</th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-yellow-50/70 text-yellow-900 min-w-[140px]">Marks of Class Test-1<br/><span className="lowercase font-normal opacity-70 mt-1 block">(Out of {ctMax.ct1})</span></th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-orange-50/70 text-orange-900 min-w-[140px]">Marks of Class Test-2<br/><span className="lowercase font-normal opacity-70 mt-1 block">(Out of {ctMax.ct2})</span></th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-gray-50/50 min-w-[140px]">Average of 5 & 6</th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-indigo-50/50 text-indigo-800 min-w-[140px]">FA marks of Theory<br/><span className="lowercase font-normal opacity-70 mt-1 block">out of {(() => { const c = courses.find(x => String(x.id) === String(selectedCourse)); return c ? c.fa_th_max : 0; })()}</span></th>
                <th className="px-4 py-4 border-b border-r border-gray-200 text-center bg-gray-50/30 min-w-[70px]">Signature<br/>of Student</th>
                <th className="px-4 py-4 border-b border-gray-200 text-center bg-gray-50/30 w-16">Clear</th>
              </tr>
            </thead>
            <tbody>
              {students.length === 0 && <tr><td colSpan="10" className="text-center py-12 text-gray-400 font-bold">No students registered yet for this term.</td></tr>}
              {students.map((student, index) => {
                 let rawAvg = calculateAverage(student.id);
                 let displayAvg = (marks[student.id]?.ct1 !== '' || marks[student.id]?.ct2 !== '') ? Math.ceil(rawAvg) : '-';
                 return (
                <tr key={student.id} className="hover:bg-yellow-50 border-b border-gray-100 transition-colors group">
                  <td className="px-4 py-3 text-center font-bold text-gray-400 border-r border-gray-100/50 bg-white group-hover:bg-yellow-50" style={stickyCol0}>{student.roll_no || '-'}</td>
                  <td className="px-4 py-3 font-mono text-gray-500 text-xs border-r border-gray-100/50 bg-white group-hover:bg-yellow-50" style={stickyCol1}>{student.enrollment_no}</td>
                  <td className="px-4 py-3 font-mono text-center font-bold text-emerald-700 border-r border-gray-100/50 bg-emerald-50 group-hover:bg-emerald-100" style={stickyCol2}>{student.seat_number || '-'}</td>
                  <td className="px-4 py-3 font-medium text-gray-800 border-r border-gray-100 bg-white group-hover:bg-yellow-50" style={stickyCol3}>
                     {student.full_name || student.name}
                  </td>
                  <td className="px-4 py-2 text-center bg-yellow-50/20 hover:bg-yellow-50/50 border-r border-gray-100 relative">
                    <input type="number" placeholder="-" value={marks[student.id]?.ct1 ?? ''} onChange={(e) => handleInputChange(student.id, 'ct1', e.target.value)} className="w-16 px-2 py-1 border border-yellow-200 rounded text-center text-yellow-900 font-bold focus:ring-2 focus:ring-yellow-400 outline-none shadow-sm transition-all" />
                  </td>
                  <td className="px-4 py-2 text-center bg-orange-50/20 hover:bg-orange-50/50 border-r border-gray-100 relative">
                    <input type="number" placeholder="-" value={marks[student.id]?.ct2 ?? ''} onChange={(e) => handleInputChange(student.id, 'ct2', e.target.value)} className="w-16 px-2 py-1 border border-orange-200 rounded text-center text-orange-900 font-bold focus:ring-2 focus:ring-orange-400 outline-none shadow-sm transition-all" />
                  </td>
                  <td className="px-4 py-3 text-center border-r border-gray-100">
                     <span className="inline-block bg-gray-100 text-gray-600 font-bold px-3 py-1 rounded w-10 shadow-inner">{displayAvg}</span>
                  </td>
                  <td className="px-4 py-3 text-center bg-indigo-50/30 border-r border-gray-100">
                     <span className="inline-block bg-indigo-100 text-indigo-800 font-black px-3 py-1 rounded text-lg shadow-sm border border-indigo-200/50 w-12">{displayAvg}</span>
                  </td>
                  <td className="px-4 py-3 text-center text-gray-200 min-w-[70px] border-r border-gray-100">
                  </td>
                  <td className="px-4 py-3 text-center">
                     <button onClick={() => handleClearStudent(student.id)} className="text-red-400 hover:text-red-600 transition" title="Clear Student Mark">
                         <svg className="w-5 h-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                     </button>
                  </td>
                </tr>
              )})}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

window.FormatK5 = FormatK5;