/* SIMONIS — Tweaks app: expressive controls that reshape the whole feel.
   Mounted into #tweaks-root. Panel self-hides until the Tweaks toolbar is on. */

const SIMONIS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "aura": "#2E9BFF",
  "atmosphere": "midnight",
  "energy": "balanced"
}/*EDITMODE-END*/;

/* hex helpers to derive a darker / lighter shade from one accent */
function _hx(h) { h = h.replace('#',''); return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)]; }
function _toHex(r,g,b){ return '#' + [r,g,b].map(function(v){ v=Math.max(0,Math.min(255,Math.round(v))); return (v<16?'0':'')+v.toString(16); }).join(''); }
function shade(hex, amt) { /* amt>0 lighten toward white, <0 darken */
  var c=_hx(hex); return _toHex(
    amt>0 ? c[0]+(255-c[0])*amt : c[0]*(1+amt),
    amt>0 ? c[1]+(255-c[1])*amt : c[1]*(1+amt),
    amt>0 ? c[2]+(255-c[2])*amt : c[2]*(1+amt));
}

function SimonisTweaks() {
  const [t, setTweak] = useTweaks(SIMONIS_TWEAK_DEFAULTS);

  var root = document.documentElement.style;
  var auraMounted = React.useRef(false);
  React.useEffect(function () {
    // Skip the first run so the per-load accent rotation (accent-rotate.js)
    // stays visible. Only override when the user actively picks a color.
    if (!auraMounted.current) { auraMounted.current = true; return; }
    var accent = t.aura || '#2E9BFF';
    root.setProperty('--accent', accent);
    root.setProperty('--accent-2', shade(accent, -0.28));
    root.setProperty('--accent-3', shade(accent, 0.42));
    root.setProperty('--c-id', accent);
  }, [t.aura]);

  React.useEffect(function () {
    document.body.classList.remove('atmo-slate', 'atmo-cosmic');
    if (t.atmosphere === 'slate') document.body.classList.add('atmo-slate');
    else if (t.atmosphere === 'cosmic') document.body.classList.add('atmo-cosmic');
  }, [t.atmosphere]);

  React.useEffect(function () {
    document.body.classList.remove('energy-calm', 'energy-alive');
    if (t.energy === 'calm') document.body.classList.add('energy-calm');
    else if (t.energy === 'alive') document.body.classList.add('energy-alive');
  }, [t.energy]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand Aura"
        hint="The color personality across hero, buttons, score & icons." />
      <TweakColor label="Accent" value={t.aura}
        options={['#2E9BFF', '#D4AF37', '#9D6CFF', '#29C46C']}
        onChange={(v) => setTweak('aura', v)} />

      <TweakSection label="Atmosphere"
        hint="Depth & light of the dark canvas." />
      <TweakRadio label="Mood" value={t.atmosphere}
        options={['midnight', 'slate', 'cosmic']}
        onChange={(v) => setTweak('atmosphere', v)} />

      <TweakSection label="Energy"
        hint="How alive the globe, data-flows & coin feel." />
      <TweakRadio label="Motion" value={t.energy}
        options={['calm', 'balanced', 'alive']}
        onChange={(v) => setTweak('energy', v)} />
    </TweaksPanel>
  );
}

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