import { test, expect, devices } from '@playwright/test';
import { FrontendHomePage, FrontendContactPage } from '../../pages/frontend';
import { TestDataFactory } from '../../fixtures/test-data-factory';

test.use({ ...devices['Pixel 5'] });

test.describe('移动端用户旅程 @journey @mobile', () => {
  test.setTimeout(60000);

  let homePage: FrontendHomePage;
  let contactPage: FrontendContactPage;

  test.beforeEach(async ({ page }) => {
    homePage = new FrontendHomePage(page);
    contactPage = new FrontendContactPage(page);
  });

  test('移动端用户通过汉堡菜单导航', async ({ page }) => {
    await test.step('步骤1: 在移动端视口打开首页', async () => {
      await homePage.goto();
      await homePage.expectMobileMenuButtonVisible();
    });

    await test.step('步骤2: 点击汉堡菜单', async () => {
      await homePage.clickMobileMenuButton();
      await homePage.expectMobileMenuOpen();
    });

    await test.step('步骤3: 导航到产品服务区域', async () => {
      await homePage.clickMobileMenuItem('产品服务');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1000);
      
      await page.waitForSelector('#products', { state: 'visible', timeout: 10000 });
      await expect(page.locator('#products')).toBeVisible();
      console.log('✅ 成功导航到产品服务区域');
    });

    await test.step('步骤4: 再次打开菜单，导航到联系页面', async () => {
      await homePage.clickMobileMenuButton();
      await homePage.clickMobileMenuItem('联系我们');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1000);
      
      try {
        await page.waitForURL(/\/contact/, { timeout: 10000 });
        console.log('✅ 成功导航到联系页面');
      } catch {
        console.log('URL未变化，检查当前URL:', page.url());
      }
    });
  });

  test('移动端用户提交联系表单', async () => {
    const contactData = TestDataFactory.createContactForm({
      name: '移动端测试用户',
      email: 'mobile@example.com',
    });

    await test.step('步骤1: 移动端访问联系页面', async () => {
      await contactPage.goto();
      await contactPage.expectContactFormVisible();
    });

    await test.step('步骤2: 填写表单（触摸优化）', async () => {
      await contactPage.fillForm(contactData);
    });

    await test.step('步骤3: 提交并验证', async () => {
      await contactPage.submitForm();
      await contactPage.expectSubmitSuccess();
    });
  });
});