// App.jsx — raiz do site público SBL.
// ────────────────────────────────────────────────────────────────────────────
// Antes, este código morava inline no index.html e a navegação era só estado
// do React: o site inteiro vivia na URL "/". Agora cada tela tem um caminho de
// verdade, resolvido por seo/rotas.js, com histórico do navegador funcionando.
//
// Correção de arquitetura de informação feita aqui: "Temporada" no menu levava
// para a tela de captação de proprietário (OwnerScreen). Quem procurava um
// imóvel para as férias caía numa página vendendo gestão de imóvel. Agora
// "Temporada" abre o catálogo e a captação vive sob "Anuncie".
// ────────────────────────────────────────────────────────────────────────────

const { useState, useEffect, useCallback } = React;

function App() {
  const [dataVersion, setDataVersion] = useState(() => window.SBL_DATA ? 1 : 0);
  const [route, setRoute] = useState(() => window.SBLRotas.resolver(location.pathname));
  const { lang } = window.useLang();

  // Os imóveis chegam do Firebase de forma assíncrona (data.js). Enquanto não
  // chegam, a tela de detalhe não consegue resolver o slug — por isso o app só
  // renderiza depois do primeiro lote.
  useEffect(() => {
    function bump() { setDataVersion(v => v + 1); }
    window._sblDataReady = bump;
    window.addEventListener('sbl:data-ready', bump);
    if (window.SBL_DATA) bump();
    return () => window.removeEventListener('sbl:data-ready', bump);
  }, []);

  useEffect(() => {
    const inicial = window.SBLRotas.iniciar((nova) => setRoute(nova));
    setRoute(inicial);
  }, []);

  useEffect(() => {
    if (window.SBLSeo) window.SBLSeo.aplicar(route);
  }, [route, dataVersion]);

  useEffect(() => {
    const id = setTimeout(() => { if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.75 } }); }, 30);
    return () => clearTimeout(id);
  }, [route, lang, dataVersion]);

  // Não rolamos para o topo quando só o idioma muda — só em troca de página.
  useEffect(() => { window.scrollTo(0, 0); }, [route._path]);

  // Navegação por nome de rota, mantida para compatibilidade com as telas que
  // já chamavam onNav('listings', { kind: 'season' }).
  const nav = useCallback((name, filters) => {
    window.SBLRotas.navegar({ name, ...(filters || {}) });
  }, []);

  const openProperty = useCallback((id) => {
    window.SBLRotas.navegar({ name: 'detail', slug: window.SBLRotas.slugDoImovel(id) });
  }, []);

  const announce = useCallback(() => {
    window.SBLRotas.navegar({ name: 'announce' });
  }, []);

  if (dataVersion === 0) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: 15 }}>
      Carregando imóveis…
    </div>
  );

  let screen;
  if (route.name === 'home') {
    screen = <window.HomeScreen onNav={nav} onOpenProperty={openProperty} onAnnounce={announce} />;
  } else if (route.name === 'listings') {
    screen = (
      <window.ListingsScreen
        key={`${route.kind || ''}-${route.neighborhood || ''}-${route.featured || ''}-${route.propertyType || ''}-${route.launch || ''}-${route.luxury || ''}-${route.tema || ''}`}
        onOpenProperty={openProperty}
        initialKind={route.kind}
        initialNeighborhood={route.neighborhood}
        initialFeatured={route.featured}
        initialPropertyType={route.propertyType}
        initialLaunch={route.launch}
        initialLuxury={route.luxury}
        initialTema={route.tema}
        bairro={route._bairro}
        seo={route._seo}
      />
    );
  } else if (route.name === 'detail') {
    const imovel = window.SBLRotas.imovelDeSlug(route.slug);
    screen = imovel
      ? <window.PropertyDetailScreen propertyId={imovel.id} onBack={() => nav('listings', { kind: 'season' })} />
      : <window.NaoEncontrado onNav={nav} />;
  } else if (route.name === 'announce') {
    screen = <window.AnnounceScreen onSelect={(tipo) => window.SBLRotas.navegar({ name: 'owner', tipo })} />;
  } else if (route.name === 'owner') {
    screen = <window.OwnerScreen onNav={nav} />;
  } else if (route.name === 'howitworks') {
    screen = <window.HowItWorksScreen onAnnounce={announce} onNav={nav} />;
  } else if (route.name === 'simulador') {
    screen = <window.SimuladorScreen onNav={nav} seo={route._seo} />;
  } else if (route.name === 'airbnb') {
    screen = <window.AirbnbScreen onNav={nav} seo={route._seo} />;
  } else if (route.name === 'ondeficar') {
    screen = <window.ConteudoScreen seo={route._seo} onNav={nav} />;
  } else if (route.name === 'about') {
    screen = <window.AboutScreen onAnnounce={announce} onNav={nav} />;
  } else if (route.name === 'workwithus') {
    screen = <window.WorkWithUsScreen onNav={nav} />;
  } else if (route.name === 'blog') {
    screen = <window.BlogScreen onOpenPost={(id) => window.SBLRotas.navegar({ name: 'post', id })} onNav={nav} />;
  } else if (route.name === 'post') {
    screen = <window.BlogPostScreen postId={route.id} onBack={() => nav('blog')} />;
  } else if (route.name === 'contact') {
    screen = <window.ContactScreen onNav={nav} />;
  } else {
    screen = <window.NaoEncontrado onNav={nav} />;
  }

  // Qual item do menu fica destacado em cada rota.
  const MENU_POR_ROTA = {
    detail: 'season', listings: 'listings', announce: 'owner', owner: 'owner',
    howitworks: 'owner', simulador: 'owner', airbnb: 'owner', ondeficar: 'season', post: 'blog',
  };
  const activeTab = (route._seo && route._seo.menu)
    || (route._bairro ? 'season' : null)
    || MENU_POR_ROTA[route.name]
    || route.name;

  return (
    <div>
      <window.Header active={activeTab} onNav={nav} onAnnounce={announce} />
      <main>{screen}</main>
      <window.Footer onNav={nav} />
    </div>
  );
}

// Tela de fallback para URL inexistente ou imóvel que saiu do ar. Melhor que
// jogar o visitante na home sem explicação — ele perde a referência do que
// procurava e tende a sair do site.
function NaoEncontrado({ onNav }) {
  const { Button } = window.SBLImVeisDesignSystem_08a506;
  const { t } = window.useLang();
  return (
    <section style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '80px 24px', gap: 18 }}>
      <div className="sbl-eyebrow">{t('Página não encontrada')}</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: 'var(--text-strong)', margin: 0 }}>
        {t('Este endereço não existe mais')}
      </h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', maxWidth: 480, margin: 0, lineHeight: 1.6 }}>
        {t('O imóvel pode ter saído do ar ou o link pode estar incorreto. Veja os imóveis disponíveis para temporada em João Pessoa.')}
      </p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 8 }}>
        <Button variant="primary" iconRight="arrow-right" onClick={() => onNav('listings', { kind: 'season' })}>{t('Ver imóveis por temporada')}</Button>
        <Button variant="outline" onClick={() => onNav('home')}>{t('Ir para a página inicial')}</Button>
      </div>
    </section>
  );
}
window.NaoEncontrado = NaoEncontrado;

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