// Main app
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 195,
  "density": "comfortable",
  "showTypewriter": true,
  "noise": true
}/*EDITMODE-END*/;

function HueSwatches({ value, onChange }) {
  const hues = [
    { v: 195, label: "cyan" },
    { v: 168, label: "teal" },
    { v: 145, label: "green" },
    { v: 32, label: "amber" },
    { v: 12, label: "ember" },
    { v: 320, label: "magenta" },
    { v: 285, label: "violet" },
    { v: 220, label: "blue" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
      {hues.map((h) => {
        const active = value === h.v;
        return (
          <button key={h.v} onClick={() => onChange(h.v)}
            style={{
              padding: 0, border: active ? "1.5px solid #ededed" : "1px solid rgba(255,255,255,0.1)",
              borderRadius: 8, overflow: "hidden", cursor: "pointer",
              background: "transparent", aspectRatio: "1 / 1",
              position: "relative",
            }} title={h.label}>
            <div style={{
              width: "100%", height: "100%",
              background: `linear-gradient(135deg, oklch(0.88 0.18 ${h.v}), oklch(0.5 0.18 ${h.v}))`,
            }} />
          </button>
        );
      })}
    </div>
  );
}

function App() {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { values: TWEAK_DEFAULTS, setTweak: () => {} };
  const tweaks = t.values; const setTweak = t.setTweak;

  const [bootState, setBootState] = useState("booting"); // booting → settling → ready
  const [openProjectId, setOpenProjectId] = useState(null);
  const { PROJECTS, SKILLS, CERTIFICATIONS, TIMELINE } = window.PORTFOLIO_DATA;
  const { GridBackground, Nav, Hero, ProjectModal, WorkSection, AboutSection, StackSection, ContactSection, TechMarquee } = window.PortfolioParts;

  // CSS var sync for accent hue
  useEffect(() => {
    document.documentElement.style.setProperty("--accent-hue", tweaks.accentHue);
  }, [tweaks.accentHue]);

  // Scroll reveal
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("reveal--in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // body class for boot-aware hero entrance
  useEffect(() => {
    document.body.dataset.boot = bootState;
    return () => { delete document.body.dataset.boot; };
  }, [bootState]);

  const openProject = PROJECTS.find((p) => p.id === openProjectId);

  const onNavigate = (id) => {
    if (window.scrollToId) window.scrollToId(id);
  };

  return (
    <React.Fragment>
      {bootState !== "ready" && window.LoadingScreen && (
        <window.LoadingScreen
          onSettling={() => setBootState("settling")}
          onDone={() => setBootState("ready")}
        />
      )}
      <GridBackground accentHue={tweaks.accentHue} />
      <Nav onNavigate={onNavigate} />
      <main>
        <Hero accentHue={tweaks.accentHue} />
        <TechMarquee />
        <div className="reveal"><WorkSection projects={PROJECTS} onOpen={setOpenProjectId} /></div>
        <div className="reveal"><AboutSection timeline={TIMELINE} certifications={CERTIFICATIONS} /></div>
        <div className="reveal"><StackSection skills={SKILLS} /></div>
        <div className="reveal"><ContactSection accentHue={tweaks.accentHue} /></div>
      </main>

      {openProject && <ProjectModal project={openProject} onClose={() => setOpenProjectId(null)} />}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Theme">
            <HueSwatches value={tweaks.accentHue} onChange={(v) => setTweak("accentHue", v)} />
          </window.TweakSection>
          <window.TweakSection title="Try a project">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
              {PROJECTS.map((p) => (
                <button key={p.id} onClick={() => setOpenProjectId(p.id)}
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 11, padding: "8px 10px",
                    borderRadius: 7, border: "1px solid rgba(255,255,255,0.1)",
                    background: "rgba(255,255,255,0.03)", color: "#ededed",
                    textAlign: "left", cursor: "pointer",
                  }}>
                  open {p.id}
                </button>
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </React.Fragment>
  );
}

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