const { useState: useStateA, useEffect: useEffectA, useRef: useRefA, useCallback: useCallbackA } = React;

function App() {
  const { profile, experience, projects, education, skills } = window.__data;

  // Theme
  const [theme, setTheme] = useStateA(() => {
    try {
      const saved = localStorage.getItem("rohan.theme");
      if (saved) return saved;
    } catch (_) {}
    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  });
  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("rohan.theme", theme); } catch (_) {}
  }, [theme]);

  // Tweaks
  const [tweaks, setTweaks] = useStateA(() => ({ ...(window.TWEAK_DEFAULTS || {}) }));
  const [tweaksOpen, setTweaksOpen] = useStateA(false);

  // Apply tweak values as CSS vars / body class
  useEffectA(() => {
    const root = document.documentElement;
    if (tweaks.accent) root.style.setProperty("--accent-override", tweaks.accent);
    root.style.setProperty("--headline-size", tweaks.headlineSize + "px");
    root.classList.toggle("fatter-headline", !!tweaks.fatter);
    root.classList.toggle("hide-chibi", !tweaks.showChibi);
    root.classList.toggle("hide-planet", !tweaks.showPlanet);
  }, [tweaks]);

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

  const updateTweaks = (patch) => {
    setTweaks((prev) => {
      const next = { ...prev, ...patch };
      try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*"); } catch (_) {}
      return next;
    });
  };

  // Project overlay
  const [openId, setOpenId] = useStateA(null);
  const openProject = projects.find((p) => p.id === openId);

  // Terminal easter egg
  const [termOpen, setTermOpen] = useStateA(false);

  // Easter-egg triggers: `whoami` typed anywhere, Ctrl-` toggle
  useEffectA(() => {
    let buf = "";
    const target = "whoami";
    const onKey = (e) => {
      // don't intercept while typing in an input
      const tag = (e.target && e.target.tagName) || "";
      if (tag === "INPUT" || tag === "TEXTAREA") return;
      if ((e.ctrlKey || e.metaKey) && e.key === "`") { e.preventDefault(); setTermOpen((v) => !v); return; }
      if (e.key.length === 1) {
        buf = (buf + e.key.toLowerCase()).slice(-target.length);
        if (buf === target) { setTermOpen(true); buf = ""; }
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Reveal on scroll
  useEffectA(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.08 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="app">
      <div className="top-bar">
        <div className="top-left">
          <span className="logo">rohan.waghmare</span>
          <span className="slash">/</span>
          <span className="sub">software developer (AI)</span>
        </div>
        <nav className="top-nav">
          <a href="#about">About</a>
          <a href="#experience">Experience</a>
          <a href="#work">Work</a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="top-right">
          <ThemeToggle theme={theme} onToggle={() => setTheme((t) => t === "dark" ? "light" : "dark")} />
          <a className="top-cta" href={`mailto:${profile.email}`}>Hire me</a>
        </div>
      </div>

      <Hero profile={profile} tweaks={tweaks} />

      <div className="backed-by">
        <div className="label">
          <b>Shipped with</b>
          <span>production-grade tooling</span>
        </div>
        <div className="logos">
          <span>OpenAI</span>
          <span>ANTHROPIC</span>
          <span>HuggingFace</span>
          <span>AWS</span>
          <span>SAP</span>
          <span>Kubernetes</span>
          <span>LangChain</span>
        </div>
      </div>

      <div className="reveal"><About education={education} skills={skills} /></div>
      <div className="reveal"><Experience experience={experience} /></div>
      <div className="reveal"><Projects projects={projects} onOpen={setOpenId} /></div>

      <div id="contact" />
      <div className="reveal"><Footer profile={profile} onEgg={() => setTermOpen(true)} /></div>

      {openProject && <Overlay project={openProject} onClose={() => setOpenId(null)} />}
      {termOpen && <Terminal onClose={() => setTermOpen(false)} data={window.__data} />}
      {tweaksOpen && <Tweaks values={tweaks} onChange={updateTweaks} />}
    </div>
  );
}

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