/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "ambar",
  "headingFont": "Quicksand",
  "warm": false,
  "floaters": true
}/*EDITMODE-END*/;

const ACCENTS = {
  ambar:     { deep: "#D6781F", light: "#E89A45", label: "Ámbar" },
  terracota: { deep: "#BE5128", light: "#DE7C44", label: "Terracota" },
  miel:      { deep: "#C2902F", light: "#E4BE66", label: "Miel" },
  bosque:    { deep: "#6E8447", light: "#93A45F", label: "Bosque" }
};
const FONTS = {
  Quicksand: "'Quicksand', system-ui, sans-serif",
  Nunito:    "'Nunito', system-ui, sans-serif",
  Lora:      "'Lora', Georgia, serif"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS.ambar;
    root.style.setProperty('--accent', a.light);
    root.style.setProperty('--accent-deep', a.deep);
    root.style.setProperty('--f-display', FONTS[t.headingFont] || FONTS.Quicksand);
    document.body.classList.toggle('warm', !!t.warm);
    document.body.classList.toggle('no-floaters', !t.floaters);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor
        label="Acento"
        value={(ACCENTS[t.accent]||ACCENTS.ambar).deep}
        options={Object.keys(ACCENTS).map(k => ACCENTS[k].deep)}
        onChange={(hex) => {
          const key = Object.keys(ACCENTS).find(k => ACCENTS[k].deep === hex) || 'ambar';
          setTweak('accent', key);
        }}
      />
      <TweakToggle label="Fondo más cálido" value={t.warm} onChange={(v) => setTweak('warm', v)} />

      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Títulos"
        value={t.headingFont}
        options={["Quicksand", "Nunito", "Lora"]}
        onChange={(v) => setTweak('headingFont', v)}
      />

      <TweakSection label="Detalles" />
      <TweakToggle label="Hojitas flotantes" value={t.floaters} onChange={(v) => setTweak('floaters', v)} />
    </TweaksPanel>
  );
}

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