import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

import { startHomeMotion } from "./homeMotion";

class ElementStub extends EventTarget {
  properties = new Map<string, string>();
  style = { setProperty: (name: string, value: string) => this.properties.set(name, value) };
  children: ElementStub[] = [];
  querySelectorAll = () => this.children;
  getBoundingClientRect = vi.fn(() => ({ left: 0, top: 0, width: 400, height: 600 }));
}

let observers: ObserverStub[] = [];
class ObserverStub {
  constructor(private readonly callback: IntersectionObserverCallback) {
    observers.push(this);
  }
  observe = vi.fn();
  disconnect = vi.fn();
  report(target: ElementStub, isIntersecting: boolean) {
    this.callback(
      [{ target, isIntersecting } as unknown as IntersectionObserverEntry],
      this as unknown as IntersectionObserver,
    );
  }
}

let page = Object.assign(new EventTarget(), { visibilityState: "visible" });
let reduced = Object.assign(new EventTarget(), { matches: false });
let fine = Object.assign(new EventTarget(), { matches: true });
let frames = new Map<number, FrameRequestCallback>();
let dispose: (() => void) | undefined;

beforeEach(() => {
  observers = [];
  frames = new Map();
  page = Object.assign(new EventTarget(), { visibilityState: "visible" });
  reduced = Object.assign(new EventTarget(), { matches: false });
  fine = Object.assign(new EventTarget(), { matches: true });
  vi.stubGlobal("document", page);
  vi.stubGlobal(
    "window",
    Object.assign(new EventTarget(), {
      matchMedia: (query: string) => (query.includes("reduced-motion") ? reduced : fine),
    }),
  );
  vi.stubGlobal("IntersectionObserver", ObserverStub);
  let frameId = 0;
  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
    frames.set(++frameId, callback);
    return frameId;
  });
  vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
});

afterEach(() => {
  dispose?.();
  dispose = undefined;
  vi.unstubAllGlobals();
});

function fixture() {
  const hero = new ElementStub();
  const field = new ElementStub();
  const mark = new ElementStub();
  const otherMark = new ElementStub();
  field.children = [mark, otherMark];
  const track = new ElementStub();
  const caret = new ElementStub();
  dispose = startHomeMotion({ hero, field, tracks: [track], caret } as unknown as Parameters<
    typeof startHomeMotion
  >[0]);
  return { hero, field, mark, otherMark, track, caret, observer: observers[0]! };
}

function movePointer(hero: ElementStub, x = 400, y = 600) {
  hero.dispatchEvent(Object.assign(new Event("pointermove"), { clientX: x, clientY: y }));
}

describe("homepage motion", () => {
  it("gates each mark, marquee track, and caret and batches pointer input into one frame", () => {
    const { hero, field, mark, otherMark, track, caret, observer } = fixture();
    expect(mark.properties.get("--home-motion-state")).toBe("paused");
    expect(track.properties.get("--home-motion-state")).toBe("paused");
    observer.report(mark, true);
    observer.report(track, true);
    observer.report(caret, true);
    expect(mark.properties.get("--home-motion-state")).toBe("running");
    expect(otherMark.properties.get("--home-motion-state")).toBe("paused");
    expect(track.properties.get("--home-motion-state")).toBe("running");
    expect(caret.properties.get("--home-motion-state")).toBe("running");

    movePointer(hero, 100, 100);
    movePointer(hero);
    expect(frames.size).toBe(1);
    expect(hero.getBoundingClientRect).not.toHaveBeenCalled();
    const [id, callback] = [...frames][0]!;
    frames.delete(id);
    callback(0);
    expect(field.properties.get("--px")).toBe("18.0px");
    expect(field.properties.get("--py")).toBe("14.0px");

    movePointer(hero);
    page.visibilityState = "hidden";
    page.dispatchEvent(new Event("visibilitychange"));
    expect(frames.size).toBe(0);
    expect(field.properties.get("--px")).toBe("0px");
    expect(mark.properties.get("--home-motion-state")).toBe("paused");
    expect(track.properties.get("--home-motion-state")).toBe("paused");
    expect(caret.properties.get("--home-motion-state")).toBe("paused");
    page.visibilityState = "visible";
    page.dispatchEvent(new Event("visibilitychange"));
    reduced.matches = true;
    reduced.dispatchEvent(new Event("change"));
    movePointer(hero);
    expect(frames.size).toBe(0);
    expect(mark.properties.get("--home-motion-state")).toBe("paused");
    reduced.matches = false;
    fine.matches = false;
    reduced.dispatchEvent(new Event("change"));
    movePointer(hero);
    expect(frames.size).toBe(0);
    expect(mark.properties.get("--home-motion-state")).toBe("running");
  });

  it("cancels pending work and ignores events after cleanup", () => {
    const { hero, mark, track, observer } = fixture();
    observer.report(mark, true);
    observer.report(track, true);
    movePointer(hero);
    dispose?.();
    observer.report(mark, true);
    movePointer(hero);
    reduced.dispatchEvent(new Event("change"));
    expect(observer.disconnect).toHaveBeenCalledTimes(1);
    expect(frames.size).toBe(0);
    expect(mark.properties.get("--home-motion-state")).toBe("paused");
    expect(track.properties.get("--home-motion-state")).toBe("paused");
  });
});