/* =========================================================
   わんぱく — Tweaks panel app
   Drives hero variant + theme via window.applyWanpakuTweaks
   ========================================================= */

const WANPAKU_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "accent": "#F6A623",
  "headingFont": "maru",
  "decorations": true
}/*EDITMODE-END*/;

function WanpakuTweaks() {
  const [t, setTweak] = useTweaks(WANPAKU_TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.applyWanpakuTweaks) window.applyWanpakuTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="ヒーロー（FV）レイアウト" />
      <TweakRadio
        label="レイアウト案"
        value={t.heroLayout}
        options={[
          { value: "split", label: "標準" },
          { value: "overlay", label: "全面" },
          { value: "scrapbook", label: "コラージュ" },
        ]}
        onChange={(v) => setTweak("heroLayout", v)}
      />

      <TweakSection label="配色・装飾" />
      <TweakColor
        label="アクセント"
        value={t.accent}
        options={["#F6A623", "#f0826f", "#f2b705"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakToggle
        label="手描き装飾を表示"
        value={t.decorations}
        onChange={(v) => setTweak("decorations", v)}
      />

      <TweakSection label="見出しフォント" />
      <TweakRadio
        label="書体"
        value={t.headingFont}
        options={[
          { value: "maru", label: "丸ゴ" },
          { value: "rounded", label: "ラウンド" },
          { value: "kosugi", label: "コスギ" },
        ]}
        onChange={(v) => setTweak("headingFont", v)}
      />
    </TweaksPanel>
  );
}

(function mountWanpakuTweaks() {
  function go() {
    let host = document.getElementById("wanpaku-tweaks-root");
    if (!host) {
      host = document.createElement("div");
      host.id = "wanpaku-tweaks-root";
      document.body.appendChild(host);
    }
    ReactDOM.createRoot(host).render(<WanpakuTweaks />);
  }
  if (document.readyState !== "loading") go();
  else document.addEventListener("DOMContentLoaded", go);
})();