// @vitest-environment jsdom
//
// The video card's channel name was a <button>: a plain click opened the channel in-app, but
// middle-click and Ctrl/Cmd-click did nothing — while the title right above it, an anchor, honoured
// them. Found by the 2026-09 bug-hunt deep-review, when the player's channel name had just become a
// real link and the card's had not. (The link's own gesture rules are pinned in
// ChannelNameLink.dom.test.tsx; this pins that the CARD uses it.)
import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
import { render, screen, cleanup } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const h = vi.hoisted(() => ({ openChannel: vi.fn() }));
vi.mock("react-i18next", async (importOriginal) => ({
  ...(await importOriginal<typeof import("react-i18next")>()),
  useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
}));
vi.mock("./NavigationProvider", () => ({
  useNavigationActions: () => ({ openChannel: h.openChannel }),
}));

import VideoCard from "./VideoCard";
import type { Video } 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;
});

const CH = "UCsXVk37bltHxD1rDPwtNM8Q";
const video = {
  id: "abc123",
  title: "Cicada 3301",
  channel_id: CH,
  channel_title: "LEMMiNO",
  status: "new",
  saved: false,
  position_seconds: 0,
  duration_seconds: 1200,
  published_at: "2026-01-01T00:00:00Z",
  watch_url: "https://www.youtube.com/watch?v=abc123",
  thumbnail_url: "",
} as unknown as Video;

beforeEach(() => {
  cleanup();
  h.openChannel.mockClear();
  window.history.replaceState({}, "", "/?page=feed");
});

describe("VideoCard — the channel name", () => {
  it("is a real link to the channel, and a plain click still opens it in-app", () => {
    render(
      <QueryClientProvider client={new QueryClient()}>
        <VideoCard
          video={video}
          view="cards"
          width={320}
          onState={() => {}}
          onToggleSave={() => {}}
        />
      </QueryClientProvider>,
    );
    const link = screen.getByTestId("video-card-channel");
    expect(link.tagName).toBe("A");
    expect(link.getAttribute("href")).toBe(`/?page=feed&chan=${CH}`);
    link.click();
    expect(h.openChannel).toHaveBeenCalledWith(CH, "LEMMiNO");
  });
});