/* tweaks.jsx — monta SOLO el panel de Tweaks y aplica cambios al DOM vanilla */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E06313",
  "headingFont": "Oswald",
  "diagonal": 56,
  "heroLine1": "Tu gimnasio en el",
  "heroLine2": "Corazón de Murcia"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Oswald": "'Oswald', 'Arial Narrow', sans-serif",
  "Anton": "'Anton', 'Oswald', sans-serif",
  "Saira Condensed": "'Saira Condensed', 'Oswald', sans-serif",
  "Teko": "'Teko', 'Oswald', sans-serif"
};

// Carga diferida de fuentes alternativas
function ensureFont(name) {
  if (name === 'Oswald') return;
  var id = 'font-' + name.replace(/\s+/g, '-');
  if (document.getElementById(id)) return;
  var l = document.createElement('link');
  l.id = id; l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=' + name.replace(/\s+/g, '+') + ':wght@400;500;600;700&display=swap';
  document.head.appendChild(l);
}

// Oscurece un hex un ~22% para el estado deep
function darken(hex) {
  var h = hex.replace('#', '');
  if (h.length === 3) h = h.replace(/./g, function (c) { return c + c; });
  var n = parseInt(h, 16);
  var r = Math.round(((n >> 16) & 255) * 0.78);
  var g = Math.round(((n >> 8) & 255) * 0.78);
  var b = Math.round((n & 255) * 0.78);
  return '#' + [r, g, b].map(function (v) { return v.toString(16).padStart(2, '0'); }).join('');
}

function parseTitle(str) {
  // *texto* -> <span class="accent">texto</span>
  var safe = str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return safe.replace(/\*([^*]+)\*/g, '<span class="accent">$1</span>').replace(/\n/g, '<br>');
}

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

  React.useEffect(function () {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-deep', darken(t.accent));
  }, [t.accent]);

  React.useEffect(function () {
    ensureFont(t.headingFont);
    document.documentElement.style.setProperty('--font-display', FONT_STACKS[t.headingFont] || FONT_STACKS.Oswald);
  }, [t.headingFont]);

  React.useEffect(function () {
    document.documentElement.style.setProperty('--skew', t.diagonal + 'px');
  }, [t.diagonal]);

  React.useEffect(function () {
    const el = document.getElementById('heroLine1');
    if (el) el.textContent = t.heroLine1;
  }, [t.heroLine1]);

  React.useEffect(function () {
    const el = document.getElementById('heroLine2');
    if (el) el.textContent = t.heroLine2;
  }, [t.heroLine2]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor label="Acento" value={t.accent}
        options={['#E06313', '#D7202A', '#F08A1E', '#1F8A5B', '#2A6FDB']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Tipografía" />
      <TweakRadio label="Titulares" value={t.headingFont}
        options={['Oswald', 'Anton', 'Saira Condensed', 'Teko']}
        onChange={(v) => setTweak('headingFont', v)} />

      <TweakSection label="Energía visual" />
      <TweakSlider label="Diagonales" value={t.diagonal} min={0} max={110} step={2} unit="px"
        onChange={(v) => setTweak('diagonal', v)} />

      <TweakSection label="Hero (texto)" />
      <TweakText label="Línea 1 (grafito)" value={t.heroLine1}
        onChange={(v) => setTweak('heroLine1', v)} />
      <TweakText label="Línea 2 (naranja)" value={t.heroLine2}
        onChange={(v) => setTweak('heroLine2', v)} />
    </TweaksPanel>
  );
}

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