// @vitest-environment jsdom
//
// The channel page's Block and Hide toggles (deep-review E11 round 2) and its Subscribe / Unsubscribe
// button (round 3: the same row, missed) while their request runs. A
// focused button that turns natively `disabled` drops the keyboard to <body> in Chrome (measured for
// ui/Button in E11 S2), so a busy toggle blocks the click with aria-disabled instead — focusable, and
// still pressed only once.
import type { ReactNode } from "react";
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
import { render, screen, fireEvent, waitFor, cleanup, act } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

vi.mock("react-i18next", async (importOriginal) => ({
  ...(await importOriginal<typeof import("react-i18next")>()),
  useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
}));
vi.mock("./NavigationProvider", () => ({
  useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
}));
vi.mock("./ConfirmProvider", () => ({ useConfirm: () => async () => true }));
vi.mock("./FeedFiltersProvider", () => ({
  useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
}));
vi.mock("./Feed", () => ({ default: () => null }));
vi.mock("./ChannelAbout", () => ({ default: () => null }));
// The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
vi.mock("./ui/PageShell", async (importOriginal) => ({
  ...(await importOriginal<typeof import("./ui/PageShell")>()),
  PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
}));

import ChannelPage from "./ChannelPage";
import { api, type ChannelDetail, type Me } from "../lib/api";

beforeAll(() => {
  class Stub {
    observe() {}
    unobserve() {}
    disconnect() {}
    takeRecords() {
      return [];
    }
  }
  globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
  globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
});
afterEach(() => {
  cleanup();
  vi.restoreAllMocks();
});

const CH = "UCsXVk37bltHxD1rDPwtNM8Q";

describe("ChannelPage — a busy toggle keeps the keyboard", () => {
  it.each([
    ["channel.block", "blockChannel", true],
    ["channel.hide", "updateChannel", true],
    ["channel.subscribe", "subscribeChannel", false],
    ["channel.subscribedState", "unsubscribeChannel", true],
  ] as const)(
    "%s stays focusable and fires once while its request runs",
    async (label, call, subscribed) => {
      vi.spyOn(api, "channelDetail").mockResolvedValue({
        id: CH,
        title: "LEMMiNO",
        subscribed,
        blocked: false,
        hidden: false,
        deep_requested: false,
        backfill_done: true,
        stored_videos: 10,
      } as unknown as ChannelDetail);
      vi.spyOn(api, "tags").mockResolvedValue([] as never);
      const pending = vi.spyOn(api, call).mockReturnValue(new Promise(() => {}) as never);
      render(
        <QueryClientProvider
          client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}
        >
          <ChannelPage
            channelId={CH}
            initialName="LEMMiNO"
            me={{ id: 1, can_write: true } as unknown as Me}
            view="cards"
            setView={() => {}}
            onShowInFeed={() => {}}
          />
        </QueryClientProvider>,
      );
      const button = await screen.findByRole("button", { name: label });
      act(() => button.focus());
      fireEvent.click(button);
      await waitFor(() => expect(button.getAttribute("aria-disabled")).toBe("true"));
      expect(button.hasAttribute("disabled")).toBe(false);
      expect(document.activeElement).toBe(button);
      fireEvent.click(button);
      expect(pending).toHaveBeenCalledTimes(1);
    },
  );
});