"use client";

import { useEffect } from "react";

declare global {
  interface Window {
    dataLayer: unknown[];
  }
}

function gtag(...args: unknown[]) {
  if (typeof window !== "undefined" && window.dataLayer) {
    window.dataLayer.push(args);
  }
}

/** Push a view_item dataLayer event (GA4 enhanced ecommerce). */
export function ViewItemTracker({
  id,
  sku,
  name,
  price,
  category,
  currency = "USD",
}: {
  id: number;
  sku: string;
  name: string;
  price: string | number;
  category: string;
  currency?: string;
}) {
  useEffect(() => {
    if (typeof window === "undefined" || !window.dataLayer) return;
    window.dataLayer.push({
      event: "view_item",
      ecommerce: {
        currency,
        items: [
          {
            item_id: sku || String(id),
            item_name: name,
            price: Number(price),
            category,
          },
        ],
      },
    });
  }, [id, sku, name, price, category, currency]);

  return null;
}

/** Track an arbitrary event — attach to onClicks, onFocus, form handlers etc. */
export function trackEvent(eventName: string, params?: Record<string, unknown>) {
  if (typeof window === "undefined" || !window.dataLayer) return;
  window.dataLayer.push({ event: eventName, ...params });
}

/** Track a nav click — matches legacy format. */
export function trackNav(origin: "Header" | "Footer", linkText: string) {
  if (typeof window === "undefined" || !window.dataLayer) return;
  window.dataLayer.push({ event: "navigation", nav_item: origin, nav_name: linkText });
}