const { useState, useEffect, useMemo } = React;

const StudentAdvancementMaster = () => {
  const [students, setStudents] = useState([]);
  const [departments, setDepartments] = useState([]);
  const [exams, setExams] = useState([]);
  
  const [filterDept, setFilterDept] = useState('All');
  const [filterSem, setFilterSem] = useState('All');
  const [selectedExamId, setSelectedExamId] = useState('');
  
  const [selectedIds, setSelectedIds] = useState([]);
  const [loading, setLoading] = useState(false);
  const [actionLoading, setActionLoading] = useState(false);
  const [targetSemester, setTargetSemester] = useState('2');

  const deptCodes = ['CO', 'IF', 'EJ', 'ME', 'CE', 'EE'];

  useEffect(() => {
    fetchDepartments();
    fetchExams();
    fetchStudents();
  }, []);

  const fetchDepartments = async () => {
    try {
      const res = await fetch('/api/departments');
      if (res.ok) setDepartments(await res.json());
    } catch (err) { console.error(err); }
  };

  const fetchExams = async () => {
    try {
      const res = await fetch('/api/exams');
      if (res.ok) {
        const data = await res.json();
        setExams(data);
        if (data.length > 0) setSelectedExamId(data[0].id.toString());
      }
    } catch (err) { console.error(err); }
  };

  const fetchStudents = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/students');
      if (res.ok) {
        const data = await res.json();
        // Only show Active students for advancement usually
        setStudents(data.filter(s => s.status === 'Active' || !s.status));
      }
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  const selectedExam = useMemo(() => 
    exams.find(ex => ex.id.toString() === selectedExamId), 
    [exams, selectedExamId]
  );

  const isWinter = selectedExam?.season.toLowerCase() === 'winter';

  const filteredStudents = useMemo(() => {
    return students.filter(s => {
      const dCode = s.Department?.dept_code || '??';
      if (filterDept !== 'All' && dCode !== filterDept) return false;
      if (filterSem !== 'All' && String(s.semester) !== filterSem) return false;
      return true;
    });
  }, [students, filterDept, filterSem]);

  const handleSelectAll = (e) => {
    if (e.target.checked) {
      setSelectedIds(filteredStudents.map(s => s.id));
    } else {
      setSelectedIds([]);
    }
  };

  const toggleSelect = (id) => {
    setSelectedIds(prev => 
      prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
    );
  };

  const handleBulkUpdate = async (type, val) => {
    if (selectedIds.length === 0) return alert('Please select at least one student.');
    
    let confirmMsg = '';
    let payload = { studentIds: selectedIds };

    if (type === 'increment') {
      confirmMsg = `Advance ${selectedIds.length} students to their next semester? (Maximum Sem 6)`;
      payload.increment = true;
    } else if (type === 'fixed') {
      confirmMsg = `Move ${selectedIds.length} students to Semester ${targetSemester}?`;
      payload.semester = targetSemester;
    } else if (type === 'status') {
      confirmMsg = `Mark ${selectedIds.length} students as "${val}"?`;
      payload.status = val;
    }
      
    if (!confirm(confirmMsg)) return;

    setActionLoading(true);
    try {
      const res = await fetch('/api/students/bulk-update-semester', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (res.ok) {
        alert('Students updated successfully!');
        setSelectedIds([]);
        fetchStudents();
      } else {
        const contentType = res.headers.get("content-type");
        if (contentType && contentType.indexOf("application/json") !== -1) {
          const data = await res.json();
          alert(data.error || 'Update failed');
        } else {
          const text = await res.text();
          console.error('Server error response:', text);
          alert(`Server error (${res.status}). Please ensure the backend is restarted.`);
        }
      }
    } catch (err) {
      console.error('Fetch error:', err);
      alert('Network error or server is down. Please check the backend.');
    } finally {
      setActionLoading(false);
    }
  };

  return (
    <div className="animate-fade-in-up space-y-6 pb-20">
      {/* Header Section */}
      <div className="bg-white p-6 rounded-[2rem] shadow-xl border border-gray-100 flex flex-wrap gap-6 items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 bg-gradient-to-br from-indigo-600 to-blue-700 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
            <span className="text-2xl text-white">🚀</span>
          </div>
          <div>
            <h2 className="text-2xl font-black text-gray-900 tracking-tight">Semester Advancement</h2>
            <p className="text-xs text-gray-500 font-medium mt-1">Bulk manage student progress across academic terms</p>
          </div>
        </div>

        <div className="flex items-center gap-3 bg-gray-50 p-2 rounded-2xl border border-gray-200">
          <div className="px-3 py-1 bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col items-center">
            <span className="text-[10px] font-bold text-gray-400 uppercase">Current Term</span>
            <span className={`text-sm font-black ${isWinter ? 'text-blue-600' : 'text-orange-600'}`}>
              {selectedExam ? `${selectedExam.season} ${selectedExam.year}` : 'Select Exam'}
            </span>
          </div>
          <select 
            value={selectedExamId} 
            onChange={e => setSelectedExamId(e.target.value)}
            className="bg-transparent font-bold text-xs outline-none cursor-pointer"
          >
            {exams.map(ex => <option key={ex.id} value={ex.id}>{ex.year} - {ex.season}</option>)}
          </select>
        </div>
      </div>

      {/* Control Panel */}
      <div className="grid grid-cols-1 xl:grid-cols-12 gap-6">
        {/* Filters Sidebar */}
        <div className="xl:col-span-3 space-y-4">
          <div className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
            <h3 className="text-xs font-black text-gray-400 uppercase tracking-widest mb-4">Filters</h3>
            
            <div className="space-y-4">
              <div>
                <label className="block text-[10px] font-bold text-gray-500 mb-1 uppercase">Department</label>
                <select 
                  value={filterDept} 
                  onChange={e => setFilterDept(e.target.value)}
                  className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all"
                >
                  <option value="All">All Departments</option>
                  {deptCodes.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>

              <div>
                <label className="block text-[10px] font-bold text-gray-500 mb-1 uppercase">Current Semester</label>
                <select 
                  value={filterSem} 
                  onChange={e => setFilterSem(e.target.value)}
                  className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all"
                >
                  <option value="All">All Semesters</option>
                  {[1, 2, 3, 4, 5, 6].map(s => <option key={s} value={String(s)}>Semester {s}</option>)}
                </select>
              </div>

              <div className="pt-4 border-t border-gray-100">
                 <div className="flex items-center justify-between text-xs font-bold text-gray-500 mb-2">
                   <span>Selected</span>
                   <span className="text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">{selectedIds.length}</span>
                 </div>
                 <button 
                  onClick={() => setSelectedIds([])}
                  className="w-full py-2 text-[10px] font-black uppercase text-gray-400 hover:text-red-500 transition-colors"
                 >
                   Deselect All
                 </button>
              </div>
            </div>
          </div>

          <div className="bg-gradient-to-br from-blue-600 to-indigo-700 p-6 rounded-3xl shadow-lg text-white">
            <h3 className="text-xs font-black uppercase tracking-widest mb-4 opacity-70">Bulk Actions</h3>
            
            <div className="space-y-4">
              <button 
                onClick={() => handleBulkUpdate('increment')}
                disabled={actionLoading || selectedIds.length === 0}
                className="w-full py-3 bg-white/20 hover:bg-white/30 backdrop-blur-md rounded-2xl font-bold text-sm transition-all shadow-inner disabled:opacity-50"
              >
                Advance to Next Sem (+1)
              </button>

              <div className="pt-4 border-t border-white/10">
                <label className="block text-[10px] font-bold mb-1 uppercase opacity-70">Jump to Specific Semester</label>
                <div className="flex gap-2">
                  <select 
                    value={targetSemester} 
                    onChange={e => setTargetSemester(e.target.value)}
                    className="flex-1 bg-white/10 border border-white/20 rounded-xl px-2 py-2 text-sm font-bold outline-none"
                  >
                    {[1, 2, 3, 4, 5, 6].map(s => <option key={s} value={String(s)} className="text-gray-900">Sem {s}</option>)}
                  </select>
                  <button 
                    onClick={() => handleBulkUpdate('fixed')}
                    disabled={actionLoading || selectedIds.length === 0}
                    className="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-xl font-bold text-sm transition-all shadow-md"
                  >
                    Set
                  </button>
                </div>
              </div>

              <div className="pt-4 border-t border-white/10 grid grid-cols-2 gap-2">
                <button 
                  onClick={() => handleBulkUpdate('status', 'Passed out')}
                  disabled={actionLoading || selectedIds.length === 0}
                  className="py-2 bg-white/10 hover:bg-emerald-500 rounded-xl font-bold text-[10px] transition-all border border-white/20"
                >
                  🎓 Passed out
                </button>
                <button 
                  onClick={() => handleBulkUpdate('status', 'ATKT')}
                  disabled={actionLoading || selectedIds.length === 0}
                  className="py-2 bg-white/10 hover:bg-amber-500 rounded-xl font-bold text-[10px] transition-all border border-white/20"
                >
                  📝 ATKT
                </button>
                <button 
                  onClick={() => handleBulkUpdate('status', 'Exited')}
                  disabled={actionLoading || selectedIds.length === 0}
                  className="py-2 bg-white/10 hover:bg-red-500 rounded-xl font-bold text-[10px] transition-all border border-white/20"
                >
                  🚪 Exited
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Student Table */}
        <div className="xl:col-span-9">
          <div className="bg-white rounded-[2.5rem] shadow-xl border border-gray-100 overflow-hidden min-h-[500px]">
            <div className="p-6 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
              <div className="flex items-center gap-3">
                <input 
                  type="checkbox" 
                  className="w-5 h-5 text-blue-600 rounded-lg border-gray-300 focus:ring-blue-500" 
                  checked={filteredStudents.length > 0 && selectedIds.length === filteredStudents.length}
                  onChange={handleSelectAll}
                />
                <span className="text-sm font-black text-gray-700 uppercase tracking-tight">Select All Students</span>
              </div>
              <span className="text-[10px] font-black bg-white px-3 py-1 rounded-full border border-gray-200 text-gray-400 shadow-sm">
                Showing {filteredStudents.length} Active Records
              </span>
            </div>

            {loading ? (
              <div className="flex flex-col items-center justify-center h-96 gap-4">
                <div className="w-12 h-12 border-4 border-blue-100 border-t-blue-600 rounded-full animate-spin" />
                <p className="text-gray-400 font-bold text-xs uppercase tracking-widest animate-pulse">Scanning Student Master...</p>
              </div>
            ) : filteredStudents.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-96 text-center">
                <div className="text-6xl mb-4 grayscale opacity-20">🗂️</div>
                <h3 className="text-lg font-bold text-gray-800">No Matching Students</h3>
                <p className="text-sm text-gray-400">Try adjusting your filters to find active students.</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-left">
                  <thead>
                    <tr className="text-[10px] font-black text-gray-400 uppercase tracking-widest bg-white border-b border-gray-100">
                      <th className="px-6 py-4 w-12"></th>
                      <th className="px-6 py-4">Student Identity</th>
                      <th className="px-6 py-4">Dept / Current Sem</th>
                      <th className="px-6 py-4">Advancement Preview</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {filteredStudents.map(student => {
                      const isSelected = selectedIds.includes(student.id);
                      const currentSem = student.semester || 1;
                      const nextSem = Math.min(currentSem + 1, 6);
                      const isLastSem = currentSem === 6;
                      
                      return (
                        <tr 
                          key={student.id} 
                          className={`group transition-all hover:bg-blue-50/30 ${isSelected ? 'bg-blue-50/50' : ''}`}
                          onClick={() => toggleSelect(student.id)}
                        >
                          <td className="px-6 py-4">
                            <input 
                              type="checkbox" 
                              checked={isSelected}
                              onChange={() => {}} // Handled by tr onClick
                              className="w-5 h-5 text-blue-600 rounded-lg border-gray-300 focus:ring-blue-500 cursor-pointer"
                            />
                          </td>
                          <td className="px-6 py-4">
                            <div className="font-black text-gray-900 group-hover:text-blue-700 transition-colors">{student.full_name}</div>
                            <div className="text-[10px] font-bold text-gray-400 font-mono mt-0.5">{student.enrollment_no} • Roll {student.roll_no}</div>
                          </td>
                          <td className="px-6 py-4">
                             <div className="flex items-center gap-2">
                               <span className="text-xs font-black text-gray-700 bg-gray-100 px-2 py-1 rounded-lg border border-gray-200">
                                 {student.Department?.dept_code || '??'}
                               </span>
                               <span className="text-sm font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                                 Sem {currentSem}
                               </span>
                             </div>
                          </td>
                          <td className="px-6 py-4">
                             {isLastSem ? (
                               <div className="flex items-center gap-2">
                                 <span className="text-[10px] font-black text-emerald-600 uppercase bg-emerald-50 px-2 py-1 rounded">Graduation Eligible</span>
                               </div>
                             ) : (
                               <div className="flex items-center gap-3">
                                 <span className="text-gray-300">→</span>
                                 <span className="text-sm font-black text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100">
                                   Sem {nextSem}
                                 </span>
                                 <span className="text-[10px] font-bold text-gray-400 uppercase tracking-tighter">
                                   ({isWinter ? 'Summer' : 'Winter'} Term)
                                 </span>
                               </div>
                             )}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

window.StudentAdvancementMaster = StudentAdvancementMaster;