"use client";

import { useEffect, useMemo } from "react";
import { trackPublicBlogVisit } from "@/lib/public-blog";

type Props = {
  slug: string;
};

function ensureId(key: string) {
  if (typeof window === "undefined") return "";
  const existing = localStorage.getItem(key);
  if (existing) return existing;
  const next = `${key}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
  localStorage.setItem(key, next);
  return next;
}

export default function BlogVisitTracker({ slug }: Props) {
  const startedAt = useMemo(() => Date.now(), []);

  useEffect(() => {
    if (!slug) return;
    const sessionId = ensureId("blog_analytics_session_id");
    const visitorId = ensureId("blog_analytics_visitor_id");
    const onceKey = `blog_visit_tracked_${slug}_${sessionId}`;
    if (sessionStorage.getItem(onceKey)) return;

    const url = new URL(window.location.href);
    const utm = {
      source: url.searchParams.get("utm_source") || "",
      medium: url.searchParams.get("utm_medium") || "",
      campaign: url.searchParams.get("utm_campaign") || "",
      term: url.searchParams.get("utm_term") || "",
      content: url.searchParams.get("utm_content") || "",
    };

    const send = () =>
      trackPublicBlogVisit(slug, {
        sessionId,
        visitorId,
        referrer: document.referrer || "",
        language: navigator.language || "",
        readTimeSec: Math.max(0, Math.round((Date.now() - startedAt) / 1000)),
        viewport: {
          width: window.innerWidth,
          height: window.innerHeight,
        },
        utm,
      });

    void send().then((ok) => {
      if (ok) {
        sessionStorage.setItem(onceKey, "1");
        return;
      }
      // If initial beacon fails (network/API cold start), retry once shortly.
      window.setTimeout(() => {
        void send().then((retryOk) => {
          if (retryOk) sessionStorage.setItem(onceKey, "1");
        });
      }, 3000);
    });

    const onHide = () => {
      void send();
    };
    window.addEventListener("pagehide", onHide);
    return () => window.removeEventListener("pagehide", onHide);
  }, [slug, startedAt]);

  return null;
}