// Estudo do módulo - abas Páginas (texto integral), Resumo, Leituras e Teólogo

const BOOK_INFO = {
  GEN: ["AT", "Pentateuco", "Gênesis"], EXO: ["AT", "Pentateuco", "Êxodo"], LEV: ["AT", "Pentateuco", "Levítico"],
  NUM: ["AT", "Pentateuco", "Números"], DEU: ["AT", "Pentateuco", "Deuteronômio"],
  JOS: ["AT", "Livros Históricos", "Josué"], JDG: ["AT", "Livros Históricos", "Juízes"], RUT: ["AT", "Livros Históricos", "Rute"],
  "1SA": ["AT", "Livros Históricos", "1 Samuel"], "2SA": ["AT", "Livros Históricos", "2 Samuel"],
  "1KI": ["AT", "Livros Históricos", "1 Reis"], "2KI": ["AT", "Livros Históricos", "2 Reis"],
  "1CH": ["AT", "Livros Históricos", "1 Crônicas"], "2CH": ["AT", "Livros Históricos", "2 Crônicas"],
  EZR: ["AT", "Livros Históricos", "Esdras"], NEH: ["AT", "Livros Históricos", "Neemias"],
  TOB: ["AT", "Livros Históricos", "Tobias"], JDT: ["AT", "Livros Históricos", "Judite"], EST: ["AT", "Livros Históricos", "Ester"],
  "1MA": ["AT", "Livros Históricos", "1 Macabeus"], "2MA": ["AT", "Livros Históricos", "2 Macabeus"],
  JOB: ["AT", "Livros Sapienciais", "Jó"], PSA: ["AT", "Livros Sapienciais", "Salmos"], PRO: ["AT", "Livros Sapienciais", "Provérbios"],
  ECC: ["AT", "Livros Sapienciais", "Eclesiastes"], SNG: ["AT", "Livros Sapienciais", "Cântico dos Cânticos"],
  WIS: ["AT", "Livros Sapienciais", "Sabedoria"], SIR: ["AT", "Livros Sapienciais", "Eclesiástico"],
  ISA: ["AT", "Livros Proféticos", "Isaías"], JER: ["AT", "Livros Proféticos", "Jeremias"], LAM: ["AT", "Livros Proféticos", "Lamentações"],
  BAR: ["AT", "Livros Proféticos", "Baruc"], EZK: ["AT", "Livros Proféticos", "Ezequiel"], DAN: ["AT", "Livros Proféticos", "Daniel"],
  HOS: ["AT", "Livros Proféticos", "Oseias"], JOL: ["AT", "Livros Proféticos", "Joel"], AMO: ["AT", "Livros Proféticos", "Amós"],
  OBA: ["AT", "Livros Proféticos", "Abdias"], JON: ["AT", "Livros Proféticos", "Jonas"], MIC: ["AT", "Livros Proféticos", "Miqueias"],
  NAM: ["AT", "Livros Proféticos", "Naum"], HAB: ["AT", "Livros Proféticos", "Habacuc"], ZEP: ["AT", "Livros Proféticos", "Sofonias"],
  HAG: ["AT", "Livros Proféticos", "Ageu"], ZEC: ["AT", "Livros Proféticos", "Zacarias"], MAL: ["AT", "Livros Proféticos", "Malaquias"],
  MAT: ["NT", "Evangelhos", "Mateus"], MRK: ["NT", "Evangelhos", "Marcos"], LUK: ["NT", "Evangelhos", "Lucas"], JHN: ["NT", "Evangelhos", "João"],
  ACT: ["NT", "Livro Histórico", "Atos dos Apóstolos"], ROM: ["NT", "Cartas Paulinas", "Romanos"],
  "1CO": ["NT", "Cartas Paulinas", "1 Coríntios"], "2CO": ["NT", "Cartas Paulinas", "2 Coríntios"], GAL: ["NT", "Cartas Paulinas", "Gálatas"],
  EPH: ["NT", "Cartas Paulinas", "Efésios"], PHP: ["NT", "Cartas Paulinas", "Filipenses"], COL: ["NT", "Cartas Paulinas", "Colossenses"],
  "1TH": ["NT", "Cartas Paulinas", "1 Tessalonicenses"], "2TH": ["NT", "Cartas Paulinas", "2 Tessalonicenses"],
  "1TI": ["NT", "Cartas Paulinas", "1 Timóteo"], "2TI": ["NT", "Cartas Paulinas", "2 Timóteo"], TIT: ["NT", "Cartas Paulinas", "Tito"],
  PHM: ["NT", "Cartas Paulinas", "Filêmon"], HEB: ["NT", "Cartas Paulinas", "Hebreus"], JAS: ["NT", "Cartas Católicas", "Tiago"],
  "1PE": ["NT", "Cartas Católicas", "1 Pedro"], "2PE": ["NT", "Cartas Católicas", "2 Pedro"], "1JN": ["NT", "Cartas Católicas", "1 João"],
  "2JN": ["NT", "Cartas Católicas", "2 João"], "3JN": ["NT", "Cartas Católicas", "3 João"], JUD: ["NT", "Cartas Católicas", "Judas"],
  REV: ["NT", "Livro Profético", "Apocalipse"],
};

function ondeNaBiblia(book) {
  const info = BOOK_INFO[book];
  if (!info) return "";
  const testamento = info[0] === "AT" ? "Antigo Testamento" : "Novo Testamento";
  return `${testamento} › ${info[1]} › ${info[2]}`;
}

const TABS = [
  { key: "paginas", label: "Páginas" },
  { key: "resumo", label: "Resumo" },
  { key: "leituras", label: "Leituras" },
  { key: "teologo", label: "Dúvidas" },
];

function LeituraItem({ leitura, aberta, onToggle, onAsk }) {
  return (
    <div
      className={`rounded-2xl transition-all ${aberta ? "bg-surface-container-lowest" : "bg-surface-container-low"}`}
      style={aberta ? { boxShadow: "0 16px 40px -14px rgba(31,55,73,0.18), 0 0 0 1px rgba(196,145,78,0.25)" } : undefined}
    >
      <button onClick={onToggle} className="w-full text-left px-4 py-4 flex items-start gap-3">
        <div className="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center shrink-0">
          <Icon name="menu_book" className="text-primary" style={{ fontSize: 19 }} />
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-headline text-[18px] text-primary">{leitura.ref}</span>
            {leitura.d && <Chip variant="gold">Deuterocanônico</Chip>}
          </div>
          <div className="text-[11px] text-on-surface-variant mt-0.5">{ondeNaBiblia(leitura.b)}</div>
          <p className="text-[14px] leading-relaxed text-on-surface mt-2">{leitura.motivo}</p>
        </div>
        <Icon name={aberta ? "expand_less" : "expand_more"} className="text-on-surface-variant mt-2" />
      </button>
      {aberta && (
        <div className="px-4 pb-5">
          <div className="rounded-2xl px-4 py-4" style={{ background: "#FFFDF8" }}>
            <PassageText refData={{ b: leitura.b, c: leitura.c, v: leitura.v, d: leitura.d, l: leitura.ref }} onAsk={onAsk} />
          </div>
        </div>
      )}
    </div>
  );
}

function EmPreparacao({ texto }) {
  return (
    <div className="rounded-2xl bg-surface-container-low px-5 py-6 text-[14px] text-on-surface-variant leading-relaxed">
      {texto}
    </div>
  );
}

function EstudoView({
  indice,
  slug,
  targetPg,
  onTargetDone,
  lidos,
  toggleLido,
  onOpenModulo,
  onBack,
  onOpenRef,
  onAsk,
  teologoSeed,
  onSeedUsed,
  showTeologoTab = true,
  immersive = false,
  tab,
  onTabChange,
}) {
  const modulo = useAsync(() => loadModulo(slug), [slug]);
  const scrollRef = React.useRef(null);
  const [pgAtual, setPgAtual] = React.useState(null);
  const [progress, setProgress] = React.useState(0);
  const [leituraAberta, setLeituraAberta] = React.useState(0);
  const [verTopicos, setVerTopicos] = React.useState(false);

  const meta = indice.modulos.find((m) => m.slug === slug);
  const idx = indice.modulos.findIndex((m) => m.slug === slug);
  const anterior = idx > 0 ? indice.modulos[idx - 1] : null;
  const proximo = idx >= 0 && idx < indice.modulos.length - 1 ? indice.modulos[idx + 1] : null;
  const tabs = showTeologoTab ? TABS : TABS.filter((t) => t.key !== "teologo");
  const activeTab = tabs.some((t) => t.key === tab) ? tab : "paginas";
  const data = modulo.data && modulo.data.slug === slug ? modulo.data : null;
  const estudo = data && data.estudo;
  const bottomPad = immersive ? 160 : 48;

  const pgRef = React.useRef(null);
  const jumpedRef = React.useRef(false);

  React.useEffect(() => {
    setLeituraAberta(0);
    setVerTopicos(false);
    setProgress(0);
    setPgAtual(meta ? meta.paginas[0] : null);
    pgRef.current = null;
  }, [slug]);

  const scrollToId = React.useCallback((id, smooth = true) => {
    const box = scrollRef.current;
    const el = box && box.querySelector(`[id="${id}"]`);
    if (!box || !el) return;
    const top = el.getBoundingClientRect().top - box.getBoundingClientRect().top + box.scrollTop - 12;
    box.scrollTo({ top, behavior: smooth ? "smooth" : "auto" });
  }, []);

  // Ao abrir o módulo ou voltar à aba Páginas: vai à página pedida (busca, "continuar"),
  // ou retoma a última página lida; nas outras abas começa do topo.
  React.useEffect(() => {
    const box = scrollRef.current;
    if (!data || !box) return undefined;
    if (activeTab !== "paginas") {
      box.scrollTop = 0;
      return undefined;
    }
    // Depois de um salto, onTargetDone zera targetPg e o efeito roda de novo: não mexe no scroll.
    if (!targetPg && jumpedRef.current) {
      jumpedRef.current = false;
      return undefined;
    }
    // targetPg: número da página ou id de um tópico ("p8-como-organizar…").
    const alvo = targetPg || pgRef.current;
    if (targetPg) {
      jumpedRef.current = true;
      pgRef.current = typeof targetPg === "number" ? targetPg : Number((targetPg.match(/^p(\d+)-/) || [])[1]) || null;
    }
    const frame = window.requestAnimationFrame(() => {
      if (typeof alvo === "string") scrollToId(alvo, false);
      else if (alvo && alvo !== data.conteudo[0].pg) scrollToId(`pg-${alvo}`, false);
      else box.scrollTop = 0;
      if (targetPg && onTargetDone) onTargetDone();
    });
    return () => window.cancelAnimationFrame(frame);
  }, [data, activeTab, targetPg]);

  const handleScroll = () => {
    const box = scrollRef.current;
    if (!box || !data || activeTab !== "paginas") return;
    const max = box.scrollHeight - box.clientHeight;
    setProgress(max > 0 ? Math.min(100, (box.scrollTop / max) * 100) : 100);
    const boxTop = box.getBoundingClientRect().top;
    let atual = data.conteudo[0].pg;
    for (const page of data.conteudo) {
      const el = box.querySelector(`[id="pg-${page.pg}"]`);
      if (el && el.getBoundingClientRect().top - boxTop < box.clientHeight * 0.35) atual = page.pg;
    }
    if (atual !== pgAtual) {
      setPgAtual(atual);
      saveUltimo(slug, atual);
    }
    pgRef.current = atual;
  };

  const handleContentClick = (event) => {
    const anchor = event.target.closest("a.bref");
    if (!anchor) return;
    event.preventDefault();
    onOpenRef(refFromAnchor(anchor));
  };

  const header = (
    <GlassBar className="shrink-0 z-20" style={{ boxShadow: "0 1px 0 rgba(216,207,191,0.5)" }}>
      <div
        className="flex items-center gap-3 px-4 pb-2"
        style={{ paddingTop: immersive ? "calc(env(safe-area-inset-top, 0px) + 14px)" : 16 }}
      >
        {onBack && (
          <button
            onClick={onBack}
            aria-label="Voltar aos módulos"
            className="w-10 h-10 rounded-full bg-surface-container-high/70 flex items-center justify-center shrink-0"
          >
            <Icon name="arrow_back" className="text-primary" />
          </button>
        )}
        <div className="min-w-0 flex-1">
          <div className="font-label text-[10px] uppercase tracking-[0.2em] font-bold text-secondary truncate">
            {meta ? meta.rotulo : "Estudo"}
          </div>
          <div className="font-headline text-[16px] text-primary leading-tight truncate">{meta && meta.titulo}</div>
        </div>
        {activeTab === "paginas" && pgAtual && (
          <div className="font-label text-[10px] font-bold text-on-surface-variant shrink-0 rounded-full bg-surface-container-high px-2.5 py-1">
            Pág. {pgAtual}
          </div>
        )}
      </div>
      <div className="flex gap-1 px-3 pb-2 overflow-x-auto no-scrollbar" role="tablist">
        {tabs.map((t) => {
          const active = activeTab === t.key;
          return (
            <button
              key={t.key}
              role="tab"
              aria-selected={active}
              onClick={() => onTabChange(t.key)}
              className={`px-4 py-2 rounded-full font-label text-[12px] font-bold tracking-wide whitespace-nowrap transition-all ${
                active ? "silk-gradient text-on-primary" : "text-on-surface-variant hover:bg-surface-container-high"
              }`}
            >
              {t.label}
            </button>
          );
        })}
      </div>
      {activeTab === "paginas" && <ReadingProgress value={progress} />}
    </GlassBar>
  );

  if (!meta) {
    return <div className="p-8 text-on-surface-variant">Módulo não encontrado.</div>;
  }

  if (activeTab === "teologo") {
    return (
      <div className="absolute inset-0 flex flex-col bg-surface">
        {header}
        <div className="flex-1 min-h-0" style={{ paddingBottom: immersive ? 92 : 0 }}>
          <TeologoChat
            modulo={slug}
            titulo={meta.titulo}
            seed={teologoSeed}
            onSeedUsed={onSeedUsed}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="absolute inset-0 flex flex-col bg-surface">
      {header}
      <div
        ref={scrollRef}
        onScroll={handleScroll}
        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
        style={{ overscrollBehaviorY: "contain" }}
      >
        <div className="mx-auto w-full max-w-[720px] px-6 pt-6 page-enter" key={`${slug}-${activeTab}`} style={{ paddingBottom: bottomPad }}>
          <div className="font-label text-[11px] uppercase tracking-[0.25em] font-bold text-secondary">{meta.rotulo}</div>
          <h1 className="font-headline text-[32px] lg:text-[38px] leading-[1.08] text-primary tracking-tight mt-2">{meta.titulo}</h1>
          {meta.subtitulo && (
            <p className="font-headline italic text-[16px] text-on-surface-variant mt-2">{meta.subtitulo}</p>
          )}
          <div className="flex items-center gap-2 mt-3 text-[12px] text-on-surface-variant">
            <span>{pageRange(meta.paginas)}</span>
            {lidos.has(slug) && (
              <span className="inline-flex items-center gap-1 font-bold" style={{ color: "#7A4F18" }}>
                · <Icon name="task_alt" style={{ fontSize: 15 }} /> estudado
              </span>
            )}
          </div>
          <div className="gilded-divider my-6" />

          {modulo.error && !data && (
            <EmPreparacao texto="Não foi possível abrir este módulo. Verifique a conexão e tente de novo." />
          )}
          {!data && !modulo.error && (
            <div className="text-sm text-on-surface-variant dot-pulse">
              Abrindo o material<span>.</span><span>.</span><span>.</span>
            </div>
          )}

          {data && activeTab === "paginas" && (
            <div>
              <div className="flex items-center gap-2 overflow-x-auto no-scrollbar pb-1 -mx-1 px-1">
                <span className="font-label text-[10px] uppercase tracking-[0.2em] font-bold text-on-surface-variant shrink-0">
                  Ir para
                </span>
                {data.conteudo.map((p) => (
                  <button
                    key={p.pg}
                    onClick={() => scrollToId(`pg-${p.pg}`)}
                    className={`shrink-0 min-w-[40px] px-2.5 py-1.5 rounded-full font-label text-[12px] font-bold transition-all ${
                      pgAtual === p.pg ? "silk-gradient text-on-primary" : "bg-surface-container-high text-primary"
                    }`}
                  >
                    {p.pg}
                  </button>
                ))}
              </div>

              {data.topicos.length > 1 && (
                <div className="mt-4">
                  <button
                    onClick={() => setVerTopicos((v) => !v)}
                    className="flex items-center gap-1 font-label text-[12px] font-bold text-on-secondary-container"
                  >
                    <Icon name={verTopicos ? "expand_less" : "expand_more"} style={{ fontSize: 18 }} />
                    Tópicos deste módulo ({data.topicos.length})
                  </button>
                  {verTopicos && (
                    <div className="mt-2 rounded-2xl bg-surface-container-low p-2 flex flex-col">
                      {data.topicos.map((t) => (
                        <button
                          key={t.id}
                          onClick={() => scrollToId(t.id)}
                          className="text-left px-3 py-2 rounded-xl hover:bg-surface-container-lowest flex items-baseline gap-3"
                        >
                          <span className="font-label text-[10px] font-bold text-outline shrink-0 w-10">p. {t.pg}</span>
                          <span className="text-[14px] text-primary leading-snug">{t.texto}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )}

              <div onClick={handleContentClick}>
                {data.conteudo.map((p) => (
                  <section key={p.pg} className="mt-8">
                    <div id={`pg-${p.pg}`} className="flex items-center gap-3 mb-5" style={{ scrollMarginTop: 12 }}>
                      <span className="font-label text-[10px] uppercase tracking-[0.3em] font-bold text-tertiary shrink-0">
                        Pág. {p.pg}
                      </span>
                      <div className="gilded-divider flex-1" />
                    </div>
                    <div className="kb" dangerouslySetInnerHTML={{ __html: p.html }} />
                  </section>
                ))}
              </div>

              <div className="mt-10 rounded-[24px] bg-surface-container-low p-5">
                <div className="font-headline text-[18px] text-primary">Terminou a leitura?</div>
                <p className="text-[13px] text-on-surface-variant mt-1">
                  Veja o resumo, aprofunde nas leituras e tire suas dúvidas no Tira-dúvidas.
                </p>
                <div className="flex flex-wrap gap-2 mt-4">
                  <button
                    onClick={() => toggleLido(slug)}
                    className={`px-4 py-2.5 rounded-full font-label text-[12px] font-bold flex items-center gap-1.5 ${
                      lidos.has(slug) ? "bg-surface-container-high text-primary" : "gold-gradient"
                    }`}
                    style={lidos.has(slug) ? undefined : { color: "#08161A" }}
                  >
                    <Icon name="task_alt" style={{ fontSize: 17 }} />
                    {lidos.has(slug) ? "Estudado (desmarcar)" : "Marcar como estudado"}
                  </button>
                  <button
                    onClick={() => onTabChange("resumo")}
                    className="px-4 py-2.5 rounded-full font-label text-[12px] font-bold bg-surface-container-lowest text-primary ambient"
                  >
                    Ver resumo
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 mt-6">
                {anterior ? (
                  <button
                    onClick={() => onOpenModulo(anterior.slug)}
                    className="text-left rounded-2xl bg-surface-container-lowest ambient p-4"
                  >
                    <div className="flex items-center gap-1 font-label text-[10px] uppercase tracking-[0.18em] font-bold text-on-surface-variant">
                      <Icon name="chevron_left" style={{ fontSize: 16 }} /> Anterior
                    </div>
                    <div className="font-headline text-[14px] text-primary leading-snug mt-1">{anterior.titulo}</div>
                  </button>
                ) : (
                  <span />
                )}
                {proximo && (
                  <button
                    onClick={() => onOpenModulo(proximo.slug)}
                    className="text-right rounded-2xl silk-gradient text-on-primary p-4"
                  >
                    <div className="flex items-center justify-end gap-1 font-label text-[10px] uppercase tracking-[0.18em] font-bold text-secondary-fixed-dim">
                      Próximo <Icon name="chevron_right" style={{ fontSize: 16 }} />
                    </div>
                    <div className="font-headline text-[14px] leading-snug mt-1">
                      {proximo.subtitulo ? `${proximo.titulo} — ${proximo.subtitulo}` : proximo.titulo}
                    </div>
                  </button>
                )}
              </div>
            </div>
          )}

          {data && activeTab === "resumo" && (
            estudo ? (
              <div>
                <div className="font-label text-[11px] uppercase tracking-[0.25em] font-bold text-secondary mb-4">
                  Resumo do tema
                </div>
                {estudo.resumo.map((par, i) => (
                  <p key={i} className="text-[16.5px] leading-[1.75] text-on-surface mb-4">
                    {i === 0 ? (
                      <React.Fragment>
                        <span className="font-headline text-[44px] leading-[0.85] float-left mr-2 mt-1 text-primary">
                          {par.charAt(0)}
                        </span>
                        {par.slice(1)}
                      </React.Fragment>
                    ) : (
                      par
                    )}
                  </p>
                ))}
                <div className="mt-8 rounded-[24px] p-5" style={{ background: "#F1E3C4" }}>
                  <div className="font-label text-[10px] uppercase tracking-[0.25em] font-bold mb-3" style={{ color: "#7A4F18" }}>
                    Pontos-chave
                  </div>
                  <ul className="flex flex-col gap-3">
                    {estudo.pontos.map((p, i) => (
                      <li key={i} className="flex gap-3 text-[15px] leading-relaxed text-on-surface">
                        <span className="font-headline text-[15px] shrink-0" style={{ color: "#8A5A1E" }}>{i + 1}.</span>
                        <span>{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="flex flex-wrap gap-2 mt-6">
                  <button
                    onClick={() => onTabChange("leituras")}
                    className="px-4 py-2.5 rounded-full font-label text-[12px] font-bold silk-gradient text-on-primary"
                  >
                    Leituras para aprofundar
                  </button>
                  <button
                    onClick={() => onAsk(`Tenho uma dúvida sobre "${meta.subtitulo || meta.titulo}": `)}
                    className="px-4 py-2.5 rounded-full font-label text-[12px] font-bold bg-surface-container-lowest text-primary ambient flex items-center gap-1.5"
                  >
                    <Icon name="forum" style={{ fontSize: 16 }} /> Tirar uma dúvida
                  </button>
                </div>
                <p className="text-[11px] text-outline mt-6">
                  Resumo elaborado a partir do texto do próprio material, págs. {meta.paginas[0]}–{meta.paginas[meta.paginas.length - 1]}.
                </p>
              </div>
            ) : (
              <EmPreparacao texto="O resumo deste módulo está em preparação. Enquanto isso, leia as páginas e use o Tira-dúvidas." />
            )
          )}

          {data && activeTab === "leituras" && (
            estudo && estudo.leituras.length ? (
              <div>
                <div className="font-label text-[11px] uppercase tracking-[0.25em] font-bold text-secondary">
                  Para aprofundar na Palavra
                </div>
                <p className="font-headline italic text-[15px] text-on-surface-variant mt-2 mb-5">
                  Leia com calma, uma passagem por dia, e anote o que tocar o seu coração.
                </p>
                <div className="flex flex-col gap-3">
                  {estudo.leituras.map((l, i) => (
                    <LeituraItem
                      key={l.ref}
                      leitura={l}
                      aberta={leituraAberta === i}
                      onToggle={() => setLeituraAberta(leituraAberta === i ? -1 : i)}
                      onAsk={() => onAsk(`Explique ${l.ref} e como essa passagem se liga ao tema "${meta.subtitulo || meta.titulo}".`)}
                    />
                  ))}
                </div>
                <p className="text-[11px] text-outline mt-6 leading-relaxed">
                  Referências no padrão da Bíblia Ave-Maria (Salmos com a numeração hebraica e, entre parênteses, a da Vulgata).
                  O texto exibido é da tradução Almeida, de domínio público.
                </p>
              </div>
            ) : (
              <EmPreparacao texto="As leituras deste módulo estão em preparação. Toque nas referências bíblicas sublinhadas nas páginas para ler as passagens citadas pelo material." />
            )
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EstudoView, ondeNaBiblia });