import { test, expect } from '@playwright/test';
import { HomePage } from '../../pages/HomePage';
import { NAVIGATION_ITEMS } from '../../data/test-data';

test.describe('导航测试', () => {
  let homePage: HomePage;

  test.beforeEach(async ({ page }) => {
    homePage = new HomePage(page);
    await homePage.goto();
  });

  test.describe('Smoke测试', () => {
    test('应该能够导航到首页', async () => {
      await homePage.navigateToHome();
      await homePage.waitForPageLoad();
      expect(await homePage.getCurrentURL()).toBe('/');
    });

    test('应该能够导航到联系页面', async () => {
      await homePage.clickContactButton();
      await homePage.waitForLoadState('networkidle');
      expect(await homePage.getCurrentURL()).toContain('/contact');
    });
  });

  test.describe('Regression测试', () => {
    test('应该能够点击导航到关于区域', async () => {
      await homePage.clickNavigationItem('关于我们');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('about')).toBe(true);
    });

    test('应该能够点击导航到服务区域', async () => {
      await homePage.clickNavigationItem('服务');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('services')).toBe(true);
    });

    test('应该能够点击导航到产品区域', async () => {
      await homePage.clickNavigationItem('产品');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('products')).toBe(true);
    });

    test('应该能够点击导航到案例区域', async () => {
      await homePage.clickNavigationItem('案例');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('cases')).toBe(true);
    });

    test('应该能够点击导航到新闻区域', async () => {
      await homePage.clickNavigationItem('新闻');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('news')).toBe(true);
    });

    test('应该能够点击导航到联系区域', async () => {
      await homePage.clickNavigationItem('联系我们');
      await homePage.waitForTimeout(1000);
      expect(await homePage.isSectionVisible('contact')).toBe(true);
    });

    test('应该能够平滑滚动到区域', async () => {
      await homePage.scrollToSection('services');
      const scrollPosition = await homePage.getScrollPosition();
      expect(scrollPosition.y).toBeGreaterThan(0);
    });

    test('应该能够返回上一页', async () => {
      await homePage.clickContactButton();
      await homePage.waitForLoadState('networkidle');
      await homePage.goBack();
      await homePage.waitForLoadState('networkidle');
      expect(await homePage.getCurrentURL()).toBe('/');
    });

    test('应该能够前进到下一页', async () => {
      await homePage.clickContactButton();
      await homePage.waitForLoadState('networkidle');
      await homePage.goBack();
      await homePage.waitForLoadState('networkidle');
      await homePage.goForward();
      await homePage.waitForLoadState('networkidle');
      expect(await homePage.getCurrentURL()).toContain('/contact');
    });

    test('应该能够刷新页面', async () => {
      await homePage.scrollToSection('services');
      await homePage.reload();
      await homePage.waitForPageLoad();
      expect(await homePage.isSectionVisible('services')).toBe(true);
    });

    test('应该能够滚动到页面底部', async () => {
      await homePage.scrollToBottom();
      const scrollPosition = await homePage.getScrollPosition();
      const pageHeight = await homePage.page.evaluate(() => document.body.scrollHeight);
      expect(scrollPosition.y).toBeCloseTo(pageHeight, 100);
    });

    test('应该能够滚动到页面顶部', async () => {
      await homePage.scrollToBottom();
      await homePage.scrollToTop();
      const scrollPosition = await homePage.getScrollPosition();
      expect(scrollPosition.y).toBe(0);
    });

    test('应该能够验证粘性页头', async () => {
      const isSticky = await homePage.verifyStickyHeader();
      expect(isSticky).toBe(true);
    });

    test('应该能够验证平滑滚动', async () => {
      const isSmooth = await homePage.verifySmoothScroll();
      expect(isSmooth).toBe(true);
    });
  });

  test.describe('移动端导航测试', () => {
    test.beforeEach(async () => {
      await homePage.page.setViewportSize({ width: 375, height: 667 });
    });

    test('应该能够打开移动端菜单', async () => {
      await homePage.openMobileMenu();
      expect(await homePage.mobileMenu.isVisible()).toBe(true);
    });

    test('应该能够关闭移动端菜单', async () => {
      await homePage.openMobileMenu();
      await homePage.closeMobileMenu();
      expect(await homePage.mobileMenu.isVisible()).toBe(false);
    });

    test('应该能够通过移动端菜单导航', async () => {
      await homePage.openMobileMenu();
      const menuItem = homePage.mobileMenu.locator('a').first();
      await menuItem.click();
      await homePage.waitForTimeout(1000);
      expect(await homePage.mobileMenu.isVisible()).toBe(false);
    });

    test('应该能够验证移动端菜单按钮可见性', async () => {
      expect(await homePage.mobileMenuButton.isVisible()).toBe(true);
    });
  });

  test.describe('导航链接验证', () => {
    test('应该包含所有导航链接', async () => {
      const labels = await homePage.getAllNavigationLabels();
      expect(labels).toHaveLength(NAVIGATION_ITEMS.length);
    });

    test('应该包含正确的导航标签', async () => {
      const labels = await homePage.getAllNavigationLabels();
      NAVIGATION_ITEMS.forEach(item => {
        expect(labels).toContain(item.label);
      });
    });

    test('应该能够点击所有导航链接', async () => {
      for (const item of NAVIGATION_ITEMS) {
        await homePage.goto();
        await homePage.clickNavigationItem(item.label);
        await homePage.waitForTimeout(500);
        expect(await homePage.getCurrentURL()).toContain(item.expectedUrl);
      }
    });
  });

  test.describe('导航可访问性测试', () => {
    test('应该能够通过键盘导航', async () => {
      await homePage.pressKey('Tab');
      await homePage.pressKey('Tab');
      const activeElement = await homePage.page.evaluate(() => document.activeElement?.tagName);
      expect(['A', 'BUTTON']).toContain(activeElement);
    });

    test('应该有正确的ARIA标签', async () => {
      const navigation = homePage.navigation;
      const role = await navigation.getAttribute('role');
      expect(role).toBe('navigation');
    });
  });

  test.describe('导航响应式测试', () => {
    test('应该在移动端显示汉堡菜单', async () => {
      await homePage.page.setViewportSize({ width: 375, height: 667 });
      expect(await homePage.mobileMenuButton.isVisible()).toBe(true);
    });

    test('应该在桌面端显示完整导航', async () => {
      await homePage.page.setViewportSize({ width: 1280, height: 720 });
      expect(await homePage.navigation.isVisible()).toBe(true);
    });

    test('应该在平板端显示完整导航', async () => {
      await homePage.page.setViewportSize({ width: 768, height: 1024 });
      expect(await homePage.navigation.isVisible()).toBe(true);
    });
  });
});