import React from "react";
import { TestimonialCard } from "./index";

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

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

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

jest.mock("next/image", () => {
  const MockImage = ({ src, alt, className }: any) => (
    <img data-testid="avatar-image" src={src} alt={alt} className={className} />
  );
  return MockImage;
});

jest.mock(
  "clsx",
  () =>
    (...args: any[]) =>
      args.flat().filter(Boolean).join(" ")
);

describe("TestimonialCard", () => {
  const defaultProps = {
    title: "Great Service",
    quote: "This is an amazing product!",
    rating: 4,
    author: "John Doe",
    role: "CEO",
  };

  describe("Rendering", () => {
    it("renders the figure element", () => {
      const { container } = render(<TestimonialCard {...defaultProps} />);
      expect(container.querySelector("figure")).toBeInTheDocument();
    });

    it("renders title", () => {
      render(<TestimonialCard {...defaultProps} />);
      expect(screen.getByText("Great Service")).toBeInTheDocument();
    });

    it("renders quote", () => {
      render(<TestimonialCard {...defaultProps} />);
      expect(
        screen.getByText("This is an amazing product!")
      ).toBeInTheDocument();
    });

    it("renders author name", () => {
      render(<TestimonialCard {...defaultProps} />);
      expect(screen.getByText("John Doe")).toBeInTheDocument();
    });

    it("renders author role", () => {
      render(<TestimonialCard {...defaultProps} />);
      expect(screen.getByText("CEO")).toBeInTheDocument();
    });
  });

  describe("Rating", () => {
    it("renders 5 star icons", () => {
      render(<TestimonialCard {...defaultProps} rating={4} />);
      const icons = screen.getAllByTestId("material-icon");
      expect(icons).toHaveLength(5);
    });

    it("applies filled class to rated stars", () => {
      render(<TestimonialCard {...defaultProps} rating={3} />);
      const icons = screen.getAllByTestId("material-icon");
      const filledIcons = icons.filter(icon =>
        icon.className.includes("text-text")
      );
      expect(filledIcons.length).toBe(3);
    });

    it("applies unfilled class to remaining stars", () => {
      render(<TestimonialCard {...defaultProps} rating={3} />);
      const icons = screen.getAllByTestId("material-icon");
      const unfilledIcons = icons.filter(icon =>
        icon.className.includes("text-gray-300")
      );
      expect(unfilledIcons.length).toBe(2);
    });

    it("does not render rating section when rating is undefined", () => {
      render(<TestimonialCard {...defaultProps} rating={undefined} />);
      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
    });

    it("renders rating aria-label", () => {
      const { container } = render(
        <TestimonialCard {...defaultProps} rating={4} />
      );
      const ratingDiv = container.querySelector("[aria-label]");
      expect(ratingDiv).toHaveAttribute("aria-label", "Rating: 4 out of 5");
    });
  });

  describe("Avatar", () => {
    it("renders avatar image when avatarUrl is provided", () => {
      render(<TestimonialCard {...defaultProps} avatarUrl="/avatar.jpg" />);
      expect(screen.getByTestId("avatar-image")).toBeInTheDocument();
      expect(screen.getByTestId("avatar-image")).toHaveAttribute(
        "src",
        "/avatar.jpg"
      );
    });

    it("renders initials when avatarUrl is not provided", () => {
      render(<TestimonialCard {...defaultProps} />);
      expect(screen.getByText("J")).toBeInTheDocument();
    });
  });

  describe("Active state", () => {
    it("applies active styles when isActive is true", () => {
      const { container } = render(
        <TestimonialCard {...defaultProps} isActive={true} />
      );
      const figure = container.querySelector("figure");
      expect(figure?.className).toContain("bg-bg-surface-secondary");
      expect(figure?.className).toContain("shadow-drop");
    });

    it("applies inactive styles when isActive is false", () => {
      const { container } = render(
        <TestimonialCard {...defaultProps} isActive={false} />
      );
      const figure = container.querySelector("figure");
      expect(figure?.className).toContain("opacity-40");
    });

    it("defaults to inactive", () => {
      const { container } = render(<TestimonialCard {...defaultProps} />);
      const figure = container.querySelector("figure");
      expect(figure?.className).toContain("opacity-40");
    });
  });

  describe("Custom className", () => {
    it("applies custom className", () => {
      const { container } = render(
        <TestimonialCard {...defaultProps} className="custom-card" />
      );
      const figure = container.querySelector("figure");
      expect(figure?.className).toContain("custom-card");
    });
  });

  describe("Author section", () => {
    it("does not render author section when author is not provided", () => {
      const { container } = render(
        <TestimonialCard
          title="Test"
          quote="Quote"
          rating={5}
          author={undefined}
        />
      );
      expect(container.querySelector("figcaption")).not.toBeInTheDocument();
    });

    it("renders figcaption when author is provided", () => {
      const { container } = render(<TestimonialCard {...defaultProps} />);
      expect(container.querySelector("figcaption")).toBeInTheDocument();
    });
  });
});