const TWEAK_DEFAULTS = {
  "mood": "neon",
  "weather": "storm",
  "density": "compact"
};

const WEATHER_PRESETS = {
  calm:    { density: 0.10, speed: 0.088, wind:  0.10 },
  drizzle: { density: 0.24, speed: 0.120, wind:  0.12 },
  rain:    { density: 0.40, speed: 0.160, wind:  0.18 },
  storm:   { density: 0.76, speed: 0.272, wind:  0.42 },
};

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

  React.useEffect(()=>{
    document.body.dataset.mood = t.mood;
  }, [t.mood]);

  React.useEffect(()=>{
    document.body.dataset.density = t.density;
  }, [t.density]);

  React.useEffect(()=>{
    const p = WEATHER_PRESETS[t.weather] || WEATHER_PRESETS.rain;
    const cs = getComputedStyle(document.body);
    const rgb = cs.getPropertyValue('--mood-rain').trim() || '165,194,214';
    window.RAIN_CFG = { ...p, rgb };
    if (window.RAIN_REBUILD) window.RAIN_REBUILD();
  }, [t.weather, t.mood]);

  return (
    <TweaksPanel title="Rain · Tweaks">
      <TweakSection label="Mood" />
      <TweakRadio
        label="Atmosphere"
        value={t.mood}
        options={[
          { value: 'storm',    label: 'Storm' },
          { value: 'overcast', label: 'Overcast' },
          { value: 'dawn',     label: 'Dawn' },
          { value: 'neon',     label: 'Neon' },
        ]}
        onChange={(v)=>setTweak('mood', v)}
      />

      <TweakSection label="Weather" />
      <TweakRadio
        label="Rainfall"
        value={t.weather}
        options={[
          { value: 'calm',    label: 'Calm' },
          { value: 'drizzle', label: 'Drizzle' },
          { value: 'rain',    label: 'Rain' },
          { value: 'storm',   label: 'Storm' },
        ]}
        onChange={(v)=>setTweak('weather', v)}
      />

      <TweakSection label="Density" />
      <TweakRadio
        label="Layout"
        value={t.density}
        options={[
          { value: 'loose',   label: 'Loose' },
          { value: 'default', label: 'Default' },
          { value: 'compact', label: 'Compact' },
        ]}
        onChange={(v)=>setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

document.body.dataset.mood = TWEAK_DEFAULTS.mood;
document.body.dataset.density = TWEAK_DEFAULTS.density;
(function applyInitialWeather(){
  const p = WEATHER_PRESETS[TWEAK_DEFAULTS.weather] || WEATHER_PRESETS.rain;
  const cs = getComputedStyle(document.body);
  const rgb = cs.getPropertyValue('--mood-rain').trim() || '165,194,214';
  window.RAIN_CFG = { ...p, rgb };
  if (window.RAIN_REBUILD) window.RAIN_REBUILD();
})();

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