const { useState, useEffect } = React;

const ExamMaster = () => {
  const [exams, setExams] = useState([]);
  const [form, setForm] = useState({ name: '', season: 'Summer', year: new Date().getFullYear(), status: 'Active' });
  const [selectedExam, setSelectedExam] = useState(null);
  const [loading, setLoading] = useState(false);

  // Seat Assignment State
  const [filters, setFilters] = useState({ dept_code: 'CO', semester: 1, status: 'R' });
  const [roster, setRoster] = useState([]); // List of students to assign

  const fetchExams = () => {
    fetch('/api/exams')
      .then(res => res.json())
      .then(data => setExams(data))
      .catch(console.error);
  };

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

  const handleCreateExam = (e) => {
    e.preventDefault();
    setLoading(true);
    fetch('/api/exams', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form)
    })
    .then(res => {
      setLoading(false);
      if(res.ok) { fetchExams(); setForm({...form, name: ''}); }
    });
  };

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

    Promise.all([p1, p2])
      .then(([studentsList, existingRoster]) => {
        // Create an index for O(1) assignments retrieval
        const seatMap = {};
        if (Array.isArray(existingRoster)) {
          existingRoster.forEach(r => seatMap[r.student_id] = r.seat_number);
        }

        // Map shape appending previous seat numbers if they already existed
        const editShape = studentsList.map(s => ({
           student_id: s.id,
           enrollment_no: s.enrollment_no,
           full_name: s.full_name,
           student_type: filters.status,
           seat_number: seatMap[s.id] || '' 
        }));
        setRoster(editShape);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
        alert("Failed to retrieve student pipeline.");
      });
  };

  // If we open an exam, load existing roster automatically to avoid duplicates if needed, but per request they just filter and assign ranges.
  // We'll let them filter, generate, and submit overrides.
  
  const handleRippleFrom = (startIndex) => {
    const startSeatStr = roster[startIndex].seat_number;
    let currentSeat = parseInt(startSeatStr, 10);
    if(isNaN(currentSeat)) return alert("Please type a valid numeric seat identifier into this row to use as the origin for the cascade.");
    
    const newRoster = [...roster];
    for (let i = startIndex; i < newRoster.length; i++) {
      newRoster[i].seat_number = String(currentSeat).padStart(6, '0');
      currentSeat++;
    }
    setRoster(newRoster);
  };

  const handleSaveRoster = () => {
    // Submit only students with non-empty seat numbers
    const validAssignments = roster.filter(r => r.seat_number && r.seat_number.trim() !== '');
    if(validAssignments.length === 0) return alert("No valid seat numbers assigned!");
    
    setLoading(true);
    fetch(`/api/exams/${selectedExam.id}/roster`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ assignments: validAssignments })
    })
    .then(res => res.json())
    .then(() => {
       setLoading(false);
       alert("Seat Assignments Locked Successfully!");
       setRoster([]); // Clear after save to let them filter next batch
    })
    .catch(err => { setLoading(false); alert("Failed saving roster."); });
  };

  return (
    <div className="flex flex-col gap-6 animate-fade-in-up pb-12">
       {/* Roster Assignment Modal */}
       {selectedExam && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/60 backdrop-blur-sm shadow-inner">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="px-6 py-5 bg-gradient-to-r from-blue-700 to-indigo-800 text-white flex justify-between items-center shadow-inner">
              <div>
                <h2 className="text-2xl font-bold tracking-tight mb-1">Seat Binding Engine • {selectedExam.name}</h2>
                <span className="text-blue-200 text-sm font-medium tracking-wide">
                  {selectedExam.season} {selectedExam.year} | {selectedExam.status}
                </span>
              </div>
              <button onClick={() => { setSelectedExam(null); setRoster([]); }} className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              </button>
            </div>
            
            <div className="p-6 bg-gray-50 border-b border-gray-200 flex flex-col md:flex-row gap-4 justify-between items-end">
               
               <div className="flex gap-3 items-end">
                  <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="px-3 py-2 text-sm bg-white border border-gray-200 rounded shadow-sm">
                      <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" value={filters.semester} onChange={e=>setFilters({...filters, semester: parseInt(e.target.value)})} className="w-20 px-3 py-2 text-sm bg-white border border-gray-200 rounded shadow-sm" min="1" max="6"/>
                  </div>
                  <div>
                    <label className="block text-[10px] font-bold text-gray-500 uppercase mb-1">Status Class</label>
                    <select value={filters.status} onChange={e=>setFilters({...filters, status: e.target.value})} className="px-3 py-2 text-sm bg-white border border-gray-200 rounded shadow-sm font-bold">
                      <option value="R">Regular Students (R)</option>
                      <option value="X">Failed / Ex (X)</option>
                    </select>
                  </div>
                  <button onClick={handleFetchStudents} disabled={loading} className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-4 py-2 rounded shadow transition text-sm disabled:opacity-50 h-fit">
                    Fetch Roster Queue
                  </button>
               </div>

            </div>

            <div className="flex-1 overflow-y-auto style-scrollbar p-6 bg-white shrink">
              {roster.length === 0 ? (
                <div className="h-full flex items-center justify-center text-gray-400 italic text-sm">Execute a filter query to array students for seat binding.</div>
              ) : (
                <div className="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
                  <table className="w-full text-left text-sm whitespace-nowrap">
                    <thead className="bg-gray-100/80 text-[10px] font-bold uppercase tracking-widest text-gray-500 border-b border-gray-200">
                      <tr>
                        <th className="px-4 py-3">#</th>
                        <th className="px-4 py-3 border-l border-gray-200">Enrollment Vector</th>
                        <th className="px-4 py-3 w-1/2">Student Identity</th>
                        <th className="px-4 py-3 text-center bg-indigo-50 border-l border-gray-200 text-indigo-700">Allocated Seat Identifier</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100">
                      {roster.map((r, i) => (
                        <tr key={r.student_id} className="hover:bg-gray-50">
                          <td className="px-4 py-3 text-gray-400 font-mono text-xs">{i + 1}</td>
                          <td className="px-4 py-3 font-mono font-bold text-gray-600 border-l border-gray-100">{r.enrollment_no}</td>
                          <td className="px-4 py-3 font-medium text-gray-900">{r.full_name}</td>
                          <td className="px-4 py-2 bg-indigo-50/30 border-l border-gray-100 text-center flex items-center justify-center gap-2">
                             <input type="text" value={r.seat_number} onChange={e => {
                                const newRoster = [...roster];
                                newRoster[i].seat_number = e.target.value;
                                setRoster(newRoster);
                             }} className="w-32 px-3 py-1 text-center font-mono font-bold text-sm bg-white border border-indigo-200 outline-none focus:border-indigo-500 text-indigo-900 rounded shadow-inner" placeholder="######" />
                             <button onClick={() => handleRippleFrom(i)} className="text-[10px] font-bold text-indigo-700 bg-indigo-100 hover:bg-indigo-200 px-2 py-1 rounded transition uppercase">↓ Cascade</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
            
            {roster.length > 0 && (
            <div className="p-4 bg-gray-50 border-t border-gray-200 flex justify-end">
               <button onClick={handleSaveRoster} disabled={loading} className="bg-gray-900 hover:bg-black text-white font-bold px-8 py-3 rounded-lg shadow disabled:opacity-50 transition text-sm tracking-wide">
                 {loading ? 'Locking Array...' : 'Persist Seat Allocations to Master Database'}
               </button>
            </div>
            )}
          </div>
        </div>
       )}

      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Exam Administration</h1>
          <p className="text-sm text-gray-500 mt-1">Orchestrate official exam instances and linear bounds.</p>
        </div>
      </div>

      <div className="flex flex-col lg:flex-row gap-6">
        {/* ADD EXAM MODULAR FORM */}
        <div className="w-full lg:w-[35%] h-fit flex flex-col gap-5">
           <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
             <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
               <div className="w-3 h-3 bg-red-600 rounded-sm"></div>
               Construct Session Limit
             </h2>
             
             <form onSubmit={handleCreateExam} className="space-y-4">
                  <div>
                    <label className="block text-[10px] font-bold text-gray-500 mb-1 uppercase">Distinct Title</label>
                    <input required type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border border-gray-200 text-sm rounded-lg outline-none focus:border-blue-500" placeholder="e.g. Summer Phase 1 Exam" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                     <div>
                       <label className="block text-[10px] font-bold text-gray-500 mb-1 uppercase">Climatological Season</label>
                       <select value={form.season} onChange={e => setForm({...form, season: e.target.value})} className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg outline-none">
                          <option>Summer</option><option>Winter</option>
                       </select>
                     </div>
                     <div>
                       <label className="block text-[10px] font-bold text-gray-500 mb-1 uppercase">Temporal Year</label>
                       <input type="number" required value={form.year} onChange={e => setForm({...form, year: e.target.value})} className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg outline-none" />
                     </div>
                  </div>
               <div className="pt-2">
                 <button disabled={loading} type="submit" className="w-full bg-gray-900 hover:bg-black text-white font-bold py-3 rounded-xl shadow disabled:opacity-50 transition tracking-wide text-sm">
                   {loading ? 'Initializing...' : 'Construct Sequence'}
                 </button>
               </div>
             </form>
           </div>
        </div>

        {/* COMPACT DIRECTORY VIEW */}
        <div className="w-full lg:w-[65%] h-fit flex flex-col gap-4">
           <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
             <div className="px-5 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center shrink-0">
               <h2 className="text-lg font-bold text-gray-800 tracking-tight">Active Test Environments</h2>
             </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-5 py-3">Environment Array</th>
                     <th className="px-5 py-3 text-center">Cycle Marker</th>
                     <th className="px-5 py-3 text-center">Condition</th>
                     <th className="px-5 py-3 text-right">Binding Controls</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-100">
                   {exams.map(ex => (
                     <tr key={ex.id} className="hover:bg-blue-50/30 transition text-sm">
                       <td className="px-5 py-3 font-bold text-gray-900 tracking-tight">{ex.name}</td>
                       <td className="px-5 py-3 text-center font-medium text-gray-500">{ex.season} {ex.year}</td>
                       <td className="px-5 py-3 text-center">
                          <span className={`text-[10px] uppercase font-bold tracking-widest px-2 py-0.5 rounded shadow-sm ${ex.status === 'Active' ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-200 text-gray-600'}`}>
                            {ex.status}
                          </span>
                       </td>
                       <td className="px-5 py-3 text-right">
                         <button onClick={() => setSelectedExam(ex)} className="text-indigo-600 hover:text-white hover:bg-indigo-600 border border-indigo-600 bg-white font-bold text-[10px] px-3 py-1.5 rounded uppercase transition tracking-wider shadow-sm">Map Seat Arrays</button>
                       </td>
                     </tr>
                   ))}
                   {exams.length === 0 && (
                     <tr><td colSpan="4" className="text-center py-16 text-gray-400 italic text-sm">No environmental variables initialized via engine.</td></tr>
                   )}
                 </tbody>
               </table>
             </div>
           </div>
        </div>
      </div>
    </div>
  );
};

window.ExamMaster = ExamMaster;