import { useEffect, useRef, useState } from "react";
import { useParams, useSearch } from "wouter";
import ePub, { type Rendition, type Book } from "epubjs";
import { trpc } from "../lib/trpc";
import { LeitorImagens } from "./LeitorImagens";

const FORMATOS_IMAGEM = ["ilustrado", "manga", "hq", "revista"];

interface SelecaoAtual {
  cfiRange: string;
  texto: string;
}

interface ItemSumario {
  href: string;
  label: string;
}

type Aba = "sumario" | "marcadores" | "grifos" | "aparencia" | null;
type Tema = "claro" | "escuro" | "sepia";

const CHAVE_TEMA = "biblioteca_leitor_tema";
const CHAVE_FONTE = "biblioteca_leitor_fonte";

const TEMAS: Record<Tema, { body: Record<string, string> }> = {
  claro: { body: { color: "#1e1b18", background: "#ffffff" } },
  escuro: { body: { color: "#ede8e0", background: "#1a0209" } },
  sepia: { body: { color: "#5b4636", background: "#f4ecd8" } },
};

export function Leitor() {
  const { id } = useParams<{ id: string }>();
  const livroId = Number(id);
  const parametrosBusca = new URLSearchParams(useSearch());
  const cfiCompartilhado = parametrosBusca.get("cfi");

  const { data: livro, isLoading: carregandoLivro } = trpc.biblioteca.getLivro.useQuery({ id: livroId });
  const { data: usuario } = trpc.auth.me.useQuery();
  const habilitado = !!usuario && !Number.isNaN(livroId);

  const { data: posicaoSalva } = trpc.biblioteca.historico.obterPosicao.useQuery({ livroId }, { enabled: habilitado });
  const { data: favoritoStatus } = trpc.biblioteca.favoritos.status.useQuery({ livroId }, { enabled: habilitado });
  const { data: marcadores } = trpc.biblioteca.anotacoes.marcadores.listar.useQuery({ livroId }, { enabled: habilitado });
  const { data: grifos } = trpc.biblioteca.anotacoes.grifos.listar.useQuery({ livroId }, { enabled: habilitado });

  const utils = trpc.useUtils();
  const registrarHistorico = trpc.biblioteca.historico.registrar.useMutation();
  const alternarFavorito = trpc.biblioteca.favoritos.alternar.useMutation({
    onSuccess: () => utils.biblioteca.favoritos.status.invalidate({ livroId }),
  });
  const criarMarcador = trpc.biblioteca.anotacoes.marcadores.criar.useMutation({
    onSuccess: () => utils.biblioteca.anotacoes.marcadores.listar.invalidate({ livroId }),
  });
  const removerMarcador = trpc.biblioteca.anotacoes.marcadores.remover.useMutation({
    onSuccess: () => utils.biblioteca.anotacoes.marcadores.listar.invalidate({ livroId }),
  });
  const criarGrifo = trpc.biblioteca.anotacoes.grifos.criar.useMutation({
    onSuccess: () => utils.biblioteca.anotacoes.grifos.listar.invalidate({ livroId }),
  });
  const removerGrifo = trpc.biblioteca.anotacoes.grifos.remover.useMutation({
    onSuccess: () => utils.biblioteca.anotacoes.grifos.listar.invalidate({ livroId }),
  });
  const compartilhar = trpc.biblioteca.anotacoes.compartilhar.useMutation();

  const viewerRef = useRef<HTMLDivElement>(null);
  const renditionRef = useRef<Rendition | null>(null);
  const bookRef = useRef<Book | null>(null);
  const [carregandoEpub, setCarregandoEpub] = useState(true);
  const [erro, setErro] = useState<string | null>(null);
  const [aba, setAba] = useState<Aba>(null);
  const [sumario, setSumario] = useState<ItemSumario[]>([]);
  const sumarioRef = useRef<ItemSumario[]>([]);
  const [paginaInfo, setPaginaInfo] = useState<{ pagina: number; totalPagina: number; capituloAtual: number } | null>(null);
  const [selecao, setSelecao] = useState<SelecaoAtual | null>(null);
  const [linkCompartilhado, setLinkCompartilhado] = useState<string | null>(null);
  const [tema, setTema] = useState<Tema>(() => (localStorage.getItem(CHAVE_TEMA) as Tema) || "claro");
  const [tamanhoFonte, setTamanhoFonte] = useState<number>(() => Number(localStorage.getItem(CHAVE_FONTE)) || 100);

  const prontoParaMontar = !usuario || posicaoSalva !== undefined;

  useEffect(() => {
    if (!livro?.epubUrl || !viewerRef.current || !prontoParaMontar) return;

    setCarregandoEpub(true);
    setErro(null);

    const book = ePub(livro.epubUrl);
    bookRef.current = book;
    const rendition = book.renderTo(viewerRef.current, { width: "100%", height: "100%", flow: "paginated" });
    renditionRef.current = rendition;

    // Usamos override() em vez de register()+select(): o mecanismo de
    // classes do epub.js (várias regras "*.tema body{...}" empilhadas
    // no mesmo stylesheet) tem um bug real de cascata — depois de
    // selecionar sépia, voltar pro tema claro ficava preso na cor
    // errada. override() aplica a cor direto com !important, sem
    // depender de qual classe está ativa.
    rendition.themes.override("color", TEMAS[tema].body.color, true);
    rendition.themes.override("background", TEMAS[tema].body.background, true);
    rendition.themes.fontSize(`${tamanhoFonte}%`);

    book.loaded.navigation.then((nav) => {
      const itens = nav.toc.map((item) => ({ href: item.href, label: item.label?.trim() || item.href }));
      setSumario(itens);
      sumarioRef.current = itens;

      // Sem posição salva nem link compartilhado, o destino é o primeiro
      // capítulo real (não a página de sumário, que é sempre a primeira
      // do spine nos EPUBs gerados aqui — a pessoa não veio pra isso).
      if (!cfiCompartilhado && !posicaoSalva?.posicaoLeitura) {
        rendition
          .display(nav.toc[0]?.href)
          .then(() => setCarregandoEpub(false))
          .catch(() => {
            setErro("Não foi possível abrir este livro.");
            setCarregandoEpub(false);
          });
      }
    });

    if (cfiCompartilhado || posicaoSalva?.posicaoLeitura) {
      rendition
        .display(cfiCompartilhado || posicaoSalva?.posicaoLeitura || undefined)
        .then(() => setCarregandoEpub(false))
        .catch(() => {
          setErro("Não foi possível abrir este livro.");
          setCarregandoEpub(false);
        });
    }

    rendition.on("relocated", (localizacao: { start: { cfi: string; href: string; displayed: { page: number; total: number } } }) => {
      const cfi = localizacao?.start?.cfi;
      if (cfi && usuario) {
        registrarHistorico.mutate({ livroId, posicaoLeitura: cfi });
      }
      if (localizacao?.start?.displayed) {
        const indiceCapitulo = sumarioRef.current.findIndex((item) => item.href.split("#")[0] === localizacao.start.href.split("#")[0]);
        setPaginaInfo({
          pagina: localizacao.start.displayed.page,
          totalPagina: localizacao.start.displayed.total,
          capituloAtual: indiceCapitulo >= 0 ? indiceCapitulo + 1 : 1,
        });
      }
    });

    rendition.on("selected", (cfiRange: string, contents: { window: Window }) => {
      const texto = contents.window.getSelection()?.toString().trim() ?? "";
      if (texto.length > 0) {
        setSelecao({ cfiRange, texto });
      }
    });

    return () => {
      book.destroy();
      renditionRef.current = null;
      bookRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [livro?.epubUrl, prontoParaMontar]);

  // Reaplica os grifos salvos toda vez que a lista chega/muda.
  useEffect(() => {
    const rendition = renditionRef.current;
    if (!rendition || !grifos || carregandoEpub) return;
    for (const grifo of grifos) {
      try {
        rendition.annotations.highlight(grifo.cfiInicio, {}, undefined, "epub-grifo", {
          fill: "#f5c66b",
          "fill-opacity": "0.35",
          "mix-blend-mode": "multiply",
        });
      } catch {
        // CFI de uma edição antiga do arquivo pode não bater mais — ignora silenciosamente.
      }
    }
  }, [grifos, carregandoEpub]);

  function mudarTema(novo: Tema) {
    setTema(novo);
    localStorage.setItem(CHAVE_TEMA, novo);
    renditionRef.current?.themes.override("color", TEMAS[novo].body.color, true);
    renditionRef.current?.themes.override("background", TEMAS[novo].body.background, true);
  }

  function mudarFonte(delta: number) {
    const novo = Math.min(160, Math.max(80, tamanhoFonte + delta));
    setTamanhoFonte(novo);
    localStorage.setItem(CHAVE_FONTE, String(novo));
    renditionRef.current?.themes.fontSize(`${novo}%`);
  }

  function irParaHref(href: string) {
    renditionRef.current?.display(href);
    setAba(null);
  }

  function irParaCfi(cfi: string) {
    renditionRef.current?.display(cfi);
    setAba(null);
  }

  function salvarMarcadorAtual() {
    const cfiAtual = renditionRef.current?.location?.start?.cfi;
    if (cfiAtual) criarMarcador.mutate({ livroId, cfiInicio: cfiAtual });
  }

  function grifarSelecao() {
    if (!selecao) return;
    const nota = window.prompt("Nota opcional pra esse grifo (deixe em branco pra pular):", "") ?? undefined;
    criarGrifo.mutate({ livroId, cfiInicio: selecao.cfiRange, trechoTexto: selecao.texto, notaLeitor: nota || undefined });
    setSelecao(null);
  }

  // O box de compartilhar aparece na hora, junto com "grifar" — sem
  // precisar de um clique intermediário. O registro de compartilhamento
  // só é criado quando a pessoa escolhe de fato uma plataforma (evita
  // lotar o banco com trechos selecionados que nunca foram compartilhados).
  async function compartilharEmPlataforma(plataforma: "whatsapp" | "facebook" | "twitter" | "copiar") {
    if (!selecao) return;
    const resultado = await compartilhar.mutateAsync({ livroId, cfiInicio: selecao.cfiRange, trechoTexto: selecao.texto });
    const url = `${window.location.origin}${resultado.url}`;
    const mensagem = `"${selecao.texto.slice(0, 120)}${selecao.texto.length > 120 ? "…" : ""}" ${url}`;

    if (plataforma === "whatsapp") {
      window.open(`https://wa.me/?text=${encodeURIComponent(mensagem)}`, "_blank");
    } else if (plataforma === "facebook") {
      window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, "_blank");
    } else if (plataforma === "twitter") {
      window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(selecao.texto.slice(0, 200))}&url=${encodeURIComponent(url)}`, "_blank");
    } else if (navigator.clipboard) {
      await navigator.clipboard.writeText(url);
      setLinkCompartilhado(url);
    }
    setSelecao(null);
  }

  const abas: { id: Aba; rotulo: string }[] = [
    { id: "sumario", rotulo: "índice" },
    { id: "marcadores", rotulo: "marcadores" },
    { id: "grifos", rotulo: "grifos" },
    { id: "aparencia", rotulo: "aparência" },
  ];

  const ehFormatoImagem = livro?.formato && FORMATOS_IMAGEM.includes(livro.formato);

  if (ehFormatoImagem) {
    return (
      <div style={{ height: "100dvh", display: "flex", flexDirection: "column", background: "var(--gradient-hero)", color: "var(--color-text-on-dark)" }}>
        <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1.25rem", borderBottom: "var(--border-thin)", gap: "0.5rem" }}>
          <a href={`/livro/${livroId}`} style={{ fontSize: "0.75rem", padding: "0.4rem 0.9rem", borderRadius: "999px", border: "1px solid rgba(255,255,255,0.25)", color: "var(--clr-branco)" }}>Sinopse</a>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "0.9rem", flex: 1, textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {livro?.titulo}
          </span>
          {usuario && (
            <button
              aria-label="favoritar"
              onClick={() => alternarFavorito.mutate({ livroId })}
              style={{ background: "none", border: "none", fontSize: "1rem", color: favoritoStatus?.favorito ? "var(--clr-acento-400)" : "var(--color-text-on-dark-subtle)" }}
            >
              {favoritoStatus?.favorito ? "★" : "☆"}
            </button>
          )}
        </header>
        {carregandoLivro ? (
          <p style={{ textAlign: "center", padding: "2rem", color: "var(--color-text-on-dark-muted)" }}>carregando...</p>
        ) : (
          <LeitorImagens livroId={livroId} titulo={livro?.titulo ?? ""} />
        )}
      </div>
    );
  }

  return (
    <div style={{ height: "100dvh", display: "flex", flexDirection: "column", background: "var(--gradient-hero)", color: "var(--color-text-on-dark)" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1.25rem", borderBottom: "var(--border-thin)", gap: "0.5rem" }}>
        <a href={`/livro/${livroId}`} style={{ fontSize: "0.75rem", padding: "0.4rem 0.9rem", borderRadius: "999px", border: "1px solid rgba(255,255,255,0.25)", color: "var(--clr-branco)" }}>Sinopse</a>
        <span style={{ fontFamily: "var(--font-display)", fontSize: "0.9rem", flex: 1, textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {livro?.titulo}
        </span>
        {usuario && (
          <div style={{ display: "flex", gap: "0.5rem" }}>
            <button
              aria-label="favoritar"
              onClick={() => alternarFavorito.mutate({ livroId })}
              style={{ background: "none", border: "none", fontSize: "1rem", color: favoritoStatus?.favorito ? "var(--clr-acento-400)" : "var(--color-text-on-dark-subtle)" }}
            >
              {favoritoStatus?.favorito ? "★" : "☆"}
            </button>
            <button
              aria-label="menu do leitor"
              onClick={() => setAba((a) => (a ? null : "sumario"))}
              style={{ background: "none", border: "none", fontSize: "0.9rem", color: "var(--color-text-on-dark-subtle)" }}
            >
              ☰
            </button>
          </div>
        )}
      </header>

      {aba && (
        <div style={{ borderBottom: "var(--border-thin)", background: "var(--color-bg-card-dark)" }}>
          <div style={{ display: "flex", borderBottom: "var(--border-thin)" }}>
            {abas.map((item) => (
              <button
                key={item.id}
                onClick={() => setAba(item.id)}
                style={{
                  flex: 1,
                  padding: "0.6rem 0.25rem",
                  fontSize: "0.7rem",
                  background: "none",
                  border: "none",
                  borderBottom: aba === item.id ? "2px solid var(--clr-acento-400)" : "2px solid transparent",
                  color: aba === item.id ? "var(--clr-acento-400)" : "var(--color-text-on-dark-muted)",
                }}
              >
                {item.rotulo}
              </button>
            ))}
          </div>

          <div style={{ padding: "0.75rem 1.25rem", maxHeight: "40vh", overflowY: "auto" }}>
            {aba === "sumario" && (
              sumario.length > 0 ? (
                <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
                  {sumario.map((item) => (
                    <button
                      key={item.href}
                      onClick={() => irParaHref(item.href)}
                      style={{ background: "none", border: "none", color: "var(--clr-acento-400)", fontSize: "0.8rem", textAlign: "left" }}
                    >
                      {item.label}
                    </button>
                  ))}
                </div>
              ) : (
                <p style={{ fontSize: "0.75rem", color: "var(--color-text-on-dark-subtle)" }}>este livro não tem índice.</p>
              )
            )}

            {aba === "marcadores" && (
              <>
                <button className="btn btn-ghost" style={{ padding: "0.3rem 0.8rem", fontSize: "0.7rem", marginBottom: "0.6rem" }} onClick={salvarMarcadorAtual}>
                  + marcar esta página
                </button>
                {marcadores && marcadores.length > 0 ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
                    {marcadores.map((m) => (
                      <div key={m.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem" }}>
                        <button onClick={() => irParaCfi(m.cfiInicio)} style={{ background: "none", border: "none", color: "var(--clr-acento-400)", textAlign: "left" }}>
                          marcador salvo em {new Date(m.criadoEm).toLocaleDateString("pt-BR")}
                        </button>
                        <button onClick={() => removerMarcador.mutate({ id: m.id })} style={{ background: "none", border: "none", color: "var(--color-text-on-dark-subtle)" }}>
                          remover
                        </button>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p style={{ fontSize: "0.75rem", color: "var(--color-text-on-dark-subtle)" }}>nenhum marcador ainda.</p>
                )}
              </>
            )}

            {aba === "grifos" && (
              grifos && grifos.length > 0 ? (
                <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
                  {grifos.map((g) => (
                    <div key={g.id} style={{ borderLeft: "2px solid #f5c66b", paddingLeft: "0.6rem" }}>
                      <button onClick={() => irParaCfi(g.cfiInicio)} style={{ background: "none", border: "none", color: "var(--clr-branco)", fontSize: "0.75rem", textAlign: "left", display: "block" }}>
                        "{g.trechoTexto}"
                      </button>
                      {g.notaLeitor && <p style={{ fontSize: "0.7rem", color: "var(--color-text-on-dark-muted)", marginTop: "0.2rem" }}>{g.notaLeitor}</p>}
                      <button
                        onClick={() => {
                          try {
                            renditionRef.current?.annotations.remove(g.cfiInicio, "highlight");
                          } catch {
                            // se a marca já não existir na tela, não tem o que limpar
                          }
                          removerGrifo.mutate({ id: g.id });
                        }}
                        style={{ background: "none", border: "none", color: "var(--color-text-on-dark-subtle)", fontSize: "0.7rem", marginTop: "0.2rem" }}
                      >
                        remover
                      </button>
                    </div>
                  ))}
                </div>
              ) : (
                <p style={{ fontSize: "0.75rem", color: "var(--color-text-on-dark-subtle)" }}>nenhum grifo ainda — selecione um trecho no texto pra grifar.</p>
              )
            )}

            {aba === "aparencia" && (
              <div style={{ display: "flex", flexDirection: "column", gap: "0.8rem" }}>
                <div>
                  <p style={{ fontSize: "0.7rem", color: "var(--color-text-on-dark-muted)", marginBottom: "0.4rem" }}>tema de leitura</p>
                  <div style={{ display: "flex", gap: "0.5rem" }}>
                    {(Object.keys(TEMAS) as Tema[]).map((t) => (
                      <button
                        key={t}
                        onClick={() => mudarTema(t)}
                        style={{
                          padding: "0.4rem 0.9rem",
                          fontSize: "0.7rem",
                          borderRadius: "var(--radius-sm)",
                          border: tema === t ? "1px solid var(--clr-acento-400)" : "var(--border-medium)",
                          background: TEMAS[t].body.background,
                          color: TEMAS[t].body.color,
                        }}
                      >
                        {t}
                      </button>
                    ))}
                  </div>
                </div>
                <div>
                  <p style={{ fontSize: "0.7rem", color: "var(--color-text-on-dark-muted)", marginBottom: "0.4rem" }}>tamanho da fonte</p>
                  <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
                    <button className="btn btn-ghost" style={{ padding: "0.3rem 0.8rem" }} onClick={() => mudarFonte(-10)}>A-</button>
                    <span style={{ fontSize: "0.75rem" }}>{tamanhoFonte}%</span>
                    <button className="btn btn-ghost" style={{ padding: "0.3rem 0.8rem" }} onClick={() => mudarFonte(10)}>A+</button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      <div style={{ flex: 1, minHeight: 0, position: "relative" }}>
        {(carregandoLivro || carregandoEpub) && !erro && (
          <p style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-text-on-dark-muted)", fontSize: "0.875rem" }}>
            carregando livro...
          </p>
        )}
        {erro && (
          <p style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#ff8080", fontSize: "0.875rem", padding: "0 1.5rem", textAlign: "center" }}>
            {erro}
          </p>
        )}
        {livro && !livro.epubUrl && !carregandoLivro && (
          <p style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-text-on-dark-muted)", fontSize: "0.875rem" }}>
            este livro ainda não tem um arquivo de leitura disponível.
          </p>
        )}
        <div ref={viewerRef} style={{ position: "absolute", inset: 0, background: "var(--clr-off-white)" }} />
      </div>

      {selecao && (
        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", padding: "0.75rem 1rem", borderTop: "var(--border-thin)", background: "var(--color-bg-card-dark)" }}>
          <button className="btn btn-primary" style={{ padding: "0.5rem 0.9rem", flexShrink: 0 }} onClick={grifarSelecao}>
            grifar
          </button>
          <div style={{ width: 1, height: 24, background: "var(--color-border-medium)", flexShrink: 0 }} />
          <button
            aria-label="compartilhar no WhatsApp"
            onClick={() => compartilharEmPlataforma("whatsapp")}
            style={{ background: "none", border: "none", color: "var(--color-text-on-dark-muted)", fontSize: "0.75rem", padding: "0.4rem 0.6rem", flexShrink: 0 }}
          >
            WhatsApp
          </button>
          <button
            aria-label="compartilhar no Facebook"
            onClick={() => compartilharEmPlataforma("facebook")}
            style={{ background: "none", border: "none", color: "var(--color-text-on-dark-muted)", fontSize: "0.75rem", padding: "0.4rem 0.6rem", flexShrink: 0 }}
          >
            Facebook
          </button>
          <button
            aria-label="compartilhar no X"
            onClick={() => compartilharEmPlataforma("twitter")}
            style={{ background: "none", border: "none", color: "var(--color-text-on-dark-muted)", fontSize: "0.75rem", padding: "0.4rem 0.6rem", flexShrink: 0 }}
          >
            X
          </button>
          <button
            aria-label="copiar link do trecho"
            onClick={() => compartilharEmPlataforma("copiar")}
            style={{ background: "none", border: "none", color: "var(--color-text-on-dark-muted)", fontSize: "0.75rem", padding: "0.4rem 0.6rem", flexShrink: 0 }}
          >
            copiar
          </button>
          <button onClick={() => setSelecao(null)} style={{ background: "none", border: "none", color: "var(--color-text-on-dark-subtle)", padding: "0 0.4rem", marginLeft: "auto", flexShrink: 0 }}>
            ✕
          </button>
        </div>
      )}

      {linkCompartilhado && (
        <div style={{ padding: "0.75rem 1.25rem", borderTop: "var(--border-thin)", background: "var(--color-bg-card-dark)", fontSize: "0.75rem" }}>
          <p style={{ color: "var(--color-text-on-dark-muted)", marginBottom: "0.3rem" }}>link copiado — pronto pra compartilhar:</p>
          <p style={{ color: "var(--clr-acento-400)", wordBreak: "break-all" }}>{linkCompartilhado}</p>
          <button onClick={() => setLinkCompartilhado(null)} className="btn btn-ghost" style={{ marginTop: "0.5rem", padding: "0.3rem 0.8rem", fontSize: "0.7rem" }}>
            fechar
          </button>
        </div>
      )}

      {!erro && livro?.epubUrl && !selecao && !linkCompartilhado && (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1.25rem", borderTop: "var(--border-thin)" }}>
          <button className="btn btn-ghost" style={{ padding: "0.5rem 1.25rem" }} onClick={() => renditionRef.current?.prev()}>
            ‹ anterior
          </button>
          {paginaInfo && (
            <span style={{ fontSize: "0.8rem", fontWeight: 600, color: "var(--clr-branco)" }}>
              capítulo {paginaInfo.capituloAtual} de {sumario.length || 1} · página {paginaInfo.pagina} de {paginaInfo.totalPagina}
            </span>
          )}
          <button className="btn btn-ghost" style={{ padding: "0.5rem 1.25rem" }} onClick={() => renditionRef.current?.next()}>
            próxima ›
          </button>
        </div>
      )}
    </div>
  );
}
