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

/**
 * 缺陷 1008937 - 文档解析状态排成两排，很丑
 *
 * 验收标准：
 * 1. 文档解析状态列的列标题（"文档解析状态" + 问号图标）在同一行内显示，不换行
 * 2. 列标题高度不超过正常单行表头高度（<=50px）
 * 3. 状态标签在同一行内显示，不换行
 */
test.describe("文档解析状态列布局修复 (#1008937)", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/#/app/knowledge-base");
    await page.waitForLoadState("domcontentloaded");
  });

  test("文档解析状态列标题应在单行内显示", async ({ page }) => {
    // 等待表格加载
    await page.locator(".el-table").waitFor({ timeout: 15000 }).catch(() => {});

    // 找到包含 status-header 的表头单元格
    const statusHeader = page.locator(".status-header").first();
    const headerExists = await statusHeader.count();
    if (!headerExists) {
      test.skip(true, "未找到 .status-header，跳过");
      return;
    }

    // 检查 white-space 样式为 nowrap
    const whiteSpace = await statusHeader.evaluate(
      (el) => window.getComputedStyle(el).whiteSpace
    );
    expect(whiteSpace).toBe("nowrap");

    // 检查列标题高度不超过 50px（单行高度约 20-40px，两行会超过 50px）
    const box = await statusHeader.boundingBox();
    if (box) {
      expect(box.height).toBeLessThanOrEqual(50);
    }
  });

  test("文档解析状态单元格内容应在单行内显示", async ({ page }) => {
    await page.locator(".el-table").waitFor({ timeout: 15000 }).catch(() => {});

    const statusCells = page.locator(".status-cell");
    const count = await statusCells.count();
    if (count === 0) {
      test.skip(true, "没有文件行，跳过状态单元格测试");
      return;
    }

    const firstCell = statusCells.first();
    const whiteSpace = await firstCell.evaluate(
      (el) => window.getComputedStyle(el).whiteSpace
    );
    expect(whiteSpace).toBe("nowrap");

    const box = await firstCell.boundingBox();
    if (box) {
      expect(box.height).toBeLessThanOrEqual(50);
    }
  });
});