"use client";

import { useEffect } from "react";
import { visitaQueNaoConta } from "@/lib/no-editor-da-loja";

/*
  Conta os cliques em links e botões de cada seção da página (a caixa da
  seção marca data-ks-cliques com o id dela). Um ouvinte só, na página
  inteira. O aviso vai pelo sendBeacon: o clique que troca de página não
  espera nada e não perde a contagem. Nada do visitante vai junto: só a loja
  e a seção (o servidor soma por dia, migration 199).

  No editor (o lojista montando a página) e na prévia dos temas não conta.
*/

const INTERVALO_MS = 1500;

export function ContadorDeCliques({ slug }: { slug: string }) {
  useEffect(() => {
    if (visitaQueNaoConta()) return;
    const ultimos = new Map<string, number>();
    const aoClicar = (evento: MouseEvent) => {
      const alvo = evento.target as Element | null;
      const clicavel = alvo?.closest?.("a[href], button, [role='button']");
      if (!clicavel) return;
      const secao = clicavel.closest("[data-ks-cliques]")?.getAttribute("data-ks-cliques") || "";
      if (!/^[0-9a-f-]{36}$/i.test(secao)) return;
      /* O mesmo clique repetido (duplo clique, setinha do carrossel) conta uma vez a cada instante. */
      const agora = Date.now();
      if (agora - (ultimos.get(secao) || 0) < INTERVALO_MS) return;
      ultimos.set(secao, agora);
      const corpo = JSON.stringify({ slug, secao });
      try {
        if (navigator.sendBeacon?.("/api/catalog/cliques", new Blob([corpo], { type: "application/json" }))) return;
      } catch {
        /* sem beacon: vai pelo fetch */
      }
      void fetch("/api/catalog/cliques", { method: "POST", headers: { "content-type": "application/json" }, body: corpo, keepalive: true }).catch(() => undefined);
    };
    document.addEventListener("click", aoClicar, true);
    return () => document.removeEventListener("click", aoClicar, true);
  }, [slug]);
  return null;
}