// 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("Files Page - COMPARE Tab", () => {
  test.beforeEach(async ({ page, context }) => {
    await loginWithMSW(context);
    await page.goto("/files");
    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
    // Switch to COMPARE tab
    await page.locator("li", { hasText: "COMPARE" }).click();
  });

  test("shows Performance Comparison heading", async ({ page }) => {
    await expect(
      page.locator("h2", { hasText: "Performance Comparison" }),
    ).toBeVisible();
  });

  test("shows two drag-and-drop slots", async ({ page }) => {
    await expect(page.locator("#primaryDragCard")).toBeVisible();
    await expect(page.locator("#secondaryDragCard")).toBeVisible();
  });

  test("drag slots show placeholder text", async ({ page }) => {
    await expect(
      page.locator("#primaryDragCard"),
    ).toContainText("Drag and drop a file here");
    await expect(
      page.locator("#secondaryDragCard"),
    ).toContainText("Drag and drop a file here");
  });

  test("Compare button is disabled when no files are dragged", async ({
    page,
  }) => {
    await expect(
      page.getByRole("button", { name: "Compare" }),
    ).toBeDisabled();
  });

  test("shows sorting dropdown", async ({ page }) => {
    await expect(page.locator(".p-select")).toBeVisible();
  });

  test("grid cards display file names", async ({ page }) => {
    await expect(page.locator("#compareGridCards")).toBeVisible();
    const items = page.locator("#compareGridCards li");
    await expect(items).not.toHaveCount(0);
  });

  test("clicking sorting dropdown shows sort options", async ({ page }) => {
    await page.locator(".p-select").click();
    await expect(page.locator(".p-select-list")).toBeVisible();
    await expect(
      page.locator(".p-select-option", { hasText: "By File Name" }).first(),
    ).toBeVisible();
  });
});