// Top-level app.
// - Screen routing via state: "start" | "q" | "result"
// - data.questions is a list of pools; on start we pick one variant per pool.
// - Reveal state kept per question (the selected index).
// - Tweak mode wiring.
// - No persistence: every reload starts fresh on the start screen.

// Pick one variant index per pool. `pools` is an array of arrays of questions.
function pickRandomPicks(pools) {
  return pools.map((pool) => Math.floor(Math.random() * pool.length));
}

// Resolve picks against pools to a flat array of active questions.
function resolveActive(pools, picks) {
  return pools.map((pool, i) => pool[Math.min(picks[i] ?? 0, pool.length - 1)]);
}

function App() {
  const [data, setData] = React.useState(() => window.DK_QUIZ_DATA);
  const [state, setState] = React.useState(() => ({
    screen: "start",
    index: 0,
    selected: {},
    picks: pickRandomPicks(window.DK_QUIZ_DATA.questions),
  }));
  const [tweakMode, setTweakMode] = React.useState(false);

  /* Tweak protocol — register listener FIRST, then announce. */
  React.useEffect(() => {
    const handler = (e) => {
      const msg = e.data || {};
      if (msg.type === "__activate_edit_mode") setTweakMode(true);
      if (msg.type === "__deactivate_edit_mode") setTweakMode(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const persistData = (next) => {
    setData(next);
    window.DK_QUIZ_DATA = next;
    // inform host so it can rewrite the EDITMODE block on disk
    try {
      window.parent.postMessage(
        { type: "__edit_mode_set_keys", edits: next },
        "*"
      );
    } catch {}
  };

  const activeQuestions = resolveActive(data.questions, state.picks);
  const total = activeQuestions.length;

  const start = () => {
    setState({
      screen: "q",
      index: 0,
      selected: {},
      picks: pickRandomPicks(data.questions),
    });
  };
  const selectAnswer = (qi, ci) => {
    setState((s) => ({ ...s, selected: { ...s.selected, [qi]: ci } }));
  };
  const next = () => {
    setState((s) => {
      if (s.index + 1 >= total) return { ...s, screen: "result" };
      return { ...s, index: s.index + 1 };
    });
  };
  const restart = () => {
    setState({
      screen: "start",
      index: 0,
      selected: {},
      picks: pickRandomPicks(data.questions),
    });
  };

  // scroll to top of the scroll container on screen transitions
  const scrollRef = React.useRef(null);
  const transitionKey = `${state.screen}:${state.index}:${state.selected[state.index] ?? "x"}`;
  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [state.screen, state.index]);

  // compute answers array (true = correct) for result screen
  const answers = activeQuestions.map((q, i) => {
    const sel = state.selected[i];
    if (sel == null) return false;
    return !!q.choices[sel]?.correct;
  });

  let screenEl = null;
  if (state.screen === "start") {
    screenEl = <StartScreen data={data} onStart={start} />;
  } else if (state.screen === "result") {
    screenEl = (
      <ResultScreen data={data} answers={answers} onRestart={restart} />
    );
  } else {
    const qi = state.index;
    const q = activeQuestions[qi];
    screenEl = (
      <QuestionScreen
        key={qi}
        question={q}
        index={qi}
        total={total}
        selected={state.selected[qi] ?? null}
        onSelect={(ci) => selectAnswer(qi, ci)}
        onNext={next}
      />
    );
  }

  return (
    <div className="dk-app">
      {/* background */}
      <div className="dk-bg" aria-hidden>
        <div className="dk-bg-dot dk-bg-dot-1" />
        <div className="dk-bg-dot dk-bg-dot-2" />
        <div className="dk-bg-dot dk-bg-dot-3" />
      </div>

      {/* phone-shaped viewport holder (responsive: full width on mobile, centred card on desktop) */}
      <div className="dk-phone" ref={scrollRef}>
        <div className="dk-screen-anim" key={transitionKey}>
          {screenEl}
        </div>
      </div>

      {tweakMode && (
        <TweakPanel
          data={data}
          onChange={persistData}
          onClose={() => setTweakMode(false)}
        />
      )}
    </div>
  );
}

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