import { expect, test } from "@playwright/test";

test.describe("Collection page", () => {
	test.beforeEach(async ({ page }) => {
		await page.goto("/collection");
		await page.waitForLoadState("networkidle");
	});

	test.describe("Gear tab", () => {
		test("shows seeded items", async ({ page }) => {
			await expect(page.getByText("Zpacks Duplex")).toBeVisible();
			await expect(page.getByText("BRS-3000T Stove")).toBeVisible();
		});

		test("search filters items by name", async ({ page }) => {
			const searchInput = page.getByPlaceholder("Search items...");
			await searchInput.fill("Zpacks");
			await expect(page.getByText("Zpacks Duplex")).toBeVisible();
			// Other items should not be visible
			await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
		});

		test("clearing search restores all items", async ({ page }) => {
			const searchInput = page.getByPlaceholder("Search items...");
			await searchInput.fill("Zpacks");
			await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
			// Clear the search
			await searchInput.clear();
			await expect(page.getByText("BRS-3000T Stove")).toBeVisible();
		});

		test("category filter dropdown opens and lists categories", async ({
			page,
		}) => {
			const filterButton = page.getByRole("button", {
				name: /all categories/i,
			});
			await filterButton.click();

			// Dropdown list (ul) contains the category options
			const dropdown = page.locator("ul");
			await expect(
				dropdown.getByRole("button", { name: "Shelter" }),
			).toBeVisible();
			await expect(
				dropdown.getByRole("button", { name: "Cook Kit" }),
			).toBeVisible();
		});

		test("category filter shows only items in selected category", async ({
			page,
		}) => {
			// Open filter dropdown
			const filterButton = page.getByRole("button", {
				name: /all categories/i,
			});
			await filterButton.click();

			// Select "Shelter" from the dropdown list
			const dropdown = page.locator("ul");
			await dropdown.getByRole("button", { name: "Shelter" }).click();

			await expect(page.getByText("Zpacks Duplex")).toBeVisible();
			// Items from other categories should not be visible
			await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
		});
	});

	test.describe("Tab switching", () => {
		test("navigates to planning tab", async ({ page }) => {
			await page.goto("/collection?tab=planning");
			await page.waitForLoadState("networkidle");
			// Planning tab shows the active thread
			await expect(page.getByText("New Backpack")).toBeVisible();
		});

		test("navigates to setups tab", async ({ page }) => {
			await page.goto("/collection?tab=setups");
			await page.waitForLoadState("networkidle");
			// Setups tab shows the seeded setup
			await expect(page.getByText("Weekend Overnighter")).toBeVisible();
		});

		test("gear tab is default and shows items", async ({ page }) => {
			// Default tab (no ?tab param) shows gear
			await expect(page.getByText("Zpacks Duplex")).toBeVisible();
		});
	});
});