// ---------- Página /igrejas: Igrejas e congregações (Sede Vila Arens) ----------
const { useState: useStateI, useMemo: useMemoI, useEffect: useEffectI } = React;

const semAcento = (s) => (s || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();

// Distância em linha reta (km) entre dois pontos (fórmula de Haversine).
const distKm = (a, b) => {
  const rad = (x) => (x * Math.PI) / 180;
  const dLat = rad(b.lat - a.lat), dLng = rad(b.lng - a.lng);
  const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(a.lat)) * Math.cos(rad(b.lat)) * Math.sin(dLng / 2) ** 2;
  return 6371 * 2 * Math.asin(Math.sqrt(h));
};
const fmtKm = (km) => (km < 1 ? "menos de 1 km" : `${km.toFixed(1).replace(".", ",")} km`);

// Classifica o resultado do mapa para a pessoa saber o que está escolhendo.
const tipoLugar = (r) => {
  const t = r.addresstype || r.type;
  if (["suburb", "neighbourhood", "quarter", "city_district", "residential", "borough"].includes(t)) return "Bairro";
  if (["city", "town", "village", "municipality", "hamlet"].includes(t)) return "Cidade";
  if (r.class === "highway" || t === "road") return "Rua";
  return "Local";
};

const SectionIgrejas = ({ palette }) => {
  const todas = window.OBPC_IGREJAS || [];
  const [busca, setBusca] = useStateI("");
  const [pos, setPos] = useStateI(null);          // { lat, lng } do aparelho; fica só na memória
  const [gps, setGps] = useStateI("idle");        // idle | buscando | negado | erro

  const usarLocalizacao = () => {
    if (!navigator.geolocation) { setGps("erro"); return; }
    setGps("buscando");
    navigator.geolocation.getCurrentPosition(
      (r) => { setPos({ lat: r.coords.latitude, lng: r.coords.longitude }); setGps("idle"); },
      (e) => setGps(e.code === 1 ? "negado" : "erro"),
      { enableHighAccuracy: false, timeout: 15000, maximumAge: 300000 }
    );
  };

  // Texto que não bate com nenhuma igreja cadastrada (ex.: o bairro de quem procura) é procurado no mapa
  // (OpenStreetMap/Nominatim, só na região de Jundiaí). A pessoa escolhe qual resultado quis dizer
  // (bairro, rua ou cidade) e a lista passa a ser ordenada por distância até ele.
  const [alvo, setAlvo] = useStateI(null);          // { lat, lng, rotulo }
  const [sugestoes, setSugestoes] = useStateI([]);  // [{ tipo, titulo, contexto, lat, lng }]
  const [tipoSel, setTipoSel] = useStateI("Todos");
  const [endStatus, setEndStatus] = useStateI("idle"); // idle | buscando | naoachou | erro

  const casadas = useMemoI(() => {
    const q = semAcento(busca).trim();
    return q ? todas.filter((g) =>
      semAcento(`${g.nome} ${g.bairro} ${g.cidade} ${g.endereco}`).includes(q)) : todas;
  }, [busca, todas]);

  useEffectI(() => {
    setAlvo(null); setSugestoes([]); setTipoSel("Todos");
    const q = busca.trim();
    if (q.length < 3 || casadas.length > 0) { setEndStatus("idle"); return; }
    setEndStatus("buscando");
    const ctl = new AbortController();
    const t = setTimeout(() => {
      fetch("https://nominatim.openstreetmap.org/search?format=json&limit=8&addressdetails=1&countrycodes=br" +
        "&bounded=1&viewbox=-47.4,-22.9,-46.5,-23.5&q=" + encodeURIComponent(q), { signal: ctl.signal })
        .then((r) => r.json())
        .then((res) => {
          const vistos = new Set();
          const lista = [];
          for (const r of res) {
            const partes = r.display_name.split(",").map((x) => x.trim());
            const titulo = r.name || partes[0];
            const contexto = partes.slice(1).filter((x) => !/^(Região|São Paulo$|Brasil$|\d)/.test(x)).slice(0, 3).join(", ");
            const chave = `${titulo}|${contexto}`;
            if (vistos.has(chave)) continue;
            vistos.add(chave);
            lista.push({ tipo: tipoLugar(r), titulo, contexto, lat: parseFloat(r.lat), lng: parseFloat(r.lon) });
          }
          if (!lista.length) { setEndStatus("naoachou"); return; }
          setSugestoes(lista); setEndStatus("idle");
          if (lista.length === 1) escolher(lista[0]);
        })
        .catch((e) => { if (e.name !== "AbortError") setEndStatus("erro"); });
    }, 700);
    return () => { clearTimeout(t); ctl.abort(); };
  }, [busca, casadas.length]);

  const escolher = (x) => setAlvo({ lat: x.lat, lng: x.lng, rotulo: x.contexto ? `${x.titulo}, ${x.contexto.split(",")[0]}` : x.titulo });

  const origem = alvo || pos;

  const lista = useMemoI(() => {
    const r = casadas.length ? casadas : (alvo ? todas : []);
    if (!origem) return r;
    return r.map((g) => ({ ...g, km: typeof g.lat === "number" ? distKm(origem, g) : null }))
      .sort((a, b) => (a.km ?? Infinity) - (b.km ?? Infinity));
  }, [casadas, todas, alvo, origem]);

  const rota = (g) =>
    origem && typeof g.lat === "number"
      ? "https://www.google.com/maps/dir/?api=1&origin=" + origem.lat + "," + origem.lng +
        "&destination=" + encodeURIComponent(`${g.endereco}, ${g.bairro}, ${g.cidade} - SP`)
      : "https://www.google.com/maps/search/?api=1&query=" +
        encodeURIComponent(`${g.endereco}, ${g.bairro}, ${g.cidade} - SP`);
  const zap = (g) =>
    "https://wa.me/5511972771969?text=" +
    encodeURIComponent(`Paz do Senhor! Gostaria de saber os horários de culto da OBPC ${g.nome}.`);

  return (
    <section id="igrejas" className="obpc-section obpc-section--igr is-pagina" style={{ background: palette.bg, color: palette.fg }}>
      <Reveal delay={60}>
        <div className="obpc-igr-bar" style={{ borderColor: `${palette.fg}18` }}>
          <p className="obpc-igr-lede" style={{ color: palette.muted }}>
            {todas.length} igrejas em Jundiaí e região, todas sob o cuidado da Sede Vila Arens.
          </p>
          <div className="obpc-igr-ctrl">
          <label className="obpc-igr-busca" style={{ borderColor: `${palette.fg}30`, color: palette.fg }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
            <input
              type="search" value={busca} onChange={(e) => setBusca(e.target.value)}
              placeholder="Digite seu bairro ou rua" aria-label="Buscar igreja por bairro, rua ou cidade"
              style={{ color: palette.fg }}
            />
          </label>
          <div className="obpc-igr-gps">
            {!pos ? (
              <button type="button" className="obpc-igr-gps-btn" onClick={usarLocalizacao}
                disabled={gps === "buscando"} style={{ borderColor: palette.accent, color: palette.accent }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><circle cx="12" cy="12" r="8"/></svg>
                {gps === "buscando" ? "Localizando…" : "Usar minha localização"}
              </button>
            ) : (
              <button type="button" className="obpc-igr-gps-btn is-on" onClick={() => setPos(null)}
                style={{ borderColor: `${palette.fg}30`, color: palette.muted }}>
                Ordenado pela sua localização · limpar
              </button>
            )}
            {gps === "negado" && <p className="obpc-igr-gps-msg" style={{ color: palette.muted }}>Sem permissão de localização. Libere nas configurações do navegador ou busque pelo bairro.</p>}
            {gps === "erro" && <p className="obpc-igr-gps-msg" style={{ color: palette.muted }}>Não foi possível obter sua localização. Busque pelo bairro.</p>}
          </div>
          </div>
        </div>
      </Reveal>

      <div className="obpc-igr-grid" role="list">
        {lista.map((g, i) => (
          <article key={g.nome} role="listitem"
            className={`obpc-igr-card ${g.sede ? "is-sede" : ""} ${origem && i < 2 && g.km != null ? "is-perto" : ""}`}
            style={{ background: palette.surface, borderColor: g.sede || (origem && i === 0) ? palette.accent : `${palette.fg}18` }}>
            {origem && g.km != null && (
              <div className="obpc-igr-prox">
                <span className="obpc-igr-km" style={{ color: i < 2 ? palette.accent : palette.fg }}>{fmtKm(g.km)}</span>
                {i < 2 && (
                  <span className="obpc-igr-rank" style={{ background: palette.accent, color: "#fff" }}>
                    {i === 0 ? "Mais próxima" : "2ª mais próxima"}
                  </span>
                )}
              </div>
            )}
            <div className="obpc-igr-idx" style={{ color: palette.muted }}>
              {g.sede ? "Sede" : "Congregação"}
            </div>
            <h3 className="obpc-igr-nome">{g.nome}</h3>
            <p className="obpc-igr-end" style={{ color: palette.muted }}>
              {g.endereco}<br/>{g.bairro} · {g.cidade}
            </p>
            <p className="obpc-igr-cultos" style={{ color: g.cultos ? palette.fg : palette.muted }}>
              {g.cultos || "Horários de culto: confirme pelo WhatsApp"}
            </p>
            <div className="obpc-igr-acoes" style={{ borderColor: `${palette.fg}18` }}>
              <a href={rota(g)} target="_blank" rel="noopener" style={{ color: palette.accent }}>Como chegar →</a>
              {!g.cultos && <a href={zap(g)} target="_blank" rel="noopener" style={{ color: palette.fg }}>WhatsApp</a>}
            </div>
          </article>
        ))}
      </div>

      {!alvo && sugestoes.length > 1 && (
        <div className="obpc-igr-sug" style={{ borderColor: `${palette.fg}18`, background: palette.surface }}>
          <p className="obpc-igr-sug-tit" style={{ color: palette.muted }}>
            Qual destes você quis dizer? Toque para ver as igrejas mais próximas.
          </p>
          <div className="obpc-igr-chips" role="group" aria-label="Filtrar por tipo">
            {["Todos", ...new Set(sugestoes.map((x) => x.tipo))].map((t) => (
              <button key={t} type="button" onClick={() => setTipoSel(t)}
                className={`obpc-igr-chip ${tipoSel === t ? "is-on" : ""}`}
                style={{ borderColor: tipoSel === t ? palette.accent : `${palette.fg}30`,
                         background: tipoSel === t ? palette.accent : "transparent",
                         color: tipoSel === t ? "#fff" : palette.fg }}>{t}</button>
            ))}
          </div>
          <ul className="obpc-igr-sug-lista">
            {sugestoes.filter((x) => tipoSel === "Todos" || x.tipo === tipoSel).map((x, k) => (
              <li key={k}>
                <button type="button" onClick={() => escolher(x)} style={{ color: palette.fg }}>
                  <span className="obpc-igr-sug-tipo" style={{ color: palette.accent }}>{x.tipo}</span>
                  <strong>{x.titulo}</strong>
                  {x.contexto && <span style={{ color: palette.muted }}> · {x.contexto}</span>}
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
      {alvo && (
        <p className="obpc-igr-vazio" style={{ color: palette.muted, marginTop: 0, marginBottom: 24 }}>
          Mostrando as igrejas mais próximas de {alvo.rotulo}.
        </p>
      )}
      {endStatus === "buscando" && (
        <p className="obpc-igr-vazio" style={{ color: palette.muted }}>Procurando “{busca}” no mapa…</p>
      )}
      {lista.length === 0 && endStatus !== "buscando" && sugestoes.length === 0 && (
        <p className="obpc-igr-vazio" style={{ color: palette.muted }}>
          {endStatus === "erro"
            ? "Não foi possível localizar esse endereço agora. Tente de novo ou fale conosco pelo WhatsApp."
            : `Não encontramos “${busca}”. Tente o nome do bairro ou da rua, ou fale conosco pelo WhatsApp.`}
        </p>
      )}
    </section>
  );
};