// Tweaks panel for the speedgate page.
function PageTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.applyPageTweaks(t);
  }, [t]);

  // Push arrow + LED transforms to the 3D scene. Stored on window.GATE_FX so
  // they apply even if the model is still loading; re-applied via __gateFX once
  // it's ready.
  React.useEffect(() => {
    const fx = {
      arrow: { dx: t.arrowX, dy: t.arrowY, dz: t.arrowZ, scale: t.arrowScale },
      led: { dx: t.ledX, dy: t.ledY, dz: t.ledZ, scale: t.ledScale, tilt: t.ledTilt, roll: t.ledRoll },
      logo: { rotX: t.logoRotX, rotY: t.logoRotY, rotZ: t.logoRotZ, scale: t.logoScale },
      glow: t.ledGlow,
    };
    window.GATE_FX = fx;
    if (window.__gateFX) {
      window.__gateFX.arrow(fx.arrow);
      window.__gateFX.led(fx.led);
    }
    if (window.__gateLogoFX) window.__gateLogoFX(fx.logo);
    if (window.__gateGlow) window.__gateGlow(fx.glow);
  }, [t.arrowX, t.arrowY, t.arrowZ, t.arrowScale, t.ledX, t.ledY, t.ledZ, t.ledScale, t.ledTilt, t.ledRoll, t.logoRotX, t.logoRotY, t.logoRotZ, t.logoScale, t.ledGlow]);

  // The model loads async — keep nudging until __gateFX exists, then apply once.
  React.useEffect(() => {
    if (window.__gateFX) return;
    const id = setInterval(() => {
      if (window.__gateFX && window.GATE_FX) {
        window.__gateFX.arrow(window.GATE_FX.arrow);
        window.__gateFX.led(window.GATE_FX.led);
        if (window.__gateLogoFX) window.__gateLogoFX(window.GATE_FX.logo);
        if (window.__gateGlow) window.__gateGlow(window.GATE_FX.glow);
        clearInterval(id);
      }
    }, 250);
    return () => clearInterval(id);
  }, []);

  const pos = (key, label) => (
    <TweakSlider
      label={label}
      value={t[key]}
      min={-250}
      max={250}
      step={1}
      onChange={(v) => setTweak(key, v)}
    />
  );
  const scale = (key, label) => (
    <TweakSlider
      label={label}
      value={t[key]}
      min={0.2}
      max={3}
      step={0.05}
      onChange={(v) => setTweak(key, v)}
    />
  );
  const rot = (key, label) => (
    <TweakSlider
      label={label}
      value={t[key]}
      min={-180}
      max={180}
      step={1}
      onChange={(v) => setTweak(key, v)}
    />
  );

  return (
    <TweaksPanel>
      <TweakSection label="Weergave" />
      <TweakRadio
        label="Thema"
        value={t.theme}
        options={['dark', 'light']}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakSection label="Scroll-animatie" />
      <TweakSlider label="Intensiteit" value={t.intensity} min={0.2} max={2} step={0.05} onChange={(v) => setTweak('intensity', v)} />
      <TweakSlider label="Snelheid" value={t.speed} min={0.3} max={2} step={0.05} onChange={(v) => setTweak('speed', v)} />

      <TweakSection label="Pijlen (boven)" />
      {pos('arrowX', 'Pijl — links/rechts')}
      {pos('arrowY', 'Pijl — hoogte')}
      {pos('arrowZ', 'Pijl — voor/achter')}
      {scale('arrowScale', 'Pijl — grootte')}

      <TweakSection label="LED-strips" />
      {pos('ledX', 'LED — buiten/binnen')}
      {pos('ledY', 'LED — hoogte')}
      {pos('ledZ', 'LED — voor/achter')}
      {scale('ledScale', 'LED — grootte')}
      {rot('ledTilt', 'LED — kantelen (voor/achter)')}
      {rot('ledRoll', 'LED — draaien')}
      <TweakSlider label="LED — gloed" value={t.ledGlow} min={0} max={2} step={0.05} onChange={(v) => setTweak('ledGlow', v)} />

      <TweakSection label="Logo op deuren" />
      {rot('logoRotX', 'Logo — draaien (X-as)')}
      {rot('logoRotY', 'Logo — draaien (Y-as)')}
      {rot('logoRotZ', 'Logo — draaien (Z-as)')}
      {scale('logoScale', 'Logo — grootte')}
    </TweaksPanel>
  );
}

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