// VirusWatch — Tweaks panel app
// Renders a floating control panel that lets the user re-skin the site live.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandColor": "#2563eb",
  "accentColor": "#dc2626",
  "fontScale": 1,
  "density": "regular",
  "globeAtmosphere": true,
  "showGrid": true,
  "heroStyle": "split"
}/*EDITMODE-END*/;

function VWTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to the DOM via CSS variables
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--brand', t.brandColor);
    root.style.setProperty('--brand-2', t.brandColor);
    root.style.setProperty('--brand-soft', hexToSoft(t.brandColor));
    root.style.setProperty('--red', t.accentColor);
    root.style.setProperty('--red-soft', hexToSoft(t.accentColor));
    document.body.style.fontSize = (15 * t.fontScale) + 'px';
    document.body.classList.toggle('density-compact', t.density === 'compact');
    document.body.classList.toggle('density-comfy',   t.density === 'comfy');
    document.body.classList.toggle('no-hero-grid',    !t.showGrid);
    document.body.classList.toggle('hero-stacked',    t.heroStyle === 'stacked');

    const atmoEls = document.querySelectorAll('.globe-glow, .globe-rings');
    atmoEls.forEach(el => el.style.display = t.globeAtmosphere ? '' : 'none');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor label="Brand" value={t.brandColor}
        options={['#2563eb', '#0ea5e9', '#0891b2', '#059669', '#7c3aed', '#0b1220']}
        onChange={(v) => setTweak('brandColor', v)} />
      <TweakColor label="Alert accent" value={t.accentColor}
        options={['#dc2626', '#ea580c', '#db2777', '#d97706', '#7c3aed']}
        onChange={(v) => setTweak('accentColor', v)} />

      <TweakSection label="Layout" />
      <TweakSlider label="Text size" value={t.fontScale} min={0.85} max={1.2} step={0.05} unit="×"
        onChange={(v) => setTweak('fontScale', v)} />
      <TweakRadio label="Density" value={t.density}
        options={['compact','regular','comfy']}
        onChange={(v) => setTweak('density', v)} />
      <TweakRadio label="Hero layout" value={t.heroStyle}
        options={['split','stacked']}
        onChange={(v) => setTweak('heroStyle', v)} />

      <TweakSection label="Globe" />
      <TweakToggle label="Atmosphere rings" value={t.globeAtmosphere}
        onChange={(v) => setTweak('globeAtmosphere', v)} />
      <TweakToggle label="Hero grid texture" value={t.showGrid}
        onChange={(v) => setTweak('showGrid', v)} />
    </TweaksPanel>
  );
}

function hexToSoft(hex) {
  // produce a very pale tint of the hex color
  const h = hex.replace('#','');
  const r = parseInt(h.substring(0,2), 16);
  const g = parseInt(h.substring(2,4), 16);
  const b = parseInt(h.substring(4,6), 16);
  // mix with white at 90%
  const mix = (c) => Math.round(c * 0.10 + 255 * 0.90);
  const toHex = (n) => n.toString(16).padStart(2,'0');
  return '#' + toHex(mix(r)) + toHex(mix(g)) + toHex(mix(b));
}

// Mount when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('tweaks-root');
  if (!root) return;
  ReactDOM.createRoot(root).render(<VWTweaksApp />);
});