/* Seoly.io — Tweaks panel app */
const ACCENTS = {
  '#2563EB': { rgb: '37,99,235',  hover: '#1d4ed8' },
  '#7C3AED': { rgb: '124,58,237', hover: '#6d28d9' },
  '#06B6D4': { rgb: '6,182,212',  hover: '#0891b2' },
  '#10B981': { rgb: '16,185,129', hover: '#059669' },
  '#E11D48': { rgb: '225,29,72',  hover: '#be123c' },
  '#F59E0B': { rgb: '245,158,11', hover: '#d97706' },
};
const DENSITY = { compact: 0.82, regular: 1, comfy: 1.16 };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2563EB",
  "radius": 16,
  "density": "regular"
}/*EDITMODE-END*/;

function SeolyTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = document.documentElement;
  const [dark, setDark] = React.useState(() => root.getAttribute('data-theme') === 'dark');

  // keep toggle in sync if theme changes elsewhere (header button)
  React.useEffect(() => {
    const h = e => setDark(e.detail === 'dark');
    window.addEventListener('seoly-theme', h);
    return () => window.removeEventListener('seoly-theme', h);
  }, []);

  // accent / radius / density -> CSS vars (theme is handled separately via setTheme)
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS['#2563EB'];
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-rgb', a.rgb);
    root.style.setProperty('--accent-hover', a.hover);
    root.style.setProperty('--radius', t.radius + 'px');
    root.style.setProperty('--radius-sm', Math.round(t.radius * 0.62) + 'px');
    root.style.setProperty('--radius-lg', Math.round(t.radius * 1.5) + 'px');
    const d = DENSITY[t.density] || 1;
    root.style.setProperty('--density', d);
    localStorage.setItem('seoly-tweaks', JSON.stringify({
      accent: t.accent, accentRgb: a.rgb, accentHover: a.hover, radius: t.radius, density: d
    }));
  }, [t.accent, t.radius, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakToggle label="Dark mode" value={dark} onChange={v => { setDark(v); window.setTheme(v ? 'dark' : 'light'); }} />
      <TweakColor label="Accent color" value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={v => setTweak('accent', v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={v => setTweak('density', v)} />
      <TweakSlider label="Corner radius" value={t.radius} min={4} max={28} step={2} unit="px"
        onChange={v => setTweak('radius', v)} />
    </TweaksPanel>
  );
}

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