// @vitest-environment jsdom
//
// The owner's pick "A": TMDB enriches shows as it does movies — studios, countries, keywords, key
// crew — and the show page showed none of it, beside a hero whose text stopped at ~55% of the panel. Its
// hero now has the movie page's second column (facts over crew) and the keywords under the text.
import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

vi.mock("react-i18next", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-i18next")>();
  return {
    ...actual,
    useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
  };
});

const detail = {
  show: {
    id: "show",
    title: "Fargo",
    summary: "Various chronicles.",
    year: 2014,
    thumb: "",
    art: "",
    content_rating: "TV-MA",
    studio: "26 Keys",
    genres: ["Crime"],
    cast: [],
    status: "new",
    episode_count: 0,
    collection_keys: [],
    tmdb: {
      keywords: ["minnesota", "winter"],
      crew: [{ name: "Noah Hawley", job: "Creator" }],
      studios: ["26 Keys Productions", "MGM Television"],
      production_countries: [{ code: "US", name: "United States" }],
      recommendations: [],
      backdrops: [],
    },
  },
  seasons: [],
  related: [],
};

vi.mock("../lib/api", () => ({
  api: {
    plexShow: () => Promise.resolve(detail),
    updatePrefs: () => Promise.resolve({}),
  },
  EMPTY_PLEX_FILTERS: {},
  plexFilterCount: () => 0,
}));

import { PlexShowView } from "./plexViews";

afterEach(cleanup);

function renderShow(onFilter = vi.fn(), onOpenPerson = vi.fn()) {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  render(
    <QueryClientProvider client={qc}>
      <PlexShowView
        showId="show"
        onBack={() => {}}
        onPlay={() => {}}
        onOpenSeason={() => {}}
        onOpenShow={() => {}}
        onPlayShow={() => {}}
        onFilter={onFilter}
        onOpenPerson={onOpenPerson}
      />
    </QueryClientProvider>,
  );
  return { onFilter, onOpenPerson };
}

describe("the show page's facts, keywords and crew", () => {
  it("shows the facts over the crew beside the text, and the keywords under it", async () => {
    const { onFilter, onOpenPerson } = renderShow();
    const aside = await screen.findByTestId("detail-aside");
    expect(aside.textContent).toContain("MGM Television");
    expect(aside.textContent).toContain("Noah Hawley");
    expect(aside.parentElement!.className).toContain("@5xl:grid-cols-");
    const main = aside.parentElement!.children[0]!;
    expect(main.contains(screen.getByTestId("detail-keywords"))).toBe(true);
    expect(main.contains(screen.getByText("Various chronicles."))).toBe(true);
    // They act as on the movie page: a keyword filters, a crew name opens the person.
    fireEvent.click(screen.getByText("minnesota"));
    expect(onFilter).toHaveBeenCalledWith({ keywords: ["minnesota"] });
    fireEvent.click(screen.getByText("Noah Hawley"));
    expect(onOpenPerson).toHaveBeenCalledWith("Noah Hawley");
  });
});