/* MN Management — Tweaks app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "photoTreatment": "color",
  "accent": "#ff6a2c",
  "showHeroPhoto": true,
  "showWienStrip": true,
  "showStatsRow": true
}/*EDITMODE-END*/;

function MNTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live
  React.useEffect(() => {
    // photo treatment
    document.body.classList.remove('photos-bw', 'photos-warm');
    if (t.photoTreatment === 'bw')   document.body.classList.add('photos-bw');
    if (t.photoTreatment === 'warm') document.body.classList.add('photos-warm');

    // accent color
    const root = document.documentElement;
    root.style.setProperty('--gold', t.accent);
    // derive a lighter version
    const lighten = (hex, pct) => {
      const n = parseInt(hex.slice(1), 16);
      const r = Math.min(255, ((n >> 16) & 255) + Math.round(255*pct));
      const g = Math.min(255, ((n >>  8) & 255) + Math.round(255*pct));
      const b = Math.min(255,  (n        & 255) + Math.round(255*pct));
      return '#' + ((r<<16)|(g<<8)|b).toString(16).padStart(6,'0');
    };
    root.style.setProperty('--gold-2', lighten(t.accent, 0.10));
    root.style.setProperty('--gold-light', lighten(t.accent, 0.22));

    // section visibility
    const heroPhoto = document.querySelector('.hero-photo-wrap');
    if (heroPhoto) heroPhoto.style.display = t.showHeroPhoto ? '' : 'none';

    const wien = document.querySelector('.wien-strip');
    if (wien) wien.style.display = t.showWienStrip ? '' : 'none';

    const stats = document.querySelector('.hero-stats-row');
    if (stats) stats.style.display = t.showStatsRow ? '' : 'none';
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Fotos" />
      <TweakRadio
        label="Bildlook"
        value={t.photoTreatment}
        options={['color', 'warm', 'bw']}
        onChange={(v) => setTweak('photoTreatment', v)}
      />
      <TweakToggle
        label="Hero-Foto zeigen"
        value={t.showHeroPhoto}
        onChange={(v) => setTweak('showHeroPhoto', v)}
      />
      <TweakToggle
        label="Wien-Strip zeigen"
        value={t.showWienStrip}
        onChange={(v) => setTweak('showWienStrip', v)}
      />

      <TweakSection label="Layout" />
      <TweakToggle
        label="Stats-Reihe im Hero"
        value={t.showStatsRow}
        onChange={(v) => setTweak('showStatsRow', v)}
      />

      <TweakSection label="Akzentfarbe" />
      <TweakColor
        label="Akzent"
        value={t.accent}
        options={['#ff6a2c', '#ee5a24', '#ff8b3d', '#e84118', '#d63031']}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

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