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

/**
 * EN: Karaoke POS workflow E2E tests.
 * VI: E2E tests cho luong POS Karaoke.
 *
 * Routes:
 *   /pos/{ShopId}/karaoke              — KaraokeDesktop (main)
 *   /pos/{ShopId}/karaoke/room-select  — Room selection
 *   /pos/{ShopId}/karaoke/room-session/{RoomId} — Active session
 *   /pos/{ShopId}/karaoke/order-fnb/{RoomId}    — F&B ordering
 *   /pos/{ShopId}/karaoke/room-map     — Room map overview
 */
test.describe('POS — Karaoke', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

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

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

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

  // -----------------------------------------------------------------------
  // 2. Room list with status indicators
  // -----------------------------------------------------------------------
  test('should display room list with status indicators', async ({ page }) => {
    await page.goto(ROUTES.posKaraokeRoomSelect());
    await waitForBlazor(page);

    // Room select page should show rooms (cards, grid, or list)
    const roomContainer = page.locator(
      '.mud-card, .mud-grid, .mud-paper, [class*="room"]',
    ).first();
    await expect(roomContainer).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 3. Open a room session
  // -----------------------------------------------------------------------
  test('should open a room session page', async ({ page }) => {
    await page.goto(ROUTES.posKaraokeRoomSession());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/karaoke/room-session/${TEST_ROOM_ID}`));

    // Session page should render timer or session info
    const sessionContent = page.locator(
      '.mud-main-content, .mud-layout-content, [class*="session"], [class*="room"]',
    ).first();
    await expect(sessionContent).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Add F&B items to room order
  // -----------------------------------------------------------------------
  test('should load F&B ordering page for a room', async ({ page }) => {
    await page.goto(ROUTES.posKaraokeOrderFnb());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/karaoke/order-fnb/${TEST_ROOM_ID}`));

    // F&B page should display menu items or categories
    const menuContent = page.locator(
      '.mud-card, .mud-grid, .mud-list, [class*="menu"], [class*="fnb"], [class*="order"]',
    ).first();
    await expect(menuContent).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 5. Room map overview
  // -----------------------------------------------------------------------
  test('should display room map overview', async ({ page }) => {
    await page.goto(ROUTES.posKaraoke() + '/room-map');
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/karaoke/room-map`));

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