// Root app
const {useState, useEffect} = React;

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "clinical"
  }/*EDITMODE-END*/;

  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("pas-theme") || TWEAK_DEFAULTS.theme; } catch { return TWEAK_DEFAULTS.theme; }
  });
  const [route, setRoute] = useState(() => {
    try { return localStorage.getItem("pas-route") || "home"; } catch { return "home"; }
  });
  const [contactOpen, setContactOpen] = useState(false);
  const [tweaksEnabled, setTweaksEnabled] = useState(false);

  // Apply theme to :root
  useEffect(() => {
    const t = window.PAS_THEMES[theme];
    const root = document.documentElement;
    const map = {
      "--bg": t.bg, "--surface": t.surface, "--ink": t.ink, "--ink-soft": t.inkSoft, "--ink-muted": t.inkMuted,
      "--line": t.line, "--line-strong": t.lineStrong, "--accent": t.accent, "--accent-ink": t.accentInk,
      "--brand": t.brand, "--chip-bg": t.chipBg, "--chip-ink": t.chipInk,
      "--hero-bg": t.heroBg, "--hero-ink": t.heroInk, "--hero-accent": t.heroAccent, "--stripe": t.stripe,
    };
    Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v));
    window.__pasTheme = t;
    try { localStorage.setItem("pas-theme", theme); } catch {}
  }, [theme]);

  // Persist route + scroll top on change
  useEffect(() => {
    try { localStorage.setItem("pas-route", route); } catch {}
    window.scrollTo({top: 0, behavior: "instant"});
  }, [route]);

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

  const onContact = () => setContactOpen(true);

  const setThemeAndPersist = (t) => {
    setTheme(t);
    try { window.parent.postMessage({type: "__edit_mode_set_keys", edits: {theme: t}}, "*"); } catch {}
  };

  return (
    <div data-theme={theme}>
      <Nav route={route} setRoute={setRoute} onContact={onContact} theme={theme}/>
      {route === "home" && <HomePage setRoute={setRoute} onContact={onContact}/>}
      {route === "product" && <ProductPage setRoute={setRoute} onContact={onContact}/>}
      {route === "care" && <CarePage setRoute={setRoute} onContact={onContact}/>}
      {route === "support" && <SupportPage setRoute={setRoute} onContact={onContact}/>}
      {route === "contact" && <ContactPage setRoute={setRoute} onContact={onContact}/>}
      <Footer setRoute={setRoute}/>
      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)}/>
      <TweaksPanel theme={theme} setTheme={setThemeAndPersist} enabled={tweaksEnabled}/>
    </div>
  );
}

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