const App = () => {
  const [active, setActive] = React.useState("top");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
    setActive(id);
  };

  // Reveal on scroll
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Scroll-spy for nav
  React.useEffect(() => {
    const ids = ["research","people","papers","projects","contact"];
    const onScroll = () => {
      const y = window.scrollY + 120;
      let cur = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  return (
    <div className="shell">
      <Nav active={active} onNav={onNav} />
      <Hero onNav={onNav} />
      <Research />
      <People />
      <Papers />
      <Projects />
      <Contact />

      <footer className="footer">
        <div><b>© {new Date().getFullYear()} NetDB Lab</b> · National Cheng Kung University · Dept. of CSIE</div>
        <div>Built with care on Data Intelligence Discovery Island · <a href={window.LAB.source_url} target="_blank" rel="noreferrer">Legacy site ↗</a></div>
      </footer>

      {/* Tweaks toggle button (shown when parent isn't driving it) */}
      <button
        onClick={()=>setTweaksOpen(o=>!o)}
        aria-label="Open tweaks"
        style={{
          position:"fixed", left:18, bottom:18, zIndex: 70,
          width: 46, height: 46, borderRadius: 999,
          background: "var(--paper)", color: "var(--mint-ink)",
          boxShadow: "var(--shadow-card)",
          border: "2px solid color-mix(in oklab, var(--mint) 35%, transparent)",
          display:"grid", placeItems:"center"
        }}>
        <Icon name="palette" size={20}/>
      </button>

      <Tweaks open={tweaksOpen} onClose={()=>setTweaksOpen(false)} />
    </div>
  );
};

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