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

const WERASH_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "midnight",
  "headingFont": "Sora",
  "radius": 16,
  "reduceMotion": false
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Sora": "'Sora', system-ui, sans-serif",
  "Space Grotesk": "'Space Grotesk', system-ui, sans-serif",
  "Manrope": "'Manrope', system-ui, sans-serif"
};

// ensure Space Grotesk is available when chosen
(function ensureFonts() {
  const l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap';
  document.head.appendChild(l);
})();

function WerashTweaks() {
  const [t, setTweak] = useTweaks(WERASH_TWEAK_DEFAULTS);
  const root = document.documentElement;

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

  React.useEffect(() => {
    const stack = FONT_STACKS[t.headingFont] || FONT_STACKS.Sora;
    // werash.js owns --font-display so it can keep Arabic headings correct.
    if (window.__werash && window.__werash.setHeadingFont) {
      window.__werash.setHeadingFont(stack);
    }
  }, [t.headingFont]);

  React.useEffect(() => {
    root.style.setProperty('--radius', t.radius + 'px');
  }, [t.radius]);

  React.useEffect(() => {
    document.body.classList.toggle('no-motion', !!t.reduceMotion);
  }, [t.reduceMotion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Design direction" />
      <TweakRadio
        label="Theme"
        value={t.direction}
        options={[
          { value: 'midnight', label: 'Midnight' },
          { value: 'trust', label: 'Trust' },
          { value: 'sand', label: 'Sand' }
        ]}
        onChange={(v) => setTweak('direction', v)}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Heading font"
        value={t.headingFont}
        options={['Sora', 'Space Grotesk', 'Manrope']}
        onChange={(v) => setTweak('headingFont', v)}
      />
      <TweakSection label="Shape & motion" />
      <TweakSlider
        label="Corner radius"
        value={t.radius}
        min={2} max={28} step={1} unit="px"
        onChange={(v) => setTweak('radius', v)}
      />
      <TweakToggle
        label="Reduce motion"
        value={t.reduceMotion}
        onChange={(v) => setTweak('reduceMotion', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<WerashTweaks />);