/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakText, TweakNumber, TweakColor */

// =============================================================
//  Tweaks app · Imersão Reencontro
//  Reads window.TWEAK_DEFAULTS (the EDITMODE block in index HTML),
//  binds values to DOM via data-tweak-* attributes,
//  exposes a floating panel for live editing + persistence.
// =============================================================

const PHOTO_OPTIONS = [
  { id: 'lilian-01',          label: '01 · Preto + ouro',   src: '../assets/lilian-01.jpg',           cutout: false },
  { id: 'lilian-04',          label: '04 · Terno branco',   src: '../assets/lilian-04.jpg',           cutout: false },
  { id: 'lilian-02',          label: '02 · Camisa branca',  src: '../assets/lilian-02.jpg',           cutout: false },
  { id: 'lilian-03',          label: '03 · Luz natural',    src: '../assets/lilian-03.jpg',           cutout: false },
  { id: 'lilian-palestrando', label: 'Palestrando (recorte)', src: '../assets/lilian-palestrando.png', cutout: true  },
];

const ACCENT_PALETTES = [
  ['#C9A961', '#E8D5A0', '#8E6E2A'],  // champagne padrão
  ['#A88334', '#D4B872', '#6E541E'],  // dourado mais quente
  ['#B89464', '#E0CFA4', '#7E6432'],  // dourado bronze
  ['#D4B872', '#F0E3BC', '#9C7A33'],  // dourado pálido
];

function photoById(id) {
  return PHOTO_OPTIONS.find(p => p.id === id) || PHOTO_OPTIONS[0];
}

// Apply tweak values to DOM ----------------------------------
function applyTweaks(t) {
  // texto
  document.querySelectorAll('[data-tweak-text]').forEach(el => {
    const key = el.getAttribute('data-tweak-text');
    if (t[key] != null) el.textContent = t[key];
  });

  // atributo (formato: "key|attr")
  document.querySelectorAll('[data-tweak-attr]').forEach(el => {
    const spec = el.getAttribute('data-tweak-attr');
    const [key, attr] = spec.split('|');
    if (t[key] != null) el.setAttribute(attr, t[key]);
  });

  // hero photo
  const heroBox = document.querySelector('[data-hero-photo]');
  if (heroBox) {
    const p = photoById(t.heroPhoto);
    const img = heroBox.querySelector('img');
    if (img) {
      img.setAttribute('data-src', p.src);
      const suffix = window.__assetSuffix || '';
      img.setAttribute('src', /^(https?:|data:|blob:)/i.test(p.src) ? p.src : p.src + suffix);
      img.removeAttribute('srcset');
    }
    heroBox.classList.toggle('is-cutout', !!p.cutout);
  }

  // accent (paleta dourada)
  if (Array.isArray(t.accentPalette) && t.accentPalette[0]) {
    const [gold, goldPale, goldDeep] = t.accentPalette;
    document.documentElement.style.setProperty('--gold', gold);
    if (goldPale) document.documentElement.style.setProperty('--gold-pale', goldPale);
    if (goldDeep) document.documentElement.style.setProperty('--gold-deep', goldDeep);
  }
}

// =============================================================
function App() {
  const defaults = (window.TWEAK_DEFAULTS) || {};
  const [t, setTweak] = useTweaks(defaults);

  // Re-aplica sempre que o estado muda
  React.useEffect(() => { applyTweaks(t); }, [t]);

  // Aplica uma vez no mount (caso o useEffect ainda não tenha rodado antes do paint)
  React.useEffect(() => { applyTweaks(defaults); /* eslint-disable-next-line */ }, []);

  return (
    <TweaksPanel title="Tweaks" subtitle="Imersão Reencontro">

      <TweakSection label="Hero" />
      <TweakSelect
        label="Foto principal"
        value={t.heroPhoto}
        options={PHOTO_OPTIONS.map(p => ({ value: p.id, label: p.label }))}
        onChange={(v) => setTweak('heroPhoto', v)}
      />

      <TweakSection label="Identidade" />
      <TweakText
        label="Nome do evento"
        value={t.eventName}
        onChange={(v) => setTweak('eventName', v)}
      />
      <TweakColor
        label="Acento (paleta)"
        value={t.accentPalette}
        options={ACCENT_PALETTES}
        onChange={(v) => setTweak('accentPalette', v)}
      />

      <TweakSection label="Quando · Onde" />
      <TweakText
        label="Data"
        value={t.eventDate}
        onChange={(v) => setTweak('eventDate', v)}
      />
      <TweakText
        label="Cidade"
        value={t.eventCity}
        onChange={(v) => setTweak('eventCity', v)}
      />
      <TweakNumber
        label="Vagas restantes"
        value={t.vagasRestantes}
        min={1}
        max={50}
        onChange={(v) => setTweak('vagasRestantes', v)}
      />

      <TweakSection label="Investimento" />
      <TweakText
        label="Parcelado (texto)"
        value={t.precoParcelado}
        onChange={(v) => setTweak('precoParcelado', v)}
      />
      <TweakText
        label="À vista (texto)"
        value={t.precoAvista}
        onChange={(v) => setTweak('precoAvista', v)}
      />
      <TweakText
        label="Selo da oferta"
        value={t.seloOferta}
        onChange={(v) => setTweak('seloOferta', v)}
      />

      <TweakSection label="Call to action" />
      <TweakText
        label="Texto do CTA"
        value={t.ctaTexto}
        onChange={(v) => setTweak('ctaTexto', v)}
      />
      <TweakText
        label="Link de aplicação"
        value={t.ctaLink}
        onChange={(v) => setTweak('ctaLink', v)}
      />
      <TweakText
        label="WhatsApp (link)"
        value={t.whatsappLink}
        onChange={(v) => setTweak('whatsappLink', v)}
      />

    </TweaksPanel>
  );
}

// Mount ------------------------------------------------------
const _mount = document.getElementById('tweaks-root');
if (_mount) {
  ReactDOM.createRoot(_mount).render(<App />);
}

// Apply once even if React mounts late
window.applyTweaks = applyTweaks;
if (window.TWEAK_DEFAULTS) applyTweaks(window.TWEAK_DEFAULTS);