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

/**
 * EN: Spa POS workflow E2E tests.
 * VI: E2E tests cho luong POS Spa.
 *
 * Routes:
 *   /pos/{ShopId}/spa                   — SpaDesktop
 *   /pos/{ShopId}/spa/appointment-book  — Appointment booking
 *   /pos/{ShopId}/spa/staff-assign      — Therapist assignment
 *   /pos/{ShopId}/spa/spa-journey       — Service journey tracker
 */
test.describe('POS — Spa', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

  // -----------------------------------------------------------------------
  // 1. Spa POS page loads
  // -----------------------------------------------------------------------
  test('should load spa management page', async ({ page }) => {
    await page.goto(ROUTES.posSpa());
    await waitForBlazor(page);

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

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

  // -----------------------------------------------------------------------
  // 2. Staff / therapist assignment page
  // -----------------------------------------------------------------------
  test('should display therapist / staff assignment page', async ({ page }) => {
    await page.goto(ROUTES.posSpaStaffAssign());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/spa/staff-assign`));

    const staffContent = page.locator(
      '.mud-card, .mud-table, .mud-list, [class*="therapist"], [class*="staff"]',
    ).first();
    await expect(staffContent).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 3. Appointment booking page
  // -----------------------------------------------------------------------
  test('should load appointment booking page', async ({ page }) => {
    await page.goto(ROUTES.posSpaAppointmentBook());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/spa/appointment-book`));

    // Appointment page should show a calendar, form, or time slot picker
    const appointmentContent = page.locator(
      '.mud-main-content, .mud-layout-content, [class*="appointment"], [class*="calendar"], [class*="booking"]',
    ).first();
    await expect(appointmentContent).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Spa journey tracker page
  // -----------------------------------------------------------------------
  test('should load spa service journey page', async ({ page }) => {
    await page.goto(ROUTES.posSpaJourney());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/spa/spa-journey`));

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