import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { ThemeProvider } from "@/components/theme";
import CbzReader from "@/readers/CbzReader";

const okResponse = (body: unknown) =>
  new Response(JSON.stringify(body), { status: 200, headers: { "Content-Type": "application/json" } });

beforeEach(() => {
  localStorage.clear();
  vi.restoreAllMocks?.();
  // 全局网络打桩:页数接口 + 图片对象 URL + 进度上报(页图数据解不真实也无需:PageImg 有占位态)
  vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
    const url = String(input instanceof Request ? input.url : input);
    if (url.includes("/pages")) return okResponse({ count: 3, chapters: null });
    if (url.includes("/progress")) return okResponse(null);
    return new Response("", { status: 200 }); // 页图 blob 等
  });
  Object.defineProperty(URL, "createObjectURL", { value: () => "blob:x", configurable: true });
});

const book = {
  id: 1,
  library_id: 1,
  path: "p",
  title: "t",
  format: "cbz",
  state: "ok",
  percent: 0,
  pages_url: "/pages",
  page_url_fmt: "/page/{}",
} as never;

describe("CbzReader 页模式设置区", () => {
  it("切「单页」后位置读数 1/3,切「双页」首页不变,切回「长卷」按钮仍可用", async () => {
    render(
      <ThemeProvider>
        <QueryClientProvider client={new QueryClient()}>
          <CbzReader book={book} chrome={{ on: true, toggle: () => {}, show: () => {} }} />
        </QueryClientProvider>
      </ThemeProvider>,
    );
    await screen.findByLabelText("漫画阅读器,点按左右两侧翻屏,点按中间显示工具栏");
    fireEvent.click(await screen.findByRole("button", { name: "更多阅读设置" }));
    fireEvent.click(await screen.findByRole("button", { name: "单页" }));
    expect(screen.getByText(/^1\/3 · /)).toBeInTheDocument();
    fireEvent.click(await screen.findByRole("button", { name: "双页" }));
    expect(screen.getByText(/^1\/3 · /)).toBeInTheDocument();
    // 模式按钮组仍在设置面板内(长卷收进同一展开区)
    expect(screen.getByRole("button", { name: "长卷" })).toBeInTheDocument();
  });
});