/* global React, ReactDOM */
/* global TopBar, StartScreen, MainMenu, WhyModulation, SignalsScreen,
   AMWaveScreen, SpectrumScreen, MDegreeScreen, TXScreen, RXScreen,
   SuperhetScreen, AGCScreen, FMIntroScreen, CompareScreen, QuizScreen, ResultsScreen, LESSONS */

const { useState, useEffect } = React;

const LESSON_FLOW = ['why','signals','am','spectrum','m','tx','rx','super','agc','fm','compare'];

function App() {
  const [view, setView] = useState({ name: 'start' });
  const [completed, setCompleted] = useState(new Set());
  const [quizResult, setQuizResult] = useState(null);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [view]);

  const goLesson = (id) => setView({ name: 'lesson', id });
  const goMenu = () => setView({ name: 'menu' });
  const goQuiz = () => setView({ name: 'quiz' });
  const goStart = () => setView({ name: 'start' });

  const completeAndAdvance = (id) => {
    setCompleted(prev => new Set(prev).add(id));
    const i = LESSON_FLOW.indexOf(id);
    if (i < LESSON_FLOW.length - 1) goLesson(LESSON_FLOW[i+1]);
    else goQuiz();
  };
  const goPrev = (id) => {
    const i = LESSON_FLOW.indexOf(id);
    if (i > 0) goLesson(LESSON_FLOW[i-1]);
    else goMenu();
  };

  const lessonProps = (id) => ({
    onNext: () => completeAndAdvance(id),
    onPrev: () => goPrev(id),
    onMenu: goMenu,
  });

  const lesson = LESSONS.find(l => l.id === (view.id || ''));
  const crumbs = view.name === 'start' ? null
    : view.name === 'menu' ? ['Μαθήματα']
    : view.name === 'quiz' ? ['Quiz']
    : view.name === 'results' ? ['Quiz', 'Αποτελέσματα']
    : view.name === 'lesson' && lesson ? ['Μαθήματα', lesson.title] : null;

  const progress = Math.round(completed.size / LESSON_FLOW.length * 100);

  let body;
  if (view.name === 'start') {
    body = <StartScreen onStart={() => goLesson('why')} onPractice={goMenu} onQuiz={goQuiz} progress={progress} />;
  } else if (view.name === 'menu') {
    body = <MainMenu onLesson={goLesson} onQuiz={goQuiz} completed={completed} />;
  } else if (view.name === 'lesson') {
    const m = {
      why: <WhyModulation {...lessonProps('why')} />,
      signals: <SignalsScreen {...lessonProps('signals')} />,
      am: <AMWaveScreen {...lessonProps('am')} />,
      spectrum: <SpectrumScreen {...lessonProps('spectrum')} />,
      m: <MDegreeScreen {...lessonProps('m')} />,
      tx: <TXScreen {...lessonProps('tx')} />,
      rx: <RXScreen {...lessonProps('rx')} />,
      super: <SuperhetScreen {...lessonProps('super')} />,
      agc: <AGCScreen {...lessonProps('agc')} />,
      fm: <FMIntroScreen {...lessonProps('fm')} />,
      compare: <CompareScreen {...lessonProps('compare')} />,
    };
    body = m[view.id] || <div className="page">Άγνωστο μάθημα</div>;
  } else if (view.name === 'quiz') {
    body = <QuizScreen onMenu={goMenu} onFinish={(r) => { setQuizResult(r); setView({ name:'results' }); }} />;
  } else if (view.name === 'results') {
    body = <ResultsScreen result={quizResult} onMenu={goMenu} onRetry={goQuiz} />;
  }

  return (
    <div className="app-shell">
      <TopBar
        crumbs={crumbs}
        onHome={goStart}
        status={view.name === 'lesson' && lesson && (
          <span className="mono" style={{fontSize:11, color:'var(--text-muted)'}}>
            L{String(LESSONS.findIndex(l=>l.id===lesson.id)+1).padStart(2,'0')} · {progress}% πρόοδος
          </span>
        )}
      />
      <div data-screen-label={
        view.name === 'lesson' && lesson ? `${LESSONS.findIndex(l=>l.id===lesson.id)+1} ${lesson.title}` : view.name
      }>
        {body}
      </div>
    </div>
  );
}

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