// Tweaks: switch between Chinese typography design versions + accent
const { useEffect: useEffectFT } = React;

const FONT_SETS = {
  notosans: { label: "思源黑体 · 经典极简", display: "'Noto Sans SC', sans-serif", weight: 900, style: "normal", tracking: "0em", leading: "1.12", body: "'Noto Sans SC', sans-serif" },
  huangyou: { label: "庆科黄油体 · 圆润海报", display: "'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif", weight: 400, style: "normal", tracking: "0.01em", leading: "1.18", body: "'Noto Sans SC', sans-serif" },
  serif:    { label: "思源宋体 · 优雅编辑", display: "'Noto Serif SC', serif", weight: 900, style: "normal", tracking: "0em", leading: "1.16", body: "'Noto Sans SC', sans-serif" },
  xiaowei:  { label: "站酷小薇 · 文艺清隽", display: "'ZCOOL XiaoWei', 'Noto Serif SC', serif", weight: 400, style: "normal", tracking: "0.02em", leading: "1.2", body: "'Noto Sans SC', sans-serif" },
  mashan:   { label: "马善政 · 手写笔意", display: "'Ma Shan Zheng', 'Noto Serif SC', serif", weight: 400, style: "normal", tracking: "0.02em", leading: "1.28", body: "'Noto Sans SC', sans-serif" },
};

function hexA(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

const TWEAK_DEFAULTS = { fontSet: "notosans", accent: "#3fe17a", heroScale: 105, heroX: 83, heroY: 61 };

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

  useEffectFT(() => {
    const s = FONT_SETS[t.fontSet] || FONT_SETS.notosans;
    const r = document.documentElement.style;
    r.setProperty("--font-display", s.display);
    r.setProperty("--display-weight", String(s.weight));
    r.setProperty("--display-style", s.style || "normal");
    r.setProperty("--display-tracking", s.tracking);
    r.setProperty("--display-leading", s.leading);
    r.setProperty("--font-body", s.body);
  }, [t.fontSet]);

  useEffectFT(() => {
    const r = document.documentElement.style;
    r.setProperty("--green", t.accent);
    r.setProperty("--green-dim", hexA(t.accent, 0.14));
  }, [t.accent]);

  useEffectFT(() => {
    const r = document.documentElement.style;
    r.setProperty("--hero-scale", String((t.heroScale ?? 105) / 100));
    r.setProperty("--hero-x", `${t.heroX ?? 83}%`);
    r.setProperty("--hero-y", `${t.heroY ?? 61}%`);
  }, [t.heroScale, t.heroX, t.heroY]);

  return (
    <TweaksPanel title="设计调整">
      <TweakSection label="字体设计版本" />
      <TweakSelect
        label="标题字体"
        value={t.fontSet}
        options={Object.entries(FONT_SETS).map(([v, o]) => ({ value: v, label: o.label }))}
        onChange={(v) => setTweak("fontSet", v)}
      />
      <TweakSection label="主题强调色" />
      <TweakColor
        label="强调色"
        value={t.accent}
        options={["#3fe17a", "#5fb6ff", "#f59e6b", "#a98bff", "#f47ab0"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="首屏宇航员图片" />
      <TweakSlider
        label="缩放"
        value={t.heroScale ?? 105}
        min={80} max={220} step={1} unit="%"
        onChange={(v) => setTweak("heroScale", v)}
      />
      <TweakSlider
        label="左右平移"
        value={t.heroX ?? 83}
        min={0} max={100} step={1} unit="%"
        onChange={(v) => setTweak("heroX", v)}
      />
      <TweakSlider
        label="上下平移"
        value={t.heroY ?? 61}
        min={0} max={100} step={1} unit="%"
        onChange={(v) => setTweak("heroY", v)}
      />
    </TweaksPanel>
  );
}

Object.assign(window, { FontTweaks, FONT_SETS });