import { afterEach, describe, expect, it, vi } from 'vitest';
import { timelineFrame } from '../src/player/timeline';
import { mountPlayerSeekPreview } from '../src/player/controls';
import { createSeekPreview, PRELOAD_PAGES, preloadPages, previewCenter, sheetTile } from '../src/player/seek-preview';
import type { VjsPlayer } from '../src/player/types';

afterEach(() => { vi.unstubAllGlobals(); document.body.replaceChildren() });

const settle = () => new Promise(resolve => setTimeout(resolve, 0));

function stubTimeline(payload: object) {
  const fetch = vi.fn(async (_url: string) => new Response(JSON.stringify(payload), { headers: { 'Content-Type': 'application/json' } }));
  vi.stubGlobal('fetch', fetch);
  return fetch;
}

/** 进度条宿主：宽 `track`，预览实测宽 `width`。 */
function seekHost(track: number, width = 0) {
  const host = document.createElement('div');
  document.body.append(host);
  host.getBoundingClientRect = () => ({ width: track, left: 0 } as DOMRect);
  const measured = () => {
    const preview = host.querySelector<HTMLElement>('[data-player-seek-preview]')!;
    Object.defineProperty(preview, 'offsetWidth', { configurable: true, get: () => width });
    return preview;
  };
  return { host, measured };
}

function stubImages() {
  const loaded: string[] = [];
  vi.stubGlobal('Image', class { decoding = ''; dataset: Record<string, string> = {}; set src(value: string) { loaded.push(value) } });
  return loaded;
}

function loadPreviewImage(host: ParentNode) {
  const image = host.querySelector('img')!;
  Object.defineProperty(image, 'complete', { configurable: true, value: true });
  Object.defineProperty(image, 'naturalWidth', { configurable: true, value: 320 });
  Object.defineProperty(image, 'naturalHeight', { configurable: true, value: 180 });
  image.dispatchEvent(new Event('load'));
}

describe('时间到雪碧图坐标', () => {
  it('固定间隔按页与格换算，末张按自身帧数算行数', () => {
    const sheet = { frames: 250, interval: 10, columns: 10, rows: 10 };
    expect(sheetTile(0, sheet)).toEqual({ page: 0, slot: 0, columns: 10, rows: 10 });
    expect(sheetTile(1055, sheet)).toEqual({ page: 1, slot: 5, columns: 10, rows: 10 });
    expect(sheetTile(2499, sheet)).toEqual({ page: 2, slot: 49, columns: 10, rows: 5 });
    expect(sheetTile(99999, sheet)).toEqual({ page: 2, slot: 49, columns: 10, rows: 5 });
  });
  it('非 10×10 的拼图按自身列数换算，未覆盖的时刻没有格子', () => {
    expect(sheetTile(65, { frames: 30, interval: 5, columns: 5, rows: 4 })).toEqual({ page: 0, slot: 13, columns: 5, rows: 4 });
    expect(sheetTile(100, { frames: 30, interval: 5, columns: 5, rows: 4 })).toEqual({ page: 1, slot: 0, columns: 5, rows: 2 });
    expect(sheetTile(5, { frames: 1, interval: 0, cues: [[0, 3]] })).toBeNull();
  });
  it('只预热页数可数的自有接触印相', () => {
    expect(preloadPages({ frames: 250, interval: 10 })).toBe(3);
    expect(preloadPages({ frames: 2, interval: 0, cues: [[0, 3], [3, 6]] })).toBe(0);
    expect(preloadPages({ source: 'jellyfin', frames: 250, interval: 10 })).toBe(0);
    expect(preloadPages({ frames: 100 * PRELOAD_PAGES + 1, interval: 10 })).toBe(0);
    expect(preloadPages(null)).toBe(0);
  });
});

describe('边缘对齐', () => {
  it('中心点跟着指针，两端整块留在进度条里', () => {
    expect(previewCenter(300, 600, 240)).toBe(300);
    expect(previewCenter(10, 600, 240)).toBe(120);
    expect(previewCenter(595, 600, 240)).toBe(480);
    expect(previewCenter(30, 200, 240)).toBe(100);
  });
  it('进度条贴着视口边时两端各让出边距', () => {
    expect(previewCenter(10, 600, 240, 12)).toBe(132);
    expect(previewCenter(595, 600, 240, 12)).toBe(468);
    expect(previewCenter(30, 250, 240, 12)).toBe(125);
  });
  it('按显出来之后的实测宽度夹边，不按估算宽度', async () => {
    stubTimeline({});
    const { host, measured } = seekHost(600, 244);
    const preview = createSeekPreview(host, { id: 7, width: 1920, height: 1080, has_thumb: true });
    const element = measured();
    preview.show(0, 100);
    expect(element.hidden).toBe(true);
    loadPreviewImage(host);
    expect(element.style.left).toBe('122px');
    preview.show(1, 100);
    expect(element.style.left).toBe('478px');
    preview.show(.5, 100);
    expect(element.style.left).toBe('300px');
  });
});

describe('无时间轴图降级', () => {
  it('没有索引也没有快照时收起整块预览，不取任何图', async () => {
    const fetch = stubTimeline({});
    const { host, measured } = seekHost(900, 160);
    const preview = createSeekPreview(host, { id: 7, has_thumb: false });
    const element = measured();
    await settle();
    preview.show(.5, 600);
    expect(host.querySelector('img')!.hasAttribute('src')).toBe(false);
    expect(host.querySelector<HTMLElement>('.vjs-peach-seek-frame')!.hidden).toBe(true);
    expect(element.hidden).toBe(true);
    expect(element.querySelector('span')!.textContent).toBe('5:00');
    expect(fetch.mock.calls.map(([url]) => url)).toEqual(['/api/timeline?id=7']);
  });
  it('已有九宫格成功后显示，取不到则收起且不再请求', async () => {
    const fetch = stubTimeline({});
    const { host, measured } = seekHost(900, 160);
    const preview = createSeekPreview(host, { id: 7, has_thumb: true });
    const element = measured();
    await settle();
    expect(fetch).toHaveBeenCalledTimes(1);
    preview.show(.05, 600);
    const frame = host.querySelector<HTMLElement>('.vjs-peach-seek-frame')!, image = host.querySelector('img')!;
    expect(image.getAttribute('src')).toBe('/poster?id=7&c=0');
    expect(element.hidden).toBe(true);
    loadPreviewImage(host);
    expect(element.hidden).toBe(false);
    preview.hide();
    loadPreviewImage(host);
    expect(element.hidden).toBe(true);
    preview.show(.05, 600);
    image.dispatchEvent(new Event('error'));
    preview.show(.95, 600);
    expect(image.getAttribute('src')).toBe('/poster?id=7&c=0');
    expect(frame.hidden).toBe(true);
    expect(element.hidden).toBe(true);
    expect(element.querySelector('span')!.textContent).toBe('9:30');
    expect(fetch).toHaveBeenCalledTimes(1);
  });
  it('关注条目不取图、不查索引，也不显示空预览', () => {
    const fetch = stubTimeline({});
    const { host } = seekHost(600);
    createSeekPreview(host, null).show(.5, 120);
    expect(host.querySelector('.vjs-peach-seek-frame')).toBeNull();
    expect(host.querySelector<HTMLElement>('[data-player-seek-preview]')!.hidden).toBe(true);
    expect(host.querySelector('[data-player-seek-preview] span')!.textContent).toBe('1:00');
    expect(fetch).not.toHaveBeenCalled();
  });
});

describe('雪碧图预加载', () => {
  it('碰到进度条才预热，每页只取一次', async () => {
    stubTimeline({ source: 'peach', frames: 250, interval: 10, columns: 10, rows: 10 });
    const loaded = stubImages();
    const { host } = seekHost(600);
    const preview = createSeekPreview(host, { id: 9 });
    await settle();
    expect(loaded).toEqual([]);
    preview.prime(); preview.prime();
    preview.show(.2, 2500); preview.show(.8, 2500);
    expect(loaded).toEqual(['/timeline?id=9&s=0&source=peach', '/timeline?id=9&s=1&source=peach', '/timeline?id=9&s=2&source=peach']);
  });
  it('外部逐帧来源不预热，自有缓存作为兜底照样预热', async () => {
    stubTimeline({ source: 'bif', frames: 3, interval: 0, cues: [[0, 10], [10, 20], [20, 30]],
      fallback: { source: 'peach', frames: 3, interval: 10, columns: 10, rows: 10 } });
    const loaded = stubImages();
    const { host } = seekHost(600);
    const preview = createSeekPreview(host, { id: 9 });
    preview.prime();
    await settle();
    expect(loaded).toEqual(['/timeline?id=9&s=0&source=peach']);
  });
});

describe('Video.js 进度条接线', () => {
  function mounted() {
    stubTimeline({});
    const root = document.createElement('div');
    root.innerHTML = '<div class="vjs-control-bar"><div class="vjs-progress-control"></div></div>';
    document.body.append(root);
    const progress = root.querySelector<HTMLElement>('.vjs-progress-control')!;
    progress.getBoundingClientRect = () => ({ width: 300, left: 0 } as DOMRect);
    const player = { el: () => root, duration: () => 30, on: () => {} } as unknown as VjsPlayer;
    mountPlayerSeekPreview(player, { id: 42, duration: 30, has_thumb: true });
    const preview = progress.querySelector<HTMLElement>('[data-player-seek-preview]')!;
    const fire = (type: string, x: number, pointerType: string) => {
      progress.dispatchEvent(new PointerEvent(type, { clientX: x, pointerType, bubbles: true }));
      loadPreviewImage(progress);
    };
    return { preview, fire };
  }
  it('触屏按住拖动时显示，松手收起', () => {
    const { preview, fire } = mounted();
    fire('pointerdown', 150, 'touch');
    expect(preview.hidden).toBe(false);
    expect(preview.querySelector('span')!.textContent).toBe('0:15');
    fire('pointermove', 270, 'touch');
    expect(preview.querySelector('span')!.textContent).toBe('0:27');
    fire('pointerup', 270, 'touch');
    expect(preview.hidden).toBe(true);
  });
  it('鼠标松开仍在悬停，预览留着；离开进度条才收起', () => {
    const { preview, fire } = mounted();
    fire('pointermove', 30, 'mouse');
    fire('pointerup', 30, 'mouse');
    expect(preview.hidden).toBe(false);
    fire('pointerleave', 30, 'mouse');
    expect(preview.hidden).toBe(true);
  });
});

describe('索引晚于悬停到达', () => {
  it('指针停着不动也换成拼图那一格，图到了就显示；已离开则不显示', async () => {
    stubTimeline({ source: 'peach', frames: 20, interval: 1, columns: 10, rows: 10 });
    const { host, measured } = seekHost(900, 160);
    const preview = createSeekPreview(host, { id: 7, width: 1920, height: 1080, has_thumb: false });
    const element = measured(), image = host.querySelector('img')!;
    preview.show(.65, 20);
    expect(image.hasAttribute('src')).toBe(false);
    expect(element.hidden).toBe(true);
    await settle();
    expect(image.getAttribute('src')).toBe('/timeline?id=7&s=0&source=peach');
    expect([image.style.left, image.style.top]).toEqual(['-300%', '-100%']);
    loadPreviewImage(host);
    expect(element.hidden).toBe(false);

    stubTimeline({ source: 'peach', frames: 20, interval: 1, columns: 10, rows: 10 });
    const late = seekHost(900, 160);
    const left = createSeekPreview(late.host, { id: 8, has_thumb: false });
    const leftElement = late.measured();
    left.show(.65, 20);
    left.hide();
    await settle();
    expect(late.host.querySelector('img')!.hasAttribute('src')).toBe(false);
    expect(leftElement.hidden).toBe(true);
  });
});

describe('时间轴索引', () => {
  it('按预览自身的非均匀时间选择帧，并保留未覆盖区间', () => {
    const source = { frames: 3, interval: 0, cues: [[0, 3.5], [3.5, 7], [10, 15]] as [number, number][] };
    expect([0, 3.4, 3.5, 7, 9, 10, 15, 16].map(time => timelineFrame(time, source)))
      .toEqual([0, 0, 1, null, null, 2, 2, null]);
  });
  it('按固定间隔选择接触印相中的帧', () => {
    const source = { frames: 120, interval: 10 };
    expect([0, 9, 10, 999, 1000, 1500].map(time => timelineFrame(time, source)))
      .toEqual([0, 0, 1, 99, 100, 119]);
  });
  it('无效索引和时刻返回空值', () => {
    expect(timelineFrame(-1, { frames: 2, interval: 10 })).toBeNull();
    expect(timelineFrame(Infinity, { frames: 2, interval: 10 })).toBeNull();
    expect(timelineFrame(0, { frames: 0, interval: 10 })).toBeNull();
    expect(timelineFrame(0, { frames: 2, interval: 0 })).toBeNull();
    expect(timelineFrame(1, { frames: 1, interval: 0, cues: [[2, 4]] })).toBeNull();
  });
  it('预览控件使用准确来源，在空隙与图片失败时读取已有缓存', async () => {
    vi.stubGlobal('fetch', vi.fn(async () => new Response(JSON.stringify({
      source: 'webvtt', frames: 2, interval: 0, columns: 1, rows: 1, cues: [[0, 3], [8, 12]],
      fallback: { source: 'peach', frames: 3, interval: 10, columns: 10, rows: 10 },
    }), { headers: { 'Content-Type': 'application/json' } })));
    const root = document.createElement('div');
    root.innerHTML = '<div class="vjs-control-bar"><div class="vjs-progress-control"></div></div>';
    document.body.append(root);
    const progress = root.querySelector<HTMLElement>('.vjs-progress-control')!;
    progress.getBoundingClientRect = () => ({ width: 300, left: 0 } as DOMRect);
    const player = { el: () => root, duration: () => 30, on: () => {} } as unknown as VjsPlayer;
    mountPlayerSeekPreview(player, { id: 42, duration: 30, width: 1920, height: 1080, has_thumb: true });
    await new Promise(resolve => setTimeout(resolve, 0));
    const image = root.querySelector('img')!;
    const move = (x: number) => progress.dispatchEvent(new PointerEvent('pointermove', { clientX: x, pointerType: 'mouse' }));
    move(90);
    expect(image.getAttribute('src')).toBe('/timeline?id=42&s=1&source=webvtt');
    expect(image.style.width).toBe('100%');
    move(200);
    expect(image.getAttribute('src')).toBe('/timeline?id=42&s=0&source=peach');
    expect(image.style.left).toBe('-200%');
    move(90);
    image.dispatchEvent(new Event('error'));
    move(90);
    expect(image.getAttribute('src')).toBe('/timeline?id=42&s=0&source=peach');
    image.dispatchEvent(new Event('error'));
    move(90);
    expect(image.getAttribute('src')).toBe('/poster?id=42&c=2');
  });
});