/* global React, ReactDOM, Hero, Bio, Analytics, Arsenal, Showcases, Press, Contact, SideNav, TopBar */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "density": "comfy",
  "showTicker": true
}/*EDITMODE-END*/;

const ACCENTS = {
  amber:  { "--heat-0": "oklch(0.78 0.19 55)",  "--heat-1": "oklch(0.68 0.21 35)" },
  cyan:   { "--heat-0": "oklch(0.78 0.15 210)", "--heat-1": "oklch(0.68 0.17 230)" },
  lime:   { "--heat-0": "oklch(0.82 0.17 130)", "--heat-1": "oklch(0.72 0.19 145)" },
  magenta:{ "--heat-0": "oklch(0.75 0.22 0)",   "--heat-1": "oklch(0.65 0.24 350)" },
};

function App() {
  const [active, setActive] = React.useState("overview");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("lv-tweaks")) || TWEAK_DEFAULTS; }
    catch { return TWEAK_DEFAULTS; }
  });

  // Apply accent + density
  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.amber;
    Object.entries(a).forEach(([k,v]) => root.style.setProperty(k, v));
    root.style.setProperty("--density-scale", tweaks.density === "dense" ? "0.92" : "1");
    localStorage.setItem("lv-tweaks", JSON.stringify(tweaks));
  }, [tweaks]);

  // Scroll spy
  React.useEffect(() => {
    const sections = ["overview","bio","stats","arsenal","showcases","press","contact"];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-30% 0px -60% 0px", threshold: 0 });
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  // Host protocol: register listener BEFORE announcing
  React.useEffect(() => {
    const handler = (e) => {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      else if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const updateTweak = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v }}, "*");
      return next;
    });
  };

  return (
    <div className="app">
      <SideNav active={active} onNav={setActive} />
      <div className="main">
        <TopBar />
        <Hero />
        <Bio />
        <Arsenal />
        <Analytics />
        <Press />
        <Showcases />
        <Contact />
      </div>

      {tweaksOpen && (
        <div className="tweaks">
          <div className="tweaks__head">
            <span>TWEAKS</span>
            <button
              onClick={() => setTweaksOpen(false)}
              style={{background:"none",border:0,color:"var(--ink-2)",cursor:"pointer",fontFamily:"inherit"}}>×</button>
          </div>
          <div className="tweaks__body">
            <div className="tweak-row">
              <label>ACCENT COLOR</label>
              <div className="tweak-swatch">
                {Object.entries(ACCENTS).map(([k, v]) => (
                  <button key={k}
                    style={{"--c": v["--heat-0"]}}
                    className={tweaks.accent === k ? "is-on" : ""}
                    onClick={() => updateTweak("accent", k)}
                    aria-label={k}/>
                ))}
              </div>
            </div>
            <div className="tweak-row">
              <label>DENSITY</label>
              <div className="tweak-opts">
                {["comfy","dense"].map(d => (
                  <button key={d}
                    className={"tweak-opt" + (tweaks.density === d ? " is-on" : "")}
                    onClick={() => updateTweak("density", d)}>{d.toUpperCase()}</button>
                ))}
              </div>
            </div>
            <div className="tweak-row">
              <label>LIVE TICKER</label>
              <div className="tweak-opts">
                {[true, false].map(b => (
                  <button key={String(b)}
                    className={"tweak-opt" + (tweaks.showTicker === b ? " is-on" : "")}
                    onClick={() => updateTweak("showTicker", b)}>{b ? "ON" : "OFF"}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Hide ticker if tweaked off */}
      {!tweaks.showTicker && <style>{`.ticker{display:none}`}</style>}
    </div>
  );
}

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