/* Panel de Tweaks — isla aislada. Ajusta variables CSS del sitio vanilla. */
const VG_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#cf2e22",
  "displayFont": "Anton",
  "grain": true,
  "cinematic": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#cf2e22": ["#cf2e22", "#f0584a"],   // rojo forja
  "#c03c25": ["#c03c25", "#e05a3c"],   // brasa carmesí
  "#8aa0b8": ["#8aa0b8", "#bcd0e4"],   // acero
  "#2f7c66": ["#2f7c66", "#4fb795"],   // jade
  "#c79a3f": ["#c79a3f", "#e6c878"]    // bronce
};

const DISPLAY_FONTS = {
  "Anton": "'Anton', sans-serif",
  "Oswald": "'Oswald', sans-serif",
  "Bebas": "'Bebas Neue', sans-serif"
};

function ensureFont(name) {
  const map = {
    "Oswald": "https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap",
    "Bebas": "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
  };
  if (!map[name]) return;
  if (document.querySelector(`link[data-vgfont="${name}"]`)) return;
  const l = document.createElement('link');
  l.rel = 'stylesheet'; l.href = map[name]; l.setAttribute('data-vgfont', name);
  document.head.appendChild(l);
}

function VGTweaks() {
  const [t, setTweak] = useTweaks(VG_DEFAULTS);
  const root = document.documentElement;

  React.useEffect(() => {
    const pair = ACCENTS[t.accent] || ACCENTS["#c79a3f"];
    root.style.setProperty('--bronze', pair[0]);
    root.style.setProperty('--bronze-2', pair[1]);
    root.style.setProperty('--accent', pair[0]);
    root.style.setProperty('--accent-2', pair[1]);
  }, [t.accent]);

  React.useEffect(() => {
    ensureFont(t.displayFont);
    root.style.setProperty('--display', DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS.Anton);
  }, [t.displayFont]);

  React.useEffect(() => {
    document.body.style.setProperty('--grain-on', t.grain ? '1' : '0');
    let s = document.getElementById('vg-grain-toggle');
    if (!s) { s = document.createElement('style'); s.id = 'vg-grain-toggle'; document.head.appendChild(s); }
    s.textContent = t.grain ? '' : 'body::after{display:none!important;}';
  }, [t.grain]);

  React.useEffect(() => {
    if (!t.cinematic) {
      try { sessionStorage.setItem('vg_cine_seen', '1'); } catch (e) {}
    }
  }, [t.cinematic]);

  return (
    <TweaksPanel>
      <TweakSection label="Identidad" />
      <TweakColor label="Color de acento" value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Tipografía de titulares" value={t.displayFont}
        options={Object.keys(DISPLAY_FONTS)}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSection label="Atmósfera" />
      <TweakToggle label="Textura de grano" value={t.grain}
        onChange={(v) => setTweak('grain', v)} />
      <TweakToggle label="Intro cinemática (al recargar)" value={t.cinematic}
        onChange={(v) => { setTweak('cinematic', v); if (v) { try { sessionStorage.removeItem('vg_cine_seen'); } catch(e){} } }} />
    </TweaksPanel>
  );
}

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