// Top-level app: page-load sequence, section switching, tweaks panel.

const ACCENTS = {
  gold:    { gold: "#C89B3C", bright: "#F0E6D2", muted: "#785A28", text: "#C8AA6E" },
  silver:  { gold: "#B8C2CC", bright: "#EEF2F5", muted: "#5A6470", text: "#A6B0BA" },
  emerald: { gold: "#3CC892", bright: "#D2F0E2", muted: "#285A40", text: "#6EC8AA" },
  arcane:  { gold: "#A87DD9", bright: "#E6D2F0", muted: "#5A3C78", text: "#B89BD8" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "particles": 14,
  "ornate": "normal",
  "defaultSection": "about",
  "skipLoad": false
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [phase, setPhase] = React.useState(tweaks.skipLoad ? "client" : "signin"); // signin | loader | client
  const [appFadingIn, setAppFadingIn] = React.useState(false);
  const [active, setActive] = React.useState(tweaks.defaultSection || "about");
  const [mode, setMode] = React.useState("portfolio"); // portfolio | journal
  const mainRef = React.useRef(null);

  // apply accent
  React.useEffect(() => {
    const a = ACCENTS[tweaks.accent] || ACCENTS.gold;
    const r = document.documentElement;
    r.style.setProperty("--gold", a.gold);
    r.style.setProperty("--gold-bright", a.bright);
    r.style.setProperty("--gold-muted", a.muted);
    r.style.setProperty("--gold-text", a.text);
  }, [tweaks.accent]);

  // scroll to top of main on section change
  React.useEffect(() => {
    if (mainRef.current) mainRef.current.scrollTop = 0;
  }, [active, mode]);

  const ornateCls = tweaks.ornate === "low"  ? "ornate-low"
                  : tweaks.ornate === "high" ? "ornate-high" : "";

  const renderSection = () => {
    switch (active) {
      case "about":      return <Hero onCTA={() => setActive("projects")} particleCount={Number(tweaks.particles) || 0} />;
      case "experience": return <Experience />;
      case "projects":   return <Projects />;
      case "resume":     return <Resume />;
      case "contact":    return <Contact />;
      case "patch":      return <PatchNotes />;
      default:           return <Hero onCTA={() => setActive("projects")} particleCount={Number(tweaks.particles) || 0} />;
    }
  };

  return (
    <>
      {phase === "signin" && (
        <SignInScreen
          onDone={() => setPhase("loader")}
          onSkip={() => setPhase("client")}
        />
      )}
      {phase === "loader" && (
        <LoadingScreen
          onExitStart={() => setAppFadingIn(true)}
          onDone={() => setPhase("client")}
          onSkip={() => setPhase("client")}
        />
      )}
      <div className={`app ${ornateCls} ${tweaks.skipLoad ? "skip-load" : ""} ${mode === "journal" ? "journal-mode" : ""}${(phase === "client" || appFadingIn) ? " app-ready" : ""}`}>
        <TopBar
          onPlay={() => { setMode("portfolio"); setActive("contact"); }}
          mode={mode}
          onMode={setMode}
        />
        <div className="app-body">
          <LeftNav active={active} onChange={(id) => { setMode("portfolio"); setActive(id); }} />
          <div className="main">
            <div className="main-inner" ref={mainRef}>
              <div key={mode === "journal" ? "journal" : active} className="section-anim">
                {mode === "journal" ? <Journal /> : renderSection()}
              </div>
            </div>
          </div>
          <RightPanel />
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Accent"
          value={tweaks.accent}
          options={[
            { value: "gold",    label: "Gold" },
            { value: "silver",  label: "Silver" },
            { value: "emerald", label: "Emerald" },
            { value: "arcane",  label: "Arcane" },
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Ornament"
          value={tweaks.ornate}
          options={[
            { value: "low",    label: "Subtle" },
            { value: "normal", label: "Normal" },
            { value: "high",   label: "Ornate" },
          ]}
          onChange={(v) => setTweak("ornate", v)}
        />
        <TweakSection label="Hero" />
        <TweakSlider
          label="Particles"
          min={0} max={40} step={1}
          value={Number(tweaks.particles)}
          onChange={(v) => setTweak("particles", v)}
        />
        <TweakSection label="Startup" />
        <TweakSelect
          label="Default"
          value={tweaks.defaultSection}
          options={[
            { value: "about",      label: "About" },
            { value: "experience", label: "Experience" },
            { value: "projects",   label: "Projects" },
            { value: "resume",     label: "Resume" },
            { value: "contact",    label: "Contact" },
            { value: "patch",      label: "Patch Notes" },
          ]}
          onChange={(v) => setTweak("defaultSection", v)}
        />
        <TweakToggle
          label="Skip load anim"
          value={!!tweaks.skipLoad}
          onChange={(v) => setTweak("skipLoad", v)}
        />
      </TweaksPanel>
    </>
  );
};

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