// 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("Discover Performance Page", () => {
  test.beforeEach(async ({ page, context }) => {
    await loginWithMSW(context);
    await page.goto("/discover/log/297310264/performance");
    await expect(
      page.locator(".chart-container, canvas").first(),
    ).toBeVisible();
  });

  test("page loads and loading overlay disappears", async ({ page }) => {
    // Loading overlay should not be visible after data loads
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
  });

  test("displays Time Usage sidebar section", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    await expect(page.getByText("Time Usage").first()).toBeVisible();
  });

  test("displays Frequency sidebar section", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    await expect(page.getByText("Frequency").first()).toBeVisible();
  });

  test("displays sidebar navigation items", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    await expect(page.getByText("Cycle Time & Efficiency").first()).toBeVisible();
    await expect(page.getByText("Processing Time").first()).toBeVisible();
    await expect(page.getByText("Waiting Time").first()).toBeVisible();
    await expect(page.getByText("Number of Cases").first()).toBeVisible();
  });

  test("displays chart titles", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    await expect(page.getByText("Average Cycle Time")).toBeVisible();
    await expect(page.getByText("Cycle Efficiency")).toBeVisible();
    await expect(
      page.getByText("Average Processing Time").first(),
    ).toBeVisible();
    await expect(
      page.getByText("Average Processing Time by Activity"),
    ).toBeVisible();
    await expect(
      page.getByText("Average Waiting Time").first(),
    ).toBeVisible();
  });

  test("displays frequency chart titles", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    await expect(page.getByText("New Cases")).toBeVisible();
    await expect(
      page.getByText("Number of Cases by Activity"),
    ).toBeVisible();
  });

  test("renders canvas elements for charts", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    // Chart.js renders into canvas elements
    const canvasCount = await page.locator("canvas").count();
    expect(canvasCount).toBeGreaterThanOrEqual(5);
  });

  test("sidebar navigation scrolls to section", async ({ page }) => {
    await expect(
      page.locator(".z-\\[9999\\]"),
    ).not.toBeVisible({ timeout: 10000 });
    // Click on "Waiting Time" in sidebar
    await page.locator("li", { hasText: "Waiting Time" }).first().click();
    // The Waiting Time section should be in view
    await expect(page.locator("#waitingTime")).toBeVisible();
  });
});