/* 关注页岛（`follow-feed`）在真浏览器里的行为：取样、筛选进地址栏、只有列表铺骨架、照片墙、
 * 续页、写操作、检查与往回抓的忙态、Shift 连选，以及进详情再回来。
 *
 * 桩数据与定种子见 `follow-fixture.ts`；关注来源的真实抓取一次都不发。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';

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

import { FIRST, MORE, openFollowFeed } from './follow-fixture.ts';
import { launch, layout, settle, VIEWPORTS } from './harness.ts';

const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const MOBILE = VIEWPORTS.find((viewport) => viewport.mobile)!;
const CARDS = '[data-follow-list] > [data-follow-item]';

const authorOrder = (page: Page) => page.locator('button[data-follow-author]').evaluateAll((buttons) =>
  buttons.map((button) => (button as HTMLElement).dataset.followAuthor));
const cardIds = (page: Page) => page.locator(CARDS).evaluateAll((cards) =>
  cards.map((card) => Number((card as HTMLElement).dataset.followItem)));
/** 桩里的条目没有正片，详情的播放器拿到空响应会报一条 VIDEOJS 错误；这一条量的是列表，不算它。 */
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
/** 等地址栏换到给定的查询串；岛只交 view，地址由壳写。 */
const searchIs = (page: Page, search: string) => page.waitForFunction(
  (wanted) => location.pathname === '/follow' && location.search === wanted, search, { timeout: 10_000 });

describe('关注页岛', () => {
  let browser: Browser;

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

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

  for (const viewport of [DESKTOP, MOBILE]) {
    it(`${viewport.name} 关注任务仍在运行时显示已确认资料`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow', viewport);
      try {
        const page = opened.page;
        const payload = await page.evaluate(async () => (await fetch('/api/follow')).json());
        let revision = 1;
        await page.route((url) => url.pathname === '/api/result-updates', route => route.fulfill({ json: {
          busy: true,
          result_versions: { follow: String(revision) },
        } }));
        await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'), route =>
          route.fulfill({ json: { ...payload, groups: payload.groups.map((group: typeof FIRST[number]) =>
            group.primary.id === 1000 && revision > 1 ? { ...group, primary: { ...group.primary,
              title: '任务运行中已确认的标题' } } : group) } }));
        const baseline = page.waitForResponse(url => new URL(url.url()).pathname === '/api/result-updates');
        await page.reload({ waitUntil: 'load' });
        await baseline;
        await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))));
        await page.locator(CARDS).first().waitFor();
        await page.waitForFunction(() => document.querySelector('[data-follow-list]')?.textContent?.includes('演示更新 1000'));
        revision = 2;
        await page.getByText('任务运行中已确认的标题', { exact: true }).waitFor({ timeout: 15_000 });
        const measured = await layout(page);
        assert.ok(measured.scrollWidth <= measured.viewportWidth + 1, JSON.stringify(measured));
        assert.deepEqual(measured.offenders, []);
        assert.deepEqual(withoutPlayer(opened.problems), []);
      } finally {
        await opened.close();
      }
    });

    it(`${viewport.name} 已建档作者的头像与署名进入作者页，多位作者保持一排`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow', viewport);
      try {
        const page = opened.page;
        const payload = await page.evaluate(async () => {
          const data = await (await fetch('/api/follow')).json();
          data.sources[0].entity_id = 90101;
          data.sources[0].entity_name = 'Kou';
          for (let at = 7; at <= 30; at++) {
            const name = `Creator ${at}`;
            data.sources.push({ ...data.sources[1], id: at, author_name: name, author_key: `name:creator-${at}` });
            data.facets.authors.push(`name:creator-${at}`);
          }
          return data;
        });
        await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'),
          (route) => route.fulfill({ json: payload }));
        await page.route(/\/api\/entity\?/, (route) => route.fulfill({ json: {
          id: 90101, kind: 'creator', canonical_name: 'Kou', asset_count: 0, tags: [], links: [], metadata: {},
          aliases: [], related_performers: [], has_image: false, has_avatar: false, feed: null,
        } }));
        await page.route((url) => url.pathname === '/api/items', (route) =>
          route.fulfill({ json: { items: [], total: 0, has_more: false } }));
        await page.reload({ waitUntil: 'load' });
        await settle(page);
        assert.equal(await page.getByRole('searchbox', { name: '搜索创作者' }).count(), 0);
        const author = page.locator('[data-follow-authors] a[data-follow-author="name:kou"]');
        assert.equal(await author.count(), 1);
        assert.equal(await author.getAttribute('href'), '/creators/90101');
        assert.equal(await author.getAttribute('aria-pressed'), null);
        await author.hover();
        assert.equal(await author.evaluate((node) => getComputedStyle(node).textDecorationLine), 'none');
        await author.focus();
        assert.equal(await author.evaluate((node) => document.activeElement === node), true);
        const card = page.locator('[data-follow-item="1000"]');
        assert.equal(await card.locator('a[data-follow-author]').getAttribute('href'), '/creators/90101');
        assert.equal(await card.locator('a[data-follow-avatar]').getAttribute('href'), '/creators/90101');
        await card.locator('a[data-follow-author]').click();
        await page.waitForURL('**/creators/90101');
        assert.equal(await page.locator('#stage[open]').count(), 0);
        assert.deepEqual(opened.problems, []);
      } finally { await opened.close(); }
    });

    it(`${viewport.name} 筛选条件与卡片悬停面保持间距`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow?tag=loop', viewport);
      try {
        const gap = await opened.page.evaluate(() => {
          const chip = document.querySelector('[data-follow-combo]')!.getBoundingClientRect();
          const card = document.querySelector('[data-follow-list] [data-media-card]')!.getBoundingClientRect();
          return card.top - chip.bottom - 8;
        });
        assert.ok(gap >= 16, `筛选条件距卡片悬停面只有 ${gap}px`);
        assert.deepEqual(opened.problems, []);
      } finally { await opened.close(); }
    });

    it(`${viewport.name} 筛选浮层恢复可见时两块玻璃自动落位`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow', viewport);
      try {
        const page = opened.page;
        await page.locator('[data-follow-feed]').evaluate((node) => { (node as HTMLElement).style.display = 'none' });
        await page.waitForTimeout(100);
        await page.locator('[data-follow-feed]').evaluate((node) => {
          const media = node.querySelector<HTMLElement>('[data-entity-media]')!;
          media.style.gap = '24px';
          (node as HTMLElement).style.display = '';
        });
        await page.waitForTimeout(100);
        const pairs = await page.evaluate(() => [
          ['[data-view-glide=""]', '[data-follow-filter][aria-pressed="true"]'],
          ['[data-view-glide="round"]', '[data-media-view][aria-pressed="true"]'],
        ].map(([glass, key]) => {
          const host = document.querySelector('[data-follow-filter-glass]')!;
          const rect = (selector: string) => {
            const node = host.querySelector<HTMLElement>(selector)!;
            const box = node.getBoundingClientRect();
            return { hidden: node.hidden, left: box.left, top: box.top, width: box.width, height: box.height };
          };
          return { glass: rect(glass!), key: rect(key!) };
        }));
        for (const pair of pairs) {
          assert.equal(pair.glass.hidden, false);
          for (const side of ['left', 'top', 'width', 'height'] as const) {
            assert.ok(Math.abs(pair.glass[side] - pair.key[side]) <= 1, JSON.stringify(pair));
          }
        }
        /* 在跑的位移由玻璃自己的滑动发起：指针移到相邻那一枚键上，玻璃滑过去。滑动动画由
           `moveGlidePane` 自己记着撤，所以要走真的悬停，不在节点上另挂动画。窗口改尺寸后重量，
           那段位移得被掐掉，不能继续把玻璃从新落点拽走。用例的浏览器默认减少动态，滑动不起，这里放开。 */
        await page.emulateMedia({ reducedMotion: 'no-preference' });
        const animations = await page.locator('[data-follow-filter-glass]').evaluate(async (host) => {
          const glass = host.querySelector<HTMLElement>('[data-view-glide=""]')!;
          const keys = [...host.querySelectorAll<HTMLElement>('[data-follow-filter]')];
          const at = keys.findIndex((key) => key.getAttribute('aria-pressed') === 'true');
          const neighbour = keys[at + 1] ?? keys[at - 1]!;
          neighbour.dispatchEvent(new PointerEvent('pointerover', { bubbles: true, pointerType: 'mouse' }));
          const moving = glass.getAnimations().length;
          window.dispatchEvent(new Event('resize'));
          await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
          return { moving, left: glass.getAnimations().length };
        });
        assert.ok(animations.moving > 0, `悬停相邻的键没有起滑动：${JSON.stringify(animations)}`);
        assert.equal(animations.left, 0, '重新落位后仍有动画覆盖玻璃位置');
        assert.deepEqual(opened.problems, []);
      } finally { await opened.close(); }
    });
  }

  for (const viewport of [DESKTOP, MOBILE]) {
    it(`${viewport.name} 图片卡的键盘焦点环在封面裁切层之外`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow?media=images', viewport,
        { settings: { followImagesOnly: true } });
      try {
        const page = opened.page;
        await page.keyboard.press('Tab');
        const card = page.locator(CARDS).first();
        await card.locator('[data-follow-open]').focus();
        const ring = await card.locator('[data-follow-open]').evaluate((element) => {
          const style = getComputedStyle(element);
          const parent = getComputedStyle(element.parentElement!);
          return { width: style.outlineWidth, offset: style.outlineOffset,
            radius: style.borderRadius, clip: parent.clipPath, overflow: parent.overflow };
        });
        assert.equal(ring.width, '2px');
        assert.equal(ring.offset, '2px');
        assert.notEqual(ring.radius, '0px');
        assert.equal(ring.clip, 'none');
        assert.equal(ring.overflow, 'visible');
        assert.deepEqual(opened.problems, []);
      } finally {
        await opened.close();
      }
    });

  }

  /** 图片视图里只留 5001 那一组，并把它报成三张图的合集：卡片右上角出合并计数。 */
  const openMixCard = async (viewport: typeof DESKTOP) => {
    const opened = await openFollowFeed(browser, '/follow?media=images', viewport, { settings: { followImagesOnly: false } });
    const page = opened.page;
    const payload = await page.evaluate(async () => {
      const list = await (await fetch('/api/follow?media=images')).json();
      const detail = await (await fetch('/api/follow?item=5001')).json();
      list.groups = detail.groups.map((group: Record<string, unknown>) => ({
        ...group, stack: { media: 3, kind: 'image', faces: [] },
      }));
      list.has_more = false;
      return list;
    });
    await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'),
      (route) => route.fulfill({ json: payload }));
    await page.reload({ waitUntil: 'load' });
    await settle(page);
    return opened;
  };

  it(`${MOBILE.name} 多图数量按钮可以打开详情`, { timeout: 60_000 }, async () => {
    const opened = await openMixCard(MOBILE);
    try {
      const page = opened.page;
      await page.locator('[data-follow-list] [data-follow-collection="5001"]').click();
      await page.waitForURL('**/posts/5001');
      await page.locator('#stage[open]').waitFor();
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it(`${DESKTOP.name} 悬停与键盘聚焦时合并计数淡出，操作键占右上角`, { timeout: 60_000 }, async () => {
    const opened = await openMixCard(DESKTOP);
    try {
      const page = opened.page;
      const card = page.locator('[data-follow-list] [data-follow-item]').filter({
        has: page.locator('[data-follow-collection="5001"]') }).first();
      const read = () => card.evaluate(async (element) => {
        await new Promise((resolve) => setTimeout(resolve, 300));
        const collection = element.querySelector<HTMLElement>('[data-follow-collection]')!;
        const actions = element.querySelector<HTMLElement>('[data-follow-actions]')!;
        const pic = element.querySelector<HTMLElement>('[data-media-pic]')!.getBoundingClientRect();
        const box = collection.getBoundingClientRect();
        const keys = actions.getBoundingClientRect();
        const hit = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2);
        return {
          collection: [getComputedStyle(collection).opacity, getComputedStyle(collection).visibility],
          actions: getComputedStyle(actions).opacity,
          hitCollection: hit?.closest('[data-follow-collection]') === collection,
          /* 计数与操作键都贴封面右上角那一格，上沿与右沿相对封面格的偏移。 */
          collectionCorner: [Math.round(box.top - pic.top), Math.round(pic.right - box.right)],
          actionsCorner: [Math.round(keys.top - pic.top), Math.round(pic.right - keys.right)],
        };
      });
      await page.mouse.move(0, 0);
      const rest = await read();
      assert.deepEqual(rest.collection, ['1', 'visible'], '不悬停时合并计数没有显示');
      assert.equal(rest.actions, '0', '不悬停时操作键已经露出来');
      assert.equal(rest.hitCollection, true, '不悬停时合并计数接不到指针');

      await card.locator('[data-follow-open]').hover();
      const hovered = await read();
      assert.deepEqual(hovered.collection, ['0', 'hidden'], '悬停时合并计数没有淡出');
      assert.equal(hovered.actions, '1', '悬停时操作键没有出现');
      assert.equal(hovered.hitCollection, false, '悬停时合并计数仍挡在操作键上面');
      assert.deepEqual(hovered.actionsCorner, rest.collectionCorner,
        `操作键没有落在合并计数的位置：${JSON.stringify(hovered)}`);

      await page.mouse.move(0, 0);
      await card.locator('[data-follow-open]').focus();
      assert.equal(await card.locator('[data-follow-open]').evaluate((element) => element.matches(':focus-visible')), true);
      const focused = await read();
      assert.deepEqual(focused.collection, ['0', 'hidden'], '键盘聚焦时合并计数没有淡出');
      assert.equal(focused.actions, '1', '键盘聚焦时操作键没有出现');
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('首屏：「全部」按下，页头、两排、筛选浮层、列表自上而下', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      assert.equal(await page.locator('[data-follow-filter=""]').getAttribute('aria-pressed'), 'true');
      assert.equal(await page.locator('[data-follow-filter="new"]').getAttribute('aria-pressed'), 'false');
      const tops = await page.evaluate(() => ['[data-follow-head]', '[data-follow-authors]', '[data-follow-works]',
        '[data-follow-filter-glass]', '[data-follow-list]']
        .map((selector) => document.querySelector(selector)?.getBoundingClientRect().top ?? null));
      assert.ok(tops.every((top) => top !== null), `有一块没画出来：${JSON.stringify(tops)}`);
      assert.deepEqual([...tops].sort((a, b) => a! - b!), tops, `上下次序不对：${JSON.stringify(tops)}`);
      assert.deepEqual(await cardIds(page), FIRST.filter((row) => row.primary.media_kind === 'video')
        .map((row) => row.primary.id));
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('封面左上角可打开详情，悬停时隐藏来源角标', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      const card = page.locator(CARDS).first();
      const id = await card.getAttribute('data-follow-item');
      const hit = await card.locator('[data-media-badge]').evaluate((badge) => {
        const box = badge.getBoundingClientRect();
        const target = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2);
        return { badge: target?.closest('[data-media-badge]') === badge, title: badge.getAttribute('title') };
      });
      assert.equal(hit.badge, true, '角标中心命中的不是角标本身');
      assert.ok(hit.title, '角标没有来源名');
      const corner = (await card.locator('[data-media-badge]').boundingBox())!;
      await card.hover();
      assert.equal(await card.locator('[data-media-badge]').isVisible(), false);
      assert.equal(await card.locator('[data-follow-sources]').evaluate(node => getComputedStyle(node).pointerEvents), 'none');
      await page.mouse.click(corner.x + corner.width / 2, corner.y + corner.height / 2);
      await page.waitForURL(`**/posts/${id}`);
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('两排取样在筛选时保留，换一批以地址种子请求新列表', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      const first = await authorOrder(page);
      assert.equal(first.length, 6);
      await page.locator('[data-follow-filter="new"]').click();
      await searchIs(page, '?status=new');
      await page.locator('[data-follow-filter="new"][aria-pressed="true"]').waitFor();
      assert.deepEqual(await authorOrder(page), first, '换状态之后创作者那一排重新洗了');
      const shuffled = page.waitForResponse(response => {
        const url = new URL(response.url());
        return url.pathname === '/api/follow' && url.searchParams.get('sort') === 'rand';
      });
      await page.getByRole('button', { name: '换一批', exact: true }).click();
      await page.waitForFunction(() => new URLSearchParams(location.search).get('sort') === 'rand');
      const response = await shuffled;
      assert.equal(response.status(), 200);
      const requestSeed = new URL(response.url()).searchParams.get('seed');
      assert.ok(Number(requestSeed) > 0);
      assert.equal(new URL(page.url()).searchParams.get('seed'), requestSeed);
      await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor();
      assert.deepEqual((await authorOrder(page)).sort(), [...first].sort());
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('点创作者、题材、标签进组合条并写进地址栏；组合条在读数之后、列表之前', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      await page.locator('button[data-follow-author="name:mira"]').click();
      await searchIs(page, '?author=name%3Amira');
      await page.locator('button[data-follow-work="zelda"]').click();
      await searchIs(page, '?author=name%3Amira&work=zelda');
      await page.locator('button[data-follow-tag="loop"]').click();
      await searchIs(page, '?author=name%3Amira&tag=loop&work=zelda');
      const drops = await page.locator('[data-follow-drop]').evaluateAll((buttons) =>
        buttons.map((button) => (button as HTMLElement).dataset.followDropKind));
      assert.deepEqual(drops, ['creator', 'franchise', 'tag'], `组合条的条件不对：${JSON.stringify(drops)}`);
      const [readout, combo, list] = await page.evaluate(() => ['[data-follow-readout]', '[data-follow-combo]',
        '[data-follow-list-body]'].map((selector) => document.querySelector(selector)!.getBoundingClientRect()));
      assert.ok(readout!.bottom <= combo!.top + 1 && combo!.bottom <= list!.top + 1,
        `组合条不在读数与列表之间：${JSON.stringify([readout, combo, list])}`);
      // 撤掉一条，交回去的是撤掉之后的地址。
      await page.locator('[data-follow-drop="loop"]').click();
      await searchIs(page, '?author=name%3Amira&work=zelda');
      // 再点按下的那位创作者就撤掉它。
      await page.locator('button[data-follow-author="name:mira"]').click();
      await searchIs(page, '?work=zelda');
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('换状态药丸时只有列表铺骨架，页头与两排原样留着', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      opened.stub.hold = (url) => url.searchParams.get('status') === 'saved';
      await page.locator('[data-follow-filter="saved"]').click();
      await page.locator('[data-follow-list-body] [data-skeleton]').waitFor({ timeout: 10_000 });
      const during = await page.evaluate(() => ({
        head: !!document.querySelector('[data-follow-feed] [data-follow-head]'),
        authors: document.querySelectorAll('button[data-follow-author]').length,
        glass: !!document.querySelector('[data-follow-filter-glass]'),
        wholePage: !!document.querySelector('#stats .followauthors'),
        skeletons: [...document.querySelectorAll('[data-skeleton]')]
          .filter(node => !node.closest('[data-content-skeleton][aria-hidden="true"]')).length,
      }));
      assert.deepEqual(during, { head: true, authors: 6, glass: true, wholePage: false, skeletons: 1 });
      await opened.stub.release();
      await page.locator('[data-follow-list-body] [data-skeleton]').waitFor({ state: 'hidden', timeout: 10_000 });
      await page.locator(CARDS).first().waitFor();
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('视频卡与照片墙互换；照片墙的尺寸档换列数，手机上不横向溢出', { timeout: 90_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      await page.locator('[data-media-view="images"]').click();
      await searchIs(page, '?media=images');
      await page.locator('[data-follow-list][data-follow-wall] > [data-follow-item]').first().waitFor();
      assert.deepEqual(await cardIds(page), FIRST.filter((row) => row.primary.media_kind === 'image')
        .map((row) => row.primary.id));
      const columns = () => page.locator('[data-follow-wall]').evaluate((wall) => ({
        size: (wall as HTMLElement).dataset.size, count: getComputedStyle(wall).gridTemplateColumns.split(' ').length,
      }));
      const small = await columns();
      await page.locator('#density').click();
      await page.locator('[data-follow-wall][data-size="big"]').waitFor();
      const big = await columns();
      assert.equal(small.size, 'small');
      assert.ok(Number(big.count) < Number(small.count), `大图档没有少几列：${JSON.stringify([small, big])}`);
      await page.locator('[data-media-view="videos"]').click();
      await searchIs(page, '');
      await page.locator('[data-follow-list]:not([data-follow-wall]) > [data-follow-item]').first().waitFor();
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
    const mobile = await openFollowFeed(browser, '/follow?media=images', MOBILE);
    try {
      const geometry = await layout(mobile.page);
      assert.ok(geometry.scrollWidth <= geometry.viewportWidth,
        `手机照片墙横向溢出 ${geometry.scrollWidth}>${geometry.viewportWidth}：${geometry.offenders.join('、')}`);
      assert.deepEqual(mobile.problems, []);
    } finally {
      await mobile.close();
    }
  });

  it('瀑布流里带尺寸的图在落地前就按自己的比例占位', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow?media=images', DESKTOP, { settings: { photoLayout: 'masonry' } });
    const held: import('playwright-core').Route[] = [];
    try {
      const page = opened.page;
      await page.route((url) => url.pathname.startsWith('/stub-thumb/'), (route) => { held.push(route) });
      await page.reload({ waitUntil: 'domcontentloaded' });
      await page.locator('[data-follow-wall][data-layout="masonry"] > [data-follow-item]').first().waitFor();
      await page.locator('[data-follow-wall] [data-media-pic] > img[width][height]').first().waitFor();
      const boxes = await page.locator('[data-follow-wall] [data-media-pic] > img[width][height]').evaluateAll((images) =>
        (images as HTMLImageElement[]).map((image) => {
          const box = image.getBoundingClientRect();
          return { pending: !image.complete || !image.naturalWidth, width: box.width, height: box.height,
            ratio: Number(image.getAttribute('height')) / Number(image.getAttribute('width')) };
        }));
      const pending = boxes.filter((box) => box.pending);
      assert.ok(pending.length, '缩略图请求挂住了，却没有一张图停在未落地');
      const off = pending.filter((box) => Math.abs(box.height - box.width * box.ratio) > 1.5);
      assert.deepEqual(off, [], '未落地的图没有按 width/height 属性的比例占位');
    } finally {
      for (const route of held.splice(0)) await route.abort().catch(() => {});
      await opened.close();
    }
  });

  for (const viewport of [DESKTOP, MOBILE]) {
    it(`${viewport.name} 无尺寸图片加载后按固有比例铺满瀑布流卡片`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow?media=images', viewport,
        { settings: { photoLayout: 'masonry' } });
      try {
        const page = opened.page;
        const payload = await page.evaluate(async () => (await fetch('/api/follow?media=images')).json());
        payload.groups = payload.groups.filter((group: { primary: { media_kind: string } }) => group.primary.media_kind === 'image').slice(0, 1);
        const item = payload.groups[0].primary;
        item.width = null;
        item.height = null;
        item.media_items = [];
        payload.has_more = false;
        await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'),
          (route) => route.fulfill({ json: payload }));
        // 只读服务拒绝尺寸回写时，当前卡片仍使用浏览器取得的尺寸。
        await page.route('**/api/follow/image-dims', (route) => route.fulfill({ status: 409, json: { ok: false } }));
        await page.reload({ waitUntil: 'load' });
        await settle(page);
        const image = page.locator('[data-follow-wall] [data-media-pic] > img').first();
        await image.waitFor();
        await image.evaluate(async (node: HTMLImageElement) => { await node.decode() });
        const geometry = await image.evaluate((node: HTMLImageElement) => {
          const picture = node.parentElement!.getBoundingClientRect();
          const box = node.getBoundingClientRect();
          return { width: box.width, height: box.height, pictureWidth: picture.width, pictureHeight: picture.height,
            ratio: node.naturalWidth / node.naturalHeight, widthAttr: node.getAttribute('width'), heightAttr: node.getAttribute('height') };
        });
        assert.ok(Math.abs(geometry.width / geometry.height - geometry.ratio) < .01, JSON.stringify(geometry));
        assert.ok(Math.abs(geometry.pictureWidth - geometry.width) < 1.5, JSON.stringify(geometry));
        assert.ok(Math.abs(geometry.pictureHeight - geometry.height) < 1.5, JSON.stringify(geometry));
        assert.equal(geometry.widthAttr, '60');
        assert.equal(geometry.heightAttr, '80');
        const viewportGeometry = await layout(page);
        assert.ok(viewportGeometry.scrollWidth <= viewportGeometry.viewportWidth, JSON.stringify(viewportGeometry));
      } finally { await opened.close(); }
    });
  }

  it('瀑布流下滚续页时保留已显示卡片的位置和节点', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow?media=images', DESKTOP,
      { settings: { photoLayout: 'masonry', followImagesOnly: true } });
    try {
      const page = opened.page;
      const payload = await page.evaluate(async () => (await fetch('/api/follow?media=images')).json());
      const images = payload.groups.filter((group: { primary: { media_kind: string } }) => group.primary.media_kind === 'image');
      payload.groups = images;
      payload.has_more = true;
      const extra = images.map((group: { primary: { id: number }; release_key: string }) => ({
        ...group, release_key: `${group.release_key}-more`, primary: { ...group.primary, id: group.primary.id + 10000 },
      }));
      let release!: () => void;
      const gate = new Promise<void>((resolve) => { release = resolve });
      await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'), async (route) => {
        const more = Number(new URL(route.request().url()).searchParams.get('offset')) > 0;
        if (more) await gate;
        return route.fulfill({ json: { ...payload, groups: more ? extra : images, has_more: !more } });
      });
      await page.reload({ waitUntil: 'load' });
      await page.locator('[data-follow-item="2005"]').waitFor();
      await page.locator('[data-follow-wall] [data-media-pic] > img').evaluateAll(async (nodes) => {
        await Promise.all(nodes.map((node) => (node as HTMLImageElement).decode()));
        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
      });
      const read = () => page.locator(CARDS).evaluateAll((cards) => cards.map((node) => {
        const box = node.getBoundingClientRect();
        return { id: node.getAttribute('data-follow-item'), left: box.left, top: box.top + scrollY };
      }));
      const before = await read();
      await page.locator(CARDS).evaluateAll((cards) => { (window as unknown as { oldCards: Element[] }).oldCards = cards });
      await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
      release();
      await page.locator('[data-follow-item="12005"]').waitFor();
      const after = await read();
      for (const old of before) {
        const current = after.find((card) => card.id === old.id)!;
        assert.ok(Math.abs(current.left - old.left) < 1.5 && Math.abs(current.top - old.top) < 1.5,
          JSON.stringify({ old, current }));
      }
      assert.equal(await page.evaluate(() => (window as unknown as { oldCards: Element[] }).oldCards.every((node) => node.isConnected)), true);
      assert.deepEqual(opened.problems, []);
    } finally { await opened.close(); }
  });

  for (const viewport of [DESKTOP, MOBILE]) {
    it(`${viewport.name} 延迟加载长图只增长所在列，卡片不换列、不重叠`, { timeout: 60_000 }, async () => {
      const opened = await openFollowFeed(browser, '/follow?media=images', viewport,
        { settings: { photoLayout: 'masonry', followImagesOnly: true } });
      const held: import('playwright-core').Route[] = [];
      try {
        const page = opened.page;
        const payload = await page.evaluate(async () => (await fetch('/api/follow?media=images')).json());
        payload.groups = payload.groups.filter((group: { primary: { media_kind: string } }) => group.primary.media_kind === 'image');
        const target = payload.groups.at(-1).primary;
        target.width = null;
        target.height = null;
        target.media_items = [];
        target.thumb_url = '/stub-thumb/delayed-tall';
        payload.has_more = false;
        await page.route((url) => url.pathname === '/api/follow' && !url.searchParams.has('item'),
          (route) => route.fulfill({ json: payload }));
        await page.route('**/stub-thumb/delayed-tall', (route) => { held.push(route) });
        await page.reload({ waitUntil: 'load' });
        const cards = page.locator(CARDS);
        await cards.last().waitFor();
        await cards.last().scrollIntoViewIfNeeded();
        await page.waitForFunction(() => {
          const images = document.querySelectorAll<HTMLImageElement>('[data-follow-wall] [data-media-pic] > img');
          return [...images].slice(0, -1).every((image) => image.complete && image.naturalWidth);
        });
        const positions = () => cards.evaluateAll((nodes) => nodes.map((node) => {
          const box = node.getBoundingClientRect();
          return { left: box.left, top: box.top + scrollY, bottom: box.bottom + scrollY, width: box.width };
        }));
        const before = await positions();
        for (const route of held.splice(0)) await route.fulfill({ contentType: 'image/svg+xml',
          body: '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="4000"><rect width="200" height="4000" fill="#888"/></svg>' });
        const image = cards.last().locator('[data-media-pic] > img');
        await page.waitForFunction(() => document.querySelector('[src="/stub-thumb/delayed-tall"]')?.getAttribute('width') === '200');
        await image.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
        const after = await positions();
        after.forEach((box, index) => {
          assert.ok(Math.abs(box.left - before[index]!.left) < 1.5, JSON.stringify({ before: before[index], box }));
          for (const previous of after.slice(0, index).filter((other) => Math.abs(other.left - box.left) < 1)) {
            assert.ok(box.top >= previous.bottom + 12, JSON.stringify({ previous, box }));
          }
        });
        const picture = await image.evaluate((node) => node.parentElement!.getBoundingClientRect().toJSON());
        assert.ok(picture.height <= picture.width * 2.5 + 1.5, JSON.stringify(picture));
        assert.equal(await image.evaluate((node) => getComputedStyle(node).objectFit), 'cover');
        await page.locator('[data-glass-segment]').filter({ has: page.getByRole('radio', { name: '固定比例' }) }).click();
        await page.locator('[data-follow-wall][data-layout="fixed"]').waitFor();
        assert.equal(await cards.last().evaluate((node) => (node as HTMLElement).style.gridRow), '');
        const geometry = await layout(page);
        assert.ok(geometry.scrollWidth <= geometry.viewportWidth, JSON.stringify(geometry));
        assert.deepEqual(opened.problems, []);
      } finally {
        for (const route of held.splice(0)) await route.abort().catch(() => {});
        await opened.close();
      }
    });
  }

  it('加载更多接在原来那些卡后面', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      const before = await cardIds(page);
      const more = page.getByRole('button', { name: '加载更多' });
      await more.scrollIntoViewIfNeeded();
      // 滚到底续页会自己接上；没接上再按一下。
      await page.waitForTimeout(800);
      if (!(await page.locator(`[data-follow-item="${MORE[0]!.primary.id}"]`).count())) await more.click().catch(() => {});
      await page.locator(`[data-follow-item="${MORE.at(-1)!.primary.id}"]`).waitFor({ timeout: 10_000 });
      assert.deepEqual(await cardIds(page), [...before, ...MORE.map((row) => row.primary.id)]);
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('标记已看与稍后看：请求体只带条目与目标，卡上立刻换状态', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      const card = page.locator('[data-follow-item="1001"]');
      await card.hover();
      await card.locator('[data-follow-status="1001"][data-to="seen"]').click();
      await page.locator('[data-follow-item="1001"][data-status="seen"]').waitFor();
      // 已看的那张多出「恢复未看」。
      assert.equal(await card.locator('[data-to="new"]').count(), 1);
      await card.hover();
      await card.locator('[data-follow-save="1001"]').click();
      await card.locator('[data-follow-save="1001"][aria-label="已保存"]').waitFor();
      assert.deepEqual(opened.stub.writes, [
        { url: '/api/follow/status', body: { item: 1001, to: 'seen' } },
        { url: '/api/follow/save', body: { item: 1001 } },
      ]);
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('检查更新与往回抓起同一趟任务，任务在跑时两枚键一起忙', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      await page.locator('[data-follow-older]').click();
      await page.locator('[data-follow-older][aria-busy="true"]').waitFor();
      await page.locator('[data-follow-older]').filter({ hasText: '抓取中' }).waitFor();
      assert.match(await page.locator('[data-follow-older]').innerText(), /抓取中/);
      await page.locator('[data-follow-recheck][aria-busy="true"]').waitFor();
      assert.deepEqual(opened.stub.writes, [{ url: '/api/follow/check', body: { older: true, background: true } }]);
      // 忙态包含请求中的阶段；任务编号在响应返回后写入。
      await page.waitForFunction(() => sessionStorage.getItem('peach-follow-job') === 'job-1',
        undefined, { timeout: 10_000 });
      assert.equal(await page.evaluate(() => sessionStorage.getItem('peach-follow-job')), 'job-1');
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
    const again = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = again.page;
      await page.locator('[data-follow-recheck]').click();
      await page.locator('[data-follow-recheck][aria-busy="true"]').waitFor();
      await page.locator('[data-follow-older][aria-busy="true"]').waitFor();
      // 检查那一趟只让往回抓那枚忙、不换字。
      assert.equal(await page.locator('[data-follow-older]').innerText(), '抓更早的一页');
      assert.deepEqual(again.stub.writes, [{ url: '/api/follow/check', body: { background: true } }]);
      assert.deepEqual(again.problems, []);
    } finally {
      await again.close();
    }
  });

  it('多选里 Shift 连选按屏幕上的次序框进一段', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    try {
      const page = opened.page;
      const ids = await cardIds(page);
      await page.locator('#selectMode').click();
      await page.locator('[data-follow-feed][data-select-mode]').waitFor();
      assert.equal(await page.locator('[data-follow-actions]').count(), 0);
      await page.locator(`[data-follow-item="${ids[1]}"]`).click();
      await page.locator(`[data-follow-item="${ids[4]}"]`).click({ modifiers: ['Shift'] });
      await page.locator(`[data-follow-item="${ids[4]}"][data-selected]`).waitFor();
      const picked = await page.locator(`${CARDS}[data-selected]`).evaluateAll((cards) =>
        cards.map((card) => Number((card as HTMLElement).dataset.followItem)));
      assert.deepEqual(picked, ids.slice(1, 5));
      assert.equal(new URL(page.url()).pathname, '/follow', '多选里点卡不该进详情');
      await page.locator('#selectMode').click();
      await page.locator('[data-follow-actions]').first().waitFor();
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('点卡进详情，关掉回到同一个岛、同一批卡；深链进详情关掉时才挂岛', { timeout: 90_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow?status=new', DESKTOP);
    try {
      const page = opened.page;
      const before = await cardIds(page);
      await page.evaluate(() => { (document.querySelector('[data-follow-feed]') as HTMLElement & { mark?: number }).mark = 7 });
      await page.locator('[data-follow-item="1002"] [data-follow-open]').click();
      await page.waitForFunction(() => location.pathname === '/posts/1002');
      await page.locator('#stage[open]').waitFor();
      await page.locator('#closeStage').click();
      await searchIs(page, '?status=new');
      await page.locator(CARDS).first().waitFor();
      assert.equal(await page.evaluate(() => (document.querySelector('[data-follow-feed]') as HTMLElement & { mark?: number }).mark),
        7, '回到列表时岛重挂了');
      assert.deepEqual(await cardIds(page), before);
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
    const deep = await openFollowFeed(browser, '/posts/1003', DESKTOP, { ready: '#stage[open]' });
    try {
      const page = deep.page;
      assert.equal(await page.locator('[data-follow-feed]').count(), 0, '深链进详情时不该挂岛');
      await page.locator('#closeStage').click();
      await page.locator(CARDS).first().waitFor({ timeout: 15_000 });
      assert.equal(new URL(page.url()).pathname, '/follow');
      assert.deepEqual(withoutPlayer(deep.problems), []);
    } finally {
      await deep.close();
    }
  });
});