import { Page } from "@playwright/test";
import { test, expect, ACCOUNT } from "../../../src/fixture/base-test";
import { TIMEOUT } from "../../../src/constant/timeout";
import { PW } from "../../../src/utils/PW";
import { uc29DefaultUrl } from "../uc29.default.data";

const BASE_URL = process.env.BASE_URL!;

// So sánh không phụ thuộc khoảng trắng / hoa-thường
const norm = (s: string) => s.replace(/\s+/g, "").toLowerCase();
const EXPECTED_HEADERS = [
  "Mã hồ sơ/ Tài liệu",
  "Tên hồ sơ/Tài liệu",
  "Dự án",
  "Loại hồ sơ/Tài liệu",
];

const runTest = async (page: Page) => {
  const pw = new PW(page);

  await test.step("1. Mở modal Tạo mới hồ sơ", async () => {
    await page.goto(`${BASE_URL}${uc29DefaultUrl}`);
    await pw.isVisible("btn-create-hstl", TIMEOUT.PAGE_LOADING);
    await pw.wait(TIMEOUT.HARD_WAITING);
    await pw.clickButton("btn-create-hstl");
  });

  await test.step("2. Thêm 1 hồ sơ liên quan", async () => {
    // click trực tiếp → pop-up "Tìm hồ sơ liên quan", chọn dòng đầu, bấm Thêm
    await pw.inputRelatedECM("btn-add-related-ecm");
    const relatedRows = page
      .getByTestId("related-item-table")
      .locator(".cssMaHSTLChild");
    await expect(relatedRows, {
      message: "Lỗi: Chưa thêm được hồ sơ liên quan",
    }).toHaveCount(1);
  });

  await test.step("3. Thêm 1 tài liệu liên quan", async () => {
    // hover dropdown → "Tài liệu liên quan" → pop-up "Tìm tài liệu liên quan"
    const parent = page
      .locator('[data-testid="btn-add-related-ecm"]')
      .locator("..");
    await parent.locator(".ant-dropdown-trigger").hover();
    await page.getByText("Tài liệu liên quan").click();
    await expect(page.getByText("Tìm tài liệu liên quan"), {
      message: "Lỗi: Pop-up tìm tài liệu liên quan không hiển thị",
    }).toBeVisible({ timeout: TIMEOUT.DATA_LOADING });
    await pw.wait(TIMEOUT.DATA_LOADING);

    const modalContent = page.locator(".ant-modal-content:visible").last();
    await modalContent
      .locator(".ant-table-row.ant-table-row-level-0")
      .first()
      .hover();
    await modalContent
      .locator(".ant-table-row.ant-table-row-level-0 .ant-checkbox-wrapper")
      .first()
      .click();
    await expect(page.getByTestId("btn-add-related"), {
      message: "Lỗi: Nút 'Thêm' không hiển thị khi đã chọn tài liệu",
    }).toBeVisible({ timeout: TIMEOUT.CONTROL_LOADING });
    await pw.clickButton("btn-add-related");
    await pw.isVisible("related-item-table");

    const relatedRows = page
      .getByTestId("related-item-table")
      .locator(".cssMaHSTLChild");
    await expect(relatedRows, {
      message: "Lỗi: Chưa thêm được tài liệu liên quan (số dòng không phải 2)",
    }).toHaveCount(2);
  });

  await test.step("4. Kiểm tra tiêu đề cột của bảng Thông tin liên quan", async () => {
    const headerCells = page
      .getByTestId("related-item-table")
      .locator(".ant-table-thead th");
    const rawHeaders = await headerCells.allTextContents();
    // Bỏ các <th> trống (checkbox / cột thao tác…)
    const actualHeaders = rawHeaders
      .map((t) => t.trim())
      .filter((t) => t !== "");

    expect(actualHeaders.map(norm).sort(), {
      message:
        `Lỗi: Tiêu đề cột bảng liên quan không khớp.\n` +
        `Mong đợi: [${EXPECTED_HEADERS.join(", ")}]\n` +
        `Thực tế:  [${actualHeaders.join(", ")}]`,
    }).toEqual(EXPECTED_HEADERS.map(norm).sort());
  });
};

test(
  "UC29 1.1.2.9.82 - Kiểm tra hiển thị list tại mục Thông tin liên quan - Thủ thư" +
    ACCOUNT.LIBRARIAN,
  async ({ librarian }) => {
    await runTest(librarian);
  },
);
test(
  "UC29 1.1.2.9.82 - Kiểm tra hiển thị list tại mục Thông tin liên quan - Admin" +
    ACCOUNT.ADMIN,
  async ({ admin }) => {
    await runTest(admin);
  },
);
