// App shell — routing, theme, cmd+k, tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "painterly",
  "theme": "light",
  "accent": "#A66B4A"
}/*EDITMODE-END*/;

function useHashRoute() {
  const [hash, setHash] = useStateApp(() => window.location.hash || "#/");
  useEffectApp(() => {
    const onHash = () => setHash(window.location.hash || "#/");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return [hash, (h) => { window.location.hash = h; }];
}

function App() {
  const posts = window.BRADY_POSTS;
  const [hash, setHash] = useHashRoute();
  const [cmdkOpen, setCmdkOpen] = useStateApp(false);

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // theme
  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  useEffectApp(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  // cmd+k
  useEffectApp(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setCmdkOpen((v) => !v);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const openPost = (slug) => {
    setHash(`#/p/${slug}`);
    window.scrollTo({ top: 0 });
  };
  const goHome = () => {
    setHash("#/");
    window.scrollTo({ top: 0 });
  };

  // route
  let view;
  if (hash.startsWith("#/p/")) {
    const slug = hash.replace("#/p/", "");
    const post = posts.find((p) => p.slug === slug);
    if (post) {
      view = <ArticlePage post={post} onBack={goHome} variant={t.variant} />;
    } else {
      view = <div style={{ padding: 80, textAlign: "center" }}>找不到这篇文章。<a href="#/" onClick={(e) => { e.preventDefault(); goHome(); }}> 回到首页</a></div>;
    }
  } else {
    if (t.variant === "quiet") view = <HomeQuiet posts={posts} onOpen={openPost} />;
    else if (t.variant === "painterly") view = <HomePainterly posts={posts} onOpen={openPost} />;
    else view = <HomeEditorial posts={posts} onOpen={openPost} />;
  }

  return (
    <>
      {view}

      <button
        className="theme-toggle"
        onClick={() => setTweak("theme", t.theme === "light" ? "dark" : "light")}
        aria-label="切换主题"
        title="切换主题"
      >
        {t.theme === "light" ? "☾" : "☼"}
      </button>

      <CmdK open={cmdkOpen} onClose={() => setCmdkOpen(false)} posts={posts} onOpen={openPost} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="首页方向">
          <TweakRadio
            value={t.variant}
            onChange={(v) => setTweak("variant", v)}
            options={[
              { value: "quiet", label: "Quiet" },
              { value: "editorial", label: "Editorial" },
              { value: "painterly", label: "Painterly" },
            ]}
          />
        </TweakSection>
        <TweakSection title="主题">
          <TweakRadio
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "米白" },
              { value: "dark", label: "墨夜" },
            ]}
          />
        </TweakSection>
        <TweakSection title="签名色">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#A66B4A", "#7A5230", "#3D5A4C", "#2A2A2A"]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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