/* global React */
// boot-shared.jsx — palette + tweaks logic shared across all pages.
// Each page renders <PageShell current="X"><PageContent/></PageShell>.

const { useState: useBootState, useEffect: useBootEffect } = React;

window.VRB_PALETTES = {
  default: { label: "VRB Capital", sub: "Navy / Steel Blue / Mist", navy: "#1F3864", blue: "#2E75B6", light: "#D9E1F2", ink900: "#0F1B33" }
};

window.PageShell = function PageShell({ current, children, openForm }) {
  const [palette, setPalette] = useBootState((window.__TWEAKS && window.__TWEAKS.palette) || "default");
  const [tweaksOpen, setTweaksOpen] = useBootState(false);
  const palettes = window.VRB_PALETTES;

  // Apply palette to :root
  useBootEffect(() => {
    const p = palettes[palette] || palettes.default;
    const r = document.documentElement.style;
    r.setProperty("--vrb-navy", p.navy);
    r.setProperty("--vrb-blue", p.blue);
    r.setProperty("--vrb-light-blue", p.light);
    r.setProperty("--vrb-ink-900", p.ink900);
    r.setProperty("--vrb-ink-800", p.navy);
    r.setProperty("--bg-header-navy", p.navy);
    r.setProperty("--bg-band-blue", p.blue);
    r.setProperty("--bg-alt-row", p.light);
    r.setProperty("--fg-link", p.blue);
    r.setProperty("--fg-link-hover", p.navy);
  }, [palette]);

  // Tweaks protocol
  useBootEffect(() => {
    const onMsg = (ev) => {
      const d = ev.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (e) {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setPaletteKey = (k) => {
    setPalette(k);
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { palette: k } }, "*"); } catch (e) {}
  };

  return (
    <div className={"page-" + (current || "home")}>
      <ScrollProgress />
      <Announce />
      <Nav current={current} openForm={openForm} />
      <div data-screen-label={current}>
        {children}
      </div>
      <Footer />

      <div className={"tweaks-panel " + (tweaksOpen ? "open" : "")}>
        <h4>Tweaks</h4>
        <div className="sub">Brand palette · locked to VRB Capital</div>
        <div className="palette-grid">
          {Object.entries(palettes).map(([key, p]) => (
            <button
              key={key}
              className={"palette-opt " + (palette === key ? "active" : "")}
              onClick={() => setPaletteKey(key)}
              title={p.sub}>
              <div className="palette-swatches">
                <span style={{ background: p.navy }}></span>
                <span style={{ background: p.blue }}></span>
                <span style={{ background: p.light }}></span>
              </div>
              <div className="palette-label">{p.label}</div>
              <div className="palette-sub">{p.sub}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageShell: window.PageShell, VRB_PALETTES: window.VRB_PALETTES });