/* ============================================================
   app.jsx — boot sequence, tweaks, assembly
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const BOOT_LINES = [
  { t: 420, html: `<span class="w">PN-OS</span> v5.0 — booting portfolio kernel …` },
  { t: 650, html: `[<span class="ok"> OK </span>] mounted search-infra · pipelines · llm-tooling` },
  { t: 780, html: `[<span class="am">INFO</span>] page-cache tuned … throughput <span class="a">5 → 55 RPS</span> (11×) · cost <span class="a">-77%</span>` },
  { t: 720, html: `[<span class="ok"> OK </span>] loaded quality-lab · name-match scorer · agent tooling` },
  { t: 620, html: `[<span class="ok"> OK </span>] user <span class="a">pulkit</span> authenticated · <span class="w">available for work</span>` },
  { t: 520, html: `<span class="a">welcome.</span> rendering interface …` },
];

function BootSequence({ onDone }) {
  const [shown, setShown] = useStateA([]);
  const [coarsePointer, setCoarsePointer] = useStateA(false);
  const doneRef = useRefA(false);
  const finish = () => { if (doneRef.current) return; doneRef.current = true; onDone(); };

  useEffectA(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { finish(); return; }
    setCoarsePointer(window.matchMedia("(pointer: coarse)").matches);
    let acc = 0; const timers = [];
    BOOT_LINES.forEach((l, i) => {
      acc += l.t;
      timers.push(setTimeout(() => setShown((s) => [...s, l]), acc));
    });
    timers.push(setTimeout(finish, acc + 900));
    const onKey = (e) => { if (e.key === "Escape" || e.key === "Enter") finish(); };
    window.addEventListener("keydown", onKey);
    return () => { timers.forEach(clearTimeout); window.removeEventListener("keydown", onKey); };
  }, []);

  return (
    <div className="boot" onClick={finish}>
      {shown.map((l, k) => <div className="boot-line" key={k} dangerouslySetInnerHTML={{ __html: l.html }}></div>)}
      <div className="boot-line">&nbsp;<span className="caret"></span></div>
      <div className="boot-skip">
        {coarsePointer ? <>tap anywhere to skip</> : <>press <kbd>enter</kbd> to skip</>}
      </div>
    </div>
  );
}

/* ---------- tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C7F23C",
  "scanlines": true,
  "grid": true,
  "boot": true,
  "scramble": true
}/*EDITMODE-END*/;

const ACCENTS = ["#C7F23C", "#FFB000", "#58E0E8", "#FF6B5C", "#A78BFA", "#EDEDE7"];
function inkFor(hex) {
  const c = hex.replace("#", "");
  const r = parseInt(c.slice(0, 2), 16), g = parseInt(c.slice(2, 4), 16), b = parseInt(c.slice(4, 6), 16);
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum > 0.6 ? "#0A0B0C" : "#0A0B0C";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booted, setBooted] = useStateA(false);
  const [showBoot, setShowBoot] = useStateA(null); // null = undecided

  useEffectA(() => {
    // decide boot only once ever (localStorage), based on tweak
    if (showBoot === null) {
      const seen = localStorage.getItem("pn_booted");
      const doBoot = t.boot && !seen;
      setShowBoot(doBoot);
      if (!doBoot) setBooted(true);
    }
  }, [showBoot, t.boot]);

  useEffectA(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-ink", inkFor(t.accent));
  }, [t.accent]);

  const finishBoot = () => { localStorage.setItem("pn_booted", "1"); setShowBoot(false); setBooted(true); };

  return (
    <>
      {t.grid && <div className="grid-bg"></div>}
      {t.scanlines && <div className="crt-overlay scanlines"></div>}
      <div className="vignette"></div>

      {showBoot && <BootSequence onDone={finishBoot} />}

      <StatusBar />
      <Hero booted={booted && t.scramble} />
      <Terminal />
      <Work />
      <Projects />
      <OperatingStyle />
      <GitLog />
      <Skills />
      <Contact />

      <TweaksPanel>
        <TweakSection label="Identity" />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="CRT / atmosphere" />
        <TweakToggle label="Scanlines" value={t.scanlines} onChange={(v) => setTweak("scanlines", v)} />
        <TweakToggle label="Grid backdrop" value={t.grid} onChange={(v) => setTweak("grid", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Boot sequence" value={t.boot} onChange={(v) => setTweak("boot", v)} />
        <TweakToggle label="Name scramble" value={t.scramble} onChange={(v) => setTweak("scramble", v)} />
        <TweakButton label="Replay boot" onClick={() => { localStorage.removeItem("pn_booted"); setBooted(false); setShowBoot(true); }} />
      </TweaksPanel>
    </>
  );
}

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