/* ============================================================
   AGENTE100 — Tweaks island
   Applies live design-token overrides to :root.
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0080C8",
  "circles": 1,
  "displayFont": "Plus Jakarta Sans",
  "radius": 12
}/*EDITMODE-END*/;

/* --- color helpers --- */
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
}
function mix(rgb, target, amt) {
  return rgb.map((c, i) => Math.round(c + (target[i] - c) * amt));
}
function rgbStr(rgb) { return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`; }

const FONT_STACKS = {
  "Plus Jakarta Sans": "'Plus Jakarta Sans', system-ui, sans-serif",
  "Sora": "'Sora', system-ui, sans-serif",
  "Manrope": "'Manrope', system-ui, sans-serif"
};
const LOADED_FONTS = {};
function ensureFont(name) {
  if (name === "Plus Jakarta Sans" || LOADED_FONTS[name]) return;
  LOADED_FONTS[name] = true;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css2?family=${name.replace(/ /g,'+')}:wght@500;600;700;800&display=swap`;
  document.head.appendChild(link);
}

function applyTweaks(t) {
  const root = document.documentElement.style;
  const rgb = hexToRgb(t.accent);
  const dark = mix(rgb, [0,0,0], 0.28);
  const light = mix(rgb, [255,255,255], 0.9);
  root.setProperty('--color-accent-blue', t.accent);
  root.setProperty('--color-accent-blue-dark', rgbStr(dark));
  root.setProperty('--color-accent-blue-light', rgbStr(light));
  root.setProperty('--accent-r', rgb[0]);
  root.setProperty('--accent-g', rgb[1]);
  root.setProperty('--accent-b', rgb[2]);
  root.setProperty('--circle-opacity', t.circles);
  root.setProperty('--radius-card', t.radius + 'px');
  root.setProperty('--radius-btn', Math.round(t.radius * 0.5) + 'px');
  ensureFont(t.displayFont);
  root.setProperty('--font-display', FONT_STACKS[t.displayFont] || FONT_STACKS["Plus Jakarta Sans"]);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color de marca" />
      <TweakColor label="Azul corporativo" value={t.accent}
        options={['#0080C8', '#1466B8', '#0EA5A5', '#2E5DD8', '#0F2A44']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Elemento gráfico" />
      <TweakSlider label="Intensidad círculos" value={t.circles} min={0} max={1.6} step={0.1}
        onChange={(v) => setTweak('circles', v)} />
      <TweakSection label="Tipografía & forma" />
      <TweakRadio label="Fuente display" value={t.displayFont}
        options={['Plus Jakarta Sans', 'Sora', 'Manrope']}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSlider label="Radio de bordes" value={t.radius} min={0} max={24} step={2} unit="px"
        onChange={(v) => setTweak('radius', v)} />
    </TweaksPanel>
  );
}

/* apply defaults immediately (before panel ever opens) */
applyTweaks(TWEAK_DEFAULTS);

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