// Pedro Marvarez — Tweaks
// Depends on: tweaks-panel.jsx (loaded first)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": "galaxy",
  "bubbleEnergy": 35,
  "glassDepth": "clear",
  "backgroundGlow": 20
}/*EDITMODE-END*/;

function SiteTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;

    // ── ATMOSPHERE ──────────────────────────────────────
    document.body.classList.remove('atm-galaxy','atm-forest','atm-neon');
    document.body.classList.add('atm-' + tweaks.atmosphere);

    // ── GLASS DEPTH ─────────────────────────────────────
    const glassMap = {
      frosted: { bg: 'rgba(10,8,36,0.72)', blur: '42px', bdr: 'rgba(255,255,255,0.18)', bdrT: 'rgba(255,255,255,0.40)', shadow: '0 0 0 1px rgba(100,80,200,.28),0 20px 70px rgba(0,0,80,.55),0 1px 0 rgba(255,255,255,.10) inset' },
      clear:   { bg: 'rgba(12,10,40,0.35)', blur: '18px', bdr: 'rgba(255,255,255,0.10)', bdrT: 'rgba(255,255,255,0.24)', shadow: '0 0 0 1px rgba(80,60,200,.18),0 20px 60px rgba(0,0,80,.45)' },
      mirror:  { bg: 'rgba(16,12,52,0.82)', blur: '30px', bdr: 'rgba(180,160,255,0.30)', bdrT: 'rgba(220,200,255,0.55)', shadow: '0 0 0 1px rgba(180,140,255,.40),0 20px 70px rgba(80,0,200,.50),0 1px 0 rgba(255,200,255,.18) inset' },
    };
    const g = glassMap[tweaks.glassDepth];
    root.style.setProperty('--glass', g.bg);
    root.style.setProperty('--bdr', g.bdr);
    root.style.setProperty('--bdr-t', g.bdrT);
    document.querySelectorAll('.win-shell').forEach(el => {
      // Skip backdrop-filter on the Twitch panel — it causes Chrome's
      // Twitch SDK to fail the "style visibility" autoplay check
      if(el.id !== 'twitchPanel') el.style.backdropFilter = `blur(${g.blur}) saturate(180%)`;
      el.style.boxShadow = g.shadow;
    });

    // ── BACKGROUND GLOW (glints) ─────────────────────────
    root.style.setProperty('--glint-opacity', tweaks.backgroundGlow / 100);

    // ── BUBBLE ENERGY ────────────────────────────────────
    window.bubbleConfig = { energy: tweaks.bubbleEnergy };

  }, [tweaks.atmosphere, tweaks.glassDepth, tweaks.bubbleEnergy, tweaks.backgroundGlow]);

  return React.createElement(TweaksPanel, null,

    React.createElement(TweakSection, { title: 'atmosphere' },
      React.createElement('p', { style: panelHint }, 'shifts the entire color world'),
      React.createElement(TweakRadio, {
        id: 'atmosphere',
        options: ['galaxy', 'forest', 'neon'],
        value: tweaks.atmosphere,
        onChange: v => setTweak('atmosphere', v),
      })
    ),

    React.createElement(TweakSection, { title: 'bubble energy' },
      React.createElement('p', { style: panelHint }, 'from still to electric'),
      React.createElement(TweakSlider, {
        id: 'bubbleEnergy',
        min: 5, max: 100, step: 5,
        value: tweaks.bubbleEnergy,
        onChange: v => setTweak('bubbleEnergy', v),
      })
    ),

    React.createElement(TweakSection, { title: 'background glow' },
      React.createElement('p', { style: panelHint }, 'ambient light spots intensity'),
      React.createElement(TweakSlider, {
        id: 'backgroundGlow',
        min: 0, max: 100, step: 5,
        value: tweaks.backgroundGlow,
        onChange: v => setTweak('backgroundGlow', v),
      })
    ),

    React.createElement(TweakSection, { title: 'glass depth' },
      React.createElement('p', { style: panelHint }, 'material quality of every window'),
      React.createElement(TweakRadio, {
        id: 'glassDepth',
        options: ['frosted', 'clear', 'mirror'],
        value: tweaks.glassDepth,
        onChange: v => setTweak('glassDepth', v),
      })
    )
  );
}

const panelHint = { fontSize: 10, color: 'rgba(180,195,240,.50)', marginBottom: 8, fontWeight: 600 };

const _root = document.getElementById('tweaks-root');
if (_root) ReactDOM.createRoot(_root).render(React.createElement(SiteTweaks));