/**
 * User stories covered: Feature 20 — Mobile Home tab in bottom navigation
 *   - MANAGER at 375×812 sees a "Home" tab in the bottom nav bar
 *   - Tapping Home tab navigates to /dashboard
 *   - ACCOUNTS at mobile sees Home, Payments, and Profile tabs
 *
 * MobileBottomNav renders for MANAGER (MANAGER_TABS: Home, Approvals, Profile)
 * and ACCOUNTS (ACCOUNTS_TABS: Home, Payments, Profile).
 *
 * Created: 2026-05-17
 */
import { test, expect } from "@playwright/test";
import { login, USERS } from "../helpers/login";

const MOBILE_VIEWPORT = { width: 375, height: 812 };

test.describe("Feature 20 — Mobile Home tab in bottom navigation", () => {
  test("US-20a: MANAGER at mobile sees bottom nav with Home tab", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);

    // MobileBottomNav renders for MANAGER — contains a "Home" link to /dashboard
    const homeTab = page.getByRole("link", { name: /home/i }).filter({
      has: page.locator("[href='/dashboard']"),
    });
    // More lenient: just look for a link that says "Home" pointing to /dashboard
    const homeLink = page.locator("nav a[href='/dashboard']");
    await expect(homeLink).toBeVisible();
    console.log("✓ Home tab (link to /dashboard) visible in MANAGER mobile bottom nav");
  });

  test("US-20b: tapping Home tab navigates to /dashboard", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);
    // Navigate away first
    await page.goto("/approvals");

    const homeLink = page.locator("nav a[href='/dashboard']");
    await expect(homeLink).toBeVisible();
    await homeLink.click();

    await expect(page).toHaveURL(/\/dashboard/, { timeout: 10_000 });
    console.log("✓ Tapping Home tab navigates to /dashboard");
  });

  test("US-20a: MANAGER mobile nav has Approvals tab", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);

    const approvalsLink = page.locator("nav a[href='/approvals']");
    await expect(approvalsLink).toBeVisible();
    console.log("✓ Approvals tab visible in MANAGER mobile bottom nav");
  });

  test("US-20a: MANAGER mobile nav has Profile tab", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);

    const profileLink = page.locator("nav a[href='/profile']");
    await expect(profileLink).toBeVisible();
    console.log("✓ Profile tab visible in MANAGER mobile bottom nav");
  });

  test("US-20c: ACCOUNTS mobile nav has Home, Payments, and Profile tabs", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.ACCOUNTS);

    const homeLink = page.locator("nav a[href='/dashboard']");
    const paymentsLink = page.locator("nav a[href='/payments']");
    const profileLink = page.locator("nav a[href='/profile']");

    await expect(homeLink).toBeVisible();
    await expect(paymentsLink).toBeVisible();
    await expect(profileLink).toBeVisible();
    console.log("✓ ACCOUNTS mobile bottom nav shows Home, Payments, and Profile tabs");
  });

  test("US-20c: ACCOUNTS Home tab navigates to /dashboard", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.ACCOUNTS);

    await page.goto("/payments");

    const homeLink = page.locator("nav a[href='/dashboard']");
    await homeLink.click();

    await expect(page).toHaveURL(/\/dashboard/, { timeout: 10_000 });
    console.log("✓ ACCOUNTS Home tab in mobile nav navigates to /dashboard");
  });

  test("US-20a: MANAGER mobile bottom nav has 3 tabs total", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);

    // MANAGER_TABS = [Home, Approvals, Profile] → 3 tabs
    const navLinks = page.locator("nav.md\\:hidden a, nav[class*='md:hidden'] a");
    const count = await navLinks.count();
    expect(count).toBe(3);
    console.log(`✓ MANAGER mobile bottom nav has ${count} tabs`);
  });

  test("US-20c: ACCOUNTS mobile bottom nav has 3 tabs total", async ({ page }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.ACCOUNTS);

    // ACCOUNTS_TABS = [Home, Payments, Profile] → 3 tabs
    const navLinks = page.locator("nav.md\\:hidden a, nav[class*='md:hidden'] a");
    const count = await navLinks.count();
    expect(count).toBe(3);
    console.log(`✓ ACCOUNTS mobile bottom nav has ${count} tabs`);
  });
});