// app.jsx — main app, router, tweaks, theme

const TWEAKS = {...TWEAK_DEFAULTS};

function App() {
  const [lang, setLang] = React.useState(TWEAKS.language || "ja");
  const [theme, setTheme] = React.useState(TWEAKS.theme || "light");
  const [hero, setHero] = React.useState(TWEAKS.hero || "canvas");
  const [intensity, setIntensity] = React.useState(TWEAKS.pearlGradient ?? 1.0);
  const [tweakOpen, setTweakOpen] = React.useState(false);

  // Publish globals for pages
  React.useEffect(() => { window.__HOSHI_THEME = theme; }, [theme]);
  React.useEffect(() => { window.__HOSHI_HERO = hero; }, [hero]);
  React.useEffect(() => { window.__HOSHI_INTENSITY = intensity; }, [intensity]);

  // Tweaks host protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweakOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweakOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type: "__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const pushEdits = (edits) => {
    window.parent.postMessage({type: "__edit_mode_set_keys", edits}, "*");
  };

  return (
    <RouterProvider>
      <LANG_CTX.Provider value={lang}>
        <Inner lang={lang} setLang={setLang} theme={theme} setTheme={setTheme}
          hero={hero} setHero={setHero} intensity={intensity} setIntensity={setIntensity}
          tweakOpen={tweakOpen} pushEdits={pushEdits} />
      </LANG_CTX.Provider>
    </RouterProvider>
  );
}

function Inner({ lang, setLang, theme, setTheme, hero, setHero, intensity, setIntensity, tweakOpen, pushEdits }) {
  const { route } = useRouter();

  const page = (() => {
    switch (route) {
      case "top": return <PageTop />;
      case "collection": return <PageCollection />;
      case "pdp": return <PagePDP />;
      case "bridal": return <PageBridal />;
      case "bespoke": return <PageBespoke />;
      case "gem": return <PageGem />;
      case "artisans": return <PageArtisans />;
      case "warranty": return <PageWarranty />;
      case "boutiques": return <PageBoutiques />;
      case "heritage": return <PageHeritage />;
      case "journal": return <PageJournal />;
      case "vip": return <PageVIP />;
      default: return <PageTop />;
    }
  })();

  return (
    <div className={`app-root ${theme === "dark" ? "theme-urushi" : ""}`}>
      <Header lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
      <div className="app-main" key={route}>{page}</div>
      <Footer lang={lang} theme={theme} />
      {tweakOpen && (
        <TweaksPanel
          lang={lang} setLang={(v) => { setLang(v); pushEdits({language: v}); }}
          theme={theme} setTheme={(v) => { setTheme(v); pushEdits({theme: v}); }}
          hero={hero} setHero={(v) => { setHero(v); pushEdits({hero: v}); }}
          intensity={intensity} setIntensity={(v) => { setIntensity(v); pushEdits({pearlGradient: v}); }}
        />
      )}
    </div>
  );
}

function TweaksPanel({ lang, setLang, theme, setTheme, hero, setHero, intensity, setIntensity }) {
  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 1000,
      width: 320,
      background: "rgba(10,9,8,0.94)",
      backdropFilter: "blur(10px)",
      border: "1px solid rgba(201,169,97,0.3)",
      color: "#F4EEE3",
      padding: 28,
      fontFamily: "var(--sans)",
    }}>
      <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 16, color: "#C9A961", marginBottom: 20, letterSpacing: "0.2em" }}>
        ✦ Tweaks
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <TweakRow label="Language">
          <TweakBtn a={lang === "ja"} onClick={() => setLang("ja")}>日本語</TweakBtn>
          <TweakBtn a={lang === "en"} onClick={() => setLang("en")}>English</TweakBtn>
        </TweakRow>
        <TweakRow label="Theme (header/footer)">
          <TweakBtn a={theme === "light"} onClick={() => setTheme("light")}>Off-white</TweakBtn>
          <TweakBtn a={theme === "dark"} onClick={() => setTheme("dark")}>Urushi</TweakBtn>
        </TweakRow>
        <TweakRow label="Hero treatment">
          <TweakBtn a={hero === "canvas"} onClick={() => setHero("canvas")}>Canvas drop</TweakBtn>
          <TweakBtn a={hero === "still"} onClick={() => setHero("still")}>Still pearl</TweakBtn>
        </TweakRow>
        <div>
          <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "#C9A961", marginBottom: 8 }}>
            Pearl density ({intensity.toFixed(1)}×)
          </div>
          <input type="range" min={0.3} max={2.0} step={0.1} value={intensity} onChange={e => setIntensity(parseFloat(e.target.value))} style={{ width: "100%", accentColor: "#C9A961" }}/>
        </div>
      </div>
    </div>
  );
}
function TweakRow({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "#C9A961", marginBottom: 8 }}>{label}</div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>{children}</div>
    </div>
  );
}
function TweakBtn({ a, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding: "8px 14px", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
      border: a ? "1px solid #C9A961" : "1px solid rgba(244,238,227,0.2)",
      color: a ? "#C9A961" : "#F4EEE3",
      background: a ? "rgba(201,169,97,0.1)" : "transparent",
    }}>{children}</button>
  );
}

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