const { useState, useMemo, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sage",
  "headingFont": "Zen Kaku Gothic New",
  "bodyFont": "Noto Sans JP",
  "density": "comfortable",
  "cardStyle": "soft",
  "showHero": true
}/*EDITMODE-END*/;

const PALETTES = {
  sage:   { primary: "#7ea372", primaryDeep: "#557047", soft: "#f4f7f0", paper: "#fbfaf6" },
  rose:   { primary: "#c98c8c", primaryDeep: "#a06b6b", soft: "#faf1ef", paper: "#fcf8f6" },
  blue:   { primary: "#7ea0bf", primaryDeep: "#5d7a93", soft: "#f0f4f8", paper: "#f8fafc" },
  cream:  { primary: "#b89863", primaryDeep: "#8a7445", soft: "#faf3e6", paper: "#fcf8ee" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeCat, setActiveCat] = useState("すべて");
  const [sort, setSort] = useState("new");
  const [page, setPage] = useState(1);
  const [query, setQuery] = useState("");
  const [activeNav, setActiveNav] = useState("記事一覧");

  const filtered = useMemo(() => {
    let list = ARTICLES.slice();
    if (activeCat !== "すべて") list = list.filter(a => a.category === activeCat);
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(a => a.title.toLowerCase().includes(q) || a.excerpt.toLowerCase().includes(q) || a.tags.some(t => t.toLowerCase().includes(q)));
    }
    if (sort === "popular") list.sort((a,b) => b.views - a.views);
    if (sort === "read")    list.sort((a,b) => a.read - b.read);
    if (sort === "new")     list.sort((a,b) => (a.date < b.date ? 1 : -1));
    return list;
  }, [activeCat, sort, query]);

  // Apply palette via CSS vars
  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.sage;
    document.documentElement.style.setProperty("--primary",      p.primary);
    document.documentElement.style.setProperty("--primary-deep", p.primaryDeep);
    document.documentElement.style.setProperty("--soft",         p.soft);
    document.documentElement.style.setProperty("--paper",        p.paper);
    document.documentElement.style.setProperty("--font-heading", `"${tweaks.headingFont}"`);
    document.documentElement.style.setProperty("--font-body",    `"${tweaks.bodyFont}"`);
    document.documentElement.style.setProperty("--density-y",    tweaks.density === "compact" ? "16px" : tweaks.density === "spacious" ? "32px" : "22px");
    document.documentElement.style.setProperty("--card-radius",  tweaks.cardStyle === "sharp" ? "8px" : tweaks.cardStyle === "round" ? "22px" : "16px");
    document.documentElement.style.setProperty("--card-shadow",
      tweaks.cardStyle === "sharp"
        ? "0 1px 0 rgba(60,72,55,.06)"
        : tweaks.cardStyle === "round"
          ? "0 16px 40px -24px rgba(60,72,55,.18)"
          : "0 8px 24px -16px rgba(60,72,55,.16)"
    );
  }, [tweaks]);

  return (
    <div className="page">
      <Header
        query={query} setQuery={setQuery}
        activeNav={activeNav} setActiveNav={setActiveNav}
      />
      {tweaks.showHero && <Hero onPickCategory={setActiveCat} />}

      <div className="layout">
        <main className="main">
          <ArticleList
            articles={filtered}
            activeCat={activeCat} setActiveCat={setActiveCat}
            sort={sort} setSort={setSort}
            page={page} setPage={setPage}
          />
        </main>
        <Sidebar
          activeCat={activeCat} setActiveCat={setActiveCat}
          query={query} setQuery={setQuery}
        />
      </div>

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="カラー">
          <TweakColor
            label="パレット"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              ["#7ea372","#f4f7f0","#557047"],
              ["#c98c8c","#faf1ef","#a06b6b"],
              ["#7ea0bf","#f0f4f8","#5d7a93"],
              ["#b89863","#faf3e6","#8a7445"],
            ]}
          />
        </TweakSection>
        <TweakSection title="タイポグラフィ">
          <TweakSelect
            label="見出しフォント"
            value={tweaks.headingFont}
            onChange={(v) => setTweak("headingFont", v)}
            options={["Zen Kaku Gothic New","Noto Serif JP","Shippori Mincho","BIZ UDPGothic","M PLUS Rounded 1c"]}
          />
          <TweakSelect
            label="本文フォント"
            value={tweaks.bodyFont}
            onChange={(v) => setTweak("bodyFont", v)}
            options={["Noto Sans JP","BIZ UDPGothic","M PLUS 1p","Zen Kaku Gothic New"]}
          />
        </TweakSection>
        <TweakSection title="レイアウト">
          <TweakRadio
            label="密度"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={["compact","comfortable","spacious"]}
          />
          <TweakRadio
            label="カード"
            value={tweaks.cardStyle}
            onChange={(v) => setTweak("cardStyle", v)}
            options={["sharp","soft","round"]}
          />
          <TweakToggle
            label="ヒーローを表示"
            value={tweaks.showHero}
            onChange={(v) => setTweak("showHero", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// posts.json のロード完了後に描画する
function Root() {
  const [ready, setReady] = React.useState(window.__postsReady || false);
  React.useEffect(() => {
    if (!ready) {
      document.addEventListener('postsLoaded', () => setReady(true), { once: true });
    }
  }, []);
  if (!ready) return (
    <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100vh',fontFamily:'sans-serif',color:'#888'}}>
      読み込み中...
    </div>
  );
  return <App />;
}

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