/* 制度活用ナビ — メインアプリ(状態遷移) */
const { useState, useEffect, useRef } = React;
const { QUESTIONS, PROGRAMS, rank } = window.NAVI_DATA;

// 月次更新パスワード(運用フロー: 月初に手動更新)
const CURRENT_PASSWORD = "takuro-2026-06";

function App() {
  // phase: intro | quiz | loading | results | detail
  const [phase, setPhase] = useState("intro");
  const [qi, setQi] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [ranked, setRanked] = useState([]);
  const [unlocked, setUnlocked] = useState(false);
  const [info, setInfo] = useState({ email: "", name: "" });
  const [selectedProgram, setSelectedProgram] = useState(null);
  const advancing = useRef(false);

  function start() {
    setAnswers([]); setQi(0); setUnlocked(false); setPhase("quiz");
  }

  function pick(optIndex) {
    if (advancing.current) return;
    advancing.current = true;
    const next = answers.slice();
    next[qi] = optIndex;
    setAnswers(next);
    setTimeout(() => {
      advancing.current = false;
      if (qi < QUESTIONS.length - 1) {
        setQi(qi + 1);
      } else {
        setRanked(rank(next));
        setPhase("loading");
        setTimeout(() => setPhase("results"), 2200);
      }
    }, 240);
  }

  function back() {
    if (phase === "quiz" && qi > 0) setQi(qi - 1);
    else if (phase === "quiz" && qi === 0) setPhase("intro");
  }

  function unlock(data) {
    setInfo(data);
    setUnlocked(true);
    requestAnimationFrame(() => {
      window.scrollTo({ top: 0, behavior: "smooth" });
      const sc = document.querySelector(".scroll");
      if (sc) sc.scrollTo({ top: 0, behavior: "smooth" });
    });
  }

  function openDetail(programId) {
    const p = PROGRAMS.find((x) => x.id === programId);
    if (!p) return;
    setSelectedProgram(p);
    setPhase("detail");
    window.location.hash = "detail-" + programId;
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "smooth" }));
  }

  function backToResults() {
    setSelectedProgram(null);
    setPhase("results");
    if (window.location.hash) {
      history.pushState("", document.title, window.location.pathname + window.location.search);
    }
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "smooth" }));
  }

  // URLハッシュ変更(ブラウザ戻る/進む)を検知
  useEffect(() => {
    function onHashChange() {
      const hash = window.location.hash;
      if (hash.startsWith("#detail-")) {
        const pid = hash.slice("#detail-".length);
        const p = PROGRAMS.find((x) => x.id === pid);
        if (p && unlocked) {
          setSelectedProgram(p);
          setPhase("detail");
        }
      } else if (phase === "detail") {
        setSelectedProgram(null);
        setPhase("results");
      }
    }
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, [phase, unlocked]);

  function restart() {
    setPhase("intro"); setUnlocked(false); setSelectedProgram(null);
    if (window.location.hash) {
      history.pushState("", document.title, window.location.pathname + window.location.search);
    }
  }

  function goHome() {
    if (phase === "intro") return;
    setPhase("intro"); setQi(0); setAnswers([]); setUnlocked(false); setSelectedProgram(null);
    if (window.location.hash) {
      history.pushState("", document.title, window.location.pathname + window.location.search);
    }
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: "smooth" }));
  }

  const showProgress = phase === "quiz" || phase === "loading";
  const progress = phase === "loading" ? 100 : (qi / QUESTIONS.length) * 100;

  return (
    <div className="shell">
      <DesktopRail showProfile={true} onHome={goHome} />
      <div className="app">
        <div className="topbar">
          <div className="brandmark" role="link" tabIndex={0} title="トップに戻る"
            onClick={goHome}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") goHome(); }}>
            <span className="dot">制</span>制度活用ナビ
          </div>
          <span className="spacer" />
          {phase === "quiz" ? (
            <button className="back-btn" onClick={back}>{window.Ic.back()} 戻る</button>
          ) : null}
          {phase === "detail" ? (
            <button className="back-btn" onClick={backToResults}>{window.Ic.back()} 結果に戻る</button>
          ) : null}
          {showProgress ? (
            <React.Fragment>
              <div className="progress"><i style={{ width: progress + "%" }} /></div>
              <span className="progress-num">{Math.min(qi + (phase === "loading" ? 0 : 1), QUESTIONS.length)}/{QUESTIONS.length}</span>
            </React.Fragment>
          ) : null}
        </div>

        {phase === "intro" && <Intro onStart={start} showProfile={true} />}
        {phase === "quiz" && (
          <Question q={QUESTIONS[qi]} index={qi} total={QUESTIONS.length} selected={answers[qi]} onSelect={pick} />
        )}
        {phase === "loading" && <Loading />}
        {phase === "results" && (
          <Results ranked={ranked} unlocked={unlocked} info={info} onUnlock={unlock} onRestart={restart} onOpenDetail={openDetail} />
        )}
        {phase === "detail" && selectedProgram && (
          <Detail program={selectedProgram} currentPassword={CURRENT_PASSWORD} onBack={backToResults} />
        )}
      </div>
    </div>
  );
}

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