// app.jsx — store domain: shared bootstrap (loads last on every page).
// Each page's own <name>.jsx sets window.__PAGE__ = PageBody before this runs.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "balanced",
  "theme": "dark",
  "modeChipStyle": "solid",
  "showDisclosures": true,
  "finderOpenByDefault": false
}/*EDITMODE-END*/;

const TweaksContext = React.createContext({});
window.TweaksContext = TweaksContext;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [guideOpen, setGuideOpen] = React.useState(false);
  const Page = window.__PAGE__ || (() => <div className="page section">Missing page component.</div>);

  React.useEffect(() => {
    document.body.setAttribute("data-theme", t.theme);
    document.body.setAttribute("data-density", t.density);
  }, [t.theme, t.density]);

  // Lucide icons are static <i data-lucide="..."> placeholders (see index.html's unpkg
  // script) — createIcons() must re-run after every render since filters, the gallery,
  // the guide conversation and tab switches all mount new icon placeholders.
  React.useEffect(() => {
    window.lucide?.createIcons();
  });

  // red click-flash (design system signature)
  React.useEffect(() => {
    const flash = document.getElementById("click-flash");
    const onDown = () => { flash.classList.remove("go"); void flash.offsetWidth; flash.classList.add("go"); };
    window.addEventListener("mousedown", onDown);
    return () => window.removeEventListener("mousedown", onDown);
  }, []);

  // scroll-triggered fade-up
  React.useEffect(() => {
    const els = document.querySelectorAll(".fade-up");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });

  React.useEffect(() => {
    if (t.finderOpenByDefault && document.body.getAttribute("data-page") === "plp") setGuideOpen(false);
  }, []);

  return (
    <TweaksContext.Provider value={t}>
      <div className="bg-stage" />
      <div className="bg-grain" />
      <div className="bg-sheen" />
      <div className="click-flash" id="click-flash" />

      <Nav active={document.body.getAttribute("data-page")} onOpenGuide={() => setGuideOpen(true)} />
      <main id="top">
        <Page />
      </main>
      <Footer />

      <AgentGuidePanel open={guideOpen} onClose={() => setGuideOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout density" />
        <TweakRadio label="Density" value={t.density} options={[{ value: "airy", label: "Airy" }, { value: "balanced", label: "Balanced" }, { value: "packed", label: "Packed" }]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]} onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Commerce" />
        <TweakRadio label="Mode-chip style" value={t.modeChipStyle} options={[{ value: "solid", label: "Solid" }, { value: "outline", label: "Outline" }, { value: "minimal", label: "Minimal" }]} onChange={(v) => setTweak("modeChipStyle", v)} />
        <TweakToggle label="Show disclosures" value={t.showDisclosures} onChange={(v) => setTweak("showDisclosures", v)} />
        <TweakToggle label="Finder open by default" value={t.finderOpenByDefault} onChange={(v) => setTweak("finderOpenByDefault", v)} />
      </TweaksPanel>
    </TweaksContext.Provider>
  );
}

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