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

/**
 * EN: Reports and analytics E2E tests.
 * VI: E2E tests cho bao cao va phan tich.
 *
 * Routes:
 *   /admin/reports/eod                           — Admin EOD report
 *   /pos/{ShopId}/restaurant/eod-report          — Restaurant EOD
 *   /pos/{ShopId}/cafe/daily-report              — Cafe daily report
 *   /marketing/analytics                         — Marketing analytics
 */
test.describe('Reports', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

  // -----------------------------------------------------------------------
  // 1. Admin EOD report page loads
  // -----------------------------------------------------------------------
  test('should load admin EOD report page', async ({ page }) => {
    await page.goto(ROUTES.ADMIN_EOD_REPORT);
    await waitForBlazor(page);

    await expect(page).toHaveURL(/\/admin\/reports\/eod/);

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

  // -----------------------------------------------------------------------
  // 2. Revenue / chart elements present
  // -----------------------------------------------------------------------
  test('should display revenue or chart elements on report page', async ({ page }) => {
    await page.goto(ROUTES.ADMIN_EOD_REPORT);
    await waitForBlazor(page);

    // Report pages typically contain charts (MudChart), data tables, or summary cards
    const dataElement = page.locator(
      '.mud-chart, .mud-table, .mud-card, canvas, svg[class*="chart"], [class*="revenue"], [class*="summary"]',
    ).first();
    await expect(dataElement).toBeVisible({ timeout: 15_000 });
  });

  // -----------------------------------------------------------------------
  // 3. Cafe daily report loads with date context
  // -----------------------------------------------------------------------
  test('should load cafe daily report page', async ({ page }) => {
    await page.goto(ROUTES.posCafeDailyReport());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/cafe/daily-report`));

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

    // Date picker or filter should be present
    const dateElement = page.locator(
      '.mud-picker, .mud-date-picker, input[type="date"], [class*="date"], [class*="filter"]',
    ).first();
    await expect(dateElement).toBeVisible({ timeout: 10_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Restaurant EOD report with close-day context
  // -----------------------------------------------------------------------
  test('should load restaurant EOD report page', async ({ page }) => {
    await page.goto(ROUTES.posRestaurantEodReport());
    await waitForBlazor(page);

    await expect(page).toHaveURL(new RegExp(`/restaurant/eod-report`));

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