import { test, expect } from '@playwright/test';

const mockTasksData = {
  code: 200,
  data: [
    {
      taskNum: 'T001',
      taskName: '学习 Vue3',
      reportCount: 3,
      fragmentCount: 5,
      effectiveTime: 9000,
    },
    {
      taskNum: 'T002',
      taskName: '学习 TypeScript',
      reportCount: 1,
      fragmentCount: 2,
      effectiveTime: 4500,
    },
  ],
};
const mockTasksEmpty = { code: 200, data: [] };
const mockFeed = { code: 200, data: [] };

test.describe('Review page', () => {
  test.beforeEach(async ({ page }) => {
    await page.route('**/api/review/tasks**', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(mockTasksData),
      }),
    );
    await page.route('**/api/review/feed**', (route) =>
      route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
    );

    await page.goto('/login');
    await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
    await page.goto('/review');
    await page.waitForSelector('.review-page', { timeout: 10_000 });
  });

  test('displays summary metrics and task table', async ({ page }) => {
    await expect(page.locator('.metric-card')).toHaveCount(3);
    // Check metric values
    await expect(page.locator('.metric-card').first().locator('strong')).toContainText('2');
    // Check table rows
    await expect(page.locator('.el-table__row')).toHaveCount(2);
  });

  test('shows empty state when no tasks', async ({ page }) => {
    await page.route('**/api/review/tasks**', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(mockTasksEmpty),
      }),
    );

    await page.goto('/review');
    await page.waitForSelector('.review-page', { timeout: 10_000 });
    await expect(page.locator('.metric-card').first().locator('strong')).toContainText('0');
  });
});