// Main app

const App = () => {
  const [role, setRole] = React.useState('student');
  const [page, setPage] = React.useState('dashboard');
  const [editMode, setEditMode] = React.useState(false);
  const [tweaks, setTweaks] = React.useState({ ...window.__TWEAKS__ });

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    const onT = () => setTweaks({ ...window.__TWEAKS__ });
    window.addEventListener('tweaks-change', onT);
    return () => { window.removeEventListener('message', onMsg); window.removeEventListener('tweaks-change', onT); };
  }, []);

  const setTweak = (k, v) => {
    window.__TWEAKS__[k] = v;
    setTweaks({ ...window.__TWEAKS__ });
    window.dispatchEvent(new Event('tweaks-change'));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  // Reset page when role changes
  const handleRoleChange = (r) => {
    setRole(r);
    if (r === 'student') setPage('dashboard');
    if (r === 'teacher') setPage('t-dashboard');
    if (r === 'admin') setPage('a-dashboard');
  };

  const renderPage = () => {
    // Exam page uses its own full-bleed layout
    if (page === 'exam') return <ExamPage onNav={setPage} />;
    return null;
  };

  // Exam page breaks out of shell
  if (page === 'exam') {
    return (
      <>
        <ExamPage onNav={setPage} />
        {editMode && <TweaksPanel tweaks={tweaks} setTweak={setTweak} />}
      </>
    );
  }

  return (
    <div className="shell" data-screen-label={`${role}-${page}`}>
      <Sidebar role={role} current={page} onNav={setPage} onRoleChange={handleRoleChange} />
      <div className="main">
        {role === 'student' && page === 'dashboard' && <StudentDashboard onNav={setPage} />}
        {role === 'student' && page === 'roadmap' && <RoadmapPage onSelect={() => setPage('subject')} />}
        {role === 'student' && page === 'subject' && <SubjectPage onNav={setPage} />}
        {role === 'student' && page === 'video' && <VideoPage onNav={setPage} />}
        {role === 'student' && page === 'result' && <ResultPage />}
        {role === 'teacher' && page === 't-dashboard' && <TeacherDashboard onNav={setPage} />}
        {role === 'teacher' && page === 't-bank' && <TeacherBank />}
        {role === 'teacher' && page === 't-subjects' && <TeacherSubjects onNav={setPage} />}
        {role === 'teacher' && page === 't-exams' && <TeacherExams />}
        {role === 'teacher' && page === 't-students' && <TeacherStudents />}
        {role === 'admin' && page === 'a-dashboard' && <AdminDashboard />}
        {role === 'admin' && page === 'a-programs' && <AdminPrograms />}
        {role === 'admin' && (page === 'a-users' || page === 'a-settings') && <AdminPrograms />}
      </div>
      {editMode && <TweaksPanel tweaks={tweaks} setTweak={setTweak} />}
    </div>
  );
};

const TweaksPanel = ({ tweaks, setTweak }) => (
  <div className="tweaks">
    <div className="tweaks-header">
      <span><Icon name="settings" size={13} style={{ marginRight: 6, verticalAlign: 'middle' }} /> Tweaks</span>
    </div>
    <div className="tweaks-body">
      <div className="tweak-group">
        <label>Layout lộ trình học</label>
        <div className="tweak-opts">
          {['tree', 'timeline', 'grid'].map(v => (
            <button key={v} className={tweaks.roadmapLayout === v ? 'active' : ''} onClick={() => setTweak('roadmapLayout', v)}>{v === 'tree' ? 'Cây' : v === 'timeline' ? 'Dòng TG' : 'Lưới'}</button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>UI phòng thi</label>
        <div className="tweak-opts">
          {[['focus','Focus'],['minimal','Minimal'],['proctor','Proctor']].map(([v,l]) => (
            <button key={v} className={tweaks.examUI === v ? 'active' : ''} onClick={() => setTweak('examUI', v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>Quiz trong video</label>
        <div className="tweak-opts">
          {[['center','Center popup'],['overlay','Overlay bottom']].map(([v,l]) => (
            <button key={v} className={tweaks.quizStyle === v ? 'active' : ''} onClick={() => setTweak('quizStyle', v)}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  </div>
);

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