import React from "react";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const pillVariants = cva(
  "flex items-center gap-2 px-3 py-1 rounded-full border shadow-sm transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-xs font-medium active:scale-[0.98]",
  {
    variants: {
      variant: {
        default: "border-border bg-background/50 text-muted-foreground group hover:border-primary/50 hover:shadow-md",
        info: "border-border bg-background/50 text-muted-foreground group hover:border-blue-500/50 hover:shadow-md",
        warning: "border-border bg-background/50 text-muted-foreground group hover:border-yellow-500/50 hover:shadow-md",
        error: "border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-500/20 hover:shadow-md",
        success: "border-border bg-background/50 text-muted-foreground group hover:border-emerald-500/50 hover:shadow-md",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

const iconVariants = cva("size-4 transition-colors [&_svg]:size-4", {
  variants: {
    variant: {
      default: "text-muted-foreground group-hover:text-primary",
      info: "text-muted-foreground group-hover:text-blue-500",
      warning: "text-yellow-500",
      error: "", // Inherits from parent text color
      success: "text-emerald-500",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

interface DashboardMetricPillProps extends VariantProps<typeof pillVariants> {
  label?: string;
  value: React.ReactNode;
  icon?: React.ReactNode;
  tooltip: string;
  isOnline?: boolean;
  className?: string;
}

/**
 * DashboardMetricPill is a reusable presentational primitive for displaying metrics
 * and status indicators in the dashboard header.
 *
 * It encapsulates a Tooltip, an optional icon, and a value container with standardized
 * styling for different status variants.
 */
export const DashboardMetricPill = ({
  label,
  value,
  icon,
  tooltip,
  variant,
  isOnline,
  className,
}: DashboardMetricPillProps) => {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div
          tabIndex={0}
          role="status"
          className={cn(pillVariants({ variant }), className)}
        >
          {isOnline ? (
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </span>
          ) : (
            icon && (
              <div className={iconVariants({ variant })}>
                {icon}
              </div>
            )
          )}
          <span>
            {label && <span>{label}: </span>}
            <span className={cn(variant === "error" ? "font-bold" : "font-bold text-foreground")}>
              {value}
            </span>
          </span>
        </div>
      </TooltipTrigger>
      <TooltipContent>{tooltip}</TooltipContent>
    </Tooltip>
  );
};