// Bíblia: texto das passagens via bible-api.com (tradução Almeida, domínio público).
// A Ave-Maria tem direitos autorais; deuterocanônicos não existem na Almeida.

const BIBLE_API = "https://bible-api.com/data/almeida";
const CHAPTER_CACHE = Object.create(null);

function fetchChapter(book, chapter) {
  const key = `${book}:${chapter}`;
  if (!CHAPTER_CACHE[key]) {
    CHAPTER_CACHE[key] = fetch(`${BIBLE_API}/${book}/${chapter}`)
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
      })
      .then((payload) => {
        if (!Array.isArray(payload.verses) || !payload.verses.length) {
          throw new Error("Capítulo não encontrado.");
        }
        return payload.verses;
      })
      .catch((error) => {
        delete CHAPTER_CACHE[key];
        throw error;
      });
  }
  return CHAPTER_CACHE[key];
}

function parseVerseSpec(spec) {
  if (!spec) return [];
  return String(spec)
    .split(",")
    .map((part) => {
      const [a, b] = part.split("-").map(Number);
      return { start: a, end: Number.isFinite(b) ? b : a };
    })
    .filter((range) => Number.isFinite(range.start));
}

// Joel e Malaquias têm capítulos divididos de outro jeito na Almeida (protestante).
// Devolve o capítulo na Almeida e o deslocamento a somar no versículo católico.
function almeidaCoords(book, chapter, firstVerse) {
  if (book === "JOL" && chapter === 3) return { c: 2, shift: 27 };
  if (book === "JOL" && chapter === 4) return { c: 3, shift: 0 };
  if (book === "MAL" && chapter === 3 && firstVerse >= 19) return { c: 4, shift: -18 };
  return { c: chapter, shift: 0 };
}

// Nos Salmos a Ave-Maria conta o título como versículo e a Almeida não:
// mostramos o salmo inteiro para não exibir versículos deslocados.
async function fetchPassage(ref) {
  if (ref.d) throw Object.assign(new Error("deuterocanonico"), { deutero: true });
  const catholic = ref.b === "PSA" ? [] : parseVerseSpec(ref.v);
  const { c, shift } = almeidaCoords(ref.b, ref.c, catholic.length ? catholic[0].start : 1);
  const verses = (await fetchChapter(ref.b, c)).map((v) => ({ ...v, verse: v.verse - shift }));
  const ranges = catholic;
  const selected = ranges.length
    ? verses.filter((v) => ranges.some((r) => v.verse >= r.start && v.verse <= r.end))
    : verses.filter((v) => v.verse >= 1);
  if (!selected.length) throw new Error("Versículos não encontrados nesta tradução.");
  return {
    inteiro: ref.b === "PSA" && Boolean(ref.v),
    versos: selected.map((v) => ({
      n: v.verse,
      t: String(v.text).replace(/\s+/g, " ").trim(),
    })),
  };
}

function PassageText({ refData, onAsk }) {
  const [state, setState] = React.useState({ loading: true, data: null, error: null });

  React.useEffect(() => {
    let alive = true;
    setState({ loading: true, data: null, error: null });
    fetchPassage(refData)
      .then((data) => alive && setState({ loading: false, data, error: null }))
      .catch((error) => alive && setState({ loading: false, data: null, error }));
    return () => {
      alive = false;
    };
  }, [refData.b, refData.c, refData.v, refData.d]);

  if (state.loading) {
    return (
      <div className="text-sm text-on-surface-variant py-2 dot-pulse">
        Carregando a passagem<span>.</span><span>.</span><span>.</span>
      </div>
    );
  }

  if (state.error) {
    const deutero = state.error.deutero;
    return (
      <div className="rounded-2xl p-4 text-sm leading-relaxed" style={{ background: "#F4EFE6" }}>
        <p className="text-on-surface-variant">
          {deutero
            ? "Este livro está na Bíblia católica (deuterocanônico), mas a tradução disponível no app não o inclui. Leia na sua Bíblia Ave-Maria."
            : navigator.onLine === false
            ? "Sem internet agora. Abra esta passagem na sua Bíblia ou tente de novo quando estiver conectado."
            : "Não foi possível carregar o texto agora. Abra esta passagem na sua Bíblia."}
        </p>
        {onAsk && (
          <button
            onClick={onAsk}
            className="mt-3 inline-flex items-center gap-1.5 text-[13px] font-bold text-on-secondary-container"
          >
            <Icon name="forum" style={{ fontSize: 18 }} />
            Tirar dúvida sobre esta passagem
          </button>
        )}
      </div>
    );
  }

  return (
    <div>
      {state.data.inteiro && (
        <div className="text-[11px] text-on-surface-variant mb-2">
          Salmo completo — a numeração dos versículos varia entre as edições.
        </div>
      )}
      <div className="font-headline text-[16.5px] leading-[1.8] text-on-surface">
        {state.data.versos.map((v) => (
          <span key={v.n}>
            <sup className="font-label text-[10px] font-bold text-tertiary mr-1">{v.n}</sup>
            {v.t}{" "}
          </span>
        ))}
      </div>
      <div className="mt-3 text-[10px] uppercase tracking-[0.18em] font-bold text-outline">
        Tradução João Ferreira de Almeida · bible-api.com
      </div>
    </div>
  );
}

// Folha inferior aberta ao tocar numa referência do texto.
function BibleSheet({ refData, onClose, onAsk }) {
  React.useEffect(() => {
    const onKey = (event) => event.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!refData) return null;
  return (
    <div
      className="fixed inset-0 z-[90] flex items-end lg:items-center justify-center"
      style={{ background: "rgba(8,22,26,0.5)" }}
      onClick={onClose}
    >
      <div
        className="w-full lg:max-w-[560px] rounded-t-3xl lg:rounded-3xl bg-surface slide-up flex flex-col"
        style={{ maxHeight: "82dvh", boxShadow: "0 -18px 48px rgba(0,0,0,0.25)" }}
        onClick={(event) => event.stopPropagation()}
        role="dialog"
        aria-label={`Passagem ${refData.l}`}
      >
        <div className="flex items-start justify-between gap-3 px-6 pt-6 pb-3">
          <div>
            <div className="font-label text-[10px] uppercase tracking-[0.25em] font-bold text-secondary">
              Sagrada Escritura
            </div>
            <div className="font-headline text-[24px] text-primary leading-tight mt-1">{refData.l}</div>
            {refData.raw && refData.raw !== refData.l && (
              <div className="text-[12px] text-on-surface-variant mt-0.5">No livro: {refData.raw}</div>
            )}
          </div>
          <button
            onClick={onClose}
            aria-label="Fechar"
            className="w-10 h-10 rounded-full bg-surface-container-high/70 flex items-center justify-center shrink-0"
          >
            <Icon name="close" className="text-on-surface-variant" />
          </button>
        </div>
        <div className="gilded-divider mx-6" />
        <div className="overflow-y-auto px-6 pt-4 pb-8" style={{ overscrollBehavior: "contain" }}>
          <PassageText refData={refData} onAsk={() => onAsk(refData)} />
          <button
            onClick={() => onAsk(refData)}
            className="mt-5 w-full py-3.5 rounded-xl silk-gradient text-on-primary font-label text-[13px] font-bold tracking-wide flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
          >
            <Icon name="forum" style={{ fontSize: 18 }} />
            Tirar dúvida sobre {refData.l}
          </button>
        </div>
      </div>
    </div>
  );
}

// Cliques em <a class="bref"> dentro do texto do livro viram dados de referência.
function refFromAnchor(anchor) {
  const d = anchor.dataset;
  return { b: d.b, c: Number(d.c), v: d.v || "", l: d.l, d: d.d === "1", raw: anchor.textContent };
}

Object.assign(window, { PassageText, BibleSheet, refFromAnchor, fetchPassage });