/* global React, Nav, Footer, HomePage, SessionsPage, MasterclassPage, AboutPage, ContactPage, TermsPage,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSlider */

const TWEAK_DEFAULTS_V15 = /*EDITMODE-BEGIN*/{
  "palette": "oxblood",
  "motion": true,
  "overlay": 12,
  "grain": true
}/*EDITMODE-END*/;

function BMAppV15({ initialRoute = "home", isMobile = false }) {
  const [t, setTweak] = (typeof useTweaks === "function")
    ? useTweaks(TWEAK_DEFAULTS_V15)
    : [TWEAK_DEFAULTS_V15, () => {}];

  const [route, setRoute] = React.useState(initialRoute);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const root = scrollRef.current?.querySelector(".bm-root");
    if (!root) return;
    root.dataset.palette = t.palette === "forest" ? "forest" : "oxblood";
    root.dataset.grain = t.grain === false ? "off" : "on";
    root.style.setProperty("--photo-overlay", String((t.overlay ?? 12) / 100));
  }, [t.palette, t.overlay, t.grain]);

  const navigate = (id) => {
    setRoute(id);
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  const renderPage = () => {
    const motion = t.motion !== false;
    switch (route) {
      case "sessions":    return <SessionsPage navigate={navigate} motion={motion} />;
      case "masterclass": return <MasterclassPage navigate={navigate} motion={motion} />;
      case "about":       return <AboutPage navigate={navigate} motion={motion} />;
      case "contact":     return <ContactPage navigate={navigate} motion={motion} />;
      case "terms":       return <TermsPage />;
      case "home":
      default:            return <HomePage navigate={navigate} motion={motion} />;
    }
  };

  return (
    <div
      ref={scrollRef}
      className="bm-scrollroot"
      style={{ height: "100%", overflowY: "auto", overflowX: "hidden", scrollBehavior: "smooth", background: "var(--bg-primary)" }}
    >
      <div className={`bm-root ${isMobile ? "is-mobile" : ""}`} key={`${route}-${t.palette}`}>
        <Nav route={route} navigate={navigate} isMobile={isMobile} />
        {renderPage()}
        <Footer navigate={navigate} />
      </div>

      {!isMobile && typeof TweaksPanel === "function" && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Palette" />
          <TweakRadio
            label="Accent"
            value={t.palette}
            options={[{ value: "oxblood", label: "Oxblood" }, { value: "forest", label: "Forest" }]}
            onChange={(v) => setTweak("palette", v)}
          />
          <TweakSection label="Motion" />
          <TweakToggle label="Scroll fades & marquee" value={t.motion !== false} onChange={(v) => setTweak("motion", v)} />
          <TweakSection label="Texture" />
          <TweakToggle label="Paper grain overlay" value={t.grain !== false} onChange={(v) => setTweak("grain", v)} />
          <TweakSection label="Imagery" />
          <TweakSlider label="Photo overlay opacity" value={t.overlay ?? 12} min={0} max={30} unit="%" onChange={(v) => setTweak("overlay", v)} />
        </TweaksPanel>
      )}
    </div>
  );
}

window.BMAppV15 = BMAppV15;