// $TONJAK Tweaks panel
const { useState, useEffect } = React;

function TonjakTweaks() {
  const defaults = window.TONJAK_TWEAKS || {};
  const [tweaks, setTweak] = useTweaks(defaults);

  // Sync tweaks → window + dispatch event
  useEffect(() => {
    window.TONJAK_TWEAKS = { ...window.TONJAK_TWEAKS, ...tweaks };
    window.dispatchEvent(new CustomEvent('tonjak-tweaks-changed'));
  }, [tweaks]);

  return (
    <TweaksPanel title="$TONJAK Tweaks">
      <TweakSection label="Look">
        <TweakSlider
          label="Primary hue"
          value={tweaks.primaryHue ?? 200}
          min={0} max={360} step={1}
          onChange={(v) => setTweak('primaryHue', v)}
        />
        <TweakSelect
          label="Display font"
          value={tweaks.displayFont || 'Anton'}
          options={[
            { value: 'Anton', label: 'Anton (default)' },
            { value: 'Bebas Neue', label: 'Bebas Neue' },
            { value: 'Archivo Black', label: 'Archivo Black' },
          ]}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakRadio
          label="Background"
          value={tweaks.bgMode || 'blue'}
          options={[
            { value: 'blue', label: 'Blue' },
            { value: 'black', label: 'Black' },
            { value: 'white', label: 'White' },
          ]}
          onChange={(v) => setTweak('bgMode', v)}
        />
      </TweakSection>

      <TweakSection label="Motion">
        <TweakToggle
          label="Smoke animation"
          value={!!tweaks.smokeOn}
          onChange={(v) => setTweak('smokeOn', v)}
        />
        <TweakToggle
          label="Reduce motion"
          value={!!tweaks.reduceMotion}
          onChange={(v) => setTweak('reduceMotion', v)}
        />
      </TweakSection>

      <TweakSection label="Easter eggs">
        <TweakButton label="🚬 Make it rain wojaks" onClick={() => {
          if (window.tonjakToast) window.tonjakToast('🚬 RAIN MODE');
          for (let i = 0; i < 60; i++) {
            const r = document.createElement('img');
            r.src = 'assets/wojak-placeholder.svg';
            r.className = 'rain-wojak';
            r.style.left = (Math.random() * 100) + '%';
            r.style.width = (40 + Math.random() * 80) + 'px';
            r.style.animationDuration = (4 + Math.random() * 6) + 's';
            r.style.animationDelay = (Math.random() * 3) + 's';
            document.body.appendChild(r);
            setTimeout(() => r.remove(), 11000);
          }
        }} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount when DOM ready
function mountTonjakTweaks() {
  let host = document.getElementById('tonjak-tweaks-root');
  if (!host) {
    host = document.createElement('div');
    host.id = 'tonjak-tweaks-root';
    document.body.appendChild(host);
  }
  ReactDOM.createRoot(host).render(<TonjakTweaks />);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountTonjakTweaks);
} else {
  mountTonjakTweaks();
}