import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { BoardViewport } from "../../src/components/BoardViewport";
import { BOARD_SCALE_STORAGE_KEY } from "../../src/state/uiPreferences";

describe("BoardViewport", () => {
  beforeEach(() => localStorage.clear());

  it("zooms, fits and restores the persisted scale", async () => {
    const user = userEvent.setup();
    const { container, unmount } = render(
      <BoardViewport>
        <div>Board</div>
      </BoardViewport>,
    );

    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
    expect(container.querySelector(".board-viewport")).not.toHaveClass(
      "is-zoomed-in",
    );
    await user.click(screen.getByRole("button", { name: "Zoom board out" }));
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("75%");
    expect(container.querySelector(".board-viewport__canvas")).toHaveStyle({
      width: "75%",
      maxWidth: "36rem",
    });
    expect(container.querySelector(".board-viewport")).not.toHaveClass(
      "is-zoomed-in",
    );
    await user.click(screen.getByRole("button", { name: "Zoom board in" }));
    await user.click(screen.getByRole("button", { name: "Zoom board in" }));
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
    expect(container.querySelector(".board-viewport")).toHaveClass(
      "is-zoomed-in",
    );
    expect(localStorage.getItem(BOARD_SCALE_STORAGE_KEY)).toBe("1.25");
    unmount();

    const restored = render(
      <BoardViewport>
        <div>Board</div>
      </BoardViewport>,
    );
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
    await user.click(screen.getByRole("button", { name: "Fit board" }));
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
    expect(restored.container.querySelector(".board-viewport")).not.toHaveClass(
      "is-zoomed-in",
    );
  });

  it("offers explicit pan mode and board-scoped zoom shortcuts", async () => {
    const user = userEvent.setup();
    const onCellKeyDown = vi.fn();
    render(
      <BoardViewport>
        <button type="button" onKeyDown={onCellKeyDown}>
          Cell
        </button>
      </BoardViewport>,
    );

    const pan = screen.getByRole("button", { name: "Pan board" });
    expect(pan).toHaveAttribute("aria-pressed", "false");
    await user.click(pan);
    expect(
      screen.getByRole("button", { name: "Stop panning" }),
    ).toHaveAttribute("aria-pressed", "true");
    expect(
      screen.getByRole("status", {
        name: "",
      }),
    ).toHaveTextContent(
      "Pan mode: drag the board to move it. Cell taps are paused.",
    );
    expect(screen.getByLabelText(/pan mode is on/iu)).toBeInTheDocument();

    fireEvent.keyDown(screen.getByRole("button", { name: "Cell" }), {
      key: "+",
      ctrlKey: true,
    });
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
    fireEvent.keyDown(screen.getByRole("button", { name: "Cell" }), {
      key: "0",
      ctrlKey: true,
    });
    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
    expect(onCellKeyDown).not.toHaveBeenCalled();
  });
});