// @vitest-environment jsdom
import "@testing-library/jest-dom/vitest";

import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, it, vi } from "vitest";
import { ConditionPicker } from "../condition-picker";

afterEach(cleanup);

function renderPicker(
	overrides: Partial<{
		activeConditions: readonly ConditionId[];
		onToggle: (conditionId: ConditionId) => void;
		onClose: () => void;
	}> = {},
) {
	const onToggle = overrides.onToggle ?? vi.fn();
	const onClose = overrides.onClose ?? vi.fn();
	const result = render(
		<ConditionPicker
			activeConditions={overrides.activeConditions ?? []}
			onToggle={onToggle}
			onClose={onClose}
		/>,
	);
	return { ...result, onToggle, onClose };
}

describe("ConditionPicker", () => {
	it("renders all condition definitions from domain", () => {
		renderPicker();
		for (const def of CONDITION_DEFINITIONS) {
			expect(screen.getByText(def.label)).toBeInTheDocument();
		}
	});

	it("active conditions are visually distinguished", () => {
		renderPicker({ activeConditions: ["blinded"] });
		const blindedButton = screen.getByText("Blinded").closest("button");
		expect(blindedButton?.className).toContain("bg-card/50");
	});

	it("clicking a condition calls onToggle with that condition's ID", async () => {
		const user = userEvent.setup();
		const { onToggle } = renderPicker();
		await user.click(screen.getByText("Poisoned"));
		expect(onToggle).toHaveBeenCalledWith("poisoned");
	});

	it("non-active conditions render with muted styling", () => {
		renderPicker({ activeConditions: [] });
		const label = screen.getByText("Charmed");
		expect(label.className).toContain("text-muted-foreground");
	});

	it("active condition labels use foreground color", () => {
		renderPicker({ activeConditions: ["charmed"] });
		const label = screen.getByText("Charmed");
		expect(label.className).toContain("text-foreground");
	});
});