/* tweaks.jsx — Tweaks panel bound to app theme state */

function TweaksMount() {
  const { tweaks, setTweaks, lang } = useApp();
  const [t, setTweak] = useTweaks(tweaks);

  // mirror panel state into app state (which applies the CSS attributes)
  useEffect(() => { setTweaks(t); }, [t]);

  const TH = lang === "th";

  return (
    <TweaksPanel title={TH ? "ปรับแต่ง" : "Tweaks"}>
      <TweakSection label={TH ? "ธีมสี" : "Color theme"} />
      <TweakColor
        label={TH ? "โทนสี" : "Palette"}
        value={t.theme === "navy" ? "#16223d" : t.theme === "emerald" ? "#163a2b" : t.theme === "oxblood" ? "#4a1f24" : "#232220"}
        options={["#16223d", "#163a2b", "#4a1f24", "#232220"]}
        onChange={(v) => setTweak("theme", { "#16223d": "navy", "#163a2b": "emerald", "#4a1f24": "oxblood", "#232220": "charcoal" }[v])}
      />
      <TweakToggle label={TH ? "โหมดมืด" : "Dark mode"} value={t.mode === "dark"} onChange={(v) => setTweak("mode", v ? "dark" : "light")} />

      <TweakSection label={TH ? "ตัวอักษร" : "Typography"} />
      <TweakSelect
        label={TH ? "ชุดฟอนต์" : "Font pairing"}
        value={t.font}
        options={[
          { value: "sarabun", label: "TH Sarabun" },
          { value: "garamond", label: "Cormorant · Sarabun" },
          { value: "playfair", label: "Playfair · Sarabun" },
          { value: "spectral", label: "Spectral · Plex" },
          { value: "modern", label: "Fraunces · Noto" },
        ]}
        onChange={(v) => setTweak("font", v)}
      />

      <TweakSection label={TH ? "เลย์เอาต์" : "Layout"} />
      <TweakRadio
        label={TH ? "ความหนาแน่น" : "Density"}
        value={t.density}
        options={["compact", "comfortable", "roomy"]}
        onChange={(v) => setTweak("density", v)}
      />
      <TweakSlider label={TH ? "ความโค้งมุม" : "Corner radius"} value={t.radius} min={0} max={16} step={1} unit="px" onChange={(v) => setTweak("radius", v)} />
    </TweaksPanel>
  );
}

window.TweaksMount = TweaksMount;