/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSlider */

const KADRO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "card": "İkon",
  "rhythm": "Normal",
  "headingScale": 1,
  "surecInk": false
}/*EDITMODE-END*/;

const CARD_MAP   = { "İkon": "icons", "Numara": "numbers", "Sade": "plain" };
const RHYTHM_MAP = { "Sık": "compact", "Normal": "regular", "Geniş": "spacious" };

function KadroTweaks() {
  const [t, setTweak] = useTweaks(KADRO_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.cardstyle = CARD_MAP[t.card] || "icons";
    r.dataset.rhythm = RHYTHM_MAP[t.rhythm] || "regular";
    r.dataset.surecInk = t.surecInk ? "on" : "off";
    r.style.setProperty("--h-scale", String(t.headingScale));
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons({ attrs: { "stroke-width": 1.75 } });
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Çalışma alanları" />
      <TweakRadio
        label="Kart stili"
        value={t.card}
        options={["İkon", "Numara", "Sade"]}
        onChange={(v) => setTweak("card", v)}
      />
      <TweakSection label="Düzen" />
      <TweakRadio
        label="Bölüm ritmi"
        value={t.rhythm}
        options={["Sık", "Normal", "Geniş"]}
        onChange={(v) => setTweak("rhythm", v)}
      />
      <TweakSlider
        label="Başlık ölçeği"
        value={t.headingScale}
        min={0.85} max={1.2} step={0.01}
        onChange={(v) => setTweak("headingScale", v)}
      />
      <TweakToggle
        label="Çalışma sürecimiz — koyu zemin"
        value={t.surecInk}
        onChange={(v) => setTweak("surecInk", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<KadroTweaks />);