/* App root: route state, tweak state, page dispatch */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "serifFamily": "Cormorant Garamond",
  "accent": "#8A3F2D",
  "secondary": "#7A6A57",
  "bgTone": "#FBFBF9",
  "density": "standard",
  "showClosure": true,
  "locale": "EN"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateApp({ name: "home" });
  const [drawer, setDrawer] = useStateApp({ open: false, ctx: null });
  const [t, setTweak] = window.useTweaks(DEFAULT_TWEAKS);

  // Apply tweak vars at root
  useEffectApp(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--secondary", t.secondary);
    r.style.setProperty("--bg", t.bgTone);
    r.style.setProperty("--serif", `"${t.serifFamily}", "EB Garamond", Georgia, serif`);
    document.body.setAttribute("data-locale", t.locale);
    document.documentElement.setAttribute("dir", t.locale === "AR" ? "rtl" : "ltr");
  }, [t]);

  // Smooth-ish route change: scroll to top, no animation overhead
  useEffectApp(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  const openEnquire = (ctx) => setDrawer({ open: true, ctx });
  const closeEnquire = () => setDrawer((d) => ({ ...d, open: false }));

  let page;
  switch (route.name) {
    case "exhibitions": page = <window.ExhibitionsPage onRoute={setRoute} />; break;
    case "exhibition": page = <window.ExhibitionDetailPage slug={route.slug} onRoute={setRoute} onEnquire={openEnquire} />; break;
    case "artists": page = <window.ArtistsPage onRoute={setRoute} />; break;
    case "artist": page = <window.ArtistDossierPage artistName={route.name2} onRoute={setRoute} onEnquire={openEnquire} density={t.density} />; break;
    case "online": page = <window.OnlinePage onRoute={setRoute} onEnquire={openEnquire} />; break;
    case "fairs": page = <window.FairsPage onRoute={setRoute} onEnquire={openEnquire} />; break;
    case "press": page = <window.PressPage onRoute={setRoute} onEnquire={openEnquire} />; break;
    case "about": page = <window.AboutPage onRoute={setRoute} />; break;
    case "contact": page = <window.ContactPage onEnquire={openEnquire} />; break;
    default: page = <window.HomePage onRoute={setRoute} onEnquire={openEnquire} />;
  }

  return (
    <React.Fragment>
      {t.showClosure && <window.ClosureBar />}
      <window.Nav
        route={route}
        onRoute={setRoute}
        onEnquire={openEnquire}
        locale={t.locale}
        onLocale={(l) => setTweak("locale", l)}
      />
      <main data-screen-label={"01 " + route.name}>{page}</main>
      <window.MailingList />
      <window.Footer onRoute={setRoute} />
      <window.EnquiryDrawer open={drawer.open} context={drawer.ctx} onClose={closeEnquire} />

      <TweaksUI t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

function TweaksUI({ t, setTweak }) {
  const T = window.TweaksPanel;
  const S = window.TweakSection;
  if (!T) return null;
  return (
    <T title="Tweaks">
      <S label="Type system" />
      <window.TweakSelect
        label="Display serif"
        value={t.serifFamily}
        onChange={(v) => setTweak("serifFamily", v)}
        options={[
          { value: "Cormorant Garamond", label: "Cormorant Garamond — narrow editorial" },
          { value: "EB Garamond", label: "EB Garamond — classical, denser" },
          { value: "Tenor Sans", label: "Tenor Sans — modern museum sans" },
          { value: "Cardo", label: "Cardo — humanist serif" }
        ]}
      />
      <window.TweakRadio
        label="Dossier density"
        value={t.density}
        onChange={(v) => setTweak("density", v)}
        options={["standard", "deep"]}
      />

      <S label="Palette" />
      <window.TweakColor
        label="Rust accent"
        value={t.accent}
        onChange={(v) => setTweak("accent", v)}
        options={["#8A3F2D", "#A0522D", "#2F6F73", "#1B1B1B"]}
      />
      <window.TweakColor
        label="Stone secondary"
        value={t.secondary}
        onChange={(v) => setTweak("secondary", v)}
        options={["#7A6A57", "#8C7B68", "#5C5A52", "#9A8C76"]}
      />
      <window.TweakColor
        label="Page background"
        value={t.bgTone}
        onChange={(v) => setTweak("bgTone", v)}
        options={["#FBFBF9", "#F7F4ED", "#FFFFFF", "#F0EBE0"]}
      />

      <S label="Programme" />
      <window.TweakToggle
        label="Eid closure banner"
        value={t.showClosure}
        onChange={(v) => setTweak("showClosure", v)}
      />
      <window.TweakRadio
        label="Locale"
        value={t.locale}
        onChange={(v) => setTweak("locale", v)}
        options={["EN", "AR", "RU", "ZH"]}
      />
    </T>
  );
}

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