import { test, expect } from '../fixtures/test-data';

/**
 * 🦟 蚊子项目 - 用户端到端旅程测试
 * 
 * 测试场景（真实API交互）：
 * 1. 活动查看流程
 * 2. 排行榜查看流程
 * 3. 短链生成和跳转流程
 * 4. 分享统计查看流程
 * 5. 邀请信息查看流程
 */

test.describe('🎯 用户核心旅程测试', () => {
  
  test.beforeEach(async ({ page, testData }) => {
    // 设置测试环境
    console.log(`\n   测试活动ID: ${testData.activityId}`);
    console.log(`   API Key: ${testData.apiKey.substring(0, 20)}...`);
  });

  test('🏠 首页加载和活动列表展示', async ({ page, testData, apiClient }) => {
    await test.step('访问首页', async () => {
      await page.goto('/');
      
      // 验证页面加载
      await expect(page).toHaveTitle(/Mosquito|蚊子/);
      await expect(page.locator('body')).toBeVisible();
      
      // 截图记录
      await page.screenshot({ path: `e2e-results/home-page-${Date.now()}.png` });
    });

    await test.step('验证活动列表API返回数据', async () => {
      try {
        const response = await apiClient.getActivities();
        
        if (response.code === 200) {
          expect(response.data).toBeDefined();
          expect(Array.isArray(response.data)).toBeTruthy();
          
          // 验证测试活动在列表中
          const testActivity = response.data.find(
            (a: any) => a.id === testData.activityId
          );
          if (testActivity) {
            console.log(`   ✅ 找到测试活动: ${testActivity.name}`);
          }
        } else {
          console.log(`   ⚠️ API返回非200状态: ${response.code}`);
        }
      } catch (error) {
        console.log('   ⚠️ API调用失败（可能需要有效认证）');
      }
    });
  });

  test('📊 活动详情和统计数据展示', async ({ page, testData, apiClient }) => {
    await test.step('获取活动详情API', async () => {
      const response = await apiClient.getActivity(testData.activityId);
      
      expect(response.code).toBe(200);
      expect(response.data.id).toBe(testData.activityId);
      console.log(`   活动名称: ${response.data.name}`);
    });

    await test.step('获取活动统计数据API', async () => {
      const response = await apiClient.getActivityStats(testData.activityId);
      
      expect(response.code).toBe(200);
      expect(response.data).toBeDefined();
      
      // 验证统计字段存在
      const stats = response.data;
      console.log(`   总参与人数: ${stats.totalParticipants || 0}`);
      console.log(`   总分享次数: ${stats.totalShares || 0}`);
    });

    await test.step('前端页面展示活动信息', async ({ authenticatedPage }) => {
      // 如果前端有活动详情页面
      await authenticatedPage.goto(`/?activityId=${testData.activityId}`);
      
      // 等待页面加载
      await authenticatedPage.waitForLoadState('networkidle');
      
      // 截图记录
      await authenticatedPage.screenshot({ 
        path: `e2e-results/activity-detail-${Date.now()}.png` 
      });
    });
  });

  test('🏆 排行榜查看流程', async ({ page, testData, apiClient }) => {
    await test.step('获取排行榜数据API', async () => {
      const response = await apiClient.getLeaderboard(testData.activityId, 0, 10);
      
      expect(response.code).toBe(200);
      expect(response.data).toBeDefined();
      
      console.log(`   排行榜数据: ${JSON.stringify(response.data).substring(0, 100)}...`);
    });

    await test.step('前端展示排行榜', async ({ authenticatedPage }) => {
      // 访问排行榜页面
      await authenticatedPage.goto(`/leaderboard?activityId=${testData.activityId}`);
      
      await authenticatedPage.waitForLoadState('networkidle');
      
      // 截图记录
      await authenticatedPage.screenshot({ 
        path: `e2e-results/leaderboard-${Date.now()}.png` 
      });
    });
  });

  test('🔗 短链生成和访问流程', async ({ page, testData, apiClient }) => {
    let shortCode: string;

    await test.step('生成短链API', async () => {
      const originalUrl = `https://example.com/test?activityId=${testData.activityId}&timestamp=${Date.now()}`;
      
      const response = await apiClient.createShortLink(originalUrl, testData.activityId);
      
      expect(response.code).toBe(201);
      expect(response.data).toBeDefined();
      
      shortCode = response.data.code || response.data.shortUrl?.split('/').pop();
      console.log(`   生成短链: ${shortCode}`);
    });

    await test.step('访问短链跳转', async () => {
      // 访问短链
      const response = await page.goto(`/r/${shortCode}`);
      
      // 验证重定向
      expect(response?.status()).toBe(302);
      
      console.log('   ✅ 短链跳转成功');
    });

    await test.step('验证点击记录', async () => {
      // 等待统计更新
      await page.waitForTimeout(1000);
      
      const metrics = await apiClient.getShareMetrics(testData.activityId);
      expect(metrics.code).toBe(200);
      
      console.log(`   总点击数: ${metrics.data?.totalClicks || 0}`);
    });
  });

  test('📈 分享统计数据查看', async ({ page, testData, apiClient }) => {
    await test.step('获取分享统计API', async () => {
      const response = await apiClient.getShareMetrics(testData.activityId);
      
      expect(response.code).toBe(200);
      expect(response.data).toBeDefined();
      
      const metrics = response.data;
      console.log(`   总点击数: ${metrics.totalClicks || 0}`);
      console.log(`   总分享数: ${metrics.totalShares || 0}`);
      console.log(`   总邀请数: ${metrics.totalInvites || 0}`);
    });

    await test.step('前端展示分享统计', async ({ authenticatedPage }) => {
      await authenticatedPage.goto(`/share-metrics?activityId=${testData.activityId}`);
      
      await authenticatedPage.waitForLoadState('networkidle');
      
      await authenticatedPage.screenshot({ 
        path: `e2e-results/share-metrics-${Date.now()}.png` 
      });
    });
  });

  test('🎫 API Key验证流程', async ({ apiClient }) => {
    await test.step('验证有效的API Key', async () => {
      // 这个测试需要使用global-setup创建的API Key
      const globalData = (globalThis as any).__TEST_DATA__;
      
      if (globalData?.apiKey) {
        const isValid = await apiClient.validateApiKey(globalData.apiKey);
        expect(isValid).toBe(true);
        console.log('   ✅ API Key验证通过');
      }
    });
  });
});

test.describe('📱 响应式布局测试', () => {
  test('移动端布局检查', async ({ page, testData }) => {
    // 设置移动端视口
    await page.setViewportSize({ width: 375, height: 667 });
    
    await page.goto(`/?activityId=${testData.activityId}`);
    await page.waitForLoadState('networkidle');
    
    // 截图记录移动端效果
    await page.screenshot({ 
      path: `e2e-results/mobile-layout-${Date.now()}.png` 
    });
    
    console.log('   ✅ 移动端布局检查完成');
  });

  test('平板端布局检查', async ({ page, testData }) => {
    await page.setViewportSize({ width: 768, height: 1024 });
    
    await page.goto(`/?activityId=${testData.activityId}`);
    await page.waitForLoadState('networkidle');
    
    await page.screenshot({ 
      path: `e2e-results/tablet-layout-${Date.now()}.png` 
    });
    
    console.log('   ✅ 平板端布局检查完成');
  });

  test('桌面端布局检查', async ({ page, testData }) => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    
    await page.goto(`/?activityId=${testData.activityId}`);
    await page.waitForLoadState('networkidle');
    
    await page.screenshot({ 
      path: `e2e-results/desktop-layout-${Date.now()}.png` 
    });
    
    console.log('   ✅ 桌面端布局检查完成');
  });
});

test.describe('⚡ 性能测试', () => {
  test('API响应时间测试', async ({ apiClient, testData }) => {
    const startTime = Date.now();
    
    await apiClient.getActivity(testData.activityId);
    
    const responseTime = Date.now() - startTime;
    
    expect(responseTime).toBeLessThan(2000); // API响应应在2秒内
    console.log(`   API响应时间: ${responseTime}ms`);
  });

  test('页面加载时间测试', async ({ page, testData }) => {
    const startTime = Date.now();
    
    await page.goto(`/?activityId=${testData.activityId}`);
    await page.waitForLoadState('networkidle');
    
    const loadTime = Date.now() - startTime;
    
    expect(loadTime).toBeLessThan(5000); // 页面应在5秒内加载
    console.log(`   页面加载时间: ${loadTime}ms`);
  });
});

test.describe('🔒 错误处理测试', () => {
  test('处理无效的活动ID', async ({ page }) => {
    await page.goto('/?activityId=999999999');
    await page.waitForLoadState('networkidle');
    
    // 验证页面优雅处理错误
    await page.screenshot({ 
      path: `e2e-results/error-handling-${Date.now()}.png` 
    });
    
    console.log('   ✅ 错误处理测试完成');
  });

  test('处理网络错误', async ({ apiClient }) => {
    // 测试API客户端的错误处理
    try {
      // 尝试访问不存在的端点
      const response = await apiClient.get('/api/v1/non-existent-endpoint');
      
      // 应该返回错误，而不是抛出异常
      expect(response.code).not.toBe(200);
    } catch (error) {
      // 错误被正确处理
      console.log('   ✅ 网络错误被正确处理');
    }
  });
});