import { expect, test } from "@playwright/test";
import path from "node:path";
import { readFile } from "node:fs/promises";

test.beforeEach(async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: "MAP", exact: true }).click();
});

test("assign codes and rename referenced layers safely", async ({ page }) => {
  await page.getByTestId("map-add-layer").click();
  await expect(page.getByRole("alert")).toContainText("レイヤー名を入力してください");
  await page.getByLabel("追加するレイヤー名").fill("Base");
  await page.getByTestId("map-add-layer").click();
  await expect(page.getByRole("alert")).toContainText("already exists");

  const keys = page.locator('[data-testid="keyboard-view"] [data-key-id]');
  const firstId = await keys.nth(0).getAttribute("data-key-id");
  const secondId = await keys.nth(1).getAttribute("data-key-id");
  await keys.nth(0).click();
  await page.getByLabel("キーコード").fill("KC_A");
  await page.getByRole("button", { name: "割り当て", exact: true }).click();
  await expect(page.locator(`[data-key-id="${firstId}"] text`)).toContainText("KC_A");

  await page.getByLabel("追加するレイヤー名").fill("Nav");
  await page.getByTestId("map-add-layer").click();
  await expect(page.getByRole("tab", { name: "Nav" })).toHaveAttribute("aria-selected", "true");
  await keys.nth(1).click();
  await page.getByLabel("キーコード").fill("MO(Nav)");
  await page.getByRole("button", { name: "割り当て", exact: true }).click();
  await expect(page.locator(`[data-key-id="${secondId}"] text`)).toContainText("MO(Nav)");

  await page.getByLabel("新しい名前").fill("Navigation");
  await page.getByTestId("map-rename-layer").click();
  await expect(page.locator(`[data-key-id="${secondId}"] text`)).toContainText("MO(Navigation)");
  await page.getByTestId("map-delete-layer").click();
  await expect(page.getByRole("alert")).toContainText("referenced");
});

test("assignment click creates one undo step and unknown existing codes stay read-only", async ({ page }) => {
  const key = page.locator('[data-testid="keyboard-view"] [data-key-id]').first();
  const id = await key.getAttribute("data-key-id");
  await key.click();
  await page.getByLabel("キーコード").fill("KC_A");
  await page.getByRole("button", { name: "割り当て", exact: true }).click();
  await expect(page.locator(`[data-key-id="${id}"] text`)).toContainText("KC_A");
  await page.getByRole("button", { name: "Undo" }).click();
  await expect(page.locator(`[data-key-id="${id}"] text`)).not.toContainText("KC_A");

  const [download] = await Promise.all([
    page.waitForEvent("download"),
    page.getByRole("button", { name: "プロジェクトを保存" }).click(),
  ]);
  const filePath = path.join(test.info().outputDir, download.suggestedFilename());
  await download.saveAs(filePath);
  const file = await readFile(filePath, "utf8");
  const source = JSON.parse(file);
  source.map.layers[0].keymap = [{ keyId: id, keycode: "KC_UNKNOWN_VENDOR_CODE" }];
  const chooser = page.waitForEvent("filechooser");
  await page.getByRole("button", { name: "プロジェクトを開く" }).click();
  await (
    await chooser
  ).setFiles({
    name: "unknown.bkle.json",
    mimeType: "application/json",
    buffer: Buffer.from(JSON.stringify(source)),
  });
  await page.getByRole("button", { name: "MAP", exact: true }).click();
  await page.locator(`[data-testid="keyboard-view"] [data-key-id="${id}"]`).click();
  await expect(page.getByRole("status")).toContainText("未知のキーコード");
  await expect(page.getByRole("button", { name: "割り当て", exact: true })).toBeDisabled();
  await expect(page.getByRole("button", { name: "割り当て解除" })).toBeDisabled();
});

test("MAP editing controls are disabled when profile unit sizes differ", async ({ page }) => {
  const [download] = await Promise.all([
    page.waitForEvent("download"),
    page.getByRole("button", { name: "プロジェクトを保存" }).click(),
  ]);
  const filePath = path.join(test.info().outputDir, download.suggestedFilename());
  await download.saveAs(filePath);
  const source = JSON.parse(await readFile(filePath, "utf8"));
  source.phy.profiles.push({
    ...source.phy.profiles[0],
    id: "alternate",
    name: "Alternate",
    unitSize: { x: 18, y: 18 },
  });
  const chooser = page.waitForEvent("filechooser");
  await page.getByRole("button", { name: "プロジェクトを開く" }).click();
  await (
    await chooser
  ).setFiles({
    name: "unit-mismatch.bkle.json",
    mimeType: "application/json",
    buffer: Buffer.from(JSON.stringify(source)),
  });
  await page.getByRole("button", { name: "MAP", exact: true }).click();
  await expect(page.getByTestId("map-add-layer")).toBeDisabled();
  await expect(page.getByTestId("map-rename-layer")).toBeDisabled();
  await expect(page.getByTestId("map-delete-layer")).toBeDisabled();
  await expect(page.getByLabel("キーコード")).toHaveCount(0);
});