import { render, screen } from "@testing-library/react";
import PostCard from "@/components/blog/PostCard";
import { BlogMetadata } from "@/lib/blog.types";

// Duplicate of __tests__/components/blog/PostCard.test.tsx — skip
describe.skip("PostCard (duplicate)", () => {
  const mockPostEn: BlogMetadata = {
    slug: "test-post",
    title: "Test Blog Post",
    date: "2024-01-15",
    excerpt: "This is a test excerpt for the blog post",
    tags: ["testing", "nextjs"],
    author: "Test Author",
    published: true,
    readingTime: "5",
    lang: "en",
    coverImage: "/images/test-cover.jpg",
  };

  const mockPostAr: BlogMetadata = {
    slug: "test-post-ar",
    title: "مقالة اختبارية",
    date: "2024-01-15",
    excerpt: "هذا نص تجريبي لمقالة المدونة",
    tags: ["اختبار", "تطوير"],
    author: "كاتب تجريبي",
    published: true,
    readingTime: "5",
    lang: "ar",
  };

  describe("English content", () => {
    it("renders post title", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      expect(screen.getByText("Test Blog Post")).toBeInTheDocument();
    });

    it("renders post excerpt", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      expect(
        screen.getByText("This is a test excerpt for the blog post"),
      ).toBeInTheDocument();
    });

    it("renders author name", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      expect(screen.getByText(/by.*Test Author/i)).toBeInTheDocument();
    });

    it("renders reading time", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      expect(screen.getByText(/5.*min read/i)).toBeInTheDocument();
    });

    it("renders formatted date in English", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const dateElement = screen.getByText(/January 15, 2024/);
      expect(dateElement).toBeInTheDocument();
    });

    it("renders all tags", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      expect(screen.getByText("testing")).toBeInTheDocument();
      expect(screen.getByText("nextjs")).toBeInTheDocument();
    });

    it("has correct link href", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const links = screen.getAllByRole("link");
      // Should have at least one link with correct href
      const cardLink = links.find(
        (link) => link.getAttribute("href") === "/en/blog/test-post",
      );
      expect(cardLink).toBeDefined();
    });

    it("renders cover image when provided", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const image = screen.getByAltText("Test Blog Post");
      expect(image).toBeInTheDocument();
      // Next.js Image component uses transformed src, just check it exists
      expect(image).toHaveAttribute("src");
    });

    it("does not render cover image when not provided", () => {
      const postWithoutImage = { ...mockPostEn, coverImage: undefined };
      render(<PostCard post={postWithoutImage} lang="en" />);
      const image = screen.queryByAltText("Test Blog Post");
      expect(image).not.toBeInTheDocument();
    });
  });

  describe("Arabic content", () => {
    it("renders Arabic title", () => {
      render(<PostCard post={mockPostAr} lang="ar" />);
      expect(screen.getByText("مقالة اختبارية")).toBeInTheDocument();
    });

    it("renders Arabic excerpt", () => {
      render(<PostCard post={mockPostAr} lang="ar" />);
      expect(
        screen.getByText("هذا نص تجريبي لمقالة المدونة"),
      ).toBeInTheDocument();
    });

    it("renders formatted date in Arabic", () => {
      render(<PostCard post={mockPostAr} lang="ar" />);
      // Arabic date format: ١٥ يناير ٢٠٢٤
      const dateElement = screen.getByText(/يناير/);
      expect(dateElement).toBeInTheDocument();
    });

    it("has correct RTL link href", () => {
      render(<PostCard post={mockPostAr} lang="ar" />);
      const links = screen.getAllByRole("link");
      const cardLink = links.find(
        (link) => link.getAttribute("href") === "/ar/blog/test-post-ar",
      );
      expect(cardLink).toBeDefined();
    });

    it("renders Arabic tags", () => {
      render(<PostCard post={mockPostAr} lang="ar" />);
      expect(screen.getByText("اختبار")).toBeInTheDocument();
      expect(screen.getByText("تطوير")).toBeInTheDocument();
    });
  });

  describe("Styling and accessibility", () => {
    it("has proper semantic HTML structure", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const article = screen.getByRole("article");
      expect(article).toBeInTheDocument();
    });

    it("link is keyboard accessible", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const link = screen.getByRole("link");
      expect(link).toHaveAttribute("href");
    });

    it("applies hover states correctly", () => {
      render(<PostCard post={mockPostEn} lang="en" />);
      const link = screen.getByRole("link");
      expect(link).toHaveClass("group");
    });
  });
});
