// App shell — reads section info from window.L1_DATA (set by data_*.jsx)

function Dashboard({ onPick, meta }) {
  const tiles = [
    { key: "reading-mcq", skill: "Reading", title: "本文理解", sub: "選択問題 5問", cat: "read", icon: "📖" },
    { key: "scanning", skill: "Reading", title: "Scanning", sub: "語句探し", cat: "read", icon: "🔍" },
    { key: "dictation", skill: "Listening", title: "Dictation", sub: "聴取書き取り 4文", cat: "listen", icon: "🎧" },
    { key: "listening-cloze", skill: "Listening", title: "Fill in the Blanks", sub: "空欄埋め 4文", cat: "listen", icon: "🎧" },
    { key: "speaking", skill: "Speaking", title: "Role Play", sub: "ロールプレイ 3場面", cat: "speak", icon: "🗣" },
    { key: "writing", skill: "Writing", title: "Composition", sub: "作文 3プロンプト", cat: "write", icon: "✍️" },
    { key: "flashcards", skill: "Vocabulary", title: "Flashcards", sub: "新出語フラッシュカード", cat: "vocab", icon: "🗂" },
    { key: "vocab-quiz", skill: "Vocabulary", title: "Quiz", sub: "4択クイズ 10問", cat: "vocab", icon: "✓" },
    { key: "grammar", skill: "Grammar", title: "Key Grammar", sub: "解説 + 練習 5問", cat: "grammar", icon: "𝑮" },
  ];
  return (
    <div className="dash">
      <div className="dash-hero">
        <div className="hero-eyebrow">ENGLISH COMMUNICATION Ⅱ · SELF-STUDY</div>
        <h1 className="hero-title">{meta.lesson} · {meta.title}</h1>
        <div className="hero-section">{meta.section} — {meta.subtitle}</div>
        <p className="hero-lede">
          取り組みたい技能を選んでスタートしよう。即時フィードバックで、間違えた理由もその場で確認できます。
        </p>
      </div>
      <div className="tiles">
        {tiles.map(t => (
          <button key={t.key} className={"tile tile-" + t.cat} onClick={() => onPick(t.key)}>
            <div className="tile-top">
              <span className="tile-skill">{t.skill}</span>
              <span className="tile-icon">{t.icon}</span>
            </div>
            <div className="tile-title">{t.title}</div>
            <div className="tile-sub">{t.sub}</div>
            <div className="tile-go">Start →</div>
          </button>
        ))}
      </div>
      <div className="dash-footer">
        英コミュニケーションⅡ · {meta.lesson} · {meta.section} · Self-Study Hub
      </div>
    </div>
  );
}

function App() {
  const [route, setRoute] = useState("dashboard");
  const data = window.L1_DATA;
  const meta = data.meta;
  const exit = () => setRoute("dashboard");

  let view;
  if (route === "dashboard") view = <Dashboard onPick={setRoute} meta={meta} />;
  else if (route === "reading-mcq") view = <ReadingMCQ data={data} onExit={exit} />;
  else if (route === "scanning") view = <Scanning data={data} onExit={exit} />;
  else if (route === "dictation") view = <Dictation data={data} onExit={exit} />;
  else if (route === "listening-cloze") view = <ListeningCloze data={data} onExit={exit} />;
  else if (route === "flashcards") view = <Flashcards data={data} onExit={exit} />;
  else if (route === "vocab-quiz") view = <VocabQuiz data={data} onExit={exit} />;
  else if (route === "grammar") view = <Grammar data={data} onExit={exit} />;
  else if (route === "speaking") view = <Speaking data={data} onExit={exit} />;
  else if (route === "writing") view = <Writing data={data} onExit={exit} />;

  return (
    <div className="app">
      {route !== "dashboard" && (
        <div className="topbar">
          <button className="back-btn" onClick={exit}>← ダッシュボード</button>
          <div className="topbar-meta">{meta.lesson} · {meta.section}</div>
        </div>
      )}
      {view}
    </div>
  );
}

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