import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import BlindboxDrawnHistory, { type DrawnIdea } from "./BlindboxDrawnHistory";

const mockItems: DrawnIdea[] = [
  {
    id: "drawn-1",
    content: "去公园野餐",
    createdAt: "2025-03-01T10:00:00Z",
    user: { id: "u1", username: "小明", avatar: "🐱" },
    drawnBy: { id: "u2", username: "小红", avatar: "🐶" },
  },
  {
    id: "drawn-2",
    content: "看展览",
    createdAt: "2025-03-02T10:00:00Z",
    user: { id: "u2", username: "小红", avatar: "🐶" },
    drawnBy: null,
  },
];

describe("BlindboxDrawnHistory", () => {
  it("renders nothing when items are empty", () => {
    const { container } = render(<BlindboxDrawnHistory items={[]} />);
    expect(container.innerHTML).toBe("");
  });

  it("renders history title and items", () => {
    render(<BlindboxDrawnHistory items={mockItems} />);
    expect(screen.getByText("履约记录")).toBeInTheDocument();
    expect(screen.getByText("去公园野餐")).toBeInTheDocument();
    expect(screen.getByText("看展览")).toBeInTheDocument();
  });

  it("shows user who contributed and who drew", () => {
    render(<BlindboxDrawnHistory items={mockItems} />);
    expect(screen.getByText(/小明 投入/)).toBeInTheDocument();
    expect(screen.getByText(/小红 抽中/)).toBeInTheDocument();
  });

  it("renders formatted date", () => {
    render(<BlindboxDrawnHistory items={mockItems} />);
    const dateElements = screen.getAllByText(/月/);
    expect(dateElements.length).toBeGreaterThan(0);
  });
});
