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

test.describe("Navigation", () => {
  test("home page renders page-title", async ({ page }) => {
    await page.goto("/");
    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
    await expect(page.locator('[data-testid="sidebar"]')).toBeVisible();
    await expect(page.locator('[data-testid="header"]')).toBeVisible();
  });

  test("sidebar nav links exist for all routes", async ({ page }) => {
    await page.goto("/");
    // Check a few known nav links
    await expect(page.locator('[data-testid="nav-crypto"]')).toBeVisible();
    await expect(page.locator('[data-testid="nav-logger"]')).toBeVisible();
    await expect(page.locator('[data-testid="nav-datetime"]')).toBeVisible();
  });

  const libraryRoutes = [
    { path: "/crypto", title: "@suaveplan/crypto" },
    { path: "/logger", title: "@suaveplan/logger" },
    { path: "/datetime", title: "@suaveplan/datetime" },
    { path: "/i18n", title: "@suaveplan/i18n" },
    { path: "/feature-flags", title: "@suaveplan/feature-flags" },
  ];

  for (const route of libraryRoutes) {
    test(`navigating to ${route.path} shows page-title`, async ({ page }) => {
      await page.goto(route.path);
      await expect(page.locator('[data-testid="page-title"]')).toContainText(
        route.title,
      );
    });
  }

  test("all pages have demo-card and console-panel", async ({ page }) => {
    const routes = ["/", "/crypto", "/logger", "/datetime", "/i18n", "/feature-flags"];
    for (const route of routes) {
      await page.goto(route);
      await expect(page.locator('[data-testid="demo-card"]')).toBeAttached();
      await expect(page.locator('[data-testid="console-panel"]')).toBeAttached();
    }
  });

  test("home page shows library cards", async ({ page }) => {
    await page.goto("/");
    const cards = page.locator('[data-testid="library-card"]');
    await expect(cards.first()).toBeVisible();
    const count = await cards.count();
    expect(count).toBeGreaterThan(5);
  });

  test("clicking a library card navigates to the page", async ({ page }) => {
    await page.goto("/");
    await page.locator('[data-testid="library-card"]').first().click();
    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
  });

  test("404 page renders page-title", async ({ page }) => {
    await page.goto("/does-not-exist");
    await expect(page.locator('[data-testid="page-title"]')).toContainText("404");
  });
});