// Root state machine wiring the Mine Safe Academy screens together.
(function () {
  const { AppShell, LoginScreen, Dashboard, CourseDetail, VideoLesson, Quiz } = window;

  function App() {
    const [authed, setAuthed] = React.useState(false);
    const [lang, setLang] = React.useState(window.__msLang || 'en');
    window.__msLang = lang;
    window.__msSetLang = (c) => { window.__msLang = c; setLang(c); };
    const [route, setRoute] = React.useState('dashboard');   // sidebar route
    const [view, setView] = React.useState({ name: 'dashboard' }); // dashboard | course | lesson | quiz
    const d = window.MSA_DATA;
    const course = view.courseId ? d.courses.find(c => c.id === view.courseId) : d.courses[0];

    if (!authed) return <LoginScreen onLogin={() => { setAuthed(true); setView({ name: 'dashboard' }); }} />;

    const openCourse = (id) => setView({ name: 'course', courseId: id });
    const openModule = (i) => {
      const c = d.courses.find(x => x.id === view.courseId) || d.courses[0];
      const m = (c.modules || [])[i];
      setView({ name: m && m.type === 'quiz' ? 'quiz' : 'lesson', courseId: c.id });
    };

    let content;
    if (view.name === 'dashboard') content = <Dashboard onOpenCourse={openCourse} />;
    else if (view.name === 'course') content = <CourseDetail course={course} onBack={() => setView({ name: 'dashboard' })} onOpenModule={openModule} />;
    else if (view.name === 'lesson') content = <VideoLesson course={course} onBack={() => setView({ name: 'course', courseId: course.id })} onNext={() => setView({ name: 'quiz', courseId: course.id })} />;
    else if (view.name === 'quiz') content = <Quiz onBack={() => setView({ name: 'course', courseId: course.id })} onDone={() => setView({ name: 'course', courseId: course.id })} />;

    return (
      <AppShell route={route}
        onNavigate={(r) => { setRoute(r); setView({ name: 'dashboard' }); }}
        onLogout={() => setAuthed(false)}>
        {content}
      </AppShell>
    );
  }

  window.MSA_App = App;
})();