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

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

	// GearBox text is now the logo text in the top nav bar (not a standalone heading)
	test("shows GearBox heading", async ({ page }) => {
		await expect(page.getByText("GearBox")).toBeVisible();
	});

	// Post-Phase-27: landing page starts directly with discovery sections (no hero cards)
	test("shows discovery section headings", async ({ page }) => {
		// Hero card headings (Collection, Planning, Setups) are removed.
		// Landing page now shows discovery content sections instead.
		await expect(
			page.getByRole("heading", { name: "Popular Setups" }),
		).toBeVisible();
		await expect(
			page.getByRole("heading", { name: "Recently Added" }),
		).toBeVisible();
		await expect(
			page.getByRole("heading", { name: "Trending Categories" }),
		).toBeVisible();
	});

	// Post-Phase-27: Collection is now a persistent top nav link, not a dashboard card
	test("top nav contains Collection link", async ({ page }) => {
		const nav = page.locator("nav");
		const collectionLink = nav.getByRole("link", { name: /collection/i });
		await expect(collectionLink).toBeVisible();
		await collectionLink.click();
		await page.waitForLoadState("networkidle");
		await expect(page).toHaveURL(/\/collection/);
	});

	// Post-Phase-27: TopNav contains Home, Collection, and Setups links
	test("shows top nav with navigation links", async ({ page }) => {
		const nav = page.locator("nav");
		await expect(nav).toBeVisible();
		await expect(nav.getByText("Home")).toBeVisible();
		await expect(nav.getByText("Collection")).toBeVisible();
		await expect(nav.getByText("Setups")).toBeVisible();
	});

	// Post-Phase-27: mobile bottom tab bar with 4 items
	test("shows bottom tab bar on mobile viewport", async ({ page }) => {
		await page.setViewportSize({ width: 375, height: 667 });
		await page.goto("/");
		await page.waitForLoadState("networkidle");
		// Bottom tab bar should be visible with 4 items
		await expect(page.getByText("Home")).toBeVisible();
		await expect(page.getByText("Collection")).toBeVisible();
		await expect(page.getByText("Setups")).toBeVisible();
		await expect(page.getByText("Search")).toBeVisible();
	});

	// The old "collection card with item count of 6" test referenced a dashboard card
	// that no longer exists post-Phase-27. Mark as fixme until discovery feed is seeded.
	test.fixme("shows collection card with item count of 6", async ({ page }) => {
		// NOTE: The old Collection dashboard card is removed. The landing page now
		// shows discovery sections (Popular Setups, Recently Added, etc.).
		// This test needs to be replaced with a discovery-feed-aware assertion.
		const collectionCard = page
			.getByRole("link", { name: /collection/i })
			.first();
		await expect(collectionCard).toBeVisible();
		await expect(collectionCard.getByText("6")).toBeVisible();
	});

	// Planning card removed from dashboard — threads are accessed via Collection > Planning tab
	test.fixme("shows active thread count on Planning card", async ({ page }) => {
		// NOTE: The Planning dashboard card is removed in Phase 27.
		// Planning is now accessed via Collection page > Planning tab.
		const planningCard = page.getByRole("link", { name: /planning/i });
		await expect(planningCard.getByText("Active threads")).toBeVisible();
		await expect(planningCard.getByText("1")).toBeVisible();
	});

	// Setups card removed from dashboard — Setups now has its own top-level /setups route
	test.fixme("shows setup count on Setups card", async ({ page }) => {
		// NOTE: The Setups dashboard card is removed in Phase 27.
		// Setups is now a top-level route accessible via the top nav.
		await expect(page.getByRole("heading", { name: "Setups" })).toBeVisible();
		const setupsCard = page.getByRole("link", { name: /setups/i }).last();
		await expect(setupsCard.getByText("1")).toBeVisible();
	});
});