// app.jsx — Feria Templaria · Tweaks panel + i18n controller
// Loads after React, Babel, tweaks-panel.jsx and i18n.js

const { useEffect, useState, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "theme": "cartel",
  "heroStyle": "parchment",
  "titleFont": "default",
  "flameIntensity": 1,
  "progCompact": false,
  "showCartel": true,
  "layout": "default",
  "anim": true
}/*EDITMODE-END*/;

// ───────────────────────────────────────────────────────────
// I18N
// ───────────────────────────────────────────────────────────
function applyI18n(lang) {
  const I18N = window.I18N || {};
  const dict = I18N[lang] || I18N.es || {};
  document.documentElement.setAttribute('lang', lang);
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    const v = dict[key];
    if (v == null) return;
    // closing.headline uses inline <span>; allow HTML for that key
    if (key === 'closing.headline' || key === 'inst.text' || key === 'video.phText') {
      el.innerHTML = v;
    } else {
      el.textContent = v;
    }
  });

  // Translate programación timeline activities (proper names preserved)
  const actDict = (window.PROG_ACT && window.PROG_ACT[lang]) || null;
  document.querySelectorAll('#programa .timeline-item .a').forEach(el => {
    // Capture the original Galician text once
    if (!el.dataset.gl) el.dataset.gl = el.textContent.trim();
    const orig = el.dataset.gl;
    if (lang === 'gl' || !actDict) {
      el.textContent = orig;
    } else {
      el.textContent = actDict[orig] || orig;
    }
  });

  // Show/hide "Programme in original language" note
  const note = document.getElementById('progLangNote');
  if (note) {
    const noteText = dict['prog.langNote'] || '';
    if (noteText && lang !== 'gl' && lang !== 'es') {
      note.textContent = noteText;
      note.style.display = '';
    } else {
      note.style.display = 'none';
    }
  }

  // Update lang picker button label
  const meta = (window.LANGS || []).find(l => l.code === lang);
  if (meta) {
    const flag = document.getElementById('langFlag');
    const name = document.getElementById('langName');
    if (flag) flag.textContent = meta.flag;
    if (name) name.textContent = meta.name;
  }

  // Update document title
  const titles = {
    es: 'Mercado Templario · O Burgo do Faro · Culleredo · 1—5 Julio 2026',
    gl: 'Mercado Templario · O Burgo do Faro · Culleredo · 1—5 Xullo 2026',
    ca: 'Mercat Templer · O Burgo do Faro · Culleredo · 1—5 Juliol 2026',
    eu: 'Tenplario Azoka · O Burgo do Faro · Culleredo · 2026ko Uztailak 1—5',
    pt: 'Mercado Templário · O Burgo do Faro · Culleredo · 1—5 Julho 2026',
    en: 'Templar Market · O Burgo do Faro · Culleredo · 1—5 July 2026',
    fr: 'Marché Templier · O Burgo do Faro · Culleredo · 1—5 Juillet 2026',
    it: 'Mercato Templare · O Burgo do Faro · Culleredo · 1—5 Luglio 2026',
    ru: 'Тамплиерский Рынок · О Бурго до Фаро · Кульередо · 1—5 июля 2026',
    zh: '圣殿骑士集市 · 布尔戈法罗 · 库列雷多 · 2026年7月1—5日'
  };
  if (titles[lang]) document.title = titles[lang];
}

// ───────────────────────────────────────────────────────────
// Language picker (nav dropdown)
// ───────────────────────────────────────────────────────────
function initLangPicker(currentLang, onChange) {
  const btn = document.getElementById('langBtn');
  const menu = document.getElementById('langMenu');
  const picker = document.getElementById('langPicker');
  if (!btn || !menu || !picker) return;

  // Build menu items
  menu.innerHTML = '';
  (window.LANGS || []).forEach(l => {
    const li = document.createElement('li');
    li.setAttribute('role', 'option');
    li.dataset.lang = l.code;
    if (l.code === currentLang) li.classList.add('active');
    li.innerHTML = `<span class="code">${l.flag}</span><span>${l.name}</span>`;
    li.addEventListener('click', () => {
      onChange(l.code);
      close();
    });
    menu.appendChild(li);
  });

  const open = () => {
    menu.classList.add('open');
    btn.setAttribute('aria-expanded', 'true');
  };
  const close = () => {
    menu.classList.remove('open');
    btn.setAttribute('aria-expanded', 'false');
  };
  btn.onclick = (e) => {
    e.stopPropagation();
    menu.classList.contains('open') ? close() : open();
  };
  document.addEventListener('click', (e) => {
    if (!picker.contains(e.target)) close();
  });
}

function updateLangPickerActive(lang) {
  document.querySelectorAll('#langMenu li').forEach(li => {
    li.classList.toggle('active', li.dataset.lang === lang);
  });
}

// ───────────────────────────────────────────────────────────
// Tweaks app
// ───────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply language
  useEffect(() => {
    applyI18n(t.lang);
    updateLangPickerActive(t.lang);
  }, [t.lang]);

  // Initialize lang picker (once)
  useEffect(() => {
    initLangPicker(t.lang, (newLang) => setTweak('lang', newLang));
  }, []);

  // Apply theme classes to body
  useEffect(() => {
    const b = document.body;
    // theme
    ['templar', 'cartel', 'crimson', 'midnight', 'forge', 'stoneblue'].forEach(c =>
      b.classList.toggle(`theme-${c}`, t.theme === c));
    // hero style
    b.classList.toggle('hero-stone', t.heroStyle === 'stone');
    // title font
    ['cinzel', 'pirata', 'fell', 'fraktur'].forEach(c =>
      b.classList.toggle(`title-${c}`, t.titleFont === c));
    // prog density
    b.classList.toggle('prog-compact', t.progCompact);
    // animations
    b.classList.toggle('no-anim', !t.anim);
    // cartel visibility
    b.classList.toggle('no-cartel', !t.showCartel);
    // layout
    b.classList.toggle('layout-wide', t.layout === 'wide');
    b.classList.toggle('layout-narrow', t.layout === 'narrow');
    // flame intensity
    b.style.setProperty('--flame-intensity', String(t.flameIntensity));
  }, [t.theme, t.heroStyle, t.titleFont, t.progCompact, t.anim,
      t.showCartel, t.layout, t.flameIntensity]);

  // Language options for the panel (always renders as dropdown — many options)
  const langOpts = (window.LANGS || []).map(l => ({ value: l.code, label: l.name }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Idioma · Language" />
      <TweakSelect label="Lengua" value={t.lang}
                   options={langOpts}
                   onChange={(v) => setTweak('lang', v)} />

      <TweakSection label="Tema cromático" />
      <TweakSelect label="Paleta" value={t.theme}
                   options={[
                     { value: 'cartel',    label: 'Cartel · azul + naranja (cartel oficial)' },
                     { value: 'templar',   label: 'Templario · rojo + azul + oro' },
                     { value: 'crimson',   label: 'Crimson · rojo profundo' },
                     { value: 'midnight',  label: 'Medianoche · azul + oro' },
                     { value: 'forge',     label: 'Forja · naranja fuego' },
                     { value: 'stoneblue', label: 'Piedra azul · monocromo' }
                   ]}
                   onChange={(v) => setTweak('theme', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Fondo del hero" value={t.heroStyle}
                  options={[
                    { value: 'parchment', label: 'Pergamino' },
                    { value: 'stone',     label: 'Piedra' }
                  ]}
                  onChange={(v) => setTweak('heroStyle', v)} />
      <TweakSelect label="Tipografía título" value={t.titleFont}
                   options={[
                     { value: 'default', label: 'Cinzel · default' },
                     { value: 'cinzel',  label: 'Cinzel forzado' },
                     { value: 'pirata',  label: 'Pirata One' },
                     { value: 'fell',    label: 'IM Fell English' },
                     { value: 'fraktur', label: 'UnifrakturMaguntia' }
                   ]}
                   onChange={(v) => setTweak('titleFont', v)} />
      <TweakSlider label="Intensidad antorcha" value={t.flameIntensity}
                   min={0} max={1.5} step={0.05}
                   onChange={(v) => setTweak('flameIntensity', v)} />

      <TweakSection label="Programación" />
      <TweakToggle label="Compacta"
                   value={t.progCompact}
                   onChange={(v) => setTweak('progCompact', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Ancho"
                  value={t.layout}
                  options={[
                    { value: 'narrow', label: 'Estrecho' },
                    { value: 'default', label: 'Normal' },
                    { value: 'wide', label: 'Ancho' }
                  ]}
                  onChange={(v) => setTweak('layout', v)} />

      <TweakSection label="Otros" />
      <TweakToggle label="Mostrar cartel A3"
                   value={t.showCartel}
                   onChange={(v) => setTweak('showCartel', v)} />
      <TweakToggle label="Animaciones"
                   value={t.anim}
                   onChange={(v) => setTweak('anim', v)} />
    </TweaksPanel>
  );
}

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