import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { QuestionCard } from "./question-card";
import type { QuestionListItem } from "@/types";

const mockQuestion: QuestionListItem = {
  id: "123",
  title: "Two Sum",
  slug: "two-sum",
  difficulty: "easy",
  leetcode_id: 1,
  leetcode_url: "https://leetcode.com/problems/two-sum",
  categories: [
    { id: "cat1", name: "Arrays", slug: "arrays" },
    { id: "cat2", name: "Hash Table", slug: "hash-table" },
  ],
  patterns: [{ id: "pat1", name: "Hash Map", slug: "hash-map" }],
  created_at: "2025-01-01T00:00:00Z",
};

describe("QuestionCard", () => {
  it("renders question title", () => {
    render(<QuestionCard question={mockQuestion} />);
    expect(screen.getByText("Two Sum")).toBeInTheDocument();
  });

  it("renders difficulty badge with correct label", () => {
    render(<QuestionCard question={mockQuestion} />);
    const badge = screen.getByText("Easy");
    expect(badge).toBeInTheDocument();
    expect(badge).toHaveAttribute("aria-label", "Easy difficulty");
  });

  it("links to question detail page", () => {
    render(<QuestionCard question={mockQuestion} />);
    const link = screen.getByRole("link");
    expect(link).toHaveAttribute("href", "/questions/two-sum");
  });

  it("renders all categories", () => {
    render(<QuestionCard question={mockQuestion} />);
    expect(screen.getByText("Arrays")).toBeInTheDocument();
    expect(screen.getByText("Hash Table")).toBeInTheDocument();
  });

  it("renders patterns", () => {
    render(<QuestionCard question={mockQuestion} />);
    expect(screen.getByText("Hash Map")).toBeInTheDocument();
  });

  it("renders LeetCode ID when present", () => {
    render(<QuestionCard question={mockQuestion} />);
    expect(screen.getByText("LeetCode #1")).toBeInTheDocument();
  });

  it("does not render LeetCode ID when absent", () => {
    const questionWithoutLeetcode = {
      ...mockQuestion,
      leetcode_id: null,
    };
    render(<QuestionCard question={questionWithoutLeetcode} />);
    expect(screen.queryByText(/LeetCode/)).not.toBeInTheDocument();
  });

  it("renders medium difficulty with correct styling", () => {
    const mediumQuestion = { ...mockQuestion, difficulty: "medium" as const };
    render(<QuestionCard question={mediumQuestion} />);
    const badge = screen.getByText("Medium");
    expect(badge).toHaveAttribute("aria-label", "Medium difficulty");
  });

  it("renders hard difficulty with correct styling", () => {
    const hardQuestion = { ...mockQuestion, difficulty: "hard" as const };
    render(<QuestionCard question={hardQuestion} />);
    const badge = screen.getByText("Hard");
    expect(badge).toHaveAttribute("aria-label", "Hard difficulty");
  });

  it("handles empty patterns array", () => {
    const questionNoPatterns = { ...mockQuestion, patterns: [] };
    render(<QuestionCard question={questionNoPatterns} />);
    expect(screen.getByText("Two Sum")).toBeInTheDocument();
    expect(screen.queryByText("Hash Map")).not.toBeInTheDocument();
  });

  it("handles empty categories array", () => {
    const questionNoCategories = { ...mockQuestion, categories: [] };
    render(<QuestionCard question={questionNoCategories} />);
    expect(screen.getByText("Two Sum")).toBeInTheDocument();
    expect(screen.queryByText("Arrays")).not.toBeInTheDocument();
  });
});
