/* =========================================================
   KM // MUSEUM — Tweaks app (expanded)
   ========================================================= */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": "lofi",
  "gravity": 0.55,
  "density": "normal",
  "grain": 0.42,
  "vignette": 0.55,
  "contrast": 1.18,
  "brightness": 0.78,
  "grayscale": 0.95,
  "scrollMul": 2.0,
  "spreadX": 4000,
  "spreadY": 2800,
  "rotJitter": 1.0,
  "aberration": 1.0,
  "popStrength": 0.32,
  "audioVol": 0.85,
  "timelineOpacity": 0.58,
  "hudOpacity": 1.0,
  "fallChance": 0.12,
  "showFilmstrip": true,
  "showAnnotations": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    window.__km = window.__km || {};
    Object.assign(window.__km, {
      atmosphere: t.atmosphere,
      gravity: t.gravity,
      grain: t.grain,
      vignette: t.vignette,
      contrast: t.contrast,
      brightness: t.brightness,
      grayscale: t.grayscale,
      scrollMul: t.scrollMul,
      rotJitter: t.rotJitter,
      aberration: t.aberration,
      popStrength: t.popStrength,
      audioVol: t.audioVol,
      fallChance: t.fallChance,
      showFilmstrip: t.showFilmstrip,
      showAnnotations: t.showAnnotations,
    });
    if (window.applyAtmosphere) window.applyAtmosphere();
    if (window.applyVisibility) window.applyVisibility();
    if (window.kmAudio && window.kmAudio.setMaster) window.kmAudio.setMaster(t.audioVol);

    document.documentElement.style.setProperty('--tl-op', t.timelineOpacity);
    document.documentElement.style.setProperty('--hud-op', t.hudOpacity);
  }, [t.atmosphere, t.gravity, t.grain, t.vignette, t.contrast, t.brightness,
      t.grayscale, t.scrollMul, t.rotJitter, t.aberration, t.popStrength,
      t.audioVol, t.timelineOpacity, t.hudOpacity, t.fallChance,
      t.showFilmstrip, t.showAnnotations]);

  React.useEffect(() => {
    window.__km = window.__km || {};
    let dirty = false;
    if (window.__km.density !== t.density) { window.__km.density = t.density; dirty = true; }
    if (window.__km.spreadX !== t.spreadX) { window.__km.spreadX = t.spreadX; dirty = true; }
    if (window.__km.spreadY !== t.spreadY) { window.__km.spreadY = t.spreadY; dirty = true; }
    if (dirty && window.kmRebuild) window.kmRebuild();
  }, [t.density, t.spreadX, t.spreadY]);

  return (
    <TweaksPanel title="KM // TWEAKS">
      <TweakSection label="Atmosphere" />
      <TweakRadio label="Film stock" value={t.atmosphere}
        options={[
          { value: 'dry',      label: 'Dry' },
          { value: 'lofi',     label: 'Lo-fi' },
          { value: 'blackout', label: 'Blackout' },
        ]}
        onChange={(v) => setTweak('atmosphere', v)}
      />
      <TweakSlider label="Grain"      value={t.grain}      min={0} max={1}    step={0.01} onChange={(v) => setTweak('grain', v)} />
      <TweakSlider label="Vignette"   value={t.vignette}   min={0} max={1}    step={0.01} onChange={(v) => setTweak('vignette', v)} />
      <TweakSlider label="Contrast"   value={t.contrast}   min={0.6} max={2}  step={0.01} onChange={(v) => setTweak('contrast', v)} />
      <TweakSlider label="Brightness" value={t.brightness} min={0.3} max={1.4} step={0.01} onChange={(v) => setTweak('brightness', v)} />
      <TweakSlider label="Grayscale"  value={t.grayscale}  min={0} max={1}    step={0.01} onChange={(v) => setTweak('grayscale', v)} />
      <TweakSlider label="Color pop"  value={t.popStrength} min={0} max={1}   step={0.02} onChange={(v) => setTweak('popStrength', v)} />

      <TweakSection label="Camera" />
      <TweakSlider label="Gravity"     value={t.gravity}    min={0} max={1}    step={0.01} onChange={(v) => setTweak('gravity', v)} />
      <TweakSlider label="Scroll mult" value={t.scrollMul}  min={0.5} max={5}  step={0.1}  onChange={(v) => setTweak('scrollMul', v)} />
      <TweakSlider label="Aberration"  value={t.aberration} min={0} max={2}    step={0.05} onChange={(v) => setTweak('aberration', v)} />

      <TweakSection label="Sprawl" />
      <TweakRadio label="Density" value={t.density}
        options={[
          { value: 'sparse', label: 'Sparse' },
          { value: 'normal', label: 'Normal' },
          { value: 'tight',  label: 'Tight' },
        ]}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakSlider label="Spread X"     value={t.spreadX}   min={1500} max={7000} step={100} onChange={(v) => setTweak('spreadX', v)} />
      <TweakSlider label="Spread Y"     value={t.spreadY}   min={1000} max={5000} step={100} onChange={(v) => setTweak('spreadY', v)} />
      <TweakSlider label="Rot. jitter"  value={t.rotJitter} min={0} max={3}      step={0.1} onChange={(v) => setTweak('rotJitter', v)} />
      <TweakSlider label="Falling"      value={t.fallChance} min={0} max={0.5}   step={0.01} onChange={(v) => setTweak('fallChance', v)} />
      <TweakToggle label="Filmstrip"    value={t.showFilmstrip}    onChange={(v) => setTweak('showFilmstrip', v)} />
      <TweakToggle label="Annotations"  value={t.showAnnotations}  onChange={(v) => setTweak('showAnnotations', v)} />

      <TweakSection label="Interface" />
      <TweakSlider label="Timeline"  value={t.timelineOpacity} min={0} max={1} step={0.01} onChange={(v) => setTweak('timelineOpacity', v)} />
      <TweakSlider label="HUD"       value={t.hudOpacity}      min={0} max={1} step={0.01} onChange={(v) => setTweak('hudOpacity', v)} />
      <TweakSlider label="Audio"     value={t.audioVol}        min={0} max={1} step={0.01} onChange={(v) => setTweak('audioVol', v)} />

      <TweakSection label="Navigation" />
      <TweakButton label="Jump to end" onClick={() => { if (window.kmJumpToEnd) window.kmJumpToEnd(); }} />
      <TweakButton label="Return to gate" onClick={() => { if (window.returnTop) window.returnTop(); }} />
    </TweaksPanel>
  );
}

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