// @vitest-environment jsdom
//
// "Reset — clear watch progress/status" on a half-watched video. The optimistic layer overrode only
// the STATUS, so the card kept its resume position — its progress bar and its Continue button — until
// the next refetch (found in the E28 S3e1 UAT). The grid is replaced by a list that shows what Feed
// hands it: each video's position, and a button that fires the reset.
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
import { render, screen, fireEvent, waitFor, cleanup } 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("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
vi.mock("./VirtualFeed", () => ({
  default: ({
    items,
    onResetState,
  }: {
    items: { id: string; position_seconds: number }[];
    onResetState: (id: string) => void;
  }) => (
    <ol aria-label="results">
      {items.map((v) => (
        <li key={v.id}>
          {v.id}@{v.position_seconds}
          <button onClick={() => onResetState(v.id)}>reset {v.id}</button>
        </li>
      ))}
    </ol>
  ),
}));

import Feed from "./Feed";
import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
import { qk } from "../lib/queryKeys";

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 FILTERS: FeedFilters = {
  tags: [],
  tagModes: DEFAULT_TAG_MODES,
  channelIds: [],
  q: "",
  sort: "newest",
  scope: "my",
  includeNormal: true,
  includeShorts: false,
  includeLive: false,
  show: "unwatched",
};

const halfWatched = {
  id: "v1",
  title: "v1",
  channel_id: "UCx",
  channel_title: "Channel",
  status: "new",
  position_seconds: 95,
  duration_seconds: 600,
  published_at: "2026-01-01T00:00:00Z",
  watch_url: "https://www.youtube.com/watch?v=v1",
} as unknown as Video;

describe("Feed — resetting a half-watched video", () => {
  it("clears its resume position at once, not only its status", async () => {
    vi.spyOn(api, "feed").mockResolvedValue({ items: [halfWatched], next_cursor: null } as never);
    vi.spyOn(api, "feedSummary").mockResolvedValue({ count: 1, facets: {} } as never);
    // Never settles: what the card shows before the server answers is the optimistic layer alone.
    vi.spyOn(api, "clearState").mockReturnValue(new Promise(() => {}) as never);
    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
    qc.setQueryData(qk.me(), { id: 1, can_write: true, prefs: {} });
    render(
      <QueryClientProvider client={qc}>
        <Feed
          filters={FILTERS}
          setFilters={() => {}}
          view="cards"
          setView={() => {}}
          canRead
          ytSearch=""
          onYtSearch={() => {}}
          onExitYtSearch={() => {}}
        />
      </QueryClientProvider>,
    );
    await waitFor(() => expect(screen.getByText("v1@95")).toBeTruthy());
    fireEvent.click(screen.getByText("reset v1"));
    await waitFor(() => expect(screen.getByText("v1@0")).toBeTruthy());
  });
});