/* @component-map
 * App — Main container, handles auth, role detection, view switching between teacher/student
 * TopNav — Top navigation bar with branding, greeting, avatar, logout
 * TeacherSidebar — Teacher sidebar navigation
 * TeacherDashboard — Teacher dashboard with stats, upcoming sessions, top performers, activity
 * TeacherInbox — Teacher inbox for responses and requests
 * TeacherStudents — Student list management
 * TeacherSessions — Session scheduling, calendar, filtering
 * TeacherProgress — Progress tracking with averages and per-student bars
 * TeacherMaterials — Teaching materials CRUD
 * TeacherHowTo — How-to guide page
 * StudentApp — Student portal with sessions, requests, progress tabs
 * StudentSessions — Student upcoming/past sessions with accept/decline
 * StudentRequest — Student session request form
 * StudentProgress — Student score history and subject progress
 * ModalBackdrop — Modal container backdrop
 * StudentModal — Add student modal
 * EditStudentModal — Edit student modal
 * SessionModal — Schedule session modal
 * EditSessionModal — Edit session modal
 * CompleteSessionModal — Complete session modal
 * MaterialModal — Add material modal
 * Toast — Toast notification
 * @end-component-map */

import { useCollection, useAuth } from '@deplixo/sdk';
import { TopNav } from './components/TopNav.jsx';
import { TeacherApp } from './components/TeacherApp.jsx';
import { StudentApp } from './components/StudentApp.jsx';
import { useCallback, useEffect, useState } from 'react';
import { Toast } from './components/Toast.jsx';

function App() {
  const { user: currentUser, login, logout } = useAuth();
  const [role, setRole] = useState(null);
  const [matchedStudent, setMatchedStudent] = useState(null);
  const [toastMsg, setToastMsg] = useState('');
  const { items: roster, loading: rosterLoading } = useCollection('stu_roster');

  const showToast = useCallback((msg) => {
    setToastMsg(msg);
    setTimeout(() => setToastMsg(''), 2800);
  }, []);

  useEffect(() => {
    if (rosterLoading || !currentUser) return;
    const email = (currentUser.email || '').toLowerCase().trim();
    const match = roster.find(r => (r.email || '').toLowerCase().trim() === email);
    if (!match) {
      setRole('teacher');
    } else {
      setRole('student');
      setMatchedStudent(match);
    }
  }, [roster, rosterLoading, currentUser]);

  if (rosterLoading || !role) {
    return (
      <div className="loading-screen">
        <div className="loading-star">⭐</div>
        <div className="loader"></div>
        <div className="loading-text">Loading GoldStar...</div>
      </div>
    );
  }

  return (
    <>
      {role === 'teacher' && <TeacherApp user={currentUser} showToast={showToast} />}
      {role === 'student' && <StudentApp user={currentUser} matchedStudent={matchedStudent} showToast={showToast} />}
      <Toast message={toastMsg} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);