"use client";

import { useEffect, useRef } from "react";
import { recordBlogView } from "@/services/blogs";

type BlogViewTrackerProps = {
  slug: string;
  onViewCountUpdate?: (views: number) => void;
};

export default function BlogViewTracker({
  slug,
  onViewCountUpdate,
}: BlogViewTrackerProps) {
  const trackedSlug = useRef<string | null>(null);

  useEffect(() => {
    if (!slug) return;

    if (trackedSlug.current === slug) {
      return;
    }

    let pendingSlug: string | null = null;

    try {
      pendingSlug = sessionStorage.getItem(
        "tghr-pending-blog-view"
      );

      if (pendingSlug === slug) {
        sessionStorage.removeItem(
          "tghr-pending-blog-view"
        );
      }
    } catch {
      return;
    }

    if (pendingSlug !== slug) {
      return;
    }

    trackedSlug.current = slug;

    recordBlogView(slug)
      .then((response) => {
        if (
          response.success &&
          response.counted &&
          typeof response.views === "number"
        ) {
          const views = response.views;

          onViewCountUpdate?.(views);

          try {
            sessionStorage.setItem(
              `blog-views-${slug}`,
              String(views)
            );
          } catch {
            // Ignore storage errors
          }

          window.dispatchEvent(
            new CustomEvent("blog-view-updated", {
              detail: {
                slug,
                views,
              },
            })
          );
        }
      })
      .catch((error) => {
        console.error(
          "Failed to record blog view:",
          error
        );
      });
  }, [slug, onViewCountUpdate]);

  return null;
}