// SOSIN — Panel de Tweaks v4
// Controla: paleta, tipografía, intensidad de efectos y visibilidad de secciones.
// Persiste en el bloque EDITMODE de ESTE archivo (compartido por las 4 páginas).

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paletteIndex": 0,
  "fontMode": "inter",
  "effects": 1,
  "showHud": true,
  "showArmor": true,
  "showCoverage": true,
  "showClients": true,
  "ambientParticles": true,
  "scanlines": false
}/*EDITMODE-END*/;

const FONTS = {
  inter:  { display: "'Inter', system-ui, sans-serif",        body: "'Inter', system-ui, sans-serif" },
  grotesk:{ display: "'Space Grotesk', 'Inter', sans-serif",  body: "'Inter', system-ui, sans-serif" },
  saira:  { display: "'Saira', 'Inter', sans-serif",          body: "'Saira', 'Inter', sans-serif" },
};

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

  useEffect(() => {
    const root = document.documentElement.style;
    const body = document.body;

    // Tipografía
    const f = FONTS[t.fontMode] || FONTS.inter;
    root.setProperty('--font-display', f.display);
    root.setProperty('--font-body', f.body);

    // Intensidad de efectos
    const fx = t.effects ?? 1;
    root.setProperty('--fx', String(fx));
    body.setAttribute('data-fxlow', fx < 0.5 ? '1' : '0');

    // Toggles de sección
    body.setAttribute('data-hud', t.showHud ? '1' : '0');
    body.setAttribute('data-armor', t.showArmor ? '1' : '0');
    body.setAttribute('data-coverage', t.showCoverage ? '1' : '0');
    body.setAttribute('data-clients', t.showClients ? '1' : '0');
    body.setAttribute('data-scanlines', t.scanlines ? '1' : '0');

    // Escena 3D (paleta + partículas + brillo/velocidad ligados a efectos)
    const cfg = {
      paletteIndex: t.paletteIndex,
      ambientParticles: t.ambientParticles,
      glowIntensity: fx,
      rotateSpeed: fx,
    };
    const apply = () => {
      window.SOSIN_CFG = Object.assign({}, window.SOSIN_CFG || {}, cfg);
      if (window.SOSIN_SCENE) { window.SOSIN_SCENE.setConfig(cfg); return true; }
      return false;
    };
    if (apply()) return;
    const id = setInterval(() => { if (apply()) clearInterval(id); }, 200);
    return () => clearInterval(id);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · SOSIN">
      <TweakSection label="Paleta" />
      <TweakRadio
        label="Tema"
        value={t.paletteIndex}
        onChange={(v) => setTweak('paletteIndex', v)}
        options={[
          { value: 0, label: 'Vino' },
          { value: 1, label: 'Acero' },
          { value: 2, label: 'Oro' },
          { value: 3, label: 'HUD' },
        ]}
      />

      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Fuente"
        value={t.fontMode}
        onChange={(v) => setTweak('fontMode', v)}
        options={[
          { value: 'inter', label: 'Inter' },
          { value: 'grotesk', label: 'Grotesk' },
          { value: 'saira', label: 'Saira' },
        ]}
      />

      <TweakSection label="Efectos" />
      <TweakSlider
        label="Intensidad"
        value={t.effects}
        min={0} max={1.5} step={0.05}
        onChange={(v) => setTweak('effects', v)}
      />
      <TweakToggle
        label="Partículas 3D"
        value={t.ambientParticles}
        onChange={(v) => setTweak('ambientParticles', v)}
      />
      <TweakToggle
        label="Scanlines"
        value={t.scanlines}
        onChange={(v) => setTweak('scanlines', v)}
      />

      <TweakSection label="Secciones" />
      <TweakToggle label="Radar HUD" value={t.showHud} onChange={(v) => setTweak('showHud', v)} />
      <TweakToggle label="Super Escolta" value={t.showArmor} onChange={(v) => setTweak('showArmor', v)} />
      <TweakToggle label="Mapa cobertura" value={t.showCoverage} onChange={(v) => setTweak('showCoverage', v)} />
      <TweakToggle label="Logos clientes" value={t.showClients} onChange={(v) => setTweak('showClients', v)} />
    </TweaksPanel>
  );
}

const host = document.createElement('div');
host.id = 'tweaks-root';
document.body.appendChild(host);
ReactDOM.createRoot(host).render(<TweaksApp />);