import { test, expect } from '@playwright/test';
import { loginAsAdmin, waitForBlazor } from '../helpers/auth.helper';
import { ROUTES, TEST_SHOP_ID } from '../helpers/test-data';

/**
 * EN: Cafe POS workflow E2E tests.
 * VI: E2E tests cho luong POS Cafe.
 *
 * Routes:
 *   /pos/{ShopId}/cafe                — CafeDesktop
 *   /pos/{ShopId}/cafe/barista-queue  — Barista queue management
 *   /pos/{ShopId}/cafe/loyalty-stamp  — Customer stamp/loyalty card
 *   /pos/{ShopId}/cafe/daily-report   — Daily sales report
 *   /pos/{ShopId}/cafe/queue-display  — Customer-facing queue display
 */
test.describe('POS — Cafe', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

  // -----------------------------------------------------------------------
  // 1. Cafe POS page loads
  // -----------------------------------------------------------------------
  test('should load cafe POS page', async ({ page }) => {
    await page.goto(ROUTES.posCafe());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/pos/${TEST_SHOP_ID}/cafe`));

    const content = page.locator(
      '.mud-main-content, .mud-layout-content, [class*="cafe"], [class*="pos"]',
    ).first();
    await expect(content).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 2. Barista queue page
  // -----------------------------------------------------------------------
  test('should display barista queue', async ({ page }) => {
    await page.goto(ROUTES.posCafeBaristaQueue());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/cafe/barista-queue`));

    // Queue should show list or cards of drink orders
    const queueContent = page.locator(
      '.mud-card, .mud-list, .mud-grid, [class*="queue"], [class*="barista"]',
    ).first();
    await expect(queueContent).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 3. Add drink to order (cafe desktop has menu + cart)
  // -----------------------------------------------------------------------
  test('should display menu categories and items on cafe desktop', async ({ page }) => {
    await page.goto(ROUTES.posCafe());
    await waitForBlazor(page);

    // Cafe desktop has menu categories (tabs or chips) and product cards
    const menuArea = page.locator(
      '.mud-tabs, .mud-chip-set, .mud-card, [class*="menu"], [class*="category"]',
    ).first();
    await expect(menuArea).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Queue display page loads (customer-facing)
  // -----------------------------------------------------------------------
  test('should load queue display page', async ({ page }) => {
    await page.goto(`/pos/${TEST_SHOP_ID}/cafe/queue-display`);
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/cafe/queue-display`));

    const display = page.locator(
      '.mud-main-content, .mud-layout-content, [class*="queue"], [class*="display"]',
    ).first();
    await expect(display).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 5. Loyalty stamp card page
  // -----------------------------------------------------------------------
  test('should display loyalty stamp card page', async ({ page }) => {
    await page.goto(ROUTES.posCafeLoyaltyStamp());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/cafe/loyalty-stamp`));

    const stampContent = page.locator(
      '.mud-main-content, .mud-layout-content, [class*="stamp"], [class*="loyalty"]',
    ).first();
    await expect(stampContent).toBeVisible({ timeout: 15_000 });
  });
});
