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

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

jest.mock("@shared/components/next-image", () => ({
  NextImage: ({ src, alt, width, height, className }: any) => (
    <img
      data-testid="next-image"
      src={src}
      alt={alt}
      width={width}
      height={height}
      className={className}
    />
  ),
}));

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

jest.mock("@shared/components/link", () => ({
  Link: ({ children, href, className, tabIndex, target, ...rest }: any) => (
    <a
      href={href}
      className={className}
      tabIndex={tabIndex}
      target={target}
      {...rest}
    >
      {children}
    </a>
  ),
}));

jest.mock("../../button", () => ({
  Button: ({ children, linkClassName, buttonLabel }: any) => (
    <button data-testid="cta-button" className={linkClassName}>
      {buttonLabel || children}
    </button>
  ),
}));

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

describe("FullImageCard", () => {
  const defaultCard = {
    title: "Card Title",
    description: "Card description",
    image: { href: "/image.jpg", title: "Card Image", width: 400, height: 280 },
  };

  describe("Rendering", () => {
    it("renders the section element", () => {
      const { container } = render(<FullImageCard card={defaultCard} />);
      expect(container.querySelector("section")).toBeInTheDocument();
    });

    it("renders title", () => {
      render(<FullImageCard card={defaultCard} />);
      expect(screen.getByText("Card Title")).toBeInTheDocument();
    });

    it("renders description", () => {
      render(<FullImageCard card={defaultCard} />);
      expect(screen.getByText("Card description")).toBeInTheDocument();
    });

    it("renders image when provided", () => {
      render(<FullImageCard card={defaultCard} />);
      const img = screen.getByTestId("next-image");
      expect(img).toHaveAttribute("src", "/image.jpg");
    });

    it("does not render image when not provided", () => {
      render(<FullImageCard card={{ title: "No Image" }} />);
      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
    });

    it("does not render title when not provided", () => {
      render(<FullImageCard card={{ description: "Desc only" }} />);
      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
    });

    it("does not render description when not provided", () => {
      render(<FullImageCard card={{ title: "Title only" }} />);
      expect(screen.queryByText("Card description")).not.toBeInTheDocument();
    });
  });

  describe("Caption", () => {
    it("renders caption when provided", () => {
      const card = { ...defaultCard, caption: "A note" };
      render(<FullImageCard card={card} />);
      expect(screen.getByText("A note")).toBeInTheDocument();
    });

    it("does not render caption when not provided", () => {
      render(<FullImageCard card={defaultCard} />);
      expect(screen.queryByText("A note")).not.toBeInTheDocument();
    });
  });

  describe("CTA", () => {
    it("renders CTA button when cta is provided", () => {
      const card = {
        ...defaultCard,
        cta: { buttonLabel: "Learn More", href: "/learn" },
      };
      render(<FullImageCard card={card} />);
      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
    });

    it("does not render CTA when not provided", () => {
      render(<FullImageCard card={defaultCard} />);
      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
    });

    it("wraps title in link when cta href is present", () => {
      const card = {
        ...defaultCard,
        cta: { buttonLabel: "Click", href: "/click" },
      };
      render(<FullImageCard card={card} />);
      const titleLink = screen.getByText("Card Title").closest("a");
      expect(titleLink).toHaveAttribute("href", "/click");
    });

    it("wraps image in link when cta href is present", () => {
      const card = {
        ...defaultCard,
        cta: { buttonLabel: "Click", href: "/click" },
      };
      render(<FullImageCard card={card} />);
      const imgLink = screen.getByTestId("next-image").closest("a");
      expect(imgLink).toHaveAttribute("href", "/click");
    });
  });

  describe("Link prop", () => {
    it("uses link href for image and title when no cta", () => {
      const card = {
        ...defaultCard,
        link: { href: "/link-target", target: "_blank" as const },
      };
      render(<FullImageCard card={card} />);
      const imgLink = screen.getByTestId("next-image").closest("a");
      expect(imgLink).toHaveAttribute("href", "/link-target");
    });
  });

  describe("Layout props", () => {
    it("applies lgWidth class", () => {
      const { container } = render(
        <FullImageCard card={defaultCard} lgWidth="lg:w-1/3" />
      );
      expect(container.querySelector("section")?.className).toContain(
        "lg:w-1/3"
      );
    });

    it("applies mdWidth class", () => {
      const { container } = render(
        <FullImageCard card={defaultCard} mdWidth="md:w-1/2" />
      );
      expect(container.querySelector("section")?.className).toContain(
        "md:w-1/2"
      );
    });

    it("applies shadow by default", () => {
      const { container } = render(<FullImageCard card={defaultCard} />);
      expect(container.querySelector("section")?.className).toContain(
        "shadow-card"
      );
    });

    it("does not apply shadow when shadow is false", () => {
      const card = { ...defaultCard, shadow: false };
      const { container } = render(<FullImageCard card={card} />);
      expect(container.querySelector("section")?.className).not.toContain(
        "shadow-card"
      );
    });

    it("applies custom className", () => {
      const card = { ...defaultCard, className: "my-class" };
      const { container } = render(<FullImageCard card={card} />);
      expect(container.querySelector("section")?.className).toContain(
        "my-class"
      );
    });

    it("applies anchorId as section id", () => {
      const card = { ...defaultCard, anchorId: "my-card" };
      const { container } = render(<FullImageCard card={card} />);
      expect(container.querySelector("section")).toHaveAttribute(
        "id",
        "my-card"
      );
    });

    it("uses default anchorId FullImageCard", () => {
      const { container } = render(<FullImageCard card={defaultCard} />);
      expect(container.querySelector("section")).toHaveAttribute(
        "id",
        "FullImageCard"
      );
    });
  });
});