import { test, expect, type Locator, type Page } from "@playwright/test";
import { copyFileSync, existsSync, readFileSync, rmSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

// ---------------------------------------------------------------------------
// Notes on a report video (lib/annotations, components/notes):
//
//   video-notes-fixture   a GENERATED manifest (`generatedBy`) with a built cut,
//                         its schedule, and one take (`alt`) with its own. WRITES
//                         its notes.json; every test starts from the fixture's
//                         manifest and no notes.
//
// What is proved: a timed note at a second of the built cut and of a take's
// preview, resolved to the entry on screen; take notes and row notes; and that
// an edit made here to a generated manifest leaves an `edit` note, coalesced,
// and gone again when the edit is put back.
// ---------------------------------------------------------------------------

const HERE = path.dirname(fileURLToPath(import.meta.url));
const DIR = path.join(HERE, "..", ".e2e-song", "reports", "video-notes-fixture");
const MANIFEST = path.join(DIR, "video.manifest.json");
const PRISTINE = path.join(DIR, "video.manifest.pristine");
const NOTES = path.join(DIR, "notes.json");
const PROJECT = "reports/video-notes-fixture";
const PAGE = `/browse/${PROJECT}`;

type Note = { id: string; status: string; author: string; text: string; anchor: Record<string, unknown>; replies: unknown[] };
const notesOnDisk = (): Note[] => (existsSync(NOTES) ? JSON.parse(readFileSync(NOTES, "utf8")).notes : []);

test.beforeAll(() => {
  if (!existsSync(PRISTINE)) copyFileSync(MANIFEST, PRISTINE);
});
test.beforeEach(() => {
  copyFileSync(PRISTINE, MANIFEST);
  rmSync(NOTES, { force: true });
  rmSync(path.join(DIR, "revisions"), { recursive: true, force: true });
});

/** Seek a <video> to `t` and wait for it to land. */
async function seek(video: Locator, t: number) {
  await video.evaluate(async (el: HTMLVideoElement, at: number) => {
    if (el.readyState < 1) await new Promise((r) => el.addEventListener("loadedmetadata", r, { once: true }));
    el.currentTime = at;
    await new Promise((r) => el.addEventListener("seeked", r, { once: true }));
  }, t);
}

async function addTimedNote(page: Page, scope: Locator, text: string, via: "button" | "key") {
  if (via === "button") await scope.locator("[data-action='mark']").click();
  else {
    await scope.locator("video").focus();
    await page.keyboard.press("n");
  }
  const input = scope.getByTestId("timed-note-input");
  await input.fill(text);
  await input.press("Enter");
}

test("the generated banner is on the project page and the clip bench", async ({ page }) => {
  await page.goto(PAGE);
  await expect(page.getByTestId("generated-banner").first()).toContainText(
    "Generated by polemics/video/make-videos.py; a rebuild of manifests overwrites edits made here.",
  );
  await page.goto(`${PAGE}/clip/n01`);
  await expect(page.getByTestId("generated-banner")).toContainText("polemics/video/make-videos.py");
});

test("a timed note on the built cut resolves to the entry on screen and its source", async ({ page }) => {
  await page.goto(PAGE);
  const video = page.getByTestId("onscreen-final-video");
  await expect(video).toBeVisible();
  const scope = page.locator("[data-timed-notes='out/video-notes-fixture.mp4']");
  await seek(video, 0.8);
  await addTimedNote(page, scope, "the claim card is late", "button");

  await expect(scope.locator("[data-mark-entry='n01']")).toContainText("the claim card is late");
  await expect(scope.locator("[data-mark-entry='n01']")).toContainText("The first claim");
  await expect(scope.locator("[data-tick]")).toHaveCount(1);

  const [n] = notesOnDisk();
  expect(n.author).toBe("operator");
  expect(n.anchor).toMatchObject({ kind: "moment", file: "out/video-notes-fixture.mp4", t: 0.8, entry: "n01" });
  expect(n.anchor.resolved).toMatchObject({ title: "The first claim", channel: "testchan", video: "vid1", sourceT: 0.3 });
  expect(String((n.anchor.resolved as { url: string }).url)).toBe("https://archive.example/?v=testchan%2Fvid1&t=0");
  expect((n.anchor.resolved as { approx?: boolean }).approx).toBeUndefined();

  // Delete it: the last note takes the file with it.
  await scope.locator(`[data-note-id='${n.id}'] [data-note-action='delete']`).click();
  await expect(scope.locator("[data-mark-at]")).toHaveCount(0);
  await expect.poll(() => existsSync(NOTES)).toBe(false);
});

test("a take: notes on the take, and a timed note on its preview with `n`", async ({ page }) => {
  await page.goto(`${PAGE}/takes`);
  const card = page.locator("[data-take='alt']");
  await seek(card.locator("video"), 1.5);
  await addTimedNote(page, card, "second claim runs long", "key");
  await expect(card.locator("[data-mark-entry='n02']")).toContainText("second claim runs long");

  await card.locator("[data-anchored-notes='alt'] [data-action='toggle-notes']").click();
  await card.getByTestId("note-input-alt").fill("prefer this one, but tighter");
  await card.getByTestId("note-input-alt").press("Enter");
  await expect(card.locator("[data-anchored-notes='alt']")).toHaveAttribute("data-open-notes", "1");

  const notes = notesOnDisk();
  expect(notes.map((n) => n.anchor.kind).sort()).toEqual(["moment", "take"]);
  expect(notes.find((n) => n.anchor.kind === "moment")!.anchor).toMatchObject({ file: "takes/alt/preview.mp4", take: "alt", entry: "n02" });
  expect(notes.find((n) => n.anchor.kind === "take")!.anchor).toEqual({ kind: "take", take: "alt" });

  // Resolve the take note; it stays, shown as resolved.
  const takeNote = notes.find((n) => n.anchor.kind === "take")!;
  await card.locator(`[data-note-id='${takeNote.id}'] [data-note-action='resolve']`).click();
  await expect(card.locator(`[data-note-id='${takeNote.id}']`)).toHaveAttribute("data-note-status", "resolved");
  await expect(card.locator("[data-anchored-notes='alt']")).toHaveAttribute("data-open-notes", "0");
  expect(notesOnDisk().find((n) => n.id === takeNote.id)!.status).toBe("resolved");
});

test("an edit to a generated manifest leaves one edit note, coalesced, gone when put back", async ({ request }) => {
  const token = async () => (await (await request.get(`/api/report/clip?project=${PROJECT}&clip=n01`)).json()).token as string;
  const put = async (title: string) =>
    request.put("/api/report/window", { data: { project: PROJECT, clip: "n01", token: await token(), title } });

  let r = await (await put("A new title")).json();
  expect(r.editNotes).toMatchObject({ generatedBy: "polemics/video/make-videos.py", added: 1 });
  r = await (await put("A newer title")).json();
  expect(r.editNotes).toMatchObject({ added: 0, updated: 1 });
  const [n] = notesOnDisk();
  expect(notesOnDisk()).toHaveLength(1);
  expect(n.anchor).toEqual({ kind: "edit", entry: "n01", field: "title", from: null, to: "A newer title" });
  expect(n.text).toContain("polemics/video/make-videos.py");

  const doc = JSON.parse(readFileSync(NOTES, "utf8"));
  expect(doc.source).toMatchObject({ manifest: expect.stringContaining("video-notes-fixture/video.manifest.json") });

  r = await (await put("")).json();
  expect(r.editNotes).toMatchObject({ deleted: 1 });
  expect(existsSync(NOTES)).toBe(false);
});

test("a row note on the project page, counted on the row and kept across a reload", async ({ page }) => {
  await page.goto(PAGE);
  const row = page.locator("[data-anchored-notes='n02']");
  await row.locator("[data-action='toggle-notes']").click();
  await page.getByTestId("note-input-n02").fill("check the date on this one");
  await page.getByTestId("note-input-n02").press("Enter");
  await expect(row).toHaveAttribute("data-open-notes", "1");
  await page.reload();
  await expect(page.locator("[data-anchored-notes='n02']")).toHaveAttribute("data-open-notes", "1");
  expect(notesOnDisk()[0].anchor).toEqual({ kind: "entry", entry: "n02" });
});