/* 视口外的卡片跳过渲染：封面和元信息区交给浏览器按视口取舍，卡片盒照常排版。
 *
 * 这几条守的是跳过渲染的副作用：屏外卡确实被跳过、没渲染过的卡按估计高度排进来之后
 * 整页高度和卡片位置不跳、Ctrl+F 仍找得到屏外卡里的字。演示库只有十来条，一屏就放完，
 * 这里把目录和女优资料页的作品响应放大成一长列，编号改成互不相同，封面请求再改写回原来那条。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';

import type { Browser, Page } from 'playwright-core';

import { launch, layout, settle, visit, VIEWPORTS, type Visit } from './harness.ts';

const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const CLONES = 150;
const CLONE_BASE = 900_000;
const PROBE_TAG = '屏外探针';

/** 卡片里各块的选择器。作品卡归目录网格，关注卡归关注页，钩子都是
 * `data-media-*`；关注卡的封面格多包一层 `[data-follow-visual]`，头像和标签是 `<span>`。 */
interface CardShape {
  card: string; pic: string; meta: string; avatar: string; text: string; tags: string;
  avatarButton: string; tagButton: string;
}
const MEDIA: CardShape = {
  card: '[data-media-card]', pic: '[data-media-pic]', meta: '[data-media-meta]', avatar: '[data-media-avatar]',
  text: '[data-media-text]', tags: '[data-media-tags]',
  avatarButton: '[data-media-meta]>button[data-media-avatar]', tagButton: '[data-media-tags]>button[data-media-tag]',
};
const FOLLOW = MEDIA;
const CATALOG_CARDS = '#grid [data-media-grid]>[data-media-card]';
const ENTITY_CARDS = '#index [data-entity-grid] [data-media-grid]>[data-media-card]';
const FOLLOW_CARDS = '[data-follow-list]>[data-follow-item]';

interface CatalogPayload {
  total: number;
  items: Array<Record<string, unknown>>;
}

/** `/api/items` 的首页换成 `CLONES` 条：每三条有一条带标签，最后一条带一枚独有的标签给查找用。
 * 带标签的那几条同时归给一位女优：演示库的作品都未归属，头像是不可聚焦的 `<span>`，归属之后
 * 才是按钮，焦点环那条用例要聚焦它。
 * 克隆源是去掉 `performer` 筛选之后的目录首页：演示库里没有人物实体，资料页按名字筛出来是空的。 */
async function serveLongItems(page: Page): Promise<void> {
  const original = new Map<number, number>();
  let baseline: CatalogPayload | undefined;
  await page.route(/\/api\/items\?/, async (route) => {
    const url = new URL(route.request().url());
    /* 首页那条竖屏带是第一页落地之后另取、再插进网格中间的附加内容，何时到只看请求快慢。它落在
       首次测量之后，整页就凭空多出一条带的高度，量的却不是估计误差。这里给它空列表，带子不插。 */
    if (url.searchParams.has('orient')) {
      await route.fulfill({ json: { items: [], total: 0, has_more: false } });
      return;
    }
    if (url.searchParams.get('offset') !== '0') {
      await route.continue();
      return;
    }
    url.searchParams.delete('performer');
    baseline ??= await (await route.fetch({ url: url.toString() })).json() as CatalogPayload;
    const source = baseline.items.filter((item) => !item.part_group && !item.edition_group);
    const items = Array.from({ length: CLONES }, (_, index) => {
      const item = structuredClone(source[index % source.length]);
      original.set(CLONE_BASE + index, Number(item.id));
      item.id = CLONE_BASE + index;
      item.tags = index === CLONES - 1 ? [PROBE_TAG] : index % 3 === 0 ? ['演示'] : [];
      if (index % 3 === 0) {
        Object.assign(item, { creator: '', performers: ['演示演员'], performer_total: 1,
          performer_entities: [{ id: 90_100, name: '演示演员', has_image: false }] });
      }
      return item;
    });
    await route.fulfill({ status: 200, contentType: 'application/json',
      body: JSON.stringify({ ...baseline, total: CLONES, has_more: false, items }) });
  });
  await page.route((url) => original.has(Number(url.searchParams.get('id'))), async (route) => {
    const url = new URL(route.request().url());
    url.searchParams.set('id', String(original.get(Number(url.searchParams.get('id')))));
    await route.continue({ url: url.toString() });
  });
}

async function openLongCatalog(browser: Browser, density = 'big'): Promise<Visit> {
  const opened = await visit(browser, '/', DESKTOP);
  const { page } = opened;
  await serveLongItems(page);
  await page.evaluate((value) => localStorage.setItem('density', value), density);
  await page.reload({ waitUntil: 'load' });
  await page.waitForFunction(([selector, count]) => document.querySelectorAll(selector).length >= count,
    [CATALOG_CARDS, CLONES] as const, { timeout: 15_000 });
  await settle(page);
  return opened;
}

/** 女优资料页的作品区放大成 `CLONES` 部：资料由这里给，字段照 `/api/entity` 的形状写。 */
async function openLongEntity(browser: Browser): Promise<Visit> {
  const name = '七沢みあ';
  const opened = await visit(browser, '/', DESKTOP);
  const { page } = opened;
  await page.route(/\/api\/entity\?/, (route) => route.fulfill({ json: {
    id: 90_001, kind: 'performer', canonical_name: name, aliases: [], display_aliases: [],
    user_aliases: [], asset_count: CLONES, tags: [], related_performers: [], links: [],
    metadata: {}, has_image: false, has_avatar: false, avatar_focus: null,
    representative_asset_id: null, entry_links: [], feed: { following: false },
  } }));
  await serveLongItems(page);
  await page.goto(new URL(`/performers/${encodeURIComponent(name)}`, page.url()).href, { waitUntil: 'load' });
  await page.waitForFunction(([selector, count]) => document.querySelectorAll(selector).length >= count,
    [ENTITY_CARDS, CLONES] as const, { timeout: 15_000 });
  await settle(page);
  return opened;
}

/** 关注页换成 `CLONES` 条合成的更新：演示库没有关注来源。字段照 `/api/follow` 的形状，
 * 不带缩略图，不发外站请求；每三条有一条带标签，屏外卡因此有高矮两种元信息区。 */
async function openLongFollow(browser: Browser): Promise<Visit> {
  const opened = await visit(browser, '/', DESKTOP);
  const { page } = opened;
  const source = { id: 1, provider: 'rule34xxx', provider_label: 'Rule34.xxx', ref: 'demo', label: '演示来源',
    author_name: '演示作者', author_key: 'name:演示作者', official_avatar_url: null, avatar_url: null,
    url: 'https://example.invalid/', semantics: 'work', enabled: true, entity_id: null, entity_name: null,
    can_backfill: false, backfill_page: 0, created_at: '2026-09-01T00:00:00Z', last_checked_at: null,
    last_status: 'ok', last_error: null, history_exhausted: true };
  const groups = Array.from({ length: CLONES }, (_, index) => ({
    release_key: `demo-${index}`, variants: [], duplicates: [], providers: ['rule34xxx'], has_wip: false,
    is_release: false, newest_at: '2026-09-01T00:00:00Z',
    primary: {
      id: CLONE_BASE + index, provider: 'rule34xxx', provider_label: 'Rule34.xxx', resource_provider: 'rule34xxx',
      source_id: 1, source_label: '演示来源', external_id: String(index), title: `演示更新 ${index}`,
      author: '演示作者', summary: null, url: `https://example.invalid/${index}`, thumb_url: null,
      published_at: '2026-09-01T00:00:00Z', published_precision: 'exact', version: null, duration: 60,
      variant_kind: 'main', variant_label: null, status: 'new', asset_id: null, media_needs_credential: false,
      media_error: null, has_media: false, media_kind: 'video', width: 1280, height: 720, media_type: null,
      playable: false, media_items: [], hidden_media: [], resource_urls: [],
      tags: index % 3 === 0 ? ['演示'] : [], detail_tags: [], tag_types: {},
    },
  }));
  const body = { ok: true, sources: [source], author_aliases: [], alias_suggestions: [], suggestions: [], groups,
    counts: { new: CLONES, seen: 0, saved: 0, ignored: 0 }, sort: 'new', dir: 'desc', seed: 1,
    facets: { authors: [], providers: [], tags: [], works: [] }, offset: 0, limit: CLONES, has_more: false,
    providers: ['rule34xxx'] };
  await page.route(/\/api\/follow(\?|$)/, (route) => route.fulfill({ status: 200, contentType: 'application/json',
    body: JSON.stringify(body) }));
  await page.goto(new URL('/follow', page.url()).toString(), { waitUntil: 'load' });
  await page.waitForFunction(([selector, count]) => document.querySelectorAll(selector).length >= count,
    [FOLLOW_CARDS, CLONES] as const, { timeout: 15_000 });
  await settle(page);
  return opened;
}

/** 一屏一屏滚到底再滚回顶，每步等两帧，让每张卡都至少渲染过一次。 */
function roundTrip(page: Page): Promise<void> {
  return page.evaluate(async () => {
    const frame = () => new Promise(requestAnimationFrame);
    for (const direction of [1, -1]) {
      for (let step = 0; step < 500; step++) {
        const y = scrollY;
        scrollBy(0, direction * innerHeight * .9);
        await frame();
        await frame();
        if (scrollY === y) break;
      }
    }
  });
}

describe('视口外的卡片', () => {
  let browser: Browser;

  before(async () => {
    browser = await launch();
  });

  after(async () => {
    await browser.close();
  });

  it('手机关注卡片按文字和标签定高，空标签区不占行', { timeout: 60_000 }, async () => {
    const opened = await openLongFollow(browser);
    try {
      await opened.page.setViewportSize({ width: 390, height: 844 });
      for (const density of ['roomy', 'dense']) {
        await opened.page.evaluate(value => { document.body.dataset.density = value }, density);
        const cards = await opened.page.locator(FOLLOW_CARDS).evaluateAll(nodes => nodes.slice(0, 3).map(node => {
          const meta = node.querySelector('[data-media-meta]')!;
          const children = [...meta.children].filter(child => getComputedStyle(child).display !== 'none')
            .map(child => child.getBoundingClientRect());
          const content = Math.max(...children.map(child => child.bottom)) - Math.min(...children.map(child => child.top));
          return { height: meta.getBoundingClientRect().height, content };
        }));
        for (const card of cards) assert.ok(card.height <= card.content + 17, JSON.stringify({ density, ...card }));
      }
      assert.deepEqual((await layout(opened.page)).offenders, []);
    } finally { await opened.close() }
  });

  for (const [where, open, selector] of [
    ['馆藏', openLongCatalog, CATALOG_CARDS],
    ['女优资料页', openLongEntity, ENTITY_CARDS],
  ] as const) {
    it(`${where}：跳过封面与元信息区的渲染，Ctrl+F 仍找得到屏外卡里的字`, { timeout: 60_000 }, async () => {
      const opened = await open(browser);
      try {
        const state = await opened.page.evaluate(([tag, cardSelector, shape]) => {
          const last = [...document.querySelectorAll<HTMLElement>(cardSelector)].at(-1)!;
          const parts = [last.querySelector(shape.pic)!, last.querySelector(shape.meta)!];
          // 跳过的是元素的内容，元素自己仍在排版里：查它的第一个子元素。
          const skipped = parts.map((part) => !part.firstElementChild!.checkVisibility({ contentVisibilityAuto: true }));
          const box = last.getBoundingClientRect();
          /* 侧栏的标签列表里也有这枚标签，排在文档前面；往下接着找，直到落进那张卡。 */
          const find = (window as unknown as { find(text: string): boolean }).find.bind(window);
          let hits = 0;
          while (hits < 5 && find(tag)) {
            hits++;
            const node = getSelection()?.anchorNode;
            if (node && last.contains(node)) break;
          }
          const hit = getSelection()?.anchorNode;
          return {
            values: parts.map((part) => getComputedStyle(part).contentVisibility),
            skipped, below: box.top - innerHeight, height: box.height,
            hits, inLast: !!hit && last.contains(hit),
          };
        }, [PROBE_TAG, selector, MEDIA] as const);
        assert.deepEqual(state.values, ['auto', 'auto'], '屏外卡的封面和元信息区没有交给浏览器按视口取舍');
        assert.ok(state.below > 1000, `最后一张卡离视口只有 ${state.below}px，放大的列表不够长`);
        assert.deepEqual(state.skipped, [true, true], '屏外卡的封面或元信息区仍在渲染');
        assert.ok(state.height > 0, '屏外卡的 getBoundingClientRect 量出了零高');
        assert.ok(state.inLast, `页内查找没有落到屏外那张卡的标签上（命中 ${state.hits} 次）`);
        assert.deepEqual(opened.problems, []);
      } finally {
        await opened.close();
      }
    });
  }

  for (const [where, open, selector, shape] of [
    ['馆藏', openLongCatalog, CATALOG_CARDS, MEDIA],
    ['馆藏密集一档', (b: Browser) => openLongCatalog(b, 'dense'), CATALOG_CARDS, MEDIA],
    ['女优资料页', openLongEntity, ENTITY_CARDS, MEDIA],
    ['关注', openLongFollow, FOLLOW_CARDS, FOLLOW],
  ] as const) {
    it(`${where}：长距离往返之后整页高度和深处那张卡的位置不跳，屏外量到的几何与渲染后一致`, { timeout: 90_000 }, async () => {
      const opened = await open(browser);
      try {
        const { page } = opened;
        const measure = () => page.evaluate(([cardSelector, metaSelector]) => {
          const cards = [...document.querySelectorAll(cardSelector)];
          const deep = cards[Math.floor(cards.length * .8)];
          return { height: document.documentElement.scrollHeight,
            deep: deep.getBoundingClientRect().top + scrollY, y: scrollY,
            view: deep.getBoundingClientRect().top,
            skipping: getComputedStyle(deep.querySelector(metaSelector)!).contentVisibility,
            meta: deep.querySelector(metaSelector)!.getBoundingClientRect().height };
        }, [selector, shape.meta] as const);
        /* 首屏之外的卡此刻都没渲染过，高度全按估计值；往返一趟之后每张都记住了自己的实际
           尺寸。两次量到的差就是估计值的误差，一行差一点，累积到深处就是滚动条在跳。 */
        const fresh = await measure();
        assert.equal(fresh.skipping, 'auto', `${where}的屏外卡不跳过渲染，量不到估计值的误差`);
        await roundTrip(page);
        const rendered = await measure();
        assert.ok(Math.abs(rendered.height - fresh.height) <= 1,
          `整页高度从 ${fresh.height} 变成 ${rendered.height}：元信息区的估计高度与实际不符`);
        assert.ok(Math.abs(rendered.deep - fresh.deep) <= 1,
          `深处那张卡从 ${fresh.deep} 挪到 ${rendered.deep}`);

        /* 停在深处，滚到底再回来：同一个 scrollY 下那张卡应该还在原处。 */
        await page.evaluate((y) => scrollTo(0, y), rendered.deep - 300);
        await page.waitForTimeout(300);
        const parked = await measure();
        /* 跳过渲染时量到的几何要和渲染后一致：卡里有别的子元素抢空间时，内容不参与最小尺寸的
           元信息区会被压扁，整张卡的高度不变，从外面看不出来，只有量它自己才露馅。 */
        assert.ok(Math.abs(fresh.meta - parked.meta) <= 1,
          `屏外卡的元信息区量出 ${fresh.meta}px，渲染后是 ${parked.meta}px`);
        await roundTrip(page);
        await page.evaluate((y) => scrollTo(0, y), parked.y);
        await page.waitForTimeout(300);
        const back = await measure();
        assert.equal(back.y, parked.y, '回不到原来的滚动位置');
        assert.ok(Math.abs(back.view - parked.view) <= 1,
          `回到同一滚动位置后那张卡在视口里从 ${parked.view} 挪到 ${back.view}`);
        assert.deepEqual(opened.problems, []);
      } finally {
        await opened.close();
      }
    });
  }

  /* 关注卡的头像和标签是 `<span>`，不可聚焦，焦点环那一半只在作品卡上查。 */
  for (const [where, open, selector, shape, focusable] of [
    ['馆藏', openLongCatalog, CATALOG_CARDS, MEDIA, true],
    ['馆藏密集一档', (b: Browser) => openLongCatalog(b, 'dense'), CATALOG_CARDS, MEDIA, true],
    ['女优资料页', openLongEntity, ENTITY_CARDS, MEDIA, true],
    ['关注', openLongFollow, FOLLOW_CARDS, FOLLOW, false],
  ] as const) {
    it(`${where}：元信息区垫出的裁切余量不改排版、不接指针，头像和标签的焦点环整圈可见`, { timeout: 60_000 }, async () => {
      const opened = await open(browser);
      try {
        const { page } = opened;
        await page.locator(selector).first().evaluate(async (card) => {
          card.scrollIntoView({ block: 'center' });
          await new Promise(requestAnimationFrame);
          await new Promise(requestAnimationFrame);
        });
        /* 元信息区四周垫内边距再用负外边距抵消，裁切边（padding box）往外扩，内容盒原地不动。
           内容盒要贴着卡片左右缘、封面下方隔一道卡片行距，外边距盒的下沿就是内容盒下沿；
           同一行里最高的那张卡，内容盒下面到卡片下缘（关注卡是到 `[data-follow-state]`）不留空，卡高
           于是仍是封面、行距与内容三项之和。头像和文字列贴着内容盒。垫出去的那一圈伸出
           卡片盒，指针落在那里不能算进这张卡。 */
        const frames = await page.evaluate(([cardSelector, parts]) => {
          const inFlow = (element: Element | null, step: 'previousElementSibling' | 'nextElementSibling') => {
            let node = element?.[step] ?? null;
            while (node && getComputedStyle(node).position === 'absolute') node = node[step];
            return node;
          };
          return [...document.querySelectorAll(cardSelector)].filter((card) => {
            const box = card.getBoundingClientRect();
            return card.querySelector(`:scope>${parts.meta}`) && box.top >= 0 && box.bottom <= innerHeight;
          }).map((card) => {
            const meta = card.querySelector(`:scope>${parts.meta}`)!;
            const style = getComputedStyle(meta);
            const border = meta.getBoundingClientRect();
            const content = {
              left: border.left + meta.clientLeft + parseFloat(style.paddingLeft),
              top: border.top + meta.clientTop + parseFloat(style.paddingTop),
              right: border.left + meta.clientLeft + meta.clientWidth - parseFloat(style.paddingRight),
              bottom: border.top + meta.clientTop + meta.clientHeight - parseFloat(style.paddingBottom),
            };
            const cardBox = card.getBoundingClientRect();
            const cardStyle = getComputedStyle(card);
            const gap = parseFloat(cardStyle.rowGap);
            const above = inFlow(meta, 'previousElementSibling')!.getBoundingClientRect();
            const below = inFlow(meta, 'nextElementSibling');
            const floor = below ? below.getBoundingClientRect().top - gap
              : cardBox.bottom - parseFloat(cardStyle.paddingBottom);
            const mav = meta.querySelector(`:scope>${parts.avatar}`)?.getBoundingClientRect();
            const mtext = meta.querySelector(`:scope>${parts.text}`)!;
            const textStyle = getComputedStyle(mtext);
            const textBox = mtext.getBoundingClientRect();
            /* 探的是垫出来的那几圈（元信息区 8px、标签行与密集一档的文字列 4px）里面的点。 */
            const tags = meta.querySelector(parts.tags)?.getBoundingClientRect();
            const probes = [...[content.top + 10, (content.top + content.bottom) / 2, content.bottom - 4]
              .flatMap((y) => [[cardBox.left - 2, y], [cardBox.right + 2, y]]),
            [(content.left + content.right) / 2, cardBox.bottom + 2],
            ...(tags ? [[tags.left + 10, cardBox.bottom + 2], [cardBox.right + 2, (tags.top + tags.bottom) / 2]] : [])];
            const outside = probes.map(([x, y]) => document.elementFromPoint(x, y));
            return {
              row: Math.round(cardBox.top), slack: floor - content.bottom,
              padded: [parseFloat(style.paddingLeft), parseFloat(style.paddingTop)],
              offsets: [content.left - cardBox.left, cardBox.right - content.right,
                content.top - (above.bottom + gap), border.bottom + parseFloat(style.marginBottom) - content.bottom,
                mav ? mav.left - content.left : 0,
                textBox.top - parseFloat(textStyle.marginTop) - content.top,
                content.right - (textBox.right + parseFloat(textStyle.marginRight))].map((n) => Math.round(n * 100) / 100),
              background: style.backgroundColor,
              claimed: outside.filter((hit) => hit && card.contains(hit)).length,
            };
          });
        }, [selector, shape] as const);
        assert.ok(frames.length > 0, `${where}没有整张落在视口里的卡`);
        for (const frame of frames) {
          assert.ok(frame.padded.every((value) => value > 0), `${where}的元信息区没有垫裁切余量`);
          assert.ok(frame.offsets.every((value) => Math.abs(value) <= .5),
            `${where}的元信息区内容盒偏离了卡片与封面：${frame.offsets.join(', ')}`);
          assert.equal(frame.background, 'rgba(0, 0, 0, 0)', `${where}的元信息区有背景，垫出来的一圈会画在卡片外面`);
          assert.equal(frame.claimed, 0, `${where}卡片盒外 2px 处的指针落进了这张卡`);
          assert.ok(frame.slack >= -.5, `${where}的元信息区内容盒越过了卡片下缘 ${-frame.slack}px`);
        }
        for (const row of new Set(frames.map((frame) => frame.row))) {
          const least = Math.min(...frames.filter((frame) => frame.row === row).map((frame) => frame.slack));
          assert.ok(least <= .5, `${where}同一行最高的卡在元信息区下面还空着 ${least}px，卡片被撑高了`);
        }

        /* 焦点环画在元素外面，逐层往上找会裁切的祖先（`overflow` 不是 visible，或跳过渲染带来的
           paint containment），环的外沿必须落在每一层的 padding box 以内。 */
        const room = (target: string) => page.locator(`${selector} ${target}`).first().evaluate((element, cardSelector) => {
          const style = getComputedStyle(element);
          const ring = style.outlineStyle === 'none' ? 0 : parseFloat(style.outlineWidth) + parseFloat(style.outlineOffset);
          const box = element.getBoundingClientRect();
          let least = Infinity, clips = 0;
          for (let clip = element.parentElement; clip && !clip.matches(cardSelector); clip = clip.parentElement) {
            const clipStyle = getComputedStyle(clip);
            if (clipStyle.overflow === 'visible' && clipStyle.contentVisibility !== 'auto') continue;
            clips++;
            const edge = clip.getBoundingClientRect();
            const left = edge.left + clip.clientLeft, top = edge.top + clip.clientTop;
            least = Math.min(least, box.left - ring - left, box.top - ring - top,
              left + clip.clientWidth - (box.right + ring), top + clip.clientHeight - (box.bottom + ring));
          }
          return { focused: element.matches(':focus-visible'), ring, least, clips };
        }, shape.card);
        for (const target of focusable ? [shape.avatarButton, shape.tagButton] : []) {
          await page.keyboard.press('Tab');
          await page.locator(`${selector} ${target}`).first().focus();
          const edge = await room(target);
          assert.ok(edge.focused && edge.ring > 0, `${where}键盘聚焦的 ${target} 没有焦点环`);
          assert.ok(edge.clips > 0, `${where}的 ${target} 上面没有会裁切的祖先：这条用例守的前提变了，改用例`);
          assert.ok(edge.least >= -.5, `${where}的 ${target} 焦点环越过裁切边 ${-edge.least}px，那一截会被裁掉`);
        }
        assert.deepEqual(opened.problems, []);
      } finally {
        await opened.close();
      }
    });
  }
});