// tweaks-app.jsx — Tweaks panel for Content Search Page
// Owns the body[data-*] attributes consumed by the main stylesheet.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardShape": "squircle",
  "rowStyle": "straight",
  "searchStyle": "ai",
  "background": "white",
  "hoverFx": "lift",
  "showHints": true
}/*EDITMODE-END*/;

function applyAttrs(t) {
  const b = document.body;
  b.dataset.cardshape = t.cardShape;
  b.dataset.rowstyle = t.rowStyle;
  b.dataset.search = t.searchStyle;
  b.dataset.bg = t.background;
  b.dataset.hover = t.hoverFx;
  const hint = document.querySelector('.tweaks-hint');
  if (hint) hint.style.display = t.showHints ? '' : 'none';
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyAttrs(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Card shape" />
      <TweakRadio
        value={t.cardShape}
        options={['squircle', 'rounded', 'circle', 'square']}
        onChange={(v) => setTweak('cardShape', v)} />

      <TweakSection label="Row layout" />
      <TweakRadio
        value={t.rowStyle}
        options={['straight', 'wave', 'stair']}
        onChange={(v) => setTweak('rowStyle', v)} />

      <TweakSection label="Hover effect" />
      <TweakRadio
        value={t.hoverFx}
        options={['lift', 'zoom', 'tilt', 'pop']}
        onChange={(v) => setTweak('hoverFx', v)} />

      <TweakSection label="Search style" />
      <TweakRadio
        value={t.searchStyle}
        options={['ai', 'minimal', 'neumorph']}
        onChange={(v) => setTweak('searchStyle', v)} />

      <TweakSection label="Background" />
      <TweakRadio
        value={t.background}
        options={['white', 'warm', 'cool', 'dark']}
        onChange={(v) => setTweak('background', v)} />

      <TweakSection label="Misc" />
      <TweakToggle
        label="Show hint label"
        value={t.showHints}
        onChange={(v) => setTweak('showHints', v)} />
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<TweaksApp />);