// app.jsx — main App with router state + Tweaks panel

const { useState, useEffect } = React;

// Palette definitions: bg / bg-soft / paper / ink / ink-soft / ink-mute / line / accent
const PALETTES = {
  cream:    { name: "米白 · 深棕", en: "Cream & Brown",
              vars: { "--bg":"#efe7d8", "--bg-soft":"#e8ddc8", "--paper":"#f5efe1",
                      "--ink":"#3a261a", "--ink-soft":"#6b513f", "--ink-mute":"#a3917b",
                      "--line":"#c8b89a", "--accent":"#8a4a2a" } },
  ink:      { name: "纸 · 墨黑", en: "Paper & Ink",
              vars: { "--bg":"#f1ece1", "--bg-soft":"#e7e0d0", "--paper":"#faf5ea",
                      "--ink":"#1a1612", "--ink-soft":"#4a4034", "--ink-mute":"#9a8e7a",
                      "--line":"#cdc4ad", "--accent":"#3a2a1a" } },
  dusk:     { name: "黄昏 · 砖红", en: "Dusk & Brick",
              vars: { "--bg":"#ead9c4", "--bg-soft":"#dec9ac", "--paper":"#f1e3cc",
                      "--ink":"#3a1f1a", "--ink-soft":"#6e4338", "--ink-mute":"#a9836f",
                      "--line":"#c89e85", "--accent":"#a8462a" } },
  midnight: { name: "深棕底 · 米色字", en: "Midnight",
              vars: { "--bg":"#211912", "--bg-soft":"#2b211a", "--paper":"#312620",
                      "--ink":"#ece2cb", "--ink-soft":"#c2b395", "--ink-mute":"#867563",
                      "--line":"#5a4836", "--accent":"#e0a574" } },
  sage:     { name: "雾鼠 · 灰青", en: "Mist & Sage",
              vars: { "--bg":"#e3e2d3", "--bg-soft":"#d6d4c1", "--paper":"#ededde",
                      "--ink":"#2a2e22", "--ink-soft":"#5b5e4d", "--ink-mute":"#979a88",
                      "--line":"#bcbda9", "--accent":"#5a6e3d" } },
};

function applyPalette(p) {
  const root = document.documentElement;
  Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "navLayout": "scattered",
  "showSideIndex": true,
  "showCursorInk": true,
  "moodLayout": "scatter",
  "showRippleLine": true,
  "homeLeft": "featured"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: "home" });
  const [lang, setLang]   = useState("zh");

  useEffect(() => { applyPalette(PALETTES[t.palette] || PALETTES.cream); }, [t.palette]);

  // Scroll to top on route change
  useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [route]);

  // Persist route in URL hash (so deploy keeps state on refresh)
  useEffect(() => {
    const h = window.location.hash.replace(/^#/, "");
    if (h) {
      const [name, id] = h.split("/");
      if (name) setRoute({ name, id });
    }
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, "");
      const [name, id] = h.split("/");
      if (name) setRoute({ name, id }); else setRoute({ name: "home" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useEffect(() => {
    const target = route.name === "home" ? "" : route.id ? `${route.name}/${route.id}` : route.name;
    if (window.location.hash.replace(/^#/, "") !== target) {
      window.history.replaceState(null, "", target ? `#${target}` : window.location.pathname);
    }
  }, [route]);

  const onGo = (r) => setRoute(r);
  const toggleLang = () => setLang((l) => (l === "zh" ? "en" : "zh"));

  return (
    <>
      {t.showCursorInk && <CursorInk />}
      <TopFrame route={route} onGo={onGo} lang={lang} onToggleLang={toggleLang} />
      {t.showSideIndex && route.name !== "home" && route.name !== "index" && route.name !== "about" && <SideIndex route={route} onGo={onGo} />}
      <PageCounter route={route} />

      <main className="stage">
        {route.name === "home"  && <Home key="home" onGo={onGo} homeLeft={t.homeLeft} />}
        {route.name === "index" && <IndexView key="index" onGo={onGo} />}
        {route.name === "mood"  && <MoodView key={`m-${route.id}-${t.moodLayout}`} id={route.id} onGo={onGo} layout={t.moodLayout === "grid" ? "grid" : "scatter"} />}
        {route.name === "work"  && <WorkDetail key={`w-${route.id}`} id={route.id} onGo={onGo} />}
        {route.name === "about" && <About key="about" onGo={onGo} />}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="配色 · Palette" />
        <TweakSelect
          label="主题"
          value={t.palette}
          options={Object.keys(PALETTES).map((k) => ({ value: k, label: `${PALETTES[k].name}  ·  ${PALETTES[k].en}` }))}
          onChange={(v) => setTweak("palette", v)}
        />

        <TweakSection label="主页左侧 · Home left" />
        <TweakSelect
          label="内容"
          value={t.homeLeft}
          options={[
            { value: "verse",    label: "诗句 · Verse (轮播)" },
            { value: "monogram", label: "题字 · Monogram (苏 焦 琉)" },
            { value: "featured", label: "精选 · Featured cover" },
            { value: "map",      label: "星图 · Mood constellation" },
          ]}
          onChange={(v) => setTweak("homeLeft", v)}
        />

        <TweakSection label="导航 · Navigation" />
        <TweakToggle
          label="侧边索引"
          value={t.showSideIndex}
          onChange={(v) => setTweak("showSideIndex", v)}
        />
        <TweakRadio
          label="作品列表"
          value={t.moodLayout}
          options={[
            { value: "scatter", label: "散落" },
            { value: "grid",    label: "网格" },
          ]}
          onChange={(v) => setTweak("moodLayout", v)}
        />

        <TweakSection label="动效 · Motion" />
        <TweakToggle
          label="光标墨点"
          value={t.showCursorInk}
          onChange={(v) => setTweak("showCursorInk", v)}
        />

        <TweakSection label="跳转 · Jump" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          <TweakButton label="首页 Home"  onClick={() => setRoute({ name: "home" })} />
          <TweakButton label="索引 Index" onClick={() => setRoute({ name: "index" })} />
          <TweakButton label="关于 About" onClick={() => setRoute({ name: "about" })} />
          {window.MOODS.slice(0, 5).map((m) => (
            <TweakButton key={m.id} label={`${m.zh} ${m.en}`} onClick={() => setRoute({ name: "mood", id: m.id })} />
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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