import { act, cleanup, render, screen } from "@testing-library/react";
import { afterEach, beforeEach, expect, it, vi } from "vitest";
import { DeferredRender } from "./deferred-render";

let sequence = 0;
const frames = new Map<number, FrameRequestCallback>();
const tick = () => act(() => {
  const callbacks = [...frames.values()];
  frames.clear();
  callbacks.forEach((callback) => callback(0));
});

beforeEach(() => {
  vi.stubGlobal("IntersectionObserver", undefined);
  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => { frames.set(++sequence, callback); return sequence; });
  vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
});
afterEach(() => { cleanup(); frames.clear(); vi.unstubAllGlobals(); });

it("paints loading placeholders before mounting visible drawings one at a time", () => {
  render(<><DeferredRender label="正在加载甲图"><p>甲图已就绪</p></DeferredRender>
    <DeferredRender label="正在加载乙图"><p>乙图已就绪</p></DeferredRender></>);
  expect(screen.getByRole("status", { name: "正在加载甲图" })).toHaveAttribute("aria-busy", "true");
  tick();
  expect(screen.queryByText("甲图已就绪")).toBeNull();
  tick();
  expect(screen.getByText("甲图已就绪")).toBeInTheDocument();
  expect(screen.queryByText("乙图已就绪")).toBeNull();
  tick(); tick();
  expect(screen.getByText("乙图已就绪")).toBeInTheDocument();
  expect(screen.queryByRole("status")).toBeNull();
});

it("cancels queued drawings when the task is removed", () => {
  const Drawing = vi.fn(() => <p>已过期图表</p>);
  const { unmount } = render(<DeferredRender label="加载中"><Drawing /></DeferredRender>);
  tick();
  unmount();
  expect(frames.size).toBe(0);
  tick(); tick();
  expect(Drawing).not.toHaveBeenCalled();
  expect(frames.size).toBe(0);
});

it("defers offscreen content until its own viewport intersection", () => {
  let intersect!: IntersectionObserverCallback;
  const disconnect = vi.fn();
  vi.stubGlobal("IntersectionObserver", class {
    constructor(callback: IntersectionObserverCallback) { intersect = callback; }
    observe() {}
    disconnect = disconnect;
  });
  render(<DeferredRender label="等待显示"><p>可见图表</p></DeferredRender>);
  expect(frames.size).toBe(0);
  act(() => intersect([{ isIntersecting: false }] as IntersectionObserverEntry[], {} as IntersectionObserver));
  expect(frames.size).toBe(0);
  act(() => intersect([{ isIntersecting: true }] as IntersectionObserverEntry[], {} as IntersectionObserver));
  tick(); tick();
  expect(screen.getByText("可见图表")).toBeInTheDocument();
  expect(disconnect).toHaveBeenCalled();
});