/* global React, ReactDOM, YogaFigure, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, useTweaks */

const { useEffect } = React;

/* ============================================================
   Mount the animated yoga figure into #yoga-stage
   ============================================================ */
function HeroFigureMount({ variant }) {
  return <YogaFigure variant={variant} />;
}

/* ============================================================
   Tweaks panel — exposes the layout variants
   ============================================================ */
function YogaTweaks() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__);

  // Apply gallery style live
  useEffect(() => {
    const g = document.getElementById('gallery-grid');
    if (!g) return;
    g.classList.remove('bento', 'uniform', 'masonry');
    g.classList.add(t.galleryStyle);
  }, [t.galleryStyle]);

  // Apply accent live (palette)
  useEffect(() => {
    const root = document.documentElement;
    if (t.accent === 'monocromo') {
      root.style.setProperty('--bg', '#F4EFE7');
      root.style.setProperty('--bg-2', '#EBE4D7');
      root.style.setProperty('--ink', '#1A1A1A');
      root.style.setProperty('--sage', '#6B7355');
    } else if (t.accent === 'salvia') {
      root.style.setProperty('--bg', '#F0EEE6');
      root.style.setProperty('--bg-2', '#DBDCC9');
      root.style.setProperty('--ink', '#2A3024');
      root.style.setProperty('--sage', '#6B7355');
    } else if (t.accent === 'tinta') {
      root.style.setProperty('--bg', '#FAFAF7');
      root.style.setProperty('--bg-2', '#ECEAE3');
      root.style.setProperty('--ink', '#0A0A0A');
      root.style.setProperty('--sage', '#1A1A1A');
    } else if (t.accent === 'arcilla') {
      root.style.setProperty('--bg', '#EFE5D8');
      root.style.setProperty('--bg-2', '#E0D2BC');
      root.style.setProperty('--ink', '#3D2F23');
      root.style.setProperty('--sage', '#B8643A');
    }
  }, [t.accent]);

  // Apply rebel disruptive accent live
  useEffect(() => {
    const root = document.documentElement;
    const REBEL_PALETTE = {
      terra:    '#B8492A',  // terracota tostada
      borgona:  '#7A1F2B',  // vino borgoña / oxblood
      klein:    '#1B3DD8',  // klein blue ultramarino
      mocha:    '#9B6B4F',  // mocha mousse (Pantone 2025)
      mostaza:  '#C8941C',  // mostaza solar
      lime:     '#C8FF3A',  // verde lima fluorescente
      forest:   '#1F3A2E',  // verde bosque profundo
      sage:     '#5A6F4A',  // salvia saturada
      teal:     '#0F4C5C',  // teal profundo
      coral:    '#E66A50',  // coral cálido
      magenta:  '#C73E7C',  // magenta digital
      lavanda:  '#7E6BAB',  // lavanda violeta
      naranja:  '#DB7836',  // naranja crudo
      cherry:   '#B82A3E',  // cherry red sobrio
      cobre:    '#A8633B',  // cobre tostado
      marino:   '#1F2D4A',  // azul marino profundo
    };
    root.style.setProperty('--rebel', REBEL_PALETTE[t.rebel] || REBEL_PALETTE.terra);
    // Also update map marker stroke (inline svg)
    document.querySelectorAll('svg circle[stroke="#C8FF3A"]').forEach(c => {
      c.setAttribute('stroke', REBEL_PALETTE[t.rebel] || REBEL_PALETTE.terra);
    });
  }, [t.rebel]);

  // Toggle custom cursor
  useEffect(() => {
    const ring = document.querySelector('.cursor-ring');
    const dot  = document.querySelector('.cursor-dot');
    if (t.showCursor) {
      document.documentElement.classList.add('has-cursor');
      if (ring) ring.style.display = '';
      if (dot)  dot.style.display = '';
    } else {
      document.documentElement.classList.remove('has-cursor');
      if (ring) ring.style.display = 'none';
      if (dot)  dot.style.display = 'none';
    }
  }, [t.showCursor]);

  return (
    <>
      {/* Render hero figure */}
      <YogaStageMount variant={t.heroMotion} />

      <TweaksPanel title="Tweaks · we are yoga">
        <TweakSection label="Hero · animación">
          <TweakRadio
            label="Movimiento"
            value={t.heroMotion}
            onChange={(v) => setTweak('heroMotion', v)}
            options={[
              { value: 'cycle',  label: 'Asanas' },
              { value: 'line',   label: 'Línea' },
              { value: 'breath', label: 'Respira' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Galería · cajas">
          <TweakRadio
            label="Formato"
            value={t.galleryStyle}
            onChange={(v) => setTweak('galleryStyle', v)}
            options={[
              { value: 'bento',   label: 'Bento' },
              { value: 'uniform', label: 'Grid' },
              { value: 'masonry', label: 'Masonry' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Paleta">
          <TweakSelect
            label="Acento"
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'monocromo', label: 'Crema monocromo (default)' },
              { value: 'tinta',     label: 'Tinta · blanco roto' },
              { value: 'salvia',    label: 'Salvia natural' },
              { value: 'arcilla',   label: 'Arcilla terracota' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Acento rebelde">
          <TweakSelect
            label="Color"
            value={t.rebel}
            onChange={(v) => setTweak('rebel', v)}
            options={[
              { value: 'terra',   label: 'Terracota tostada · #B8492A' },
              { value: 'borgona', label: 'Vino borgoña · #7A1F2B' },
              { value: 'klein',   label: 'Klein blue · #1B3DD8' },
              { value: 'mocha',   label: 'Mocha mousse · #9B6B4F' },
              { value: 'mostaza', label: 'Mostaza solar · #C8941C' },
              { value: 'lime',    label: 'Verde lima fluo · #C8FF3A' },
              { value: 'forest',  label: 'Verde bosque · #1F3A2E' },
              { value: 'sage',    label: 'Salvia saturada · #5A6F4A' },
              { value: 'teal',    label: 'Teal profundo · #0F4C5C' },
              { value: 'coral',   label: 'Coral cálido · #E66A50' },
              { value: 'magenta', label: 'Magenta digital · #C73E7C' },
              { value: 'lavanda', label: 'Lavanda · #7E6BAB' },
              { value: 'naranja', label: 'Naranja crudo · #DB7836' },
              { value: 'cherry',  label: 'Cherry rojo · #B82A3E' },
              { value: 'cobre',   label: 'Cobre tostado · #A8633B' },
              { value: 'marino',  label: 'Azul marino · #1F2D4A' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Cursor">
          <TweakToggle
            label="Cursor de yoga"
            value={t.showCursor}
            onChange={(v) => setTweak('showCursor', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ============================================================
   Yoga stage mount — re-creates the figure when variant changes
   ============================================================ */
function YogaStageMount({ variant }) {
  useEffect(() => {
    const root = document.getElementById('yoga-stage');
    if (!root) return;
    // Mount into the actual DOM node
    if (!root._reactRoot) {
      root._reactRoot = ReactDOM.createRoot(root);
    }
    root._reactRoot.render(<YogaFigure variant={variant} />);
  }, [variant]);
  return null;
}

/* ============================================================
   Bootstrap
   ============================================================ */
const tweaksRoot = document.getElementById('tweaks-root');
if (tweaksRoot) {
  ReactDOM.createRoot(tweaksRoot).render(<YogaTweaks />);
}