// App principal
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

// Estilo do cabeçalho (hero): "monogram" | "framed" | "vertical-names".
const HERO_VARIANT = "monogram";

function App() {
  const baseData = window.WEDDING_DATA;
  const [active, setActive] = useStateApp("inicio");
  const [toast, setToast] = useStateApp(null);
  const [giftModal, setGiftModal] = useStateApp(null);
  const [scrolled, setScrolled] = useStateApp(false);
  const [gifts, setGifts] = useStateApp(null);
  const [groups, setGroups] = useStateApp(null);
  const [pix, setPix] = useStateApp(null);
  const [detalhes, setDetalhes] = useStateApp(null);
  const [textos, setTextos] = useStateApp(null);

  // Presentes, convidados, Pix, detalhes e textos em tempo real (Firebase).
  // As confirmações NÃO são lidas em massa aqui (seria expor quem vai) — cada
  // convidado busca só a sua ao localizar o convite (ver GuestSearch).
  useEffectApp(() => Store.subscribeGifts(setGifts), []);
  useEffectApp(() => Store.subscribeGuests(setGroups), []);
  useEffectApp(() => Store.subscribePix(setPix), []);
  useEffectApp(() => Store.subscribeDetalhes(setDetalhes), []);
  useEffectApp(() => Store.subscribeTextos(setTextos), []);

  // Mescla os detalhes (data, local/mapa, dress code), a chave Pix e os
  // textos editáveis vindos do painel sobre os dados estáticos do site.
  let data = detalhes || baseData;
  if (pix) data = Object.assign({}, data, { pix });
  if (textos) data = Object.assign({}, data, { textos });

  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Scrollspy
  useEffectApp(() => {
    const ids = ["inicio", "sobre", "detalhes", "presentes", "pix", "rsvp"];
    const obs = new IntersectionObserver((entries) => {
      const visible = entries.filter(e => e.isIntersecting).sort((a,b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: "-30% 0px -55% 0px", threshold: [0.1, 0.3, 0.6] });
    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  function nav(id) {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  function showToast(msg) {
    setToast(msg);
    setTimeout(() => setToast(null), 2200);
  }

  return (
    <div className="shell">
      <Topbar active={active} onNav={nav} data={data} scrolled={scrolled}/>

      <main className="main">
        <Hero variant={HERO_VARIANT} data={data}/>
        <About data={data}/>
        <EventDetails data={data}/>
        <GiftList data={data} gifts={gifts} onDonate={(g) => setGiftModal(g)}/>
        <PixSection data={data} onToast={showToast}/>
        <GuestSearch groups={groups} onToast={showToast}/>
        <Footer data={data}/>
      </main>

      <BottomNav active={active} onNav={nav}/>

      {toast && <div className="toast">{toast}</div>}
      {giftModal && <PagamentoModal gift={giftModal} data={data} onClose={() => setGiftModal(null)} onToast={showToast}/>}
    </div>
  );
}

// Roteamento simples: #admin, ?admin ou /admin abre o painel dos noivos
function isAdminRoute() {
  const { hash, search, pathname } = window.location;
  return (
    hash.toLowerCase().indexOf('admin') >= 0 ||
    search.toLowerCase().indexOf('admin') >= 0 ||
    pathname.toLowerCase().replace(/\/+$/, '').endsWith('/admin')
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));

function renderRoot() {
  root.render(isAdminRoute() ? <Admin/> : <App/>);
}

// Renderiza na carga inicial e também quando o endereço muda (ex.: o usuário
// digita "#admin" no fim da URL de um site já aberto). Assim o painel abre na
// hora, sem precisar recarregar a página.
renderRoot();
window.addEventListener('hashchange', renderRoot);
window.addEventListener('popstate', renderRoot);