import { render, screen } from "@testing-library/react";
import { DashboardMetricPill } from "./DashboardMetricPill";
import { describe, it, expect } from "vitest";
import React from "react";
import { TooltipProvider } from "@/components/ui/tooltip";
import { CircleDollarSign } from "lucide-react";

describe("DashboardMetricPill", () => {
  const renderPill = (props: any) => {
    return render(
      <TooltipProvider>
        <DashboardMetricPill {...props} />
      </TooltipProvider>
    );
  };

  it("renders with basic props", () => {
    renderPill({
      label: "Test Label",
      value: "100",
      tooltip: "Test Tooltip",
    });

    expect(screen.getByText("Test Label:")).toBeDefined();
    expect(screen.getByText("100")).toBeDefined();
  });

  it("renders value without label", () => {
    renderPill({
      value: "Only Value",
      tooltip: "Test Tooltip",
    });

    expect(screen.queryByText(/:/)).toBeNull();
    expect(screen.getByText("Only Value")).toBeDefined();
  });

  it("renders with icon", () => {
    renderPill({
      value: "Icon Test",
      tooltip: "Test Tooltip",
      icon: <CircleDollarSign data-testid="test-icon" />,
    });

    expect(screen.getByTestId("test-icon")).toBeDefined();
  });

  it("renders online status correctly", () => {
    renderPill({
      value: "Online",
      tooltip: "System Online",
      isOnline: true,
    });

    // Check for pulsing dot container
    expect(screen.getByRole("status").querySelector(".animate-ping")).toBeDefined();
    expect(screen.getByText("Online")).toBeDefined();
  });

  it("applies variant classes correctly", () => {
    const { rerender } = renderPill({
      value: "Variant Test",
      tooltip: "Test Tooltip",
      variant: "error",
    });

    let pill = screen.getByRole("status");
    expect(pill.className).toContain("text-red-600");

    rerender(
      <TooltipProvider>
        <DashboardMetricPill
          value="Variant Test"
          tooltip="Test Tooltip"
          variant="warning"
        />
      </TooltipProvider>
    );
    pill = screen.getByRole("status");
    // Warning variant uses default text-muted-foreground but yellow-500 for icon (not tested here easily)
    expect(pill.className).toContain("hover:border-yellow-500/50");
  });
});