// app.jsx — Router + App shell + Tweaks
const { Header, Footer } = window.LCS;
const { HomePage, ProductPage, CompletePage } = window.LCS;
const { ShopPage, AboutPage, FAQPage, TokushohoPage, PrivacyPage, TermsPage } = window.LCS;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mainColor": "#FAD61D",
  "accentColor": "#F62D14",
  "bgTone": "#FFFBEA",
  "borderStyle": "bold",
  "showStamp": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [pid, setPid] = React.useState("kotori");

  // Hash routing for refresh-persistence + back/forward button support
  const applyHash = () => {
    const h = (window.location.hash || "").replace(/^#\/?/, "");
    const [r, p] = h ? h.split("/") : ["home"];
    setRoute(r || "home");
    if (p) setPid(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  React.useEffect(() => {
    applyHash();
    window.addEventListener("popstate", applyHash);
    return () => window.removeEventListener("popstate", applyHash);
  }, []);

  const go = (r, p) => {
    setRoute(r);
    if (p) setPid(p);
    window.scrollTo({ top: 0, behavior: "instant" });
    window.location.hash = "#/" + r + (p ? "/" + p : "");
  };

  // Apply tweaks via CSS variables
  const cssVars = {
    "--c-main": t.mainColor,
    "--c-accent": t.accentColor,
    "--c-bg": t.bgTone,
  };

  let page;
  switch (route) {
    case "home":      page = <HomePage go={go} />; break;
    case "shop":      page = <ShopPage go={go} />; break;
    case "about":     page = <AboutPage go={go} />; break;
    case "product":   page = <ProductPage pid={pid} go={go} />; break;
    case "complete":  page = <CompletePage go={go} />; break;
    case "faq":       page = <FAQPage go={go} />; break;
    case "tokushoho": page = <TokushohoPage />; break;
    case "privacy":   page = <PrivacyPage />; break;
    case "terms":     page = <TermsPage />; break;
    default:          page = <HomePage go={go} />;
  }

  return (
    <div className="app" style={cssVars}>
      <Header route={route} go={go} />
      {page}
      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand colors" />
        <TweakColor label="メインカラー" value={t.mainColor}
          options={["#FAD61D", "#FFC83D", "#F4B400", "#F9D71C", "#FFDC73"]}
          onChange={(v) => setTweak("mainColor", v)} />
        <TweakColor label="アクセント" value={t.accentColor}
          options={["#F62D14", "#E0331B", "#C81E1E", "#B91C1C", "#811E09"]}
          onChange={(v) => setTweak("accentColor", v)} />
        <TweakColor label="背景トーン" value={t.bgTone}
          options={["#FFFBEA", "#FFFDF5", "#FFFFFF", "#FAF5E5", "#FFF6D6"]}
          onChange={(v) => setTweak("bgTone", v)} />

        <TweakSection label="Quick navigation" />
        <TweakSelect label="画面を切り替え" value={route}
          options={[
            { value: "home", label: "01 トップ" },
            { value: "product", label: "02 商品詳細" },
            { value: "complete", label: "03 購入完了" },
            { value: "faq", label: "04 FAQ" },
            { value: "tokushoho", label: "05 特定商取引法" },
            { value: "privacy", label: "06 プライバシー" },
            { value: "terms", label: "07 利用規約" },
            { value: "shop", label: "+ 商品一覧" },
            { value: "about", label: "+ ショップ紹介" },
          ]}
          onChange={(v) => go(v)} />
      </TweaksPanel>
    </div>
  );
}

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