// App - roteador: mobile (tela cheia + bottom nav) e desktop (3 colunas)

const APP_SCREENS = ["home", "modulos", "estudo", "teologo"];
const DESKTOP_QUERY = "(min-width: 1024px)";
const WIDE_QUERY = "(min-width: 1400px)";
const BOOTSTRAP_REQUIRED_GLOBALS = [
  "Icon",
  "GlassBar",
  "BottomNav",
  "ScreenShell",
  "ReadingProgress",
  "loadIndice",
  "useLidos",
  "PassageText",
  "BibleSheet",
  "TeologoChat",
  "SplashScreen",
  "ModulosList",
  "ModulosScreen",
  "SumarioPage",
  "EstudoView",
];

function sanitizeScreen(screen) {
  return APP_SCREENS.includes(screen) ? screen : "home";
}

function useMedia(query) {
  const get = () => typeof window.matchMedia === "function" && window.matchMedia(query).matches;
  const [matches, setMatches] = React.useState(get);
  React.useEffect(() => {
    if (typeof window.matchMedia !== "function") return undefined;
    const mq = window.matchMedia(query);
    const handler = (event) => setMatches(event.matches);
    setMatches(mq.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, [query]);
  return matches;
}

function getMissingGlobals() {
  return BOOTSTRAP_REQUIRED_GLOBALS.filter((key) => typeof window[key] === "undefined" || window[key] === null);
}

function BootstrapErrorScreen({ missing }) {
  return (
    <div className="fixed inset-0 night-gradient flex items-center justify-center p-6">
      <div className="w-full max-w-[460px] rounded-[28px] p-7 bg-surface-container-low">
        <div className="font-headline text-[28px] leading-tight text-primary mb-3">O app não conseguiu iniciar.</div>
        <p className="text-[15px] leading-relaxed text-on-surface-variant">
          A página abriu, mas algum script não terminou de carregar. Recarregue a página.
        </p>
        <div className="flex flex-wrap gap-2 mt-4">
          {missing.map((item) => (
            <span key={item} className="px-3 py-1.5 rounded-full bg-surface-container-high text-[12px] font-bold text-primary">
              {item}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function LoadingScreen({ error }) {
  return (
    <div className="fixed inset-0 night-gradient flex flex-col items-center justify-center gap-4 p-8 text-center">
      <img src="assets/icon-192.png" alt="" className="w-20 h-20 rounded-[22px] fade-in" />
      <div className="font-headline text-[22px]" style={{ color: "#FAF7F2" }}>Grupo de Perseverança</div>
      <div className="text-[13px]" style={{ color: "rgba(250,247,242,0.7)" }}>
        {error ? "Não foi possível carregar o material. Verifique a conexão e recarregue." : "Abrindo o material…"}
      </div>
    </div>
  );
}

function TeologoScreen({ seed, onSeedUsed }) {
  return (
    <div className="absolute inset-0 flex flex-col bg-surface">
      <div className="silk-gradient relative overflow-hidden px-6 pb-5 shrink-0" style={{ paddingTop: "calc(env(safe-area-inset-top, 0px) + 28px)" }}>
        <div
          className="absolute -top-24 -right-20 w-72 h-72 rounded-full pointer-events-none"
          style={{ background: "radial-gradient(circle, rgba(237,200,119,0.22) 0%, transparent 60%)" }}
        />
        <div className="font-label text-[10px] uppercase tracking-[0.3em] font-bold text-secondary-fixed-dim">
          Tira-dúvidas
        </div>
        <h1 className="font-headline text-[28px] leading-tight text-on-primary mt-1">Tire suas dúvidas sobre a fé</h1>
      </div>
      <div className="flex-1 min-h-0" style={{ paddingBottom: 92 }}>
        <TeologoChat modulo={null} seed={seed} onSeedUsed={onSeedUsed} />
      </div>
    </div>
  );
}

function App() {
  const indice = useAsync(loadIndice, []);
  const [lidos, toggleLido] = useLidos();
  const isDesktop = useMedia(DESKTOP_QUERY);
  const isWide = useMedia(WIDE_QUERY);
  const [screen, setScreen] = React.useState("home");
  const [slug, setSlug] = React.useState(() => (readUltimo() || {}).slug || "apresentacao");
  const [targetPg, setTargetPg] = React.useState(null);
  const [tab, setTab] = React.useState("paginas");
  const [sheetRef, setSheetRef] = React.useState(null);
  const [seed, setSeed] = React.useState(null);
  const [painel, setPainel] = React.useState("modulo");
  // Desktop: capa -> sumário (página inteira) -> estudo em 3 colunas.
  const [entrou, setEntrou] = React.useState(false);
  const [desktopView, setDesktopView] = React.useState("sumario");
  const skipHistoryPush = React.useRef(false);
  const screenRef = React.useRef(screen);
  screenRef.current = screen;

  // Botão voltar do Android: sem isso o primeiro "voltar" fecha o app instalado.
  React.useEffect(() => {
    try {
      history.replaceState({ screen: "home" }, "");
    } catch (error) {
      console.warn("Nao foi possivel iniciar o historico:", error);
    }
    const handlePopState = (event) => {
      const target = sanitizeScreen(event.state && event.state.screen);
      setSheetRef(null);
      // Só pula o próximo pushState se a tela realmente mudar (senão o efeito não roda).
      if (target !== screenRef.current) skipHistoryPush.current = true;
      setScreen(target);
    };
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  }, []);

  React.useEffect(() => {
    if (skipHistoryPush.current) {
      skipHistoryPush.current = false;
      return;
    }
    try {
      if (history.state && history.state.screen === screen) return;
      history.pushState({ screen }, "");
    } catch (error) {
      console.warn("Nao foi possivel empilhar a navegacao:", error);
    }
  }, [screen]);

  const missing = getMissingGlobals();
  if (missing.length) return <BootstrapErrorScreen missing={missing} />;
  if (!indice.data) return <LoadingScreen error={indice.error} />;

  const modulos = indice.data.modulos;
  const valid = modulos.some((m) => m.slug === slug) ? slug : modulos[0].slug;
  const ultimo = readUltimo();
  const ultimoMeta = ultimo && modulos.find((m) => m.slug === ultimo.slug);

  // alvo: número da página ou id de um tópico do sumário ("p8-como-organizar…").
  const openModulo = (nextSlug, alvo) => {
    const meta = modulos.find((m) => m.slug === nextSlug);
    if (!meta) return;
    const pagina =
      typeof alvo === "number" ? alvo : Number((String(alvo || "").match(/^p(\d+)-/) || [])[1]) || meta.paginas[0];
    setSlug(nextSlug);
    setTargetPg(alvo || null);
    setTab("paginas");
    saveUltimo(nextSlug, pagina);
    setScreen("estudo");
    setEntrou(true);
    setDesktopView("estudo");
  };

  // Leva a pergunta ao chat do módulo atual (ou ao geral) já preenchida.
  const ask = (text, geral = false) => {
    setSheetRef(null);
    setSeed({ ctx: geral ? null : valid, text });
    if (geral) {
      if (isWide) setPainel("geral");
      else setScreen("teologo");
      return;
    }
    if (isWide) {
      setPainel("modulo");
      return;
    }
    setTab("teologo");
    setScreen("estudo");
  };

  const askRef = (ref) => {
    const noLivro = ref.raw && ref.raw !== ref.l ? ` (no material aparece como "${ref.raw}")` : "";
    ask(`Explique ${ref.l}${noLivro} e o que essa passagem ensina neste tema.`);
  };

  const seedFor = (ctx) => (seed && seed.ctx === ctx ? seed.text : null);
  const clearSeed = () => setSeed(null);

  const estudo = (
    <EstudoView
      indice={indice.data}
      slug={valid}
      targetPg={targetPg}
      onTargetDone={() => setTargetPg(null)}
      lidos={lidos}
      toggleLido={toggleLido}
      onOpenModulo={openModulo}
      onBack={isDesktop ? null : () => setScreen("modulos")}
      onOpenRef={setSheetRef}
      onAsk={(text) => ask(text)}
      teologoSeed={seedFor(valid)}
      onSeedUsed={clearSeed}
      showTeologoTab={!isWide}
      immersive={!isDesktop}
      tab={tab}
      onTabChange={setTab}
    />
  );

  const sheet = <BibleSheet refData={sheetRef} onClose={() => setSheetRef(null)} onAsk={askRef} />;

  const splash = (
    <SplashScreen
      wide={isDesktop}
      ultimo={ultimoMeta ? { titulo: ultimoMeta.titulo, pg: ultimo.pg } : null}
      onStart={() => {
        setEntrou(true);
        setDesktopView("sumario");
        setScreen("modulos");
      }}
      onContinue={() => openModulo(ultimo.slug, ultimo.pg)}
    />
  );

  if (isDesktop && !entrou) {
    return (
      <div className="fixed inset-0">
        {splash}
        <SWUpdateToast />
        <InstallPrompt />
      </div>
    );
  }

  if (isDesktop && desktopView === "sumario") {
    return (
      <div className="fixed inset-0 flex bg-surface">
        <SumarioPage
          indice={indice.data}
          lidos={lidos}
          current={ultimoMeta ? ultimoMeta.slug : null}
          onOpen={openModulo}
          onHome={() => setEntrou(false)}
        />
        <SWUpdateToast />
        <InstallPrompt />
      </div>
    );
  }

  if (isDesktop) {
    const metaAtual = modulos.find((m) => m.slug === valid);
    return (
      <div className="fixed inset-0 flex bg-surface">
        <aside className="w-[380px] shrink-0 flex flex-col bg-surface-container-low">
          <div className="silk-gradient px-6 pt-6 pb-5 relative overflow-hidden">
            <div
              className="absolute -top-24 -right-20 w-72 h-72 rounded-full pointer-events-none"
              style={{ background: "radial-gradient(circle, rgba(237,200,119,0.22) 0%, transparent 60%)" }}
            />
            <div className="relative flex items-center gap-3">
              <button onClick={() => setEntrou(false)} aria-label="Voltar à capa" className="shrink-0">
                <img src="assets/icon-192.png" alt="" className="w-11 h-11 rounded-xl" />
              </button>
              <button onClick={() => setDesktopView("sumario")} className="text-left min-w-0">
                <div className="font-label text-[9px] uppercase tracking-[0.28em] font-bold text-secondary-fixed-dim">
                  RCC · Material de estudo
                </div>
                <div className="font-headline text-[19px] text-on-primary leading-tight">Grupo de Perseverança</div>
              </button>
            </div>
            <div className="relative flex gap-2 mt-4">
              <button
                onClick={() => setEntrou(false)}
                className="flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-bold text-on-primary"
                style={{ background: "rgba(250,247,242,0.1)" }}
              >
                <Icon name="home" style={{ fontSize: 15 }} /> Capa
              </button>
              <button
                onClick={() => setDesktopView("sumario")}
                className="flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-bold text-on-primary"
                style={{ background: "rgba(250,247,242,0.1)" }}
              >
                <Icon name="auto_stories" style={{ fontSize: 15 }} /> Sumário
              </button>
            </div>
            <div className="mt-5">
              <ProgressBeads modulos={modulos} lidos={lidos} dark />
              <div className="font-label text-[11px] font-bold text-on-primary/80 mt-2">
                {modulos.filter((m) => lidos.has(m.slug)).length} de {modulos.length} módulos estudados
              </div>
            </div>
          </div>
          <div className="flex-1 min-h-0 overflow-y-auto px-4 pt-5 pb-8">
            <ModulosList indice={indice.data} lidos={lidos} current={valid} onOpen={openModulo} />
          </div>
        </aside>

        <main className="relative flex-1 min-w-0">{estudo}</main>

        {isWide && (
          <aside className="w-[400px] shrink-0 flex flex-col bg-surface-container-low">
            <div className="px-5 pt-5 pb-3 shrink-0">
              <div className="font-label text-[10px] uppercase tracking-[0.25em] font-bold text-secondary">Tira-dúvidas</div>
              <div className="flex gap-1 mt-3 rounded-full bg-surface-container-high p-1">
                {[
                  { key: "modulo", label: "Este módulo" },
                  { key: "geral", label: "Conversa geral" },
                ].map((opt) => (
                  <button
                    key={opt.key}
                    onClick={() => setPainel(opt.key)}
                    className={`flex-1 py-2 rounded-full font-label text-[12px] font-bold transition-all ${
                      painel === opt.key ? "silk-gradient text-on-primary" : "text-on-surface-variant"
                    }`}
                  >
                    {opt.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="flex-1 min-h-0">
              {painel === "modulo" ? (
                <TeologoChat
                  key={valid}
                  modulo={valid}
                  titulo={metaAtual.titulo}
                  seed={seedFor(valid)}
                  onSeedUsed={clearSeed}
                />
              ) : (
                <TeologoChat key="geral" modulo={null} seed={seedFor(null)} onSeedUsed={clearSeed} />
              )}
            </div>
          </aside>
        )}
        {sheet}
        <SWUpdateToast />
        <InstallPrompt />
      </div>
    );
  }

  const renderScreen = () => {
    switch (screen) {
      case "modulos":
        return <ModulosScreen indice={indice.data} lidos={lidos} current={valid} onOpen={openModulo} />;
      case "estudo":
        return estudo;
      case "teologo":
        return <TeologoScreen seed={seedFor(null)} onSeedUsed={clearSeed} />;
      default:
        return splash;
    }
  };

  return (
    <div className="fixed inset-0 overflow-hidden bg-surface">
      <div className="absolute inset-0" key={screen}>
        {renderScreen()}
      </div>
      <BottomNav
        current={screen}
        onNav={(target) => setScreen(sanitizeScreen(target))}
        immersive
      />
      {sheet}
      <SWUpdateToast />
      <InstallPrompt />
    </div>
  );
}

function mountApp() {
  const rootElement = document.getElementById("root");
  if (!rootElement) return;
  const root = ReactDOM.createRoot(rootElement);
  let attempts = 0;
  const tryMount = () => {
    const missing = getMissingGlobals();
    if (missing.length === 0) {
      root.render(<App />);
      return;
    }
    if (attempts >= 100) {
      root.render(<BootstrapErrorScreen missing={missing} />);
      return;
    }
    attempts += 1;
    window.setTimeout(tryMount, 50);
  };
  tryMount();
}

if (document.readyState === "complete") {
  mountApp();
} else {
  window.addEventListener("load", mountApp, { once: true });
}