const { useState, useEffect } = React;

const K6D_STORAGE_KEY = 'k6DirectFilters';

const FormatK6Direct = () => {
  const [students, setStudents] = useState([]);
  const [courses, setCourses] = useState([]);
  const [exams, setExams] = useState([]);
  const [loading, setLoading] = useState(true);
  
  const [activities, setActivities] = useState([]);
  
  const [selectedCourse, setSelectedCourse] = useState('');
  const [courseSearchQuery, setCourseSearchQuery] = useState('');
  const [selectedExam, setSelectedExam] = useState('');
  
  // Maps student.id -> string input
  const [targetMarks, setTargetMarks] = useState({});
  const [showCopyModal, setShowCopyModal] = useState(false);
  const [copySourceCourse, setCopySourceCourse] = useState('');
  const [copySourceFormat, setCopySourceFormat] = useState('K6');

  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(K6D_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 hasSla = parseFloat(c.sla_max) > 0;
      const isEven = parseInt(c.semester) % 2 === 0;
      return hasSla && (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(K6D_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(K6D_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]);

  const totalMaxMarks = activities.reduce((sum, act) => sum + parseFloat(act.max_marks || 0), 0);
  const currentCourseObj = courses.find(c => String(c.id) === String(selectedCourse));
  const activeSubjectSlaMax = currentCourseObj?.sla_max || 0;

  // Fetch eligible students, activities blueprint, and map existing marks
  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/sla-plans?exam_id=${selectedExam}&course_id=${selectedCourse}&t=${Date.now()}`).then(res => res.ok ? res.json() : []),
      fetch(`/api/sla-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}&t=${Date.now()}`).then(res => res.ok ? res.json() : [])
    ]).then(([eligibleData, rosterData, plansData, 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 acts = Array.isArray(plansData) ? plansData : [];
      setActivities(acts);
      const locTotalMax = acts.reduce((acc, act) => acc + parseFloat(act.max_marks || 0), 0);
      const locSlaMax = parseFloat(courses.find(c => String(c.id) === String(selectedCourse))?.sla_max || 0);
      
      const initials = {};
      mappedStudents.forEach(s => { 
           let assignedMarks = [];
           if (Array.isArray(marksData)) {
               assignedMarks = marksData.filter(m => m.student_id === s.id);
           }
           if (assignedMarks.length > 0) {
               let sum = 0;
               assignedMarks.forEach(m => sum += parseFloat(m.marks)||0);
               if (locSlaMax > 0 && locTotalMax > 0 && locSlaMax !== locTotalMax) {
                   sum = sum * (locSlaMax / locTotalMax);
               }
               initials[s.id] = String(Math.round(sum));
           } else {
               initials[s.id] = ''; 
           }
      });
      setTargetMarks(initials);
      
      setLoading(false);
    }).catch(err => {
      console.error(err);
      setLoading(false);
    });
  };

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

  const handleInputChange = (studentId, value) => {
      let numValue = parseFloat(value);
      if (isNaN(numValue)) numValue = '';
      else {
          const maxAllowed = activeSubjectSlaMax > 0 ? parseFloat(activeSubjectSlaMax) : totalMaxMarks;
          if (numValue > maxAllowed) numValue = maxAllowed;
          if (numValue < 0) numValue = 0;
      }
      setTargetMarks(prev => ({
          ...prev, [studentId]: numValue === '' ? '' : String(numValue)
      }));
  };

  const generateSlaMarks = (targetSum, activitiesList) => {
      let T = Math.round(parseFloat(targetSum));
      let N = activitiesList.length;
      let locTotalMax = activitiesList.reduce((s, a) => s + parseFloat(a.max_marks), 0);
      
      if (isNaN(T) || T <= 0 || locTotalMax <= 0) return activitiesList.map(a => 0);
      
      let rawFloats = [];
      for (let i = 0; i < N; i++) {
          let max_m = parseFloat(activitiesList[i].max_marks);
          let P_i = T * (max_m / locTotalMax);
          rawFloats.push(P_i); // Strict uniform percentage distribution
      }
      
      let rawSum = rawFloats.reduce((a,b)=>a+b, 0);
      let normFloats = rawFloats.map(val => val * (T / rawSum));
      let intArr = normFloats.map(x => Math.round(x));
      
      // We do not clamp by enforce20Rule or max_m limits anymore because the explicit user request is to exceed limits dynamically 
      // if SLA targets fundamentally scale higher than literal blueprint weights.
      
      let finalSum = intArr.reduce((a,b)=>a+b, 0);
      let loopGuard = 0;
      while(finalSum < T && loopGuard < 1000) {
          for(let i=N-1; i>=0; i--) {
              intArr[i]++; finalSum++; break; // Safely add without ceiling
          }
          loopGuard++;
      }
      
      loopGuard = 0;
      while(finalSum > T && loopGuard < 1000) {
          for(let i=0; i<N; i++) {
              if (intArr[i] > 0) {
                  intArr[i]--; finalSum--; break;
              }
          }
          loopGuard++;
      }
      
      return intArr;
  };

  const handleExecuteDistribution = async () => {
      if (activities.length === 0) return alert("Please configure the SLA activities blueprint first (in Format-K6 page).");
      
      const activeStudents = students.filter(s => targetMarks[s.id] !== '' && !isNaN(parseFloat(targetMarks[s.id])));
      let targetMessage = activeStudents.length === 0 ? `clear ALL K6 marks for ${students.length} students` : `forcibly distribute and overwrite K6 marks for ${activeStudents.length} students across ${activities.length} activities`;
      if (!confirm(`Are you sure you want to ${targetMessage}?`)) {
          return;
      }

      setLoading(true);
      let allPayloads = [];

      activeStudents.forEach(student => {
          let S = parseFloat(targetMarks[student.id]);
          let T = S;
          if (activeSubjectSlaMax > 0 && totalMaxMarks > 0 && parseFloat(activeSubjectSlaMax) !== totalMaxMarks) {
              T = Math.round(S * (totalMaxMarks / parseFloat(activeSubjectSlaMax)));
          }
          let sequence = generateSlaMarks(T, activities);

          sequence.forEach((M, index) => {
              allPayloads.push({
                 student_id: student.id,
                 activity_no: activities[index].activity_no,
                 marks: M
              });
          });
      });

      try {
          const res = await fetch('/api/sla-assessments', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ 
                  exam_id: selectedExam, 
                  course_id: selectedCourse,
                  marksData: allPayloads,
                  student_ids: students.map(s => s.id)
              })
          });
          if(res.ok) alert(`Distribution Execution Complete.\nSLA Activities Successfully Synchronized!`);
          else alert("Failed saving SLA distributions.");
      } catch(e) {
          console.error(e);
          alert("Error transmitting payload.");
      }
      
      setLoading(false);
      fetchData();
  };

  const handleExportDetailedExcel = async () => {
      if (!selectedCourse || !selectedExam) return alert('Select course and exam term first');
      if (activities.length === 0) return alert('No activities mapped for this term.');
      const course = courses.find(c => String(c.id) === String(selectedCourse));
      
      setLoading(true);
      let allMarks = [];
      try {
          const resMarks = await fetch(`/api/sla-assessments?exam_id=${selectedExam}&course_id=${selectedCourse}&t=${Date.now()}`);
          allMarks = await resMarks.json();
      } catch(err) {
          console.error("Failed to fetch marks for Excel", err);
      }
      setLoading(false);

      const wsData = [];
      const header1 = ["Roll No", "Enrollment No", "Name of Student"];
      activities.forEach(a => header1.push(`${a.activity_name} (Max ${a.max_marks})`));
      header1.push(`Blueprint Total (Max ${totalMaxMarks})`, `Converted SLA Target (Max ${activeSubjectSlaMax})`);

      wsData.push(["Detailed SLA Activities Assessment Report"]);
      wsData.push([`Course: ${course ? course.code + ' - ' + course.name : selectedCourse}`]);
      wsData.push([]);
      wsData.push(header1);

      students.forEach(s => {
          const row = [s.roll_no || '-', s.enrollment_no, s.full_name || s.name];
          let totalSum = 0;
          
          activities.forEach(act => {
              const markRecord = Array.isArray(allMarks) ? allMarks.find(m => m.student_id === s.id && String(m.activity_no) === String(act.activity_no)) : null;
              if (markRecord && markRecord.marks !== undefined && markRecord.marks !== null) {
                  const val = parseFloat(markRecord.marks);
                  row.push(val);
                  totalSum += val;
              } else {
                  row.push('-');
              }
          });
          
          row.push(totalSum > 0 ? totalSum : '-');
          if (totalSum > 0 && totalMaxMarks > 0 && activeSubjectSlaMax > 0) {
               row.push(Math.round((totalSum / totalMaxMarks) * activeSubjectSlaMax));
           } else if (totalSum > 0) {
               row.push(Math.round(totalSum));
          } else {
              row.push('-');
          }
          wsData.push(row);
      });

      const ws = window.XLSX.utils.aoa_to_sheet(wsData);
      const cols = [{wch: 8}, {wch: 15}, {wch: 30}];
      activities.forEach(() => cols.push({wch: 25}));
      cols.push({wch: 15}, {wch: 15});
      ws['!cols'] = cols;
      ws['!merges'] = [{s:{r:0, c:0}, e:{r:0, c: 5 + activities.length}}];

      const wb = window.XLSX.utils.book_new();
      window.XLSX.utils.book_append_sheet(wb, ws, `Detailed_SLA_Marks`);
      window.XLSX.writeFile(wb, `Detailed_K6_SLA_${course ? course.code : selectedCourse}.xlsx`);
  };

  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 === 'K5') endpoint = `/api/theory-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 newTargets = { ...targetMarks };
           const limit = activeSubjectSlaMax > 0 ? parseFloat(activeSubjectSlaMax) : totalMaxMarks;
           
           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 => String(c.id) === String(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) newTargets[s.id] = String(Math.round((avg / SourceFA) * limit));
                   } else if (copySourceFormat === 'K4') {
                        const rec = sMarks[0];
                        if (rec && rec.marks_obtained !== null && rec.marks_obtained !== undefined) {
                             const obtained = parseFloat(rec.marks_obtained);
                             const sourceC = courses.find(c => String(c.id) === String(copySourceCourse));
                             const max = parseFloat(rec.max_marks) || parseFloat(sourceC?.sa_pr_max) || 0;
                             if (max > 0) newTargets[s.id] = String(Math.round((obtained / max) * limit));
                        }
                   } else if (copySourceFormat === 'K5') {
                        const sourceC = courses.find(c => String(c.id) === String(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) {
                             newTargets[s.id] = String(Math.round((sum / totalMax) * limit));
                        }
                   } else if (copySourceFormat === 'K6') {
                        let sum = 0;
                        sMarks.forEach(m => sum += (parseFloat(m.marks)||0));
                        newTargets[s.id] = String(sum > limit ? limit : sum); 
                   }
               }
           });
           setTargetMarks(newTargets);
           setShowCopyModal(false);
           alert(`External ${copySourceFormat} marks seamlessly imported and dimensionally scaled to your input limit (${limit})!`);
       } 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 target sums in this list?")) return;
       const cleared = {...targetMarks};
       students.forEach(s => { cleared[s.id] = ''; });
       setTargetMarks(cleared);
  };

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

  if (loading && students.length === 0) return <div className="p-8 text-center text-lg">Loading SLA Environment...</div>;

  const COL_ROLL_W = 70;
  const COL_ENROLL_W = 150;
  const COL_SEAT_W = 130;
  const COL_NAME_W = 230;
  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-2xl overflow-hidden border border-gray-200">
        <div className="bg-gradient-to-r from-teal-700 to-emerald-900 p-6 text-white text-center shadow-inner relative overflow-hidden">
          <div className="absolute inset-0 bg-black/10"></div>
          <h2 className="text-3xl font-bold tracking-wider relative z-10 drop-shadow-md">Format-K6 SLA Auto Distribute</h2>
          <p className="text-teal-100 text-sm mt-2 font-medium relative z-10">Algorithmic Progressive Range Marks Generation based on Blueprint Extrapolation</p>
          <div className="absolute top-2 right-4 opacity-10 text-6xl font-black italic">SLA</div>
        </div>
        
        <div className="flex flex-col md:flex-row justify-between items-center p-5 bg-gray-50 border-b border-gray-200 gap-5 shadow-sm relative z-20">
          <div className="flex flex-wrap items-center gap-5 text-sm font-semibold text-gray-700">
            <div className="flex flex-col bg-white p-2 rounded border shadow-sm">
              <label className="text-[10px] text-gray-500 uppercase tracking-widest mb-1">Select Term</label>
              <select className="border-none font-bold text-red-800 bg-transparent outline-none cursor-pointer" 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 bg-white p-2 rounded border shadow-sm">
              <label className="text-[10px] text-gray-500 uppercase tracking-widest mb-1">Select 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-teal-500 outline-none"
              />
              <select className="border-none font-bold text-teal-900 bg-transparent outline-none cursor-pointer" 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 items-center gap-4 bg-white p-3 rounded-lg border border-gray-200 shadow-md">
             <div className="flex flex-col text-right">
                 <span className="text-[10px] uppercase font-bold text-gray-500 mt-1">SLA Limit</span>
                 <span className="text-xl font-black text-emerald-800">{activeSubjectSlaMax}</span>
             </div>
             <div className="h-8 w-px bg-gray-200 mx-2"></div>
             <div className="flex flex-col text-right">
                 <span className="text-[10px] uppercase font-bold text-teal-600/80 mt-1">Blueprint Sum</span>
                 <span className="text-xl font-bold text-teal-700/80">{totalMaxMarks}</span>
             </div>
          </div>
        </div>

        <div className="bg-emerald-50 border-b border-emerald-100 p-4 flex flex-col md:flex-row justify-between items-start md:items-center text-teal-900 shadow-inner gap-4">
            <div className="text-sm flex-1 w-full md:w-auto">
                <details className="group">
                    <summary className="font-bold mb-1 cursor-pointer select-none flex items-center gap-1 hover:text-teal-700 w-max">
                        Distribution Rules 
                        <svg className="w-4 h-4 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                    </summary>
                    <ul className="text-xs space-y-1 list-disc ml-5 w-full max-w-2xl text-teal-800 mt-2 pb-2">
                        <li>Equivalent Proportions: Marks are mathematically distributed in the strictly same exact percentage equally across activities!</li>
                        <li>Guaranteed to mathematically strictly maintain your requested Base Sum.</li>
                        <li>Fully weighted to proportionally honor specific Activity Max Limits dynamically.</li>
                        <li>Max marks limit dynamically constrained to highest possible activities.</li>
                    </ul>
                </details>
            </div>
            <div className="flex flex-wrap gap-2 w-full md:w-auto justify-start md:justify-end">
               <button onClick={() => setShowCopyModal(true)} className="flex-1 md:flex-none items-center justify-center gap-1.5 px-3 sm:px-4 py-2 bg-white border border-purple-200 text-purple-700 hover:bg-purple-600 hover:text-white transition-all shadow-md rounded-lg font-bold text-xs sm:text-sm flex whitespace-nowrap">
                  <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 Target
               </button>
               <button onClick={handleClearAll} className="flex-1 md:flex-none items-center justify-center gap-1.5 px-3 sm:px-4 py-2 bg-white border border-red-200 text-red-600 hover:bg-red-500 hover:text-white transition-all shadow-md rounded-lg font-bold text-xs sm:text-sm flex whitespace-nowrap">
                  <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>
                  Clear All
               </button>
               <button onClick={handleExportDetailedExcel} disabled={activities.length===0} className="flex-1 md:flex-none items-center justify-center gap-1.5 px-3 sm:px-4 py-2 bg-white border border-teal-200 text-teal-700 hover:bg-teal-600 hover:text-white transition-all shadow-md rounded-lg font-bold text-xs sm:text-sm disabled:opacity-50 flex whitespace-nowrap">
                  <svg className="w-4 h-4" 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>
                  Export Report
               </button>
               <button onClick={handleExecuteDistribution} disabled={loading || activities.length===0} className="w-full md:w-auto flex items-center justify-center gap-2 px-6 py-2.5 bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-700 hover:to-green-700 transition-all transform hover:scale-105 shadow-lg rounded-lg text-white font-bold text-sm md:text-base disabled:opacity-50 whitespace-nowrap">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                  Execute Algorithm
               </button>
            </div>
        </div>

        <div className="overflow-auto bg-white relative min-h-[400px]" style={{ maxHeight: 'calc(100vh - 200px)' }}>
          {loading && <div className="absolute inset-0 bg-white/60 backdrop-blur-[2px] z-30 flex items-center justify-center">
             <div className="bg-white p-4 rounded-xl shadow-xl flex items-center gap-3 border border-teal-100 font-bold text-teal-800">
                <svg className="animate-spin h-6 w-6 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                Processing SLA Matrix...
             </div>
          </div>}

          <table className="w-full text-left text-sm text-gray-700 bg-white" style={{ minWidth: STICKY_TOTAL + 400 }}>
            <thead className="bg-gray-100 text-gray-600 uppercase font-bold text-[11px] tracking-wider sticky top-0 border-b border-gray-300 shadow-sm z-20">
              <tr>
                <th className="px-5 py-4 border-b border-r text-center bg-gray-100" style={stickyHeadCol0}>Roll No</th>
                <th className="px-5 py-4 border-b border-r bg-gray-100" style={stickyHeadCol1}>Enrollment No</th>
                <th className="px-5 py-4 border-b border-r text-center text-teal-800 bg-gray-100" style={stickyHeadCol2}>Exam Seat No.</th>
                <th className="px-5 py-4 border-b border-r bg-gray-100" style={stickyHeadCol3}>Student Name</th>
                <th className="px-5 py-4 border-b text-center bg-teal-100/50 text-teal-900 border-l relative overflow-hidden group">
                  <div className="absolute inset-0 bg-teal-200/50 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                  <span className="relative z-10">Target Array Sum Entry<br/><span className="text-[10px] text-teal-600 tracking-normal capitalize font-semibold">(Out of {activeSubjectSlaMax > 0 ? activeSubjectSlaMax : totalMaxMarks})</span></span>
                </th>
                <th className="px-3 py-4 border-b bg-gray-50 text-center text-gray-400">Status</th>
                <th className="px-3 py-4 border-b bg-gray-50 text-center text-gray-400">Clear</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {students.map((student, index) => (
                <tr key={student.id} className="hover:bg-teal-50 border-b border-gray-100 transition-colors group">
                  <td className="px-5 py-3 text-center text-gray-500 border-r border-gray-100 bg-white group-hover:bg-teal-50" style={stickyCol0}>{student.roll_no}</td>
                  <td className="px-5 py-3 font-mono text-gray-500 border-r border-gray-100 bg-white group-hover:bg-teal-50" style={stickyCol1}>{student.enrollment_no}</td>
                  <td className="px-5 py-3 font-mono text-center font-bold text-teal-700 border-r border-gray-100 bg-teal-50 group-hover:bg-teal-100" style={stickyCol2}>{student.seat_number || '-'}</td>
                  <td className="px-5 py-3 font-semibold text-gray-800 border-r border-gray-100 bg-white group-hover:bg-teal-50 transition group-hover:text-teal-700" style={stickyCol3}>
                     {student.full_name || student.name}
                  </td>
                  <td className="px-5 py-2 text-center bg-teal-50/20 border-l relative pt-2 pb-2">
                    <input 
                       type="number" 
                       value={targetMarks[student.id] ?? ''} 
                       onChange={(e) => handleInputChange(student.id, e.target.value)} 
                       className="w-28 px-3 py-2 border-2 border-teal-200 rounded-lg text-center text-teal-900 font-extrabold text-lg focus:ring-4 outline-none focus:ring-teal-300 shadow-sm transition transform focus:scale-105 bg-white placeholder-gray-300"
                       placeholder={`e.g. ${Math.min(activeSubjectSlaMax > 0 ? parseFloat(activeSubjectSlaMax) : totalMaxMarks, 40)}`}
                    />
                  </td>
                  <td className="px-3 py-3 text-center bg-gray-50/50 text-[10px] uppercase font-bold tracking-widest text-gray-400">
                     {targetMarks[student.id] ? <span className="text-emerald-500">Ready</span> : 'Pending'}
                  </td>
                  <td className="px-3 py-3 text-center bg-gray-50/50">
                     <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>
              ))}
              {(students.length === 0 || activities.length === 0) && !loading && (
                 <tr>
                    <td colSpan="7" className="py-16 text-center text-gray-500 font-medium">
                       {activities.length === 0 ? "No Blueprint configured. Please setup SLA activities in Format K6 first." : "No students found for this combination." }
                    </td>
                 </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Copy External Marks Modal */}
      {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-teal-900 text-white flex justify-between items-center">
                <div>
                   <h3 className="font-bold text-xl tracking-wide">Import Target Base Sum</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 input limit constraint space (Max {activeSubjectSlaMax > 0 ? activeSubjectSlaMax : totalMaxMarks}).
                  </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 SLA Marks
                </button>
             </div>
          </div>
        </div>
      )}
    </div>
  );
};
window.FormatK6Direct = FormatK6Direct;