import { test, expect, describe } from "@playwright/test";
import { LoginPage } from "../pages/login.page";
import { DashboardPage } from "../pages/dashboard.page";

const TEST_USER = {
  email: "admin@example.com",
  password: "admin@123",
};

describe("健康状态Dashboard - 页面渲染测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("Dashboard页面标题正确显示为品牌健康中心", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await expect(dashboardPage.pageTitle).toBeVisible();
    await expect(dashboardPage.pageTitle).toHaveText("品牌健康中心");
  });

  test("页面副标题正确显示", async ({ page }) => {
    await expect(
      page.getByText("实时监控品牌在AI认知中的健康状态"),
    ).toBeVisible();
  });
});

describe("健康状态Dashboard - 概览卡片测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("4个概览卡片全部显示", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    await expect(dashboardPage.healthScoreCard).toBeVisible();
    await expect(dashboardPage.competitorStatusCard).toBeVisible();
    await expect(dashboardPage.trendCard).toBeVisible();
    await expect(dashboardPage.monitorPlatformCard).toBeVisible();
  });

  test("综合评分卡片显示评分和健康等级", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查是否有大数字评分（可能是0表示新用户）
    const score = await dashboardPage.getOverallScore();
    expect(score).not.toBeNull();

    // 评分数值应该在0-100之间，或者是0（新用户状态）
    const scoreNum = parseInt(score || "0", 10);
    expect(scoreNum).toBeGreaterThanOrEqual(0);
    expect(scoreNum).toBeLessThanOrEqual(100);

    // 检查健康等级标签（优秀/良好/及格/危险之一）
    const healthLevel = await dashboardPage.getHealthLevel();
    await expect(healthLevel).toBeVisible();
  });

  test("竞品地位卡片显示领先或落后信息", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查竞品地位卡片可见
    await expect(dashboardPage.competitorStatusCard).toBeVisible();
  });

  test("趋势卡片显示变化百分比", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    await expect(dashboardPage.trendCard).toBeVisible();
  });

  test("监控平台卡片显示平台数量", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    await expect(dashboardPage.monitorPlatformCard).toBeVisible();
    // 检查是否有 X/7 格式的文本
    await expect(page.locator("text=/\\d+\\/7/")).toBeVisible();
  });
});

describe("健康状态Dashboard - 平台评分列表测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("平台评分列表标题正确显示", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();
    await expect(dashboardPage.platformScoreList).toBeVisible();
  });

  test("平台评分列表包含平台名称", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 至少应该显示一个平台
    const platformCount = await dashboardPage.getPlatformScoreCount();
    expect(platformCount).toBeGreaterThan(0);
  });

  test("平台评分显示分数和进度条", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查进度条存在
    const progressBars = page.locator(
      ".overflow-hidden.rounded-full.bg-gray-100",
    );
    await expect(progressBars.first()).toBeVisible();
  });

  test("平台评分显示竞品对比信息", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查是否有领先或落后标记
    const competitorIndicators = page.locator("text=/领先|落后|持平/");
    await expect(competitorIndicators.first()).toBeVisible();
  });
});

describe("健康状态Dashboard - 行动建议测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("行动建议区域标题正确显示", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();
    await expect(dashboardPage.actionSuggestions).toBeVisible();
  });

  test("行动建议包含主要/次要/可选标签", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查优先级标签
    const priorityLabels = page.locator("text=/主要|次要|可选/");
    await expect(priorityLabels.first()).toBeVisible();
  });

  test("行动建议包含跳转链接", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查查看按钮存在
    const viewButtons = page.locator("button:has-text('查看')");
    await expect(viewButtons.first()).toBeVisible();
  });

  test("点击行动建议跳转链接", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 查找第一个查看按钮并点击
    const viewButton = page.locator("button:has-text('查看')").first();
    if (await viewButton.isVisible()) {
      await viewButton.click();
      // 验证URL变化或新页面打开
      // 由于行动建议链接可能是 /compare, /dashboard/queries, /dashboard/settings 等
      // 我们可以验证按钮可点击即可
    }
  });
});

describe("健康状态Dashboard - 骨架屏测试", () => {
  test("加载时显示骨架屏", async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });
});

describe("健康状态Dashboard - 颜色传达状态测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("绿色表示好的状态（优秀等级）", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查绿色元素（emerald）是否存在
    const greenElements = page.locator("[class*='emerald']");
    // 至少应该有一些绿色元素在页面上
    // 这取决于实际评分数据
  });

  test("红色表示差的状态（危险等级平台）", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查红色元素（red）
    const redElements = page.locator("[class*='red-']");
    // 如果有危险平台，应该有红色高亮
  });

  test("趋势箭头颜色正确（绿涨红跌）", async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 检查是否有趋势指示器
    const trendIndicators = page.locator(
      "[class*='text-emerald-600'], [class*='text-red-600']",
    );
    // 如果有趋势变化，应该有对应颜色
  });
});

describe("健康状态Dashboard - 响应式设计测试", () => {
  test.beforeEach(async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_USER.email, TEST_USER.password);
    await page.waitForURL(/\/dashboard/, { timeout: 30000 });
  });

  test("移动端视口下概览卡片堆叠显示", async ({ page }) => {
    // 设置移动端视口
    await page.setViewportSize({ width: 375, height: 667 });

    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 在移动端，grid应该变成单列或双列
    await expect(dashboardPage.healthScoreCard).toBeVisible();
  });

  test("桌面端视口下概览卡片4列显示", async ({ page }) => {
    // 设置桌面端视口
    await page.setViewportSize({ width: 1280, height: 720 });

    const dashboardPage = new DashboardPage(page);
    await dashboardPage.waitForHealthCards();

    // 在桌面端，所有4个卡片应该可见
    await expect(dashboardPage.healthScoreCard).toBeVisible();
    await expect(dashboardPage.competitorStatusCard).toBeVisible();
    await expect(dashboardPage.trendCard).toBeVisible();
    await expect(dashboardPage.monitorPlatformCard).toBeVisible();
  });
});
