/* AMTS Streaming Tool — root */

const { useState: useS, useEffect: useE, useMemo: useM } = React;
const { Masthead, Intro, Flow } = window.AMTSComponents;
const { Results } = window.AMTSResults;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "showLiveRanking": true,
  "demoMode": false
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [phase, setPhase] = useS("intro"); // intro | flow | results
  const [trainee, setTrainee] = useS({ name: "", serviceNumber: "", cohort: "", module: "Module 1 — Foundational Air Operations" });
  const [answers, setAnswers] = useS({});

  useE(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme === "dark" ? "dark" : "light");
  }, [tweaks.theme]);

  // Demo mode — pre-fill realistic answers so user can see results immediately
  useE(() => {
    if (tweaks.demoMode && Object.keys(answers).length === 0) {
      const demo = { 1: 0, 2: 2, 3: 0, 4: 1, 5: 0, 6: 2, 7: 0, 8: 0, 9: 0, 10: 3 };
      setAnswers(demo);
      setTrainee({ name: "Hayes, J.", serviceNumber: "A8 217 443", cohort: "AMTS / 2026-01", module: "Module 1 — Foundational Air Operations" });
    }
  }, [tweaks.demoMode]);

  const results = useM(() => window.AMTS_DATA.calculateResults(answers), [answers]);

  function reset() {
    if (!confirm("Reset clears all answers and returns to the brief. Continue?")) return;
    setAnswers({});
    setPhase("intro");
  }

  return (
    <div className="doc">
      <Masthead trainee={trainee} phase={phase} />

      <main style={{ marginTop: 22 }}>
        {phase === "intro" && (
          <Intro trainee={trainee} setTrainee={setTrainee} onStart={() => setPhase("flow")} />
        )}
        {phase === "flow" && (
          <Flow
            answers={answers}
            setAnswers={setAnswers}
            onSubmit={() => setPhase("results")}
            onBack={() => setPhase("intro")}
          />
        )}
        {phase === "results" && (
          <Results
            answers={answers}
            results={results}
            trainee={trainee}
            onReset={reset}
            onBack={() => setPhase("flow")}
          />
        )}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Appearance">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{ value: "light", label: "Light (paper)" }, { value: "dark", label: "Dark" }]}
          />
        </TweakSection>
        <TweakSection title="Demo">
          <TweakToggle
            label="Pre-fill answers"
            description="Skip ahead to see the report state without answering 10 questions."
            value={tweaks.demoMode}
            onChange={(v) => setTweak("demoMode", v)}
          />
          <TweakButton onClick={() => { setAnswers({}); setPhase("intro"); setTweak("demoMode", false); }}>
            Clear &amp; restart
          </TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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