'use client';
import { useEffect, useMemo, useState } from 'react';
import { dashboardApi } from '@/api/dashboardClient';
import TeacherNav from '@/components/algebra-teacher/TeacherNav';
import TeacherClassTab from '@/components/algebra-teacher/TeacherClassTab';
import TeacherAttendanceTab from '@/components/algebra-teacher/TeacherAttendanceTab';
import TeacherHomeworkTab from '@/components/algebra-teacher/TeacherHomeworkTab';
import TeacherFeedbackHub from '@/components/algebra-teacher/TeacherFeedbackHub';
import TeacherExercisesTab from '@/components/algebra-teacher/TeacherExercisesTab';
import TeacherChapterPdfsTab from '@/components/algebra-teacher/TeacherChapterPdfsTab';
import TeacherRosterEditor from '@/components/algebra-teacher/TeacherRosterEditor';
import { Notice, buttonClass } from '@/components/algebra-teacher/TeacherUi';
import AlgebraFooter from '@/components/algebra-dashboard/AlgebraFooter';

export default function AlgebraTeacherClient() {
  const [activeTab, setActiveTab] = useState('class');
  const [data, setData] = useState(null);
  const [batchId, setBatchId] = useState('');
  const [selectedStudentId, setSelectedStudentId] = useState('');
  const [error, setError] = useState('');
  const [revision, setRevision] = useState(0);
  useEffect(() => {
    let cancelled = false;
    Promise.all([dashboardApi.entities.AlgebraBatch.listAll('batch_id'), dashboardApi.entities.AlgebraStudent.filterAll({ is_sample: false }, 'id')])
      .then(([batches, students]) => {
        if (cancelled) return;
        setData({ batches, students }); setError('');
        setBatchId(current => batches.some(b => String(b.id) === String(current)) ? current : (batches.find(b => students.some(s => String(s.batch_id) === String(b.id)))?.id || batches[0]?.id || ''));
      }).catch(e => { if (!cancelled) setError(e.message || 'Could not load teacher records.'); });
    return () => { cancelled = true; };
  }, [revision]);
  const batch = data?.batches.find(b => String(b.id) === String(batchId));
  const students = useMemo(() => data?.students.filter(s => String(s.batch_id) === String(batchId)).sort((a,b) => (a.student_first_name || '').localeCompare(b.student_first_name || '')) || [], [data, batchId]);
  const student = students.find(s => String(s.id) === String(selectedStudentId)) || students[0];
  const unassigned = data?.students.filter(s => !data.batches.some(b => String(b.id) === String(s.batch_id))) || [];
  const refresh = nextBatchId => {
    if (nextBatchId) setBatchId(String(nextBatchId));
    setRevision(r => r + 1);
  };
  const changeBatch = id => {
    setBatchId(id);
    setSelectedStudentId('');
  };
  const studentTab = Component => student ? <Component batch={batch} students={students} student={student} onSelectStudent={setSelectedStudentId} /> : <p className="rounded-xl bg-white p-6 text-sm">No real students in this batch yet. Add a student or assign an unassigned student in the Class tab.</p>;
  return <div className="min-h-screen flex flex-col bg-[#FAF6EF] font-[Axiforma,Arial,Helvetica,sans-serif] text-[#2D0A18]">
    <TeacherNav batch={batch} batches={data?.batches} onBatchChange={changeBatch} activeTab={activeTab} onTabChange={setActiveTab} />
    <main className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-6 space-y-4">
      <div className="flex justify-between items-center gap-3"><p className="text-xs text-[#6B5B4E]">Live student records · Sample students excluded{unassigned.length ? ` · ${unassigned.length} student(s) awaiting batch assignment` : ''}</p><button className={buttonClass} onClick={refresh}>Refresh data</button></div>
      <Notice error={error} />
      {!data ? <p className="py-16 text-center">{error ? 'Use Refresh data to try again.' : 'Loading teacher panel...'}</p> : <div key={`${batchId}-${revision}`} className="space-y-4">
        {activeTab === 'class' && <><TeacherRosterEditor batch={batch} batches={data.batches} students={students} unassigned={unassigned} onSaved={refresh} />{batch && <TeacherClassTab batch={batch} students={students} />}</>}
        {activeTab === 'attendance' && (batch ? <TeacherAttendanceTab batch={batch} students={students} /> : <p>Create a batch in the Class tab first.</p>)}
        {activeTab === 'homework' && studentTab(TeacherHomeworkTab)}
        {activeTab === 'feedback' && studentTab(TeacherFeedbackHub)}
        {activeTab === 'chapter-pdfs' && <TeacherChapterPdfsTab />}
        {activeTab === 'exercises' && (batch ? <TeacherExercisesTab batch={batch} students={students} /> : <p>Create a batch in the Class tab first.</p>)}
      </div>}
    </main><AlgebraFooter />
  </div>;
}