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

/**
 * EN: Retail POS workflow E2E tests.
 * VI: E2E tests cho luong POS Ban le.
 *
 * Routes:
 *   /pos/{ShopId}/retail                — RetailDesktop
 *   /pos/{ShopId}/retail/product-search — Barcode scan / product search
 *   /pos/{ShopId}/retail/stock-check    — Stock level check
 *   /pos/{ShopId}/retail/return-exchange — Return/exchange dialog
 */
test.describe('POS — Retail', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

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

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

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

  // -----------------------------------------------------------------------
  // 2. Product search / barcode scan page
  // -----------------------------------------------------------------------
  test('should load product search page with search input', async ({ page }) => {
    await page.goto(ROUTES.posRetailProductSearch());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/retail/product-search`));

    // Product search should have a text input for barcode/name search
    const searchInput = page.locator(
      'input[type="text"], input[type="search"], .mud-input input, [class*="search"]',
    ).first();
    await expect(searchInput).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 3. Retail desktop shows cart area
  // -----------------------------------------------------------------------
  test('should display cart area on retail desktop', async ({ page }) => {
    await page.goto(ROUTES.posRetail());
    await waitForBlazor(page);

    // Retail POS typically has a product grid + cart panel
    const cartArea = page.locator(
      '.mud-paper, .mud-card, [class*="cart"], [class*="order"], [class*="checkout"]',
    ).first();
    await expect(cartArea).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Stock check page
  // -----------------------------------------------------------------------
  test('should load stock check page', async ({ page }) => {
    await page.goto(ROUTES.posRetailStockCheck());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/retail/stock-check`));

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

  // -----------------------------------------------------------------------
  // 5. Return/exchange dialog page
  // -----------------------------------------------------------------------
  test('should load return and exchange page', async ({ page }) => {
    await page.goto(ROUTES.posRetailReturnExchange());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/retail/return-exchange`));

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