import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import BlindboxMyIdeas, { type MyIdea, CategoryBadge, DurationLabel } from "./BlindboxMyIdeas";

const mockIdeas: MyIdea[] = [
  {
    id: "idea-1",
    content: "去爬山",
    createdAt: new Date().toISOString(),
    category: "outdoor",
    estimatedMinutes: 120,
  },
  {
    id: "idea-2",
    content: "看电影",
    createdAt: new Date().toISOString(),
    category: "entertainment",
    estimatedMinutes: 150,
  },
];

const mockOnEdit = vi.fn().mockResolvedValue(undefined);
const mockOnDelete = vi.fn().mockResolvedValue(undefined);

describe("BlindboxMyIdeas", () => {
  it("renders idea list with count", () => {
    render(
      <BlindboxMyIdeas ideas={mockIdeas} onEdit={mockOnEdit} onDelete={mockOnDelete} />,
    );
    expect(screen.getByText(/我投入的想法（2）/)).toBeInTheDocument();
    expect(screen.getByText("去爬山")).toBeInTheDocument();
    expect(screen.getByText("看电影")).toBeInTheDocument();
  });

  it("shows duration labels", () => {
    render(
      <BlindboxMyIdeas ideas={mockIdeas} onEdit={mockOnEdit} onDelete={mockOnDelete} />,
    );
    expect(screen.getByText("~2h")).toBeInTheDocument();
    expect(screen.getByText("~2.5h")).toBeInTheDocument();
  });

  it("renders empty list", () => {
    render(
      <BlindboxMyIdeas ideas={[]} onEdit={mockOnEdit} onDelete={mockOnDelete} />,
    );
    expect(screen.getByText(/我投入的想法（0）/)).toBeInTheDocument();
  });

  it("enters edit mode on pencil button click", async () => {
    render(
      <BlindboxMyIdeas ideas={[mockIdeas[0]]} onEdit={mockOnEdit} onDelete={mockOnDelete} />,
    );
    const editButtons = screen.getAllByRole("button");
    const pencilBtn = editButtons.find((b) => b.querySelector("svg"));
    fireEvent.click(pencilBtn!);
    await waitFor(() => {
      expect(screen.getByRole("textbox")).toBeInTheDocument();
    });
  });
});

describe("CategoryBadge", () => {
  it("renders icon for known category", () => {
    const { container } = render(<CategoryBadge category="dining" />);
    expect(container.querySelector("svg")).toBeInTheDocument();
  });

  it("renders fallback for unknown category", () => {
    const { container } = render(<CategoryBadge category="unknown" />);
    expect(container.textContent).toBe("💡");
  });

  it("renders fallback for null category", () => {
    const { container } = render(<CategoryBadge category={null} />);
    expect(container.textContent).toBe("💡");
  });
});

describe("DurationLabel", () => {
  it("renders minutes", () => {
    render(<DurationLabel minutes={45} />);
    expect(screen.getByText("~45min")).toBeInTheDocument();
  });

  it("renders hours", () => {
    render(<DurationLabel minutes={60} />);
    expect(screen.getByText("~1h")).toBeInTheDocument();
  });

  it("renders nothing for null", () => {
    const { container } = render(<DurationLabel minutes={null} />);
    expect(container.innerHTML).toBe("");
  });
});
