// Tweaks panel for Sabores del Mundo
// Bridges to window.__sdm.* (defined in main.js) so we don't need React for the page.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#FF6B00",
  "price": "9.90",
  "timer": true,
  "notify": true,
  "arrow": true,
  "patternDensity": "med"
}/*EDITMODE-END*/;

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

  // Aplicar al montar y cuando cambie
  React.useEffect(() => { window.__sdm && window.__sdm.setPrimary && window.__sdm.setPrimary(t.primaryColor); }, [t.primaryColor]);
  React.useEffect(() => { window.__sdm && window.__sdm.setPrice && window.__sdm.setPrice(t.price); }, [t.price]);
  React.useEffect(() => { window.__sdm && window.__sdm.setTimerVisible && window.__sdm.setTimerVisible(t.timer); }, [t.timer]);
  React.useEffect(() => { window.__sdm && window.__sdm.setNotifyVisible && window.__sdm.setNotifyVisible(t.notify); }, [t.notify]);
  React.useEffect(() => { window.__sdm && window.__sdm.setArrow && window.__sdm.setArrow(t.arrow); }, [t.arrow]);
  React.useEffect(() => { window.__sdm && window.__sdm.setDensity && window.__sdm.setDensity(t.patternDensity); }, [t.patternDensity]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor
        label="Color principal"
        value={t.primaryColor}
        options={['#FF6B00', '#E11D48', '#7C3AED', '#0EA5E9', '#16A34A']}
        onChange={(v) => setTweak('primaryColor', v)}
      />

      <TweakSection label="Oferta" />
      <TweakRadio
        label="Precio"
        value={t.price}
        options={['7.90', '9.90', '12.90']}
        onChange={(v) => setTweak('price', v)}
      />
      <TweakToggle
        label="Timer visible"
        value={t.timer}
        onChange={(v) => setTweak('timer', v)}
      />

      <TweakSection label="Conversión" />
      <TweakToggle
        label="Notificaciones flotantes"
        value={t.notify}
        onChange={(v) => setTweak('notify', v)}
      />
      <TweakToggle
        label="Flecha animada en hero"
        value={t.arrow}
        onChange={(v) => setTweak('arrow', v)}
      />

      <TweakSection label="Estilo" />
      <TweakRadio
        label="Patrón rombos"
        value={t.patternDensity}
        options={['low', 'med', 'high']}
        onChange={(v) => setTweak('patternDensity', v)}
      />
    </TweaksPanel>
  );
}

// Montar en un div al final del body (no toca el resto del DOM)
(function mount() {
  const host = document.createElement('div');
  host.id = 'sdm-tweaks-root';
  document.body.appendChild(host);
  const root = ReactDOM.createRoot(host);
  root.render(<SdmTweaksApp />);
})();