// tweaks.jsx — Floating tweaks panel

function TweaksPanel() {
  const [petrol, setPetrol] = React.useState(TWEAK_DEFAULTS.petrolColor);
  const [gold, setGold] = React.useState(TWEAK_DEFAULTS.goldColor);
  const [glow, setGlow] = React.useState(TWEAK_DEFAULTS.glowEnabled);
  const [anim, setAnim] = React.useState(TWEAK_DEFAULTS.animSpeed);

  function applyPetrol(v) {
    setPetrol(v);
    document.documentElement.style.setProperty('--petrol', v);
    document.documentElement.style.setProperty('--petrol-dark', shadeColor(v, -15));
    document.documentElement.style.setProperty('--petrol-light', shadeColor(v, 15));
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{petrolColor:v}}, '*');
  }
  function applyGold(v) {
    setGold(v);
    document.documentElement.style.setProperty('--gold', v);
    document.documentElement.style.setProperty('--gold-light', shadeColor(v, 20));
    document.documentElement.style.setProperty('--gold-pale', shadeColor(v, 55) + '33');
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{goldColor:v}}, '*');
  }
  function applyGlow(v) {
    setGlow(v);
    const glowVal = v ? `0 0 30px ${gold}59` : 'none';
    document.documentElement.style.setProperty('--glow', glowVal);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{glowEnabled:v}}, '*');
  }
  function applyAnim(v) {
    setAnim(v);
    document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach(el => {
      el.style.transition = `opacity ${v}s ease, transform ${v}s ease`;
    });
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{animSpeed:parseFloat(v)}}, '*');
  }

  function shadeColor(color, pct) {
    let r = parseInt(color.slice(1,3),16), g = parseInt(color.slice(3,5),16), b = parseInt(color.slice(5,7),16);
    r = Math.max(0,Math.min(255, r+pct*2));
    g = Math.max(0,Math.min(255, g+pct*2));
    b = Math.max(0,Math.min(255, b+pct*2));
    return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('');
  }

  return (
    <div id="tweaks-panel">
      <h4>✦ Tweaks</h4>
      <div className="tw-row">
        <label>Verde petróleo</label>
        <input type="color" value={petrol} onChange={e => applyPetrol(e.target.value)} />
      </div>
      <div className="tw-row">
        <label>Dourado</label>
        <input type="color" value={gold} onChange={e => applyGold(e.target.value)} />
      </div>
      <div className="tw-row">
        <label>Glow dourado</label>
        <label className="tw-check">
          <input type="checkbox" checked={glow} onChange={e => applyGlow(e.target.checked)} />
          {glow ? 'Ativado' : 'Desativado'}
        </label>
      </div>
      <div className="tw-row">
        <label>Velocidade animação ({anim}s)</label>
        <input type="range" min=".3" max="1.5" step=".1" value={anim} onChange={e => applyAnim(e.target.value)} />
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });