/* ============================================================
   Tweaks island — renders ONLY the Tweaks panel and applies
   changes to the vanilla page via CSS variables + body classes.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#45C9BD",
  "bgTone": "graphite",
  "gridIntensity": 60,
  "glow": 42,
  "lights": "traffic"
}/*EDITMODE-END*/;

/* ---- helpers ---- */
function hexToRgb(hex) {
  let h = String(hex).replace('#', '');
  if (h.length === 3) h = h.replace(/./g, (c) => c + c);
  const n = parseInt(h.slice(0, 6), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

const BG_TONES = {
  graphite: ['#050506', '#0a0b0d', '#0f1114', '#15181c'],
  ink:      ['#000000', '#060607', '#0c0d0e', '#141517'],
  slate:    ['#07080a', '#0c0e12', '#111419', '#181c23'],
};

function applyTweaks(t) {
  const root = document.documentElement.style;

  /* accent + derived tints */
  const { r, g, b } = hexToRgb(t.accent);
  const dim = `rgb(${Math.round(r * 0.58)}, ${Math.round(g * 0.58)}, ${Math.round(b * 0.58)})`;
  root.setProperty('--acc', t.accent);
  root.setProperty('--acc-dim', dim);
  root.setProperty('--acc-glow', `rgba(${r}, ${g}, ${b}, 0.30)`);
  root.setProperty('--acc-soft', `rgba(${r}, ${g}, ${b}, 0.10)`);
  // the hero spark uses inline SVG presentation attrs (CSS vars don't resolve there)
  document.querySelectorAll('.spark path[stroke]').forEach((p) => p.setAttribute('stroke', t.accent));
  document.querySelectorAll('.spark linearGradient stop').forEach((s) => s.setAttribute('stop-color', t.accent));

  /* background tone */
  const tone = BG_TONES[t.bgTone] || BG_TONES.graphite;
  ['--bg', '--bg-1', '--bg-2', '--bg-3'].forEach((v, i) => root.setProperty(v, tone[i]));

  /* hero grid intensity 0–100 → alpha 0–0.14 */
  root.setProperty('--hero-grid', `rgba(255,255,255,${(t.gridIntensity / 100 * 0.14).toFixed(3)})`);

  /* hero accent glow 0–100 → opacity */
  root.setProperty('--hero-glow-op', (t.glow / 100).toFixed(2));

  /* window controls style */
  document.body.classList.toggle('lights-minimal', t.lights === 'minimal');
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#45C9BD', '#3B82F6', '#A6C8FF', '#ECEAE4']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Background"
        value={t.bgTone}
        options={[{ value: 'graphite', label: 'Graphite' }, { value: 'ink', label: 'Ink' }, { value: 'slate', label: 'Slate' }]}
        onChange={(v) => setTweak('bgTone', v)}
      />

      <TweakSection label="Hero atmosphere" />
      <TweakSlider label="Grid intensity" value={t.gridIntensity} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('gridIntensity', v)} />
      <TweakSlider label="Accent glow" value={t.glow} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('glow', v)} />

      <TweakSection label="Window frames" />
      <TweakRadio
        label="Controls"
        value={t.lights}
        options={[{ value: 'traffic', label: 'Traffic' }, { value: 'minimal', label: 'Minimal' }]}
        onChange={(v) => setTweak('lights', v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (el && window.ReactDOM && window.useTweaks) {
    ReactDOM.createRoot(el).render(<TweaksApp />);
  }
})();