// @vitest-environment jsdom
//
// The channel banner is served from Google's image CDN (yt3.googleusercontent.com), which refuses a
// request that carries a Referer from our origin — every time, not only under load (measured
// 2026-09-26: 6/6 refused with the page's referrer or its bare origin, 8/8 served without one). So the
// banner <img> must send none, as ui/Avatar does for the same CDN; with a referrer the banner never
// showed and the page fell back to the blank bar.
import type { ReactNode } from "react";
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
import { render, cleanup, waitFor } 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("../../features/navigation/navigationContext", () => ({
  useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
}));
vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
vi.mock("./feedFiltersContext", () => ({
  useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
}));
vi.mock("./Feed", () => ({ default: () => null }));
vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
// The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
  ...(await importOriginal<typeof import("../../components/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 = "UCqoAEDirJPjEUFcF2FklnBA";

describe("ChannelPage — the banner", () => {
  it("is requested without a referrer, which Google's image CDN refuses", async () => {
    vi.spyOn(api, "channelDetail").mockResolvedValue({
      id: CH,
      title: "StarTalk",
      banner_url: "https://yt3.googleusercontent.com/banner",
      subscribed: true,
      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 { container } = render(
      <QueryClientProvider
        client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}
      >
        <ChannelPage
          channelId={CH}
          initialName="StarTalk"
          me={{ id: 1, can_write: true } as unknown as Me}
          view="cards"
          setView={() => {}}
          onShowInFeed={() => {}}
        />
      </QueryClientProvider>,
    );
    const banner = await waitFor(() => {
      const img = container.querySelector<HTMLImageElement>('img[src^="https://yt3."]');
      expect(img).not.toBeNull();
      return img!;
    });
    expect(banner.getAttribute("referrerpolicy")).toBe("no-referrer");
  });
});