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

const mockFeed = { code: 200, data: [] };

const loginAndGo = async (page: any, url: string) => {
  await page.goto('/login');
  await page.evaluate(() => localStorage.setItem('isLoggedIn', 'true'));
  await page.goto(url);
  await page.waitForSelector('.task-form-page', { timeout: 10_000 });
};

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

  test('add-task form renders empty fields and "添加" button', async ({ page }) => {
    await loginAndGo(page, '/add-task');
    await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('');
    await expect(page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea')).toHaveValue('');
    await expect(page.locator('.action-row button').first()).toContainText('添加');
  });

  test('submitting add-task sends POST and navigates to /study', async ({ page }) => {
    await page.route('**/api/tasks', (route) => {
      if (route.request().method() === 'POST') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({ code: 200, message: '创建成功' }),
        });
      }
      return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 200, data: { records: [] } }) });
    });
    await loginAndGo(page, '/add-task');

    await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('新学习任务');
    await page.locator('.el-form-item').filter({ hasText: '任务描述' }).locator('textarea').fill('这是一个测试任务');
    await page.locator('.action-row button').first().click();

    await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
  });

  test('update-task loads existing data and submits PUT', async ({ page }) => {
    const mockTask = {
      code: 200,
      data: {
        id: 1,
        taskName: '已有任务',
        taskDescription: '已有描述',
        materialURL: 'https://example.com',
        urgency: 3,
        importance: 4,
        contentDifficulty: 2,
        futureValue: 5,
        subjectivePriority: 1,
      },
    };

    await page.route('**/api/tasks/1', (route) => {
      if (route.request().method() === 'PUT') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({ code: 200, message: '更新成功' }),
        });
      }
      return route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(mockTask),
      });
    });

    await loginAndGo(page, '/update-task/1');
    await expect(page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input')).toHaveValue('已有任务');
    await expect(page.locator('.action-row button').first()).toContainText('更新');

    await page.locator('.el-form-item').filter({ hasText: '任务名称' }).locator('input').fill('更新后的任务');
    await page.locator('.action-row button').first().click();

    await expect(page).toHaveURL(/\/study/, { timeout: 10_000 });
  });

  test('cancel navigates back to /study', async ({ page }) => {
    await loginAndGo(page, '/add-task');
    await page.locator('.action-row button').nth(1).click();
    await expect(page).toHaveURL(/\/study/);
  });
});