// The Lucia project.
// Copyright 2026-2026 DSP, inc.  All rights reserved.
// Authors:
//   imacat.yang@dsp.im (imacat), 2026/03/22

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

test.describe("Compare", () => {
  test.beforeEach(async ({ page, context }) => {
    await loginWithMSW(context);
    await page.goto("/files");
    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
    await page.locator("li", { hasText: "COMPARE" }).click();
  });

  test("Compare dropdown sorting options", async ({ page }) => {
    const expectedOptions = [
      "By File Name (A to Z)",
      "By File Name (Z to A)",
      "By Dependency (A to Z)",
      "By Dependency (Z to A)",
      "By File Type (A to Z)",
      "By File Type (Z to A)",
      "By Last Update (A to Z)",
      "By Last Update (Z to A)",
    ];

    await page.locator(".p-select").click();
    const options = page.locator(".p-select-list .p-select-option-label");
    const count = await options.count();
    const actualOptions: string[] = [];
    for (let i = 0; i < count; i++) {
      actualOptions.push((await options.nth(i).textContent()) ?? "");
    }
    expect(actualOptions).toEqual(expectedOptions);
  });

  test("Grid cards are rendered for compare file selection", async ({
    page,
  }) => {
    const items = page.locator("#compareGridCards li");
    await expect(items).not.toHaveCount(0);
  });

  test("Compare button is disabled until two files are dragged", async ({
    page,
  }) => {
    await expect(
      page.getByRole("button", { name: "Compare" }),
    ).toBeDisabled();
    await page.locator("#compareFile0").dragTo(
      page.locator("#primaryDragCard"),
    );
    await page.locator("#compareFile1").dragTo(
      page.locator("#secondaryDragCard"),
    );
    await expect(
      page.getByRole("button", { name: "Compare" }),
    ).toBeEnabled();
  });

  test("Enter Compare dashboard and see charts", async ({ page }) => {
    await page.locator("#compareFile0").dragTo(
      page.locator("#primaryDragCard"),
    );
    await page.locator("#compareFile1").dragTo(
      page.locator("#secondaryDragCard"),
    );
    await page.getByRole("button", { name: "Compare" }).click();
    await expect(page).toHaveURL(/compare/);

    // Assert chart title spans are visible
    await expect(
      page.locator("span", { hasText: "Average Cycle Time" }),
    ).toBeVisible();
    await expect(
      page.locator("span", { hasText: "Cycle Efficiency" }),
    ).toBeVisible();
    await expect(
      page.locator("span", { hasText: "Average Processing Time" }).first(),
    ).toBeVisible();
    await expect(
      page.locator("span", {
        hasText: "Average Processing Time by Activity",
      }),
    ).toBeVisible();
    await expect(
      page.locator("span", { hasText: "Average Waiting Time" }).first(),
    ).toBeVisible();
    await expect(
      page.locator("span", {
        hasText: "Average Waiting Time between Activity",
      }),
    ).toBeVisible();
  });

  test("Compare State button exists on dashboard", async ({ page }) => {
    await page.locator("#compareFile0").dragTo(
      page.locator("#primaryDragCard"),
    );
    await page.locator("#compareFile1").dragTo(
      page.locator("#secondaryDragCard"),
    );
    await page.getByRole("button", { name: "Compare" }).click();

    await expect(page.locator("#compareState")).toBeVisible();
  });

  test("Sidebar shows time usage and frequency sections", async ({
    page,
  }) => {
    await page.locator("#compareFile0").dragTo(
      page.locator("#primaryDragCard"),
    );
    await page.locator("#compareFile1").dragTo(
      page.locator("#secondaryDragCard"),
    );
    await page.getByRole("button", { name: "Compare" }).click();

    await expect(page.locator("aside")).toBeVisible();
    const items = page.locator("aside li");
    await expect(items).not.toHaveCount(0);
  });
});
