/* Scyinse — Tweaks: three expressive controls that reshape the whole feel.
   1) Signal  — re-themes the entire neon system (CSS vars + live canvas colors)
   2) Atmosphere — backdrop intensity + particle-mesh density
   3) Motion  — tempo of every animated graphic (canvas + CSS)            */
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "signal": ["#ff3b47", "#ff6a5c", "#ff2d6e"],
  "atmosphere": "balanced",
  "motion": "balanced"
}/*EDITMODE-END*/;

// Curated neon palettes: [primary, secondary(charts), tertiary(hub/glow)]
const PALETTES = [
  ["#ff3b47", "#ff6a5c", "#ff2d6e"], // Signal Red
  ["#5e8bff", "#3fe9ff", "#b07cff"], // Electric Blue
  ["#23e5a0", "#79ff8f", "#00e0c8"], // Acid Green
  ["#9a6eff", "#6eb4ff", "#cf5bff"], // Ultraviolet
  ["#ffb13c", "#ffd35a", "#ff7a3c"], // Amber Flux
];

const hexToRgb = (h) => {
  const n = parseInt(h.slice(1), 16);
  return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
};

function applySignal(pal) {
  if (!pal) return;
  const [b, c, p] = pal.map(hexToRgb);
  const r = document.documentElement.style;
  r.setProperty('--blue-rgb', b);
  r.setProperty('--cyan-rgb', c);
  r.setProperty('--purple-rgb', p);
  if (window.SCY && window.SCY.setColors) window.SCY.setColors({ blue: b, cyan: c, purple: p });
  if (window.SCY && window.SCY.redraw) window.SCY.redraw();
}
function applyAtmosphere(v) {
  const b = document.body;
  b.classList.remove('atmo-minimal', 'atmo-balanced', 'atmo-charged');
  b.classList.add('atmo-' + v);
  if (window.SCY) {
    window.SCY.density = { minimal: 0.45, balanced: 1, charged: 1.7 }[v] || 1;
    if (window.SCY.reseed) window.SCY.reseed();
  }
}
function applyMotion(v) {
  const b = document.body;
  b.classList.remove('motion-calm', 'motion-balanced', 'motion-alive');
  b.classList.add('motion-' + v);
  if (window.SCY) window.SCY.motion = { calm: 0.4, balanced: 1, alive: 1.75 }[v] || 1;
  if (window.SCY && window.SCY.redraw) window.SCY.redraw();
}

const hintStyle = { font: "12px/1.5 var(--mono,monospace)", color: "var(--faint,#646a78)", margin: "-2px 0 10px", padding: "0 2px" };

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applySignal(t.signal); }, [t.signal]);
  React.useEffect(() => { applyAtmosphere(t.atmosphere); }, [t.atmosphere]);
  React.useEffect(() => { applyMotion(t.motion); }, [t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Signal" />
      <div style={hintStyle}>Re-themes the whole neon system — mesh, charts &amp; glows.</div>
      <TweakColor label="Accent" value={t.signal} options={PALETTES} onChange={(v) => setTweak('signal', v)} />

      <TweakSection label="Atmosphere" />
      <div style={hintStyle}>Backdrop aurora + particle-mesh density.</div>
      <TweakRadio label="Field" value={t.atmosphere} options={['minimal', 'balanced', 'charged']} onChange={(v) => setTweak('atmosphere', v)} />

      <TweakSection label="Motion" />
      <div style={hintStyle}>Tempo of every animated graphic.</div>
      <TweakRadio label="Tempo" value={t.motion} options={['calm', 'balanced', 'alive']} onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

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