/**
 * User stories covered: Features 16 & 19 — Desktop Required screen
 *   - Non-mobile-role users (AUDITOR, TECHNICAL) at 375×812 see DesktopRequired overlay
 *   - The overlay covers the page (fixed inset-0 z-40)
 *   - The overlay contains a sign-out button
 *   - Clicking sign-out redirects to /login
 *
 * Mobile roles (MANAGER, SUPERUSER, ACCOUNTS) do NOT see the overlay — they get MobileBottomNav.
 * Non-mobile roles: TECHNICAL, MANNING, AUDITOR, ADMIN.
 *
 * DesktopRequired uses `class="md:hidden fixed inset-0"` — it is always in the DOM but
 * only visible below the md breakpoint (768px). At 375px viewport it IS visible.
 *
 * 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 16 — Desktop Required overlay for non-mobile roles", () => {
  test("US-16a: AUDITOR at mobile viewport sees Desktop Required overlay", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.AUDITOR);

    // DesktopRequired overlay contains the heading "Desktop Required"
    await expect(page.getByText("Desktop Required")).toBeVisible();
    console.log("✓ Desktop Required overlay visible for AUDITOR at mobile viewport");
  });

  test("US-16c: TECHNICAL user at mobile viewport also sees Desktop Required overlay", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.TECH);

    await expect(page.getByText("Desktop Required")).toBeVisible();
    console.log("✓ Desktop Required overlay visible for TECHNICAL at mobile viewport");
  });

  test("US-16b: Desktop Required overlay contains a sign-out button", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.AUDITOR);

    await expect(page.getByText("Desktop Required")).toBeVisible();
    // DesktopRequired renders a button with text "Sign out" (with LogOut icon)
    const signOutBtn = page.getByRole("button", { name: /sign out/i });
    await expect(signOutBtn).toBeVisible();
    console.log("✓ Sign out button visible in Desktop Required overlay");
  });

  test("US-16b: overlay is rendered with fixed positioning that covers the page", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.AUDITOR);

    // The overlay div has classes "md:hidden fixed inset-0 z-40"
    const overlay = page
      .locator("div.fixed.inset-0")
      .or(page.locator("div[class*='fixed'][class*='inset-0']"));
    await expect(overlay.first()).toBeVisible();
    console.log("✓ Fixed inset overlay element is visible");
  });

  test("US-16a: MANAGER at mobile viewport does NOT see Desktop Required overlay", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.MANAGER);

    // Manager has mobile experience — should see MobileBottomNav, not DesktopRequired
    await expect(page.getByText("Desktop Required")).not.toBeVisible();
    console.log(
      "✓ Desktop Required overlay correctly absent for MANAGER at mobile viewport"
    );
  });

  test("US-16a: ACCOUNTS at mobile viewport does NOT see Desktop Required overlay", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.ACCOUNTS);

    await expect(page.getByText("Desktop Required")).not.toBeVisible();
    console.log(
      "✓ Desktop Required overlay correctly absent for ACCOUNTS at mobile viewport"
    );
  });
});

test.describe("Feature 19 — Mobile sign-out from Desktop Required screen", () => {
  test("US-19a: AUDITOR at mobile sees Sign out button in Desktop Required overlay", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.AUDITOR);

    await expect(page.getByText("Desktop Required")).toBeVisible();
    const signOutBtn = page.getByRole("button", { name: /sign out/i });
    await expect(signOutBtn).toBeVisible();
    console.log("✓ Sign out button present in Desktop Required overlay");
  });

  test("US-19b: clicking Sign out from Desktop Required redirects to /login", async ({
    page,
  }) => {
    await page.setViewportSize(MOBILE_VIEWPORT);
    await login(page, USERS.AUDITOR);

    await expect(page.getByText("Desktop Required")).toBeVisible();
    await page.getByRole("button", { name: /sign out/i }).click();

    await expect(page).toHaveURL(/\/login/, { timeout: 10_000 });
    console.log("✓ Sign out from Desktop Required overlay redirects to /login");
  });
});