// Main app — router + Tweaks
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "show_stats": true,
  "show_now": true,
  "show_work": true,
  "show_writing": true,
  "show_skills": true,
  "show_experience": true,
  "show_education": true,
  "show_awards": true,
  "show_publications": true,
  "show_volunteering": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState(() => {
    return window.location.hash.replace("#", "") || "home";
  });
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onHash = () => setRoute(window.location.hash.replace("#", "") || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (r) => {
    window.location.hash = r;
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Map visibility tweaks to sections
  const homeVis = {
    stats: tweaks.show_stats,
    now: tweaks.show_now,
    work: tweaks.show_work,
    writing: tweaks.show_writing,
  };
  const resumeVis = {
    stats: tweaks.show_stats,
    skills: tweaks.show_skills,
    experience: tweaks.show_experience,
    education: tweaks.show_education,
    awards: tweaks.show_awards,
    publications: tweaks.show_publications,
    volunteering: tweaks.show_volunteering,
  };

  let page;
  if (route.startsWith("post:")) {
    page = <window.PageArticle slug={route.slice(5)} kind="post" go={go} />;
  } else if (route.startsWith("project:")) {
    page = <window.PageArticle slug={route.slice(8)} kind="project" go={go} />;
  } else if (route === "about") {
    page = <window.PageAbout go={go} />;
  } else if (route === "resume") {
    page = <window.PageResume visible={resumeVis} />;
  } else if (route === "projects") {
    page = <window.PageProjects go={go} />;
  } else if (route === "blog") {
    page = <window.PageBlog go={go} />;
  } else if (route === "gallery") {
    page = <window.PageGallery />;
  } else {
    page = <window.PageHome go={go} visible={homeVis} />;
  }

  const navRoute = route.startsWith("post:") ? "blog"
                : route.startsWith("project:") ? "projects"
                : route;

  return (
    <div className="shell">
      <window.Nav route={navRoute} go={go} />
      <main key={route}>{page}</main>
      <window.Footer go={go} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Home page sections">
          <window.TweakToggle label="Stats ribbon" value={tweaks.show_stats}
            onChange={v => setTweak('show_stats', v)} />
          <window.TweakToggle label="Now / current work" value={tweaks.show_now}
            onChange={v => setTweak('show_now', v)} />
          <window.TweakToggle label="Track record" value={tweaks.show_work}
            onChange={v => setTweak('show_work', v)} />
          <window.TweakToggle label="Writing teaser" value={tweaks.show_writing}
            onChange={v => setTweak('show_writing', v)} />
        </window.TweakSection>
        <window.TweakSection title="Resume page sections">
          <window.TweakToggle label="Capabilities / skills" value={tweaks.show_skills}
            onChange={v => setTweak('show_skills', v)} />
          <window.TweakToggle label="Experience" value={tweaks.show_experience}
            onChange={v => setTweak('show_experience', v)} />
          <window.TweakToggle label="Education" value={tweaks.show_education}
            onChange={v => setTweak('show_education', v)} />
          <window.TweakToggle label="Awards" value={tweaks.show_awards}
            onChange={v => setTweak('show_awards', v)} />
          <window.TweakToggle label="Publications" value={tweaks.show_publications}
            onChange={v => setTweak('show_publications', v)} />
          <window.TweakToggle label="Volunteering" value={tweaks.show_volunteering}
            onChange={v => setTweak('show_volunteering', v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

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