import { cleanup, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, expect, it, vi } from "vitest";
import "@/test/radix-select-test-setup";
import { PresentationViewHistory } from "../utils/presentation-view-history";
import { PresentationHistorySwitcher } from "./presentation-history-switcher";

afterEach(cleanup);

function entries() {
  const history = new PresentationViewHistory();
  history.record("压力曲线", "preview", null);
  history.update({ ...history.current, records: [{ element_id: "V1" }] });
  history.record("阀门列表", "preview", null);
  return history.entries;
}

it("merges the latest result into current and skips its duplicate when going back", async () => {
  const user = userEvent.setup();
  const history = entries();
  const onSelect = vi.fn();
  render(
    <PresentationHistorySwitcher
      entries={history}
      currentEntryId={history[1].id}
      selectedId={null}
      onSelect={onSelect}
    />
  );
  await user.click(screen.getByRole("combobox", { name: "切换展示动作" }));
  expect(screen.getAllByRole("option")).toHaveLength(2);
  expect(screen.getByRole("option", { name: /当前（最新）.*阀门列表/ })).toBeVisible();
  expect(screen.getByRole("option", { name: /1\. 压力曲线/ })).toBeVisible();
  expect(screen.queryByRole("option", { name: /^2\. 阀门列表/ })).not.toBeInTheDocument();
  await user.keyboard("{Escape}");
  await user.click(screen.getByRole("button", { name: "上一个动作" }));
  expect(onSelect).toHaveBeenCalledWith(history[0].id);
});

it("keeps the final historical result selectable when current has been cleared", async () => {
  const user = userEvent.setup();
  const history = entries();
  const onSelect = vi.fn();
  render(
    <PresentationHistorySwitcher
      entries={history}
      currentEntryId={null}
      selectedId={null}
      onSelect={onSelect}
    />
  );
  await user.click(screen.getByRole("combobox", { name: "切换展示动作" }));
  expect(screen.getAllByRole("option").map((option) => option.textContent)).toEqual([
    "当前（最新） · 2 个动作",
    "2. 阀门列表 · 完成",
    "1. 压力曲线 · 完成"
  ]);
  await user.click(screen.getByRole("option", { name: /^2\. 阀门列表/ }));
  expect(onSelect).toHaveBeenCalledWith(history[1].id);
});


it("offers playback, speed, progress and keeps the latest snapshot pinned until returning to current", async () => {
  const user = userEvent.setup();
  const history = entries();
  const onSelect = vi.fn();
  const playback = { playing: true, speed: 1, onToggle: vi.fn(), onSpeedChange: vi.fn(), onSeek: vi.fn() };
  render(<PresentationHistorySwitcher entries={history} currentEntryId={history[1].id} selectedId={history[1].id} onSelect={onSelect} playback={playback} />);
  expect(screen.getByLabelText("历史播放位置")).toHaveTextContent("2/2");
  await user.click(screen.getByRole("button", { name: "暂停历史播放" }));
  expect(playback.onToggle).toHaveBeenCalledTimes(1);
  const progress = screen.getByRole("slider", { name: "历史播放进度" });
  progress.focus();
  await user.keyboard("{ArrowLeft}");
  // jsdom does not implement the browser's native range keyboard default.
  await user.click(screen.getByRole("combobox", { name: "历史播放速度" }));
  await user.click(screen.getByRole("option", { name: /^2×$/ }));
  expect(playback.onSpeedChange).toHaveBeenCalledWith(2);
  await user.click(screen.getByRole("button", { name: "回到当前" }));
  expect(onSelect).toHaveBeenCalledWith(null);
});