const { useState, useEffect } = React;

const K4_STORAGE_KEY = 'k4Filters';

const FormatK4 = () => {
  const [courses, setCourses] = useState([]);
  const [exams, setExams] = useState([]);
  const [students, setStudents] = useState([]);
  const [allCourses, setAllCourses] = useState([]);
  
  const [selectedCourse, setSelectedCourse] = useState('');
  const [courseSearchQuery, setCourseSearchQuery] = useState('');
  const [selectedExam, setSelectedExam] = useState('');
  
  const [marks, setMarks] = useState({});
  const [loading, setLoading] = useState(false);
  const [globalMaxMarks, setGlobalMaxMarks] = useState(50);
  const [bulkMarks, setBulkMarks] = useState('');
  
  const [showCopyModal, setShowCopyModal] = useState(false);
  const [copySourceCourse, setCopySourceCourse] = useState('');
  const [copySourceFormat, setCopySourceFormat] = useState('K4');

  const applyBulkMarks = () => {
      if (bulkMarks === '') return;
      const v = Math.max(0, parseFloat(bulkMarks));
      const newMarks = {...marks};
      Object.keys(newMarks).forEach(k => {
          newMarks[k].marks_obtained = v;
      });
      setMarks(newMarks);
  };

  useEffect(() => {
    fetch('/api/courses').then(r=>r.json()).then(courseData => {
      setAllCourses(courseData);
      fetch('/api/exams').then(r=>r.json()).then(examData => {
        setExams(examData);
        const saved = (() => { try { return JSON.parse(localStorage.getItem(K4_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);
      });
    });
  }, []);

  // 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 hasPractical = parseFloat(c.sa_pr_max) > 0;
      const isEven = parseInt(c.semester) % 2 === 0;
      return hasPractical && (isSummer ? isEven : !isEven);
    });
    setCourses(filtered);
    
    // Auto-select first valid course if current selection is invalid for this term
    if (filtered.length > 0 && !filtered.find(c => String(c.id) === String(selectedCourse))) {
      const saved = (() => { try { return JSON.parse(localStorage.getItem(K4_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(K4_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 Max Marks from the selected course's sa_pr_max
  useEffect(() => {
    if (selectedCourse && courses.length > 0) {
      const course = courses.find(c => String(c.id) === String(selectedCourse));
      if (course && parseFloat(course.sa_pr_max) > 0) {
        setGlobalMaxMarks(parseFloat(course.sa_pr_max));
      }
    }
  }, [selectedCourse, courses]);

  const fetchData = async () => {
    if(!selectedCourse || !selectedExam) return alert("Select Term and Course first.");
    setLoading(true);
    
    try {
      const [eligibleData, marksDataRaw, rosterData] = await Promise.all([
        fetch(`/api/courses/${selectedCourse}/eligible-students?exam_id=${selectedExam}`).then(r=>r.json()),
        fetch(`/api/k4-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}`).then(r=>r.json()),
        fetch(`/api/exams/${selectedExam}/roster`).then(r=>r.json())
      ]);
      
      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 : '' };
      }) : [];
      mappedStudents.sort((a,b) => String(a.enrollment_no || '').localeCompare(String(b.enrollment_no || '')));
      setStudents(mappedStudents);
      
      const newMarks = {};
      mappedStudents.forEach(s => {
         const existing = Array.isArray(marksDataRaw) ? marksDataRaw.find(m => m.student_id === s.id) : null;
         newMarks[s.id] = {
            max_marks: existing ? existing.max_marks : globalMaxMarks,
            marks_obtained: existing && existing.marks_obtained !== null ? existing.marks_obtained : ''
         };
      });
      setMarks(newMarks);
      setLoading(false);
    } catch(err) {
      console.error(err);
      setLoading(false);
    }
  };

  const handleMarkChange = (studentId, val) => {
    let v;
    if (val === '') v = '';
    else if (parseFloat(val) === 401) v = 401;
    else v = Math.max(0, parseFloat(val));
    setMarks({ ...marks, [studentId]: { ...marks[studentId], marks_obtained: v }});
  };

  const applyGlobalMaxMarks = () => {
     const newMarks = {...marks};
     Object.keys(newMarks).forEach(k => {
         newMarks[k].max_marks = globalMaxMarks;
     });
     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 K4 marks for ${course?.code || 'this course'}?\n\nThis cannot be undone!`)) return;
       try {
           const res = await fetch(`/api/k4-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}`, { method: 'DELETE' });
           if (res.ok) { alert("All K4 data deleted successfully."); fetchData(); }
           else alert("Failed to delete data.");
       } catch(e) { alert("Error deleting data."); }
  };

  const handleSave = () => {
    if(!selectedCourse || !selectedExam) return alert("Select Term and Course");
    if(students.length===0) return alert("No students in selected roster.");
    
    const marksData = students.map(s => ({
       student_id: s.id,
       max_marks: marks[s.id].max_marks,
       marks_obtained: marks[s.id].marks_obtained
    }));

    setLoading(true);
    fetch('/api/k4-assessments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ exam_id: selectedExam, course_id: selectedCourse, marksData })
    })
    .then(r=>r.json())
    .then(data => {
        setLoading(false);
        alert(data.message || "K4 Marks saved successfully!");
        fetchData();
    })
    .catch(err => {
        setLoading(false);
        alert("Failed to save K4 marks");
    });
  };

  const handleCopyExternalMarks = async () => {
       if (!copySourceCourse) return alert("Select source course.");
       setLoading(true);
       try {
           let endpoint = '';
           if (copySourceFormat === 'K3') endpoint = `/api/lab-assessments?exam_id=${selectedExam}&course_id=${copySourceCourse}`;
           else if (copySourceFormat === 'K4') endpoint = `/api/k4-assessments?exam_id=${selectedExam}&course_id=${copySourceCourse}`;
           else if (copySourceFormat === 'K6') endpoint = `/api/sla-assessments?exam_id=${selectedExam}&course_id=${copySourceCourse}`;
           
           const res = await fetch(endpoint + '&t=' + Date.now());
           const extMarks = await res.json();
           
           if (!Array.isArray(extMarks) || extMarks.length === 0) {
               alert("No marks found in the source selection. Ensure marks are entered for the selected combination.");
               setLoading(false); return;
           }

           const newMarks = { ...marks };
           students.forEach(s => {
               const sMarks = extMarks.filter(m => m.student_id === s.id);
               if (sMarks.length > 0) {
                    if (copySourceFormat === 'K3') {
                         const sourceC = courses.find(c => c.id == copySourceCourse);
                         const SourceFA = sourceC ? parseFloat(sourceC.fa_pr_max) : 0; 
                         let sum = 0;
                         sMarks.forEach(m => sum += (parseFloat(m.process_marks)||0) + (parseFloat(m.product_marks)||0));
                         let avg = sum / sMarks.length;
                         if (SourceFA > 0) {
                              newMarks[s.id] = { ...newMarks[s.id], marks_obtained: Math.round((avg / SourceFA) * globalMaxMarks) };
                         }
                    } else if (copySourceFormat === 'K4') {
                         const rec = sMarks[0];
                         const sourceC = courses.find(c => c.id == copySourceCourse);
                         if (rec && rec.marks_obtained !== null && rec.marks_obtained !== undefined) {
                              const obtained = parseFloat(rec.marks_obtained);
                              const max = parseFloat(rec.max_marks) || parseFloat(sourceC?.sa_pr_max) || 0;
                              if (max > 0) {
                                   newMarks[s.id] = { ...newMarks[s.id], marks_obtained: Math.round((obtained / max) * globalMaxMarks) };
                              }
                         }
                    } else if (copySourceFormat === 'K5') {
                         const sourceC = courses.find(c => c.id == copySourceCourse);
                         let sum = 0; let totalMax = 0; let count = 0;
                         sMarks.forEach(m => {
                             if (m.marks_obtained !== null && m.marks_obtained !== undefined) {
                                 sum += parseFloat(m.marks_obtained) || 0;
                                 totalMax += parseFloat(m.max_marks) || parseFloat(sourceC?.fa_th_max) || 0;
                                 count++;
                             }
                         });
                         if (count > 0 && totalMax > 0) {
                              newMarks[s.id] = { ...newMarks[s.id], marks_obtained: Math.round((sum / totalMax) * globalMaxMarks) };
                         }
                    } else if (copySourceFormat === 'K6') {
                         let sum = 0;
                         sMarks.forEach(m => sum += (parseFloat(m.marks)||0));
                         const sourceC = courses.find(c => c.id == copySourceCourse);
                         const slaMax = sourceC ? parseFloat(sourceC.sla_max) : 0;
                         if (slaMax > 0) {
                              newMarks[s.id] = { ...newMarks[s.id], marks_obtained: Math.round((sum / slaMax) * globalMaxMarks) };
                         }
                    }
               }
           });
           setMarks(newMarks);
           setShowCopyModal(false);
           alert(`External ${copySourceFormat} marks seamlessly imported and dimensionally scaled to your Max Marks Cap (${globalMaxMarks})!`);
       } catch (err) {
           console.error(err);
           alert("Failed to copy external marks.");
       }
       setLoading(false);
  };

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

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

  const handleExportExcel = () => {
    if (!selectedCourse || !selectedExam) return alert('Select Term and Course first.');
    if (students.length === 0) return alert('No students to export!');
    
    const courseObj = courses.find(c => String(c.id) === String(selectedCourse));
    const examObj = exams.find(e => String(e.id) === String(selectedExam));
    
    const wsData = [];
    
    wsData.push(['', '', '', '', 'CIAAN \u2013 2023']);
    wsData.push(['', '', '', '', 'K4']);
    wsData.push(['For AICTE Diploma Engineering Courses', '', '', '', 'wef - 2023-24']);
    wsData.push(['', 'Maharashtra State Board of Technical Education', '', '', '']);
    wsData.push(['', 'SUMMATIVE ASSESSMENT OF PRACTICAL (SA-PR)', '', '', '']);
    wsData.push([]);
    wsData.push(['Institute Name:', 'Government Polytechnic Vikramgad', '', 'Institute Code:', '1547']);
    const acYear = examObj ? (examObj.season === 'Winter' ? `${examObj.year}-${String(Number(examObj.year)+1).slice(-2)}` : `${Number(examObj.year)-1}-${String(examObj.year).slice(-2)}`) : '';
    wsData.push(['Academic Year:', acYear, '', 'Exam: Winter / Summer...................', '']);
    wsData.push(['Programme:', '', 'Course:', courseObj ? courseObj.name : '', 'Course Code: ' + (courseObj ? courseObj.code : '')]);
    
    const mMax = Object.values(marks)[0]?.max_marks || globalMaxMarks;
    wsData.push(['Semester:', courseObj ? courseObj.semester + 'K' : '', `Marks Max: ${mMax}`, `Marks Minimum: ${Math.ceil(mMax * 0.4)}`, 'Date of Examination:']);
    wsData.push([]);
    
    wsData.push(['Sr. No.', 'Enrollment No.', 'Exam Seat Number', 'Name of the Student', `Marks obtained in SA part of Practical as per L-A Scheme (Max Marks ${mMax})`]);
    
    students.forEach((s, index) => {
       wsData.push([
          index + 1,
          s.enrollment_no || '',
          s.seat_number || '', // Exam Seat Number fetched natively
          s.full_name || '',
          marks[s.id]?.marks_obtained !== '' ? marks[s.id].marks_obtained : ''
       ]);
    });
    
    wsData.push([]);
    wsData.push(['Signature of Faculty', '', '', '', 'Signature of External Examiner']);
    wsData.push(['Name', '', '', '', 'Name']);
    wsData.push(['', '', '', '', 'Designation:']);
    wsData.push(['', '', '', '', 'Institute Code:']);
    wsData.push(['', '', '', '', 'Mobile No.:']);
    
    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: { vertical: 'center', horizontal: 'center', wrapText: cellAddress.r >= 11 },
           font: { name: 'Times New Roman', sz: cellAddress.r >= 11 ? 11 : 12, bold: cellAddress.r < 5 || cellAddress.r === 11 }
       };
       if (cellAddress.r >= 11 && cellAddress.r < wsData.length - 6) {
           ws[key].s.border = { top: {style:'thin'}, bottom: {style:'thin'}, left: {style:'thin'}, right: {style:'thin'} };
       }
    }
    
    ws['!merges'] = [
      { s: {r:3, c:1}, e: {r:3, c: 4} },
      { s: {r:4, c:1}, e: {r:4, c: 4} },
    ];
    
    ws['!cols'] = [
        {wch: 8}, {wch: 15}, {wch: 18}, {wch: 35}, {wch: 25}
    ];

    const wb = window.XLSX.utils.book_new();
    window.XLSX.utils.book_append_sheet(wb, ws, "K4 SA-PR");
    window.XLSX.writeFile(wb, `K4_${courseObj?.code || 'SA'}.xlsx`);
  };

  return (
    <div className="flex flex-col gap-6 animate-fade-in-up pb-12">
      <div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Format K4: SA-PR</h1>
          <p className="text-sm text-gray-500 mt-1">Summative Assessment of Practical Marks Tracker.</p>
        </div>
      </div>

      <div className="bg-white border text-sm text-gray-700 border-gray-200 flex flex-wrap gap-4 items-end p-4 rounded-xl shadow-sm">
         <div className="w-[180px]">
           <label className="text-[10px] font-bold text-gray-500 uppercase block mb-1">Target Academic Term</label>
           <select value={selectedExam} onChange={e=>setSelectedExam(e.target.value)} className="w-full border border-gray-300 rounded px-3 py-2 outline-none focus:border-red-500 font-medium bg-red-50/20 border-l-4 border-l-red-500 text-red-900">
             <option value="">Select Term...</option>
             {exams.map(e => <option key={e.id} value={e.id}>{e.season} {e.year}</option>)}
           </select>
         </div>
         <div className="w-1/4 min-w-[200px]">
           <label className="text-[10px] font-bold text-gray-500 uppercase block mb-1">Target Course</label>
           <input 
              type="text" 
              placeholder="Search Code/Name..." 
              value={courseSearchQuery} 
              onChange={e => setCourseSearchQuery(e.target.value)} 
              className="w-full border-b border-gray-200 px-1 py-0.5 text-xs bg-white mb-1 focus:border-blue-500 outline-none"
           />
           <select value={selectedCourse} onChange={e=>setSelectedCourse(e.target.value)} className="w-full border border-gray-300 rounded px-3 py-2 outline-none focus:border-blue-500 font-medium">
             {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>
         <button onClick={fetchData} disabled={loading} className="bg-gray-900 hover:bg-black text-white px-5 py-2 rounded shadow transition font-bold">
           Load Roster
         </button>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
         <div className="px-5 py-4 bg-gray-50 border-b border-gray-200 flex flex-wrap justify-between items-center gap-4">
             <div className="flex items-center gap-6">
                 <div className="flex items-center gap-2">
                     <span className="text-xs font-bold text-gray-500 uppercase">Max Marks Scheme:</span>
                     <input type="number" value={globalMaxMarks} onChange={e=>setGlobalMaxMarks(e.target.value)} className="w-16 border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-blue-500 text-center font-bold text-blue-800 bg-blue-50" />
                     <button onClick={applyGlobalMaxMarks} className="bg-white border border-gray-300 text-gray-700 hover:bg-gray-100 px-2 py-1 rounded text-[10px] font-bold shadow-sm transition">
                        SET
                     </button>
                 </div>
                 <div className="flex items-center gap-2 border-l border-gray-200 pl-6">
                     <span className="text-xs font-bold text-gray-500 uppercase">Input Marks:</span>
                     <input type="number" value={bulkMarks} onChange={e=>setBulkMarks(e.target.value)} placeholder="0" className="w-16 border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-emerald-500 text-center font-bold text-emerald-800 bg-emerald-50" />
                     <button onClick={applyBulkMarks} className="bg-white border border-gray-300 text-gray-700 hover:bg-emerald-50 hover:border-emerald-300 px-2 py-1 rounded text-[10px] font-bold shadow-sm transition">
                        COPY ALL
                     </button>
                 </div>
             </div>
             
             <div className="flex gap-2">
                 <button onClick={handleDeleteAllData} className="bg-white border border-red-300 text-red-700 hover:bg-red-600 hover:text-white px-4 py-1.5 rounded text-xs font-bold uppercase tracking-wider shadow-sm transition flex gap-1 items-center">
                    <svg className="w-4 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 All Data
                 </button>
                 <button onClick={handleClearAll} className="bg-white border border-red-200 text-red-600 hover:bg-red-50 px-4 py-1.5 rounded text-xs font-bold uppercase tracking-wider shadow-sm transition flex gap-1 items-center">
                    Clear UI
                 </button>
                 <button onClick={() => setShowCopyModal(true)} className="bg-white border border-purple-200 text-purple-700 hover:bg-purple-50 px-4 py-1.5 rounded text-xs font-bold uppercase tracking-wider shadow-sm transition flex gap-1 items-center">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg>
                    Import Average
                 </button>
                 <button onClick={handleExportExcel} className="bg-white border border-teal-200 text-teal-700 hover:bg-teal-50 px-4 py-1.5 rounded text-xs font-bold uppercase tracking-wider shadow-sm transition flex gap-1 items-center">
                    Print K4 Format
                 </button>
                 <button onClick={handleSave} disabled={loading} className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2 rounded shadow transition text-sm">
                    Commit & Save Marks
                 </button>
             </div>
         </div>

         <div className="overflow-x-auto">
            <table className="w-full text-left text-sm text-gray-700">
               <thead className="bg-gray-100/50 text-gray-500 font-bold uppercase text-[10px] tracking-widest border-b border-gray-200">
                  <tr>
                     <th className="px-4 py-3 w-16 text-center">Sr. No.</th>
                     <th className="px-4 py-3 w-40">Enrollment No.</th>
                     <th className="px-4 py-3 w-40 text-center">Exam Seat Number</th>
                     <th className="px-4 py-3 min-w-[200px]">Name of the Student</th>
                     <th className="px-4 py-3 text-center bg-blue-50 shadow-inner w-40 border-l border-r border-blue-100">SA Achieved (Max {globalMaxMarks})</th>
                     <th className="px-4 py-3 text-center w-16">Clear</th>
                  </tr>
               </thead>
               <tbody className="divide-y divide-gray-100">
                  {students.map((s, index) => (
                     <tr key={s.id} className="hover:bg-gray-50 group">
                        <td className="px-4 py-2 text-center font-mono font-bold text-gray-400">{index + 1}</td>
                        <td className="px-4 py-2 font-mono text-gray-600">{s.enrollment_no}</td>
                        <td className="px-4 py-2 font-mono text-center font-bold text-gray-500">{s.seat_number || '-'}</td>
                        <td className="px-4 py-2 font-bold text-gray-800">{s.full_name}</td>
                        <td className="px-4 py-2 text-center bg-blue-50/50 border-x border-blue-50 relative">
                           {(() => {
                             const v = marks[s.id]?.marks_obtained;
                             const minMark = Math.ceil((marks[s.id]?.max_marks || globalMaxMarks) * 0.4);
                             const isBelowMin = v !== '' && v !== undefined && v !== null && v !== 401 && parseFloat(v) < minMark;
                             return (
                               <input type="number" 
                                      value={v !== '' && v !== undefined ? v : ''} 
                                      onChange={e=>handleMarkChange(s.id, e.target.value)} 
                                      title={isBelowMin ? `Below minimum marks (${minMark})` : ''}
                                      className={`w-full outline-none border rounded text-center font-bold py-1.5 shadow-inner transition ${isBelowMin ? 'bg-red-50 border-red-400 text-red-700 focus:border-red-500 focus:ring-1 focus:ring-red-400' : 'bg-white border-gray-200 text-blue-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'}`} />
                             );
                           })()}
                        </td>
                        <td className="px-4 py-2 text-center">
                           <button onClick={() => handleClearStudent(s.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>
                  ))}
                  {students.length === 0 && (
                     <tr><td colSpan="6" className="text-center py-12 text-gray-400 italic">No students loaded. Select parameters and Load Roster.</td></tr>
                  )}
               </tbody>
            </table>
         </div>
      </div>

      {showCopyModal && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-md flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden animate-fade-in-up border border-gray-200">
             <div className="p-6 bg-gradient-to-r from-purple-800 to-indigo-900 text-white flex justify-between items-center">
                <div>
                   <h3 className="font-bold text-xl tracking-wide">Import Extrapolated Average</h3>
                   <p className="text-sm text-purple-200 mt-1">Cross-subject dimensional scaling tool</p>
                </div>
                <button onClick={() => setShowCopyModal(false)} className="text-white hover:text-red-300 font-bold text-2xl transition hover:scale-125">&times;</button>
             </div>
             <div className="p-6 bg-gray-50 flex flex-col gap-5">
                <div>
                  <label className="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Source Course</label>
                  <select className="w-full border-2 border-gray-200 rounded-lg px-4 py-3 font-semibold text-gray-800 focus:border-purple-500 outline-none transition" value={copySourceCourse} onChange={e => setCopySourceCourse(e.target.value)}>
                    <option value="">-- Select Source Subject --</option>
                    {courses.map(c => <option key={c.id} value={c.id}>{c.code} - {c.name}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Source Assessment Metric</label>
                  <select className="w-full border-2 border-gray-200 rounded-lg px-4 py-3 font-semibold text-gray-800 focus:border-purple-500 outline-none transition" value={copySourceFormat} onChange={e => setCopySourceFormat(e.target.value)}>
                    <option value="K3">Format K3 (Formative Lab Assessment)</option>
                    <option value="K4">Format K4 (Summative SA-PR)</option>
                    <option value="K5">Format K5 (Formative TH-FA)</option>
                    <option value="K6">Format K6 (SLA MicroProject Tracker)</option>
                  </select>
                  <p className="text-xs text-gray-400 mt-3 flex items-start gap-2 bg-purple-50 p-3 rounded-lg border border-purple-100 italic">
                      <svg className="w-4 h-4 shrink-0 text-purple-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" /></svg>
                      Any marks imported will be dimensionally scaled accurately into your K4 SA-PR Maximum Cap ({globalMaxMarks}).
                  </p>
                </div>
             </div>
             <div className="p-5 bg-white border-t flex justify-end gap-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
                <button onClick={() => setShowCopyModal(false)} className="px-6 py-2.5 text-gray-600 bg-white border border-gray-300 rounded-lg font-bold hover:bg-gray-50 transition shadow-sm">Cancel</button>
                <button onClick={handleCopyExternalMarks} className="px-6 py-2.5 bg-purple-600 text-white rounded-lg font-bold hover:bg-purple-700 transition shadow-md flex items-center gap-2">
                   Fetch & Scale SA-PR Marks
                </button>
             </div>
          </div>
        </div>
      )}
    </div>
  );
};
window.FormatK4 = FormatK4;