// Media-Tracker v2 — Tweaks panel (Farbpalette der Medientypen, Displaystil, Glow)
const MT2_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Standard",
  "display": "Serif",
  "glow": 1
}/*EDITMODE-END*/;

// Reihenfolge: Serien, Anime, Filme, Spiele, Bücher, Manga
const MT2_PALETTES = {
  Standard: ['#3fbf94', '#e0719f', '#5e8fe8', '#e06a5a', '#d9a84e', '#9a7fe0'],
  Kräftig:  ['#2ee68a', '#ff5fae', '#3d9bff', '#ff5340', '#ffc14d', '#a06bff'],
  Pastell:  ['#9fd9bd', '#f2b8d2', '#a9c8ee', '#f0a99e', '#e8d2a8', '#cabbee'],
};
const MT2_VARS = ['--c-series', '--c-anime', '--c-movies', '--c-games', '--c-books', '--c-manga'];

function MT2Tweaks() {
  const [t, setTweak] = useTweaks(MT2_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement.style;
    const pal = MT2_PALETTES[t.palette] || MT2_PALETTES.Standard;
    MT2_VARS.forEach((v, i) => root.setProperty(v, pal[i]));
    root.setProperty('--glow', String(t.glow));
    document.body.classList.toggle('no-serif', t.display === 'Sans');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Farbcodierung" />
      <TweakRadio
        label="Palette"
        value={t.palette}
        options={['Standard', 'Kräftig', 'Pastell']}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakSection label="Typografie" />
      <TweakRadio
        label="Display-Stil"
        value={t.display}
        options={['Serif', 'Sans']}
        onChange={(v) => setTweak('display', v)}
      />
      <TweakSection label="Atmosphäre" />
      <TweakSlider
        label="Glow"
        value={t.glow}
        min={0}
        max={1}
        step={0.05}
        onChange={(v) => setTweak('glow', v)}
      />
    </TweaksPanel>
  );
}

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