/* App — Tierra de Vino y Sal */

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "A",
  "dark": false,
  "hero": "cover",
  "lang": "es",
  "order": "default"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [editable, setEditable] = useState(false);
  const [copyOverrides, setCopyOverrides] = useState({});
  const lang = tweaks.lang || 'es';
  const t = useMemo(() => {
    const base = window.I18N[lang];
    if (!Object.keys(copyOverrides).length) return base;
    return {
      ...base,
      hero: { ...base.hero, ...copyOverrides },
    };
  }, [lang, copyOverrides]);

  useReveal([lang, tweaks.order, tweaks.hero, tweaks.direction]);

  // body data attributes
  useEffect(() => {
    document.body.dataset.direction = tweaks.direction;
    document.body.dataset.dark = tweaks.dark ? 'true' : 'false';
    document.documentElement.lang = lang;
  }, [tweaks.direction, tweaks.dark, lang]);

  // initialize editable hero copy from i18n
  useEffect(() => {
    const base = window.I18N[lang];
    setCopyOverrides({
      title_1: base.hero.title_1,
      pitch: base.hero.pitch,
    });
  }, [lang]);

  // Section ordering tweak
  const orderings = {
    default: ['hero','synopsis','characters','world','video','author','buy','newsletter'],
    'video-first': ['hero','video','synopsis','characters','world','author','buy','newsletter'],
    'buy-first': ['hero','buy','synopsis','characters','world','video','author','newsletter'],
    'author-first': ['hero','author','synopsis','characters','world','video','buy','newsletter'],
  };
  const order = orderings[tweaks.order] || orderings.default;

  const sections = {
    hero: <Hero key="hero" t={t} heroVariant={tweaks.hero}
      editable={editable}
      copy={{
        title_1: copyOverrides.title_1 || t.hero.title_1,
        pitch: copyOverrides.pitch || t.hero.pitch,
      }}
      setCopy={(patch) => setCopyOverrides(c => ({...c, ...patch}))}
    />,
    synopsis: <Synopsis key="synopsis" t={t} />,
    characters: <Characters key="characters" t={t} />,
    world: <World key="world" t={t} />,
    video: <Video key="video" t={t} />,
    author: <Author key="author" t={t} />,
    buy: <Buy key="buy" t={t} />,
    newsletter: <Newsletter key="newsletter" t={t} />,
  };

  return (
    <div className={editable ? 'tweak-mode' : ''}>
      <Nav t={t} lang={lang} setLang={(v) => setTweak('lang', v)} />
      {order.map(k => sections[k])}
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Dirección visual">
          <TweakRadio
            label="Estilo"
            value={tweaks.direction}
            onChange={v => setTweak('direction', v)}
            options={[
              { value: 'A', label: 'A — Editorial sepia' },
              { value: 'B', label: 'B — Atardecer cinematográfico' },
              { value: 'C', label: 'C — Bodega y salina' },
            ]}
          />
          <TweakToggle
            label="Modo oscuro"
            value={tweaks.dark}
            onChange={v => setTweak('dark', v)}
          />
        </TweakSection>

        <TweakSection title="Hero">
          <TweakRadio
            label="Variante"
            value={tweaks.hero}
            onChange={v => setTweak('hero', v)}
            options={[
              { value: 'cover', label: 'Portada del libro' },
              { value: 'video', label: 'Vídeo a pantalla completa' },
              { value: 'portrait', label: 'Retrato de Melissa' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Orden de secciones">
          <TweakRadio
            label="Flujo"
            value={tweaks.order}
            onChange={v => setTweak('order', v)}
            options={[
              { value: 'default', label: 'Por defecto' },
              { value: 'video-first', label: 'Vídeo arriba' },
              { value: 'buy-first', label: 'Comprar arriba' },
              { value: 'author-first', label: 'Autora arriba' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Idioma">
          <TweakRadio
            label="Idioma"
            value={tweaks.lang}
            onChange={v => setTweak('lang', v)}
            options={[
              { value: 'es', label: 'Español' },
              { value: 'en', label: 'English' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Edición de textos">
          <TweakToggle
            label="Editar copys del Hero en vivo"
            value={editable}
            onChange={setEditable}
          />
          <p style={{margin: '8px 0 0', fontSize: 12, opacity: 0.7, fontStyle: 'italic'}}>
            Al activar, haz clic en el título o sinopsis del Hero para editar.
          </p>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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