"use client";

/**
 * TrackedButton Component
 *
 * Drop-in replacement for <button> with automatic action tracking.
 * Records clicks to both PostHog and the error context ring buffer.
 *
 * Usage:
 * <TrackedButton
 *   trackingName="signup_cta"
 *   trackingLocation="hero"
 *   onClick={handleSignup}
 * >
 *   Sign Up
 * </TrackedButton>
 */

import React, { forwardRef, type ButtonHTMLAttributes } from "react";
import { trackClick } from "@/lib/action-tracker";

// ============================================================================
// Types
// ============================================================================

export interface TrackedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Identifier for tracking (e.g., "signup_cta", "pricing_toggle")
   * Required for tracking to work
   */
  trackingName: string;

  /**
   * Location on the page (e.g., "header", "hero", "footer")
   * Helps identify where users interact
   */
  trackingLocation?: string;

  /**
   * Additional tracking data
   * Don't include PII - this is for context only
   */
  trackingData?: Record<string, unknown>;

  /**
   * Whether to track the click (default: true)
   * Set to false to temporarily disable tracking
   */
  trackingEnabled?: boolean;
}

// ============================================================================
// Component
// ============================================================================

export const TrackedButton = forwardRef<HTMLButtonElement, TrackedButtonProps>(
  (
    {
      trackingName,
      trackingLocation,
      trackingData,
      trackingEnabled = true,
      onClick,
      children,
      ...buttonProps
    },
    ref,
  ) => {
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      // Track the click if enabled
      if (trackingEnabled) {
        trackClick(trackingName, trackingLocation, trackingData);
      }

      // Call the original onClick handler
      onClick?.(event);
    };

    return (
      <button
        ref={ref}
        onClick={handleClick}
        data-track-name={trackingName}
        data-track-location={trackingLocation}
        {...buttonProps}
      >
        {children}
      </button>
    );
  },
);

TrackedButton.displayName = "TrackedButton";

// ============================================================================
// TrackedLink Component (for Next.js Link with tracking)
// ============================================================================

export interface TrackedAnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * Identifier for tracking
   */
  trackingName: string;

  /**
   * Location on the page
   */
  trackingLocation?: string;

  /**
   * Additional tracking data
   */
  trackingData?: Record<string, unknown>;

  /**
   * Whether to track the click (default: true)
   */
  trackingEnabled?: boolean;
}

export const TrackedAnchor = forwardRef<HTMLAnchorElement, TrackedAnchorProps>(
  (
    {
      trackingName,
      trackingLocation,
      trackingData,
      trackingEnabled = true,
      onClick,
      children,
      ...anchorProps
    },
    ref,
  ) => {
    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
      // Track the click if enabled
      if (trackingEnabled) {
        trackClick(trackingName, trackingLocation, trackingData);
      }

      // Call the original onClick handler
      onClick?.(event);
    };

    return (
      <a
        ref={ref}
        onClick={handleClick}
        data-track-name={trackingName}
        data-track-location={trackingLocation}
        {...anchorProps}
      >
        {children}
      </a>
    );
  },
);

TrackedAnchor.displayName = "TrackedAnchor";

export default TrackedButton;