import { render, screen, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { WorkItemDetailPanel } from "./WorkItemDetailPanel";

vi.mock("../api/client", () => ({
	api: {
		getWorkItemContent: vi.fn().mockResolvedValue({
			content: "# Big Title\n\nSome content here.",
			stage: "current",
			name: "Big Title Story",
		}),
	},
}));

describe("WorkItemDetailPanel", () => {
	it("renders the story name in the header", async () => {
		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
		await waitFor(() => {
			expect(screen.getByTestId("detail-panel-title")).toHaveTextContent(
				"Big Title Story",
			);
		});
	});

	it("shows loading state initially", () => {
		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
		expect(screen.getByTestId("detail-panel-loading")).toBeInTheDocument();
	});

	it("calls onClose when close button is clicked", async () => {
		const onClose = vi.fn();
		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={onClose} />);
		const closeButton = screen.getByTestId("detail-panel-close");
		closeButton.click();
		expect(onClose).toHaveBeenCalledTimes(1);
	});

	it("renders markdown headings with constrained inline font size", async () => {
		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
		await waitFor(() => {
			const content = screen.getByTestId("detail-panel-content");
			const h1 = content.querySelector("h1");
			expect(h1).not.toBeNull();
			// Headings must have a constrained fontSize inline style
			// Browser-default 2em is too large for the work item detail panel
			expect(h1?.style.fontSize).toBeTruthy();
		});
	});
});