import { expect, test, type Locator } from "@playwright/test";
import { prepareApp } from "./fixtures";

test.beforeEach(async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript(() => {
    window.localStorage.removeItem(
      "system-simulation-flow:palette-collapsed-sections",
    );
  });
});

async function expectFixedIconCardSize(
  item: Locator,
) {
  const itemBox = await item.boundingBox();
  const iconBox = await item.locator(".palette-icon").boundingBox();

  expect(itemBox).not.toBeNull();
  expect(iconBox).not.toBeNull();
  expect(itemBox!.width).toBeGreaterThanOrEqual(75);
  expect(itemBox!.width).toBeLessThanOrEqual(77);
  expect(itemBox!.height).toBeGreaterThanOrEqual(81);
  expect(itemBox!.height).toBeLessThanOrEqual(83);
  expect(iconBox!.width).toBeGreaterThanOrEqual(47);
  expect(iconBox!.width).toBeLessThanOrEqual(49);
  expect(iconBox!.height).toBeGreaterThanOrEqual(47);
  expect(iconBox!.height).toBeLessThanOrEqual(49);
}

test("组件库可切换详细与仅图标显示，并在刷新后保留选择", async ({ page }) => {
  await page.goto("/");

  const palette = page.locator("aside.palette");
  const detailedButton = page.getByRole("button", {
    name: "详细显示",
    exact: true,
  });
  const iconsButton = page.getByRole("button", {
    name: "仅图标显示",
    exact: true,
  });
  const airItem = palette.getByRole("button", {
    name: "空气介质定义",
    exact: true,
  });
  const heliumItem = palette.getByRole("button", {
    name: "氦气介质定义",
    exact: true,
  });

  await expect(palette).toHaveAttribute("data-view-mode", "detailed");
  await expect(detailedButton).toHaveAttribute("aria-pressed", "true");
  await expect(iconsButton).toHaveAttribute("aria-pressed", "false");
  await expect(airItem.locator(".palette-item-copy")).toBeVisible();

  const airSymbol = airItem.locator(
    '[data-component-symbol="amesim_ideal_air_medium"]',
  );
  const heliumSymbol = heliumItem.locator(
    '[data-component-symbol="amesim_helium_medium"]',
  );
  await expect(airSymbol.locator("svg")).toBeVisible();
  await expect(
    airSymbol.locator('[data-symbol-label="Air"]'),
  ).toHaveText("Air");
  await expect(airSymbol.locator(".component-symbol-medium-svg path")).toHaveCount(0);
  await expect(heliumSymbol.locator("svg")).toBeVisible();
  await expect(
    heliumSymbol.locator('[data-symbol-label="He"]'),
  ).toHaveText("He");
  await expect(heliumSymbol.locator(".component-symbol-medium-svg path")).toHaveCount(0);

  const unknownSymbol = palette
    .getByRole("button", { name: "通用测试元件", exact: true })
    .locator('[data-component-symbol="generic"]');
  await expect(unknownSymbol.locator("svg")).toBeVisible();

  await iconsButton.click();
  await expect(palette).toHaveAttribute("data-view-mode", "icons");
  await expect(detailedButton).toHaveAttribute("aria-pressed", "false");
  await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
  await expect(airItem).toBeVisible();
  await expect(airItem.locator(".palette-item-name")).toBeVisible();
  await expect(airItem.locator(".palette-item-name")).toHaveText("空气介质定义");
  await expect(airItem.locator(".palette-item-meta")).toBeHidden();
  await expect(airItem).not.toHaveAttribute("title");

  await page.reload();

  await expect(palette).toHaveAttribute("data-view-mode", "icons");
  await expect(iconsButton).toHaveAttribute("aria-pressed", "true");
  await expect(airItem.locator(".palette-item-name")).toBeVisible();
  await expect(airItem.locator(".palette-item-meta")).toBeHidden();
});

test("组件库和分类支持独立折叠并同步可访问状态", async ({ page }) => {
  await page.goto("/");

  const palette = page.locator("aside.palette");
  const libraryToggle = palette.getByRole("button", {
    name: "自动化测试组件库",
    exact: true,
  });
  const categoryToggle = palette.getByRole("button", {
    name: "介质物性",
    exact: true,
  });

  await expect(libraryToggle).toHaveAttribute("aria-expanded", "true");
  const libraryContentId = await libraryToggle.getAttribute("aria-controls");
  expect(libraryContentId).toBeTruthy();
  await expect(page.locator(`[id="${libraryContentId}"]`)).toBeVisible();

  await expect(categoryToggle).toHaveAttribute("aria-expanded", "true");
  const categoryItemsId = await categoryToggle.getAttribute("aria-controls");
  expect(categoryItemsId).toBeTruthy();
  await expect(page.locator(`[id="${categoryItemsId}"]`)).toBeVisible();
  await expect(
    palette.getByRole("button", { name: "空气介质定义", exact: true }),
  ).toBeVisible();

  await categoryToggle.click();
  await expect(categoryToggle).toHaveAttribute("aria-expanded", "false");
  await expect(page.locator(`[id="${categoryItemsId}"]`)).toHaveCount(0);
  await expect(
    palette.getByRole("button", { name: "空气介质定义", exact: true }),
  ).toHaveCount(0);

  await categoryToggle.click();
  await expect(categoryToggle).toHaveAttribute("aria-expanded", "true");
  await expect(page.locator(`[id="${categoryItemsId}"]`)).toBeVisible();

  await libraryToggle.click();
  await expect(libraryToggle).toHaveAttribute("aria-expanded", "false");
  await expect(page.locator(`[id="${libraryContentId}"]`)).toHaveCount(0);
  await expect(
    palette.getByRole("button", { name: "介质物性", exact: true }),
  ).toHaveCount(0);

  await libraryToggle.click();
  await expect(libraryToggle).toHaveAttribute("aria-expanded", "true");
  await expect(page.locator(`[id="${libraryContentId}"]`)).toBeVisible();
  await expect(
    palette.getByRole("button", { name: "介质物性", exact: true }),
  ).toHaveAttribute("aria-expanded", "true");
});

test("仅图标模式名称截断且卡片尺寸不随侧栏和视口改变", async ({ page }) => {
  await page.goto("/");
  await page
    .getByRole("button", { name: "仅图标显示", exact: true })
    .click();

  const palette = page.locator("aside.palette");
  const longNameItem = palette.getByRole("button", {
    name: "AMESim 气动测试元件",
    exact: true,
  });
  const name = longNameItem.locator(".palette-item-name");
  const meta = longNameItem.locator(".palette-item-meta");

  await expect(name).toBeVisible();
  await expect(name).toHaveText("AMESim 气动测试元件");
  await expect(meta).toBeHidden();
  await expect(longNameItem).not.toHaveAttribute("title");
  const truncation = await name.evaluate((element) => {
    const style = window.getComputedStyle(element);
    return {
      clipped: element.scrollWidth > element.clientWidth,
      overflow: style.overflow,
      textOverflow: style.textOverflow,
      whiteSpace: style.whiteSpace,
    };
  });
  expect(truncation).toEqual({
    clipped: true,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  });

  await expectFixedIconCardSize(longNameItem);
  const initialPaletteBox = await palette.boundingBox();
  expect(initialPaletteBox).not.toBeNull();

  const paletteSeparator = page.getByRole("separator", {
    name: "调整组件库宽度",
  });
  await paletteSeparator.focus();
  for (let index = 0; index < 5; index += 1) {
    await page.keyboard.press("ArrowRight");
  }
  await expect(paletteSeparator).toHaveAttribute("aria-valuenow", "330");
  const expandedPaletteBox = await palette.boundingBox();
  expect(expandedPaletteBox).not.toBeNull();
  expect(expandedPaletteBox!.width).toBeGreaterThan(initialPaletteBox!.width + 90);
  await expectFixedIconCardSize(longNameItem);

  await page.setViewportSize({ width: 1000, height: 760 });
  await expect
    .poll(async () => Number(await paletteSeparator.getAttribute("aria-valuenow")))
    .toBeLessThan(330);
  await expectFixedIconCardSize(longNameItem);
});

test("仅图标模式悬停后显示完整名称和图标预览并在移开后关闭", async ({ page }) => {
  await page.goto("/");
  await page
    .getByRole("button", { name: "仅图标显示", exact: true })
    .click();

  const item = page.locator("aside.palette").getByRole("button", {
    name: "AMESim 气动测试元件",
    exact: true,
  });
  const preview = page.locator("body > .palette-icon-preview[role='tooltip']");

  await item.hover();
  await page.waitForTimeout(600);
  await expect(preview).toBeVisible();
  await expect(preview.locator(".palette-icon-preview-label")).toHaveText(
    "AMESim 气动测试元件",
  );
  await expect(
    preview.locator(
      '.palette-icon-preview-symbol [data-component-symbol="generic"] svg',
    ),
  ).toBeVisible();
  await expect(item).toHaveAttribute("aria-describedby", "palette-icon-preview");

  await page.locator(".palette-panel-title").hover();
  await expect(preview).toHaveCount(0);
  await expect(item).not.toHaveAttribute("aria-describedby", "palette-icon-preview");
});

test("仅图标模式仍可拖入氦气介质并在画布显示专用图标", async ({ page }) => {
  await page.goto("/");

  await page
    .getByRole("button", { name: "仅图标显示", exact: true })
    .click();

  const palette = page.locator("aside.palette");
  const heliumItem = palette.getByRole("button", {
    name: "氦气介质定义",
    exact: true,
  });
  const canvas = page.locator(".flow-canvas .react-flow__pane");
  await heliumItem.dragTo(canvas, {
    targetPosition: { x: 420, y: 220 },
  });

  const heliumNode = page.locator(
    '.flow-canvas .react-flow__node[data-id="amesim_helium_medium_1"]',
  );
  await expect(heliumNode).toBeVisible();
  await expect(
    heliumNode.locator(".sim-node.symbol-presentation-bare"),
  ).toBeVisible();

  const heliumCanvasSymbol = heliumNode.locator(
    '.node-symbol [data-component-symbol="amesim_helium_medium"]',
  );
  await expect(heliumCanvasSymbol).toHaveAttribute(
    "data-symbol-presentation",
    "bare",
  );
  await expect(heliumCanvasSymbol.locator("svg")).toBeVisible();
  await expect(
    heliumCanvasSymbol.locator('[data-symbol-label="He"]'),
  ).toHaveText("He");
});

test("从组件库拖入时使用工作区图标作为待拖入预览", async ({ page }) => {
  await page.goto("/");
  await page.evaluate(() => {
    const dataTransferPrototype = DataTransfer.prototype;
    const originalSetDragImage = dataTransferPrototype.setDragImage;
    dataTransferPrototype.setDragImage = function (
      this: DataTransfer,
      image: Element,
      x: number,
      y: number,
    ) {
      const bounds = image.getBoundingClientRect();
      const style = window.getComputedStyle(image);
      const symbol = image.querySelector<HTMLElement>(".component-symbol");
      const svg = image.querySelector<SVGSVGElement>(".component-symbol-svg");
      (
        window as Window & {
          __componentDragPreview?: {
            backgroundColor: string;
            borderTopWidth: string;
            hasLegacyCardLabel: boolean;
            height: number;
            hotspotX: number;
            hotspotY: number;
            rootClassName: string;
            symbolClassName: string;
            viewBox: string | null;
            width: number;
          };
        }
      ).__componentDragPreview = {
        backgroundColor: style.backgroundColor,
        borderTopWidth: style.borderTopWidth,
        hasLegacyCardLabel: Boolean(
          image.querySelector(".component-drag-preview-label"),
        ),
        height: bounds.height,
        hotspotX: x,
        hotspotY: y,
        rootClassName: image.className,
        symbolClassName: symbol?.className ?? "",
        viewBox: svg?.getAttribute("viewBox") ?? null,
        width: bounds.width,
      };
      dataTransferPrototype.setDragImage = originalSetDragImage;
      return originalSetDragImage.call(this, image, x, y);
    };
  });

  const heliumItem = page
    .locator("aside.palette")
    .getByRole("button", { name: "氦气介质定义", exact: true });
  const canvas = page.locator(".flow-canvas .react-flow__pane");
  await heliumItem.dragTo(canvas, {
    targetPosition: { x: 420, y: 220 },
  });

  const preview = await page.evaluate(
    () =>
      (
        window as Window & {
          __componentDragPreview?: {
            backgroundColor: string;
            borderTopWidth: string;
            hasLegacyCardLabel: boolean;
            height: number;
            hotspotX: number;
            hotspotY: number;
            rootClassName: string;
            symbolClassName: string;
            viewBox: string | null;
            width: number;
          };
        }
      ).__componentDragPreview,
  );
  expect(preview).toBeDefined();
  expect(preview!.rootClassName).toContain("component-drag-preview");
  expect(preview!.symbolClassName).toContain("component-symbol-canvas");
  expect(preview!.symbolClassName).not.toContain("component-symbol-palette");
  expect(preview!.hasLegacyCardLabel).toBe(false);
  expect(preview!.borderTopWidth).toBe("0px");
  expect(preview!.backgroundColor).toBe("rgba(0, 0, 0, 0)");
  expect(Math.abs(preview!.hotspotX - preview!.width / 2)).toBeLessThanOrEqual(0.5);
  expect(Math.abs(preview!.hotspotY - preview!.height / 2)).toBeLessThanOrEqual(0.5);

  const heliumNode = page.locator(
    '.flow-canvas .react-flow__node[data-id="amesim_helium_medium_1"]',
  );
  const nodeBounds = await heliumNode.boundingBox();
  expect(nodeBounds).not.toBeNull();
  expect(preview!.width).toBeCloseTo(nodeBounds!.width, 1);
  expect(preview!.height).toBeCloseTo(nodeBounds!.height, 1);
  await expect
    .poll(() =>
      heliumNode
        .locator(".component-symbol-canvas .component-symbol-svg")
        .getAttribute("viewBox"),
    )
    .toBe(preview!.viewBox);
  await expect(page.locator("body > .component-drag-preview")).toHaveCount(0);
});