// Módulos - lista agrupada do material, progresso de leitura e busca no texto integral

function ProgressBeads({ modulos, lidos, dark = false }) {
  return (
    <div className="flex items-center gap-[3px]">
      {modulos.map((m) => {
        const lido = lidos.has(m.slug);
        return (
          <div
            key={m.slug}
            className="flex-1 h-1.5 rounded-full"
            style={{
              background: lido ? "#EDC877" : dark ? "rgba(255,255,255,0.18)" : "#E6DDCB",
              boxShadow: lido ? "0 0 10px rgba(237,200,119,0.55)" : "none",
            }}
          />
        );
      })}
    </div>
  );
}

function SearchResults({ query, indice, onOpen }) {
  const busca = useAsync(loadBusca, []);
  const porSlug = React.useMemo(() => {
    const map = {};
    indice.modulos.forEach((m) => (map[m.slug] = m));
    return map;
  }, [indice]);

  if (busca.loading) {
    return <div className="text-sm text-on-surface-variant px-1 py-4">Procurando…</div>;
  }
  if (busca.error) {
    return <div className="text-sm text-on-surface-variant px-1 py-4">Não foi possível carregar a busca.</div>;
  }
  const results = searchPages(busca.data, query);
  if (!results.length) {
    return (
      <div className="text-sm text-on-surface-variant px-1 py-4">
        Nada encontrado para “{query}”. Tente outra palavra.
      </div>
    );
  }
  return (
    <div className="flex flex-col gap-2 pb-4">
      <div className="font-label text-[10px] uppercase tracking-[0.22em] font-bold text-secondary px-1 mt-1">
        {results.length >= 40 ? "40+" : results.length} página{results.length === 1 ? "" : "s"} com “{query}”
      </div>
      {results.map((r) => {
        const mod = porSlug[r.slug];
        return (
          <button
            key={`${r.slug}-${r.pg}`}
            onClick={() => onOpen(r.slug, r.pg)}
            className="text-left rounded-2xl bg-surface-container-lowest ambient px-4 py-3 active:scale-[0.99] transition-transform"
          >
            <div className="flex items-center justify-between gap-2">
              <span className="font-label text-[10px] uppercase tracking-[0.18em] font-bold text-secondary truncate">
                {mod ? mod.rotulo : r.slug}
              </span>
              <span className="font-label text-[10px] font-bold text-on-surface-variant shrink-0">Pág. {r.pg}</span>
            </div>
            <div className="font-headline text-[15px] text-primary leading-snug mt-0.5">{mod && mod.titulo}</div>
            <div className="text-[13px] text-on-surface-variant leading-relaxed mt-1">
              {r.before}
              <mark className="rounded px-0.5" style={{ background: "#F6E7C3", color: "#3B2815" }}>{r.match}</mark>
              {r.after}
            </div>
          </button>
        );
      })}
    </div>
  );
}

function ModuloRow({ mod, active, lido, onOpen }) {
  return (
    <button
      onClick={() => onOpen(mod.slug)}
      className={`w-full text-left rounded-2xl px-4 py-3.5 flex items-center gap-3 transition-all active:scale-[0.99] ${
        active ? "bg-surface-container-lowest" : "bg-surface-container-low hover:bg-surface-container-lowest"
      }`}
      style={active ? { boxShadow: "0 16px 40px -14px rgba(31,55,73,0.22), 0 0 0 1px rgba(196,145,78,0.35)" } : undefined}
    >
      <div
        className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 font-headline text-[15px] ${
          active ? "silk-gradient text-on-primary" : lido ? "" : "bg-surface-container-high text-primary"
        }`}
        style={lido && !active ? { background: "#F6E7C3", color: "#7A4F18" } : undefined}
      >
        {lido ? <Icon name="check_circle" filled style={{ fontSize: 20 }} /> : mod.ordem}
      </div>
      <div className="min-w-0 flex-1">
        <div className="font-label text-[10px] uppercase tracking-[0.18em] font-bold text-secondary truncate">
          {mod.rotulo}
        </div>
        <div className="font-headline text-[15.5px] text-primary leading-snug">{mod.titulo}</div>
        {mod.subtitulo && (
          <div className="font-headline italic text-[13px] text-on-surface-variant leading-snug mt-0.5">
            {mod.subtitulo}
          </div>
        )}
      </div>
      <div className="font-label text-[10px] font-bold text-on-surface-variant shrink-0 text-right">
        {pageRange(mod.paginas)}
      </div>
    </button>
  );
}

// Sumário no formato do livro: destaque em negrito, subdivisões com ↳ e número da página.
function Sumario({ sumario, lidos, current, onOpen }) {
  return (
    <div className="flex flex-col">
      {sumario.map((s, i) => {
        const active = current === s.slug;
        const lido = lidos.has(s.slug);
        const primeiroDoModulo = !sumario[i - 1] || sumario[i - 1].slug !== s.slug;
        return (
          <div
            key={`${s.pg}-${i}`}
            className={`flex items-start gap-3 rounded-2xl transition-all ${s.sub ? "pl-7 pr-3 py-2" : "px-3 py-3 mt-1"} ${
              active ? "bg-surface-container-lowest" : "hover:bg-surface-container-lowest/70"
            }`}
            style={active && primeiroDoModulo ? { boxShadow: "0 0 0 1px rgba(196,145,78,0.35)" } : undefined}
          >
            {s.sub && <span className="font-headline text-[15px] text-tertiary leading-snug shrink-0">↳</span>}
            <div className="min-w-0 flex-1">
              {s.itens.length ? (
                <div className="text-[14px] leading-relaxed text-on-surface">
                  {s.itens.map((item, j) => (
                    <React.Fragment key={item.t}>
                      {j > 0 && <span className="text-outline mx-1.5">·</span>}
                      <button
                        onClick={() => onOpen(s.slug, item.id || s.pg)}
                        className="underline decoration-[rgba(196,145,78,0.45)] underline-offset-[3px] hover:text-primary text-left"
                      >
                        {item.t}
                      </button>
                    </React.Fragment>
                  ))}
                </div>
              ) : (
                <button onClick={() => onOpen(s.slug, s.pg)} className="text-left w-full">
                  {s.destaque && (
                    <span className="font-headline font-bold text-[15.5px] text-primary leading-snug">{s.destaque} </span>
                  )}
                  {s.resto && (
                    <span className={`leading-snug ${s.sub ? "text-[14px] text-on-surface" : "text-[14.5px] text-on-surface-variant"}`}>
                      {s.resto}
                    </span>
                  )}
                </button>
              )}
            </div>
            <div className="flex items-center gap-1.5 shrink-0 pt-0.5">
              {lido && primeiroDoModulo && (
                <Icon name="check_circle" filled style={{ fontSize: 16, color: "#C4914E" }} />
              )}
              <span className="font-label text-[11px] font-bold text-on-surface-variant tabular-nums">{s.pg}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ModulosList({ indice, lidos, current, onOpen }) {
  const [query, setQuery] = React.useState("");
  const searching = query.trim().length >= 3;
  const groups = React.useMemo(() => groupModulos(indice.modulos), [indice]);

  return (
    <div>
      <label className="flex items-center gap-2 rounded-2xl bg-surface-container-lowest ambient px-4 py-2.5 mb-5">
        <Icon name="search" className="text-on-surface-variant" style={{ fontSize: 20 }} />
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Buscar no material (ex.: perdão)"
          className="flex-1 border-0 bg-transparent focus:ring-0 p-0 text-[15px]"
          aria-label="Buscar no material"
        />
        {query && (
          <button onClick={() => setQuery("")} aria-label="Limpar busca">
            <Icon name="close" className="text-on-surface-variant" style={{ fontSize: 18 }} />
          </button>
        )}
      </label>

      {searching ? (
        <SearchResults query={query.trim()} indice={indice} onOpen={onOpen} />
      ) : indice.sumario ? (
        <div>
          <div className="flex items-center justify-between px-3 mb-1">
            <span className="font-label text-[10px] uppercase tracking-[0.25em] font-bold text-on-surface-variant">Sumário</span>
            <span className="font-label text-[10px] uppercase tracking-[0.25em] font-bold text-on-surface-variant">Pág.</span>
          </div>
          <Sumario sumario={indice.sumario} lidos={lidos} current={current} onOpen={onOpen} />
        </div>
      ) : (
        groups.map((g) => (
          <div key={g.grupo} className="mb-5">
            <div className="font-label text-[10px] uppercase tracking-[0.25em] font-bold text-on-surface-variant px-1 mb-2">
              {g.grupo}
            </div>
            <div className="flex flex-col gap-2">
              {g.itens.map((mod) => (
                <ModuloRow
                  key={mod.slug}
                  mod={mod}
                  active={current === mod.slug}
                  lido={lidos.has(mod.slug)}
                  onOpen={onOpen}
                />
              ))}
            </div>
          </div>
        ))
      )}
    </div>
  );
}

function ModulosScreen({ indice, lidos, current, onOpen }) {
  const total = indice.modulos.length;
  const feitos = indice.modulos.filter((m) => lidos.has(m.slug)).length;
  return (
    <ScreenShell>
      <div className="silk-gradient relative overflow-hidden px-6 pb-8" style={{ paddingTop: "calc(env(safe-area-inset-top, 0px) + 40px)" }}>
        <div
          className="absolute -top-24 -right-20 w-80 h-80 rounded-full pointer-events-none"
          style={{ background: "radial-gradient(circle, rgba(237,200,119,0.25) 0%, transparent 60%)" }}
        />
        <div className="font-label text-[10px] uppercase tracking-[0.3em] font-bold text-secondary-fixed-dim">
          Material de estudo
        </div>
        <h1 className="font-headline text-[36px] leading-[1.05] text-on-primary tracking-tight mt-2">
          Grupo de <em className="text-secondary-fixed-dim">Perseverança</em>
        </h1>
        <p className="font-headline italic text-[14px] text-on-primary/75 mt-2">
          {total} módulos · {indice.totalPaginas} páginas do livro
        </p>
        <div className="mt-6">
          <ProgressBeads modulos={indice.modulos} lidos={lidos} dark />
          <div className="font-label text-[11px] font-bold text-on-primary/80 mt-2">
            {feitos} de {total} módulos estudados
          </div>
        </div>
      </div>
      <div className="px-5 pt-6 pb-40 page-enter">
        <ModulosList indice={indice} lidos={lidos} current={current} onOpen={onOpen} />
      </div>
    </ScreenShell>
  );
}

// Desktop: sumário em página inteira, ao lado da capa (como um livro aberto).
function SumarioPage({ indice, lidos, current, onOpen, onHome }) {
  const total = indice.modulos.length;
  const feitos = indice.modulos.filter((m) => lidos.has(m.slug)).length;
  return (
    <div className="flex w-full h-full">
      <div className="relative w-[38%] max-w-[560px] shrink-0 overflow-hidden" style={{ background: "#08161A" }}>
        <img
          src="assets/capa-splash.webp"
          alt="São José com o Menino Jesus"
          className="absolute inset-0 w-full h-full fade-in"
          style={{ objectFit: "cover", objectPosition: "center 20%" }}
        />
        <div
          className="absolute inset-x-0 bottom-0 h-1/2"
          style={{ background: "linear-gradient(to bottom, rgba(8,22,26,0) 0%, rgba(8,22,26,0.85) 60%, #08161A 100%)" }}
        />
        <div className="absolute inset-x-0 bottom-0 p-10">
          <div className="font-label text-[10px] uppercase tracking-[0.3em] font-bold" style={{ color: "#EDC877" }}>
            Renovação Carismática Católica
          </div>
          <div className="font-headline text-[40px] leading-[1.05] mt-2" style={{ color: "#FAF7F2" }}>
            Grupo de <em style={{ color: "#EDC877" }}>Perseverança</em>
          </div>
          <button
            onClick={onHome}
            className="mt-5 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-[12px] font-bold"
            style={{ color: "#FAF7F2", background: "rgba(250,247,242,0.1)" }}
          >
            <Icon name="arrow_back" style={{ fontSize: 16 }} /> Voltar à capa
          </button>
        </div>
      </div>

      <div className="flex-1 min-w-0 overflow-y-auto">
        <div className="max-w-[760px] mx-auto px-10 pt-12 pb-16 page-enter">
          <div className="font-label text-[11px] uppercase tracking-[0.3em] font-bold text-secondary">Material de estudo</div>
          <h1 className="font-headline text-[44px] leading-[1.05] text-primary tracking-tight mt-2">Sumário</h1>
          <p className="font-headline italic text-[16px] text-on-surface-variant mt-2">
            {total} módulos · {indice.totalPaginas} páginas do livro · toque num item para abrir
          </p>
          <div className="mt-6 max-w-[420px]">
            <ProgressBeads modulos={indice.modulos} lidos={lidos} />
            <div className="font-label text-[11px] font-bold text-on-surface-variant mt-2">
              {feitos} de {total} módulos estudados
            </div>
          </div>
          <div className="gilded-divider my-8" />
          <ModulosList indice={indice} lidos={lidos} current={current} onOpen={onOpen} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ModulosList, ModulosScreen, ProgressBeads, Sumario, SumarioPage });