const { useState, useEffect } = React;

const DetentionMaster = () => {
  const [exams, setExams] = useState([]);
  const [selectedExam, setSelectedExam] = useState(null);
  const [filters, setFilters] = useState({ dept_code: 'CO', semester: 1 });
  const [students, setStudents] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetch('/api/exams')
      .then(res => res.json())
      .then(setExams)
      .catch(console.error);
  }, []);

  const handleFetchStudents = () => {
    if (!selectedExam) return alert("Select an exam first.");
    setLoading(true);

    const p1 = fetch(`/api/students/filter?dept_code=${filters.dept_code}&semester=${filters.semester}`).then(res => res.json());
    const p2 = fetch(`/api/exams/${selectedExam.id}/roster`).then(res => res.json());

    Promise.all([p1, p2])
      .then(([studentList, roster]) => {
        const rosterMap = {};
        if (Array.isArray(roster)) {
          roster.forEach(r => {
            rosterMap[r.student_id] = { seat_number: r.seat_number, is_detained: r.is_detained };
          });
        }

        const editShape = studentList.map(s => ({
          student_id: s.id,
          enrollment_no: s.enrollment_no,
          full_name: s.full_name,
          seat_number: rosterMap[s.id]?.seat_number || '',
          is_detained: rosterMap[s.id]?.is_detained || false
        }));

        setStudents(editShape);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
        alert("Failed to fetch students.");
      });
  };

  const toggleDetained = (index) => {
    const newList = [...students];
    newList[index].is_detained = !newList[index].is_detained;
    setStudents(newList);
  };

  const handleSave = () => {
    if (!selectedExam) return;
    // We only save students who have a seat number (are registered) or we want to register them as detained?
    // Actually, normally they are registered first, then detained. 
    // If they aren't registered, we can still save them but they need a seat number for reports?
    // Typically seat number is assigned to all.
    
    const assignments = students.filter(s => s.seat_number).map(s => ({
      student_id: s.student_id,
      seat_number: s.seat_number,
      is_detained: s.is_detained,
      student_type: 'R' // Default to Regular
    }));

    if (assignments.length === 0) return alert("No students with seat numbers found to update.");

    setLoading(true);
    fetch(`/api/exams/${selectedExam.id}/roster`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ assignments })
    })
      .then(res => res.json())
      .then(() => {
        setLoading(false);
        alert("Detention status updated successfully!");
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
        alert("Failed to save changes.");
      });
  };

  return (
    <div className="flex flex-col gap-6 animate-fade-in-up pb-12">
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 flex flex-col md:flex-row justify-between items-end gap-4">
        <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Exam Session</label>
            <select 
              className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg outline-none focus:border-blue-500"
              value={selectedExam?.id || ''}
              onChange={e => setSelectedExam(exams.find(ex => ex.id === parseInt(e.target.value)))}
            >
              <option value="">Select Exam</option>
              {exams.map(ex => (
                <option key={ex.id} value={ex.id}>{ex.name} ({ex.season} {ex.year})</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Department</label>
            <select 
              value={filters.dept_code} 
              onChange={e => setFilters({...filters, dept_code: e.target.value})}
              className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg outline-none focus:border-blue-500"
            >
              <option>CO</option><option>IF</option><option>EJ</option><option>ME</option><option>CE</option><option>EE</option>
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Semester</label>
            <input 
              type="number" min="1" max="6"
              value={filters.semester} 
              onChange={e => setFilters({...filters, semester: parseInt(e.target.value)})}
              className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg outline-none focus:border-blue-500"
            />
          </div>
        </div>
        <button 
          onClick={handleFetchStudents} 
          disabled={loading || !selectedExam}
          className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-6 py-2.5 rounded-lg shadow-md transition disabled:opacity-50"
        >
          Load Student Roster
        </button>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
          <h2 className="text-lg font-bold text-gray-800">Detention Management Console</h2>
          <span className="text-xs text-gray-500 font-medium uppercase tracking-widest">Mark 402 Results</span>
        </div>
        
        <div className="overflow-x-auto w-full">
          <table className="w-full text-left whitespace-nowrap">
            <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-6 py-4">Enrollment No</th>
                <th className="px-6 py-4">Name of Student</th>
                <th className="px-6 py-4 text-center">Seat No</th>
                <th className="px-6 py-4 text-center">Status</th>
                <th className="px-6 py-4 text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 italic">
              {students.map((s, idx) => (
                <tr key={s.student_id} className={`hover:bg-blue-50/30 transition text-sm ${s.is_detained ? 'bg-red-50/50' : ''}`}>
                  <td className="px-6 py-4 font-mono font-bold text-gray-700">{s.enrollment_no}</td>
                  <td className="px-6 py-4 font-medium text-gray-900">{s.full_name}</td>
                  <td className="px-6 py-4 text-center font-mono text-gray-500">{s.seat_number || 'Not Registered'}</td>
                  <td className="px-6 py-4 text-center">
                    {s.is_detained ? (
                      <span className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-[10px] font-bold border border-red-200 uppercase">Detained (402)</span>
                    ) : (
                      <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-[10px] font-bold border border-emerald-200 uppercase">Eligible</span>
                    )}
                  </td>
                  <td className="px-6 py-4 text-right">
                    <button 
                      onClick={() => toggleDetained(idx)}
                      disabled={!s.seat_number}
                      className={`px-4 py-1.5 rounded-lg text-xs font-bold transition shadow-sm ${s.is_detained ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-red-600 text-white hover:bg-red-700'} disabled:opacity-30`}
                    >
                      {s.is_detained ? 'Release Detention' : 'Mark Detained'}
                    </button>
                  </td>
                </tr>
              ))}
              {students.length === 0 && !loading && (
                <tr>
                  <td colSpan="5" className="px-6 py-20 text-center text-gray-400 italic">
                    Select criteria and load student roster to manage detentions.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {students.length > 0 && (
        <div className="flex justify-end p-4 bg-gray-50 border border-gray-200 rounded-xl">
          <button 
            onClick={handleSave} 
            disabled={loading}
            className="bg-gray-900 hover:bg-black text-white font-bold px-10 py-3 rounded-xl shadow-lg transition tracking-wide"
          >
            {loading ? 'Saving Changes...' : 'Save Detention Status'}
          </button>
        </div>
      )}
    </div>
  );
};

window.DetentionMaster = DetentionMaster;