import "@testing-library/jest-dom";

import { AlertCard } from "./index";

import { render, screen } from "@testing-library/react";

// Mock dependencies
jest.mock("@shared/components/material-icon", () => ({
  MaterialIcon: ({ name, size, className }: any) => (
    <span
      data-testid="material-icon"
      data-name={name}
      data-size={size}
      className={className}
    >
      {name}
    </span>
  ),
}));

jest.mock("@shared/components/text", () => ({
  Text: ({ children, className }: any) => (
    <span data-testid="alert-text" className={className}>
      {children}
    </span>
  ),
}));

jest.mock("@shared/utils", () => ({
  cx: (...args: any[]) => args.filter(Boolean).join(" "),
}));

describe("AlertCard", () => {
  it("has displayName set to AlertCard", () => {
    expect(AlertCard.displayName).toBe("AlertCard");
  });

  describe("rendering", () => {
    it("renders null when errorMessage is undefined", () => {
      const { container } = render(<AlertCard />);
      expect(container.firstChild).toBeNull();
    });

    it("renders null when errorMessage is empty string", () => {
      const { container } = render(<AlertCard errorMessage="" />);
      expect(container.firstChild).toBeNull();
    });

    it("renders null when errorMessage is null", () => {
      const { container } = render(<AlertCard errorMessage={null as any} />);
      expect(container.firstChild).toBeNull();
    });

    it("renders when errorMessage is provided", () => {
      render(<AlertCard errorMessage="Something went wrong" />);
      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
    });

    it("renders the error message text", () => {
      render(<AlertCard errorMessage="Connection failed" />);
      expect(screen.getByText("Connection failed")).toBeInTheDocument();
    });

    it("renders a ReactNode as errorMessage", () => {
      render(
        <AlertCard
          errorMessage={<strong data-testid="custom-node">Error!</strong>}
        />
      );
      expect(screen.getByTestId("custom-node")).toBeInTheDocument();
    });
  });

  describe("icon props", () => {
    it("renders default icon name 'dangerous'", () => {
      render(<AlertCard errorMessage="Error" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveAttribute("data-name", "dangerous");
    });

    it("renders custom icon name", () => {
      render(<AlertCard errorMessage="Error" iconName="error" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveAttribute("data-name", "error");
    });

    it("uses default icon size of 52", () => {
      render(<AlertCard errorMessage="Error" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveAttribute("data-size", "52");
    });

    it("uses custom icon size", () => {
      render(<AlertCard errorMessage="Error" iconSize={24} />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveAttribute("data-size", "24");
    });

    it("applies iconClassName to icon", () => {
      render(<AlertCard errorMessage="Error" iconClassName="custom-icon" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveClass("custom-icon");
    });

    it("applies text-icon-critical class to icon by default", () => {
      render(<AlertCard errorMessage="Error" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon).toHaveClass("text-icon-critical");
    });
  });

  describe("className props", () => {
    it("applies custom className to container", () => {
      render(<AlertCard errorMessage="Error" className="custom-class" />);
      const card = screen.getByTestId("alert-card");
      expect(card).toHaveClass("custom-class");
    });

    it("applies textVariant to text element", () => {
      render(<AlertCard errorMessage="Error" textVariant="body1" />);
      const text = screen.getByTestId("alert-text");
      expect(text).toHaveClass("body1");
    });

    it("applies default text classes", () => {
      render(<AlertCard errorMessage="Error" />);
      const text = screen.getByTestId("alert-text");
      expect(text.className).toContain("body2");
      expect(text.className).toContain("text-text");
    });
  });

  describe("structure", () => {
    it("renders data-testid attribute on container", () => {
      render(<AlertCard errorMessage="Error" />);
      expect(screen.getByTestId("alert-card")).toBeInTheDocument();
    });

    it("renders icon within a wrapper div", () => {
      render(<AlertCard errorMessage="Error" />);
      const icon = screen.getByTestId("material-icon");
      expect(icon.parentElement?.tagName).toBe("DIV");
    });

    it("applies base styling classes to container", () => {
      render(<AlertCard errorMessage="Error" />);
      const card = screen.getByTestId("alert-card");
      expect(card).toHaveClass("flex");
      expect(card).toHaveClass("flex-col");
    });
  });
});