"use client";

import { useEffect } from "react";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";

function sessionId() {
  const key = "documenta:portal-session";
  let value = sessionStorage.getItem(key);
  if (!value) {
    value = crypto.randomUUID();
    sessionStorage.setItem(key, value);
  }
  return value;
}

function send(evento: string, elemento?: string) {
  const body = JSON.stringify({
    evento,
    ruta: window.location.pathname,
    elemento: elemento || null,
    sesion: sessionId(),
    metadata: {},
  });
  if (navigator.sendBeacon) {
    navigator.sendBeacon(`${apiBase}/portal/events`, new Blob([body], { type: "application/json" }));
    return;
  }
  void fetch(`${apiBase}/portal/events`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body,
    keepalive: true,
  });
}

export default function PortalAnalytics() {
  useEffect(() => {
    send("PAGE_VIEW");
    const handler = (event: MouseEvent) => {
      const target = (event.target as HTMLElement).closest<HTMLElement>("[data-analytics]");
      if (!target) return;
      send(target.dataset.analyticsEvent || "CTA_CLICK", target.dataset.analytics);
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);
  return null;
}