// Tweaks panel for Resolve homepage
const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#00F0FF",
  "accent": "#FF2E9A",
  "accent2": "#8B5CF6",
  "bgDeep": "#0A0E1A",
  "gridOpacity": 0.12,
  "scanlineOpacity": 0.03,
  "showCursor": true,
  "showScanlines": true,
  "showGrid": true,
  "heroMode": "Globe + Neural"
}/*EDITMODE-END*/;

function ResolveTweaks() {
  const [t, setT] = window.useTweaks(DEFAULTS);

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--primary', t.primary);
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-2', t.accent2);
    r.setProperty('--bg-deep', t.bgDeep);
    r.setProperty('--grid', `rgba(0, 240, 255, ${t.gridOpacity})`);

    document.querySelector('.grid-bg').style.display = t.showGrid ? '' : 'none';
    const fx = document.querySelector('.fx-overlay');
    fx.style.display = t.showScanlines ? '' : 'none';
    fx.style.opacity = t.scanlineOpacity;

    document.body.style.cursor = t.showCursor ? 'none' : 'auto';
    document.getElementById('cursor-dot').style.display = t.showCursor ? '' : 'none';
    document.getElementById('cursor-ring').style.display = t.showCursor ? '' : 'none';
  }, [t]);

  return (
    <window.TweaksPanel title="Tweaks · Resolve">
      <window.TweakSection title="Palette">
        <window.TweakColor label="Primary (Cyan)" value={t.primary} onChange={v => setT({ primary: v })} />
        <window.TweakColor label="Accent (Magenta)" value={t.accent} onChange={v => setT({ accent: v })} />
        <window.TweakColor label="Accent 2 (Violet)" value={t.accent2} onChange={v => setT({ accent2: v })} />
        <window.TweakColor label="Background" value={t.bgDeep} onChange={v => setT({ bgDeep: v })} />
      </window.TweakSection>
      <window.TweakSection title="Overlays">
        <window.TweakToggle label="Custom cursor" value={t.showCursor} onChange={v => setT({ showCursor: v })} />
        <window.TweakToggle label="Scanlines" value={t.showScanlines} onChange={v => setT({ showScanlines: v })} />
        <window.TweakToggle label="Grid background" value={t.showGrid} onChange={v => setT({ showGrid: v })} />
        <window.TweakSlider label="Scanline opacity" value={t.scanlineOpacity} min={0} max={0.15} step={0.005} onChange={v => setT({ scanlineOpacity: v })} />
        <window.TweakSlider label="Grid opacity" value={t.gridOpacity} min={0} max={0.3} step={0.01} onChange={v => setT({ gridOpacity: v })} />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<ResolveTweaks />);