import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import type { Browser } from 'playwright-core';
import { launch, layout, requiredEnv, settle, VIEWPORTS, withPageDiagnostics } from './harness.ts';
import { JAV_DETAIL, mockJavDetail } from './jav-detail-fixture.ts';

describe('库外 JAV 作品详情', () => {
  let browser: Browser;
  before(async () => { browser = await launch() });
  after(async () => { await browser.close() });
  it('评论异步展开与收起时详情正文留在滚动区域', { timeout: 60000 }, async () => {
    const context = await browser.newContext({ viewport: { width: 1730, height: 1032 }, reducedMotion: 'no-preference' });
    try {
      const page = await context.newPage();
      const errors: string[] = [];
      page.on('pageerror', error => errors.push(error.message));
      await mockJavDetail(page);
      let releaseReviews!: () => void;
      const reviewsReady = new Promise<void>(resolve => { releaseReviews = resolve });
      await page.route(/\/api\/jav\/reviews\?/, async route => {
        await reviewsReady;
        await route.fulfill({ json: { ok: true, page: 1, more: false, items: Array.from({ length: 10 }, (_, i) => ({
          id: String(i), username: '来源评论者', created_at: '2026-10-12', score: 4,
          content: '评论正文及作品信息。'.repeat(40),
        })) } });
      });
      await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
      const side = page.locator('[data-jav-info]');
      await side.locator('h1').waitFor();
      await page.locator('#stage').evaluate(node => Promise.all(node.getAnimations().map(animation => animation.finished)));
      const toggle = page.locator('[data-jav-reviews] summary');
      const snapshot = () => side.evaluate(node => {
        const side = node.getBoundingClientRect(), title = node.querySelector('h1')!.getBoundingClientRect();
        return { height: side.height, scroll: node.scrollTop, titleVisible: title.bottom > side.top && title.top < side.bottom };
      });
      const initial = await snapshot();
      await toggle.click();
      const loading = page.locator('[data-skeleton="reviews"]');
      await loading.waitFor();
      const placeholder = await loading.evaluate(node => ({ height: node.getBoundingClientRect().height,
        rows: node.querySelectorAll('[data-jav-review-skeleton]').length,
        radii: [...node.querySelectorAll('.skeleton-sheen')].map(bar => parseFloat(getComputedStyle(bar).borderRadius)),
      }));
      releaseReviews();
      assert.equal(placeholder.rows, 3);
      assert.ok(placeholder.height >= 240, JSON.stringify(placeholder));
      assert.ok(placeholder.radii.every(radius => radius > 0), JSON.stringify(placeholder));
      await page.locator('[data-jav-review]').first().waitFor();
      await loading.waitFor({ state: 'detached' });
      const expanded = await snapshot();
      assert.ok(expanded.titleVisible && Math.abs(expanded.height - initial.height) < 1 && Math.abs(expanded.scroll - initial.scroll) < 1,
        JSON.stringify({ initial, expanded }));
      await side.evaluate(node => { node.scrollTop = node.scrollHeight });
      await toggle.scrollIntoViewIfNeeded();
      await toggle.click();
      await page.locator('[data-jav-review]').first().waitFor({ state: 'hidden' });
      await side.evaluate(node => { node.scrollTop = 0 });
      assert.ok((await snapshot()).titleVisible);
      assert.deepEqual(errors, []);
      await page.screenshot({ path: '../build/jav-comments-expanded.png' });
    } finally { await context.close() }
  });
  /* 详情浮窗是 `showModal()` 开的顶层 dialog：挂在 body 上的弹层和 Toast 再大的 z-index 也压不过它，
     看起来就是「点了没反应」。命中测试取弹层与回执自己的中心点。 */
  it('查找资源弹层与操作回执盖在详情浮窗之上', { timeout: 60000 }, async () => {
    const context = await browser.newContext({ viewport: { width: 1280, height: 800 }, reducedMotion: 'reduce' });
    try {
      const page = await context.newPage();
      await mockJavDetail(page);
      await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
      await page.locator('[data-jav-info] h1').waitFor();
      const hit = (selector: string) => page.locator(selector).first().evaluate(node => {
        const box = node.getBoundingClientRect();
        const target = document.elementFromPoint(box.left + box.width / 2, box.top + Math.min(24, box.height / 2));
        return { onTop: !!target && node.contains(target), inStage: !!node.closest('#stage') };
      });
      await page.locator('[data-jav-actions]').getByRole('button', { name: '查找资源', exact: true }).click();
      await page.getByRole('heading', { name: '查找资源', exact: true }).waitFor();
      assert.deepEqual(await hit('[data-modal-surface]'), { onTop: true, inStage: true }, '查找资源弹层被详情浮窗盖住');
      /* 表单里通栏的下拉：展开的选项面板与触发框同宽，不是共用菜单的 266px。 */
      const goal = page.locator('[data-modal-surface]').getByRole('button', { name: /优先寻找/ });
      await goal.click();
      const panel = page.locator('[data-trigger="Select"]');
      await panel.waitFor();
      const [goalBox, panelBox] = [await goal.boundingBox(), await panel.boundingBox()];
      assert.ok(goalBox && panelBox && goalBox.width > 266 && Math.abs(goalBox.width - panelBox.width) <= 1,
        `选项面板 ${panelBox?.width}px，触发框 ${goalBox?.width}px`);
      await panel.getByRole('option', { name: '高清', exact: true }).click();
      await panel.waitFor({ state: 'detached' });
      await page.keyboard.press('Escape');
      await page.locator('[data-modal-surface]').waitFor({ state: 'detached' });
      await withPageDiagnostics(page, 'Escape 只关掉里层弹层', async () => {
        assert.equal(await page.locator('#stage[open]').count(), 1, 'Escape 只关掉里层弹层');
      });
      /* 下拉卸掉后焦点要等下一帧才回到触发框，这一帧里焦点在 body，Escape 不经过浮窗。弹层容器里
         这时还留着焦点范围的哨兵，最后一个子元素不是弹层。 */
      await page.locator('[data-jav-actions]').getByRole('button', { name: '查找资源', exact: true }).click();
      await goal.click();
      await panel.getByRole('option', { name: '高清', exact: true }).click();
      await panel.waitFor({ state: 'detached' });
      await page.evaluate(() => (document.activeElement as HTMLElement).blur());
      const layers = await page.evaluate(() => [...document.querySelectorAll('#stage > [data-react-overlays] > *')]
        .map(node => `${node.tagName}${Object.keys((node as HTMLElement).dataset).map(key => `[${key}]`).join('')}`).join(' '));
      await page.keyboard.press('Escape');
      await page.locator('[data-modal-surface]').waitFor({ state: 'detached' });
      await withPageDiagnostics(page, `焦点在 body 时 Escape 关掉了整个详情；弹层容器：${layers}`, async () => {
        assert.equal(await page.locator('#stage[open]').count(), 1, '焦点在 body 时 Escape 关掉了整个详情');
      });
      /* 固定从 body 发出键盘事件，焦点恢复不能把它变成弹层内的按键。 */
      await page.locator('[data-jav-actions]').getByRole('button', { name: '查找资源', exact: true }).click();
      await page.getByRole('heading', { name: '查找资源', exact: true }).waitFor();
      await page.locator('body').evaluate(node => node.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
      await page.locator('[data-modal-surface]').waitFor({ state: 'detached' });
      await withPageDiagnostics(page, '全局 Escape 只关里层弹层', async () => {
        assert.equal(await page.locator('#stage[open]').count(), 1, '全局键盘入口关掉了整个详情');
      });
      /* 直接触发原生关闭请求，使焦点恢复的快慢不能绕过 cancel 分支。 */
      await page.locator('[data-jav-actions]').getByRole('button', { name: '查找资源', exact: true }).click();
      await page.getByRole('heading', { name: '查找资源', exact: true }).waitFor();
      await page.locator('#stage').evaluate(node => node.dispatchEvent(new Event('cancel', { cancelable: true })));
      await page.locator('[data-modal-surface]').waitFor({ state: 'detached' });
      await withPageDiagnostics(page, '原生 cancel 只关里层弹层', async () => {
        assert.equal(await page.locator('#stage[open]').count(), 1, '原生 cancel 关掉了整个详情');
      });
      await page.locator('[data-jav-actions]').getByRole('button', { name: '想要', exact: true }).click();
      await page.locator('#toasts [data-sonner-toast]').filter({ hasText: '已加入想要' }).waitFor();
      assert.deepEqual(await hit('#toasts [data-sonner-toast]'), { onTop: true, inStage: true }, '操作回执被详情浮窗盖住');
      await page.locator('#closeStage').click();
      await page.locator('#stage').waitFor({ state: 'detached' });
      assert.equal(await page.locator('#toasts').evaluate(node => node.parentElement?.tagName), 'BODY', '浮窗收起后 Toast 栈没回到 body');
    } finally { await context.close() }
  });
  for (const viewport of VIEWPORTS) {
    it(`${viewport.name}：预告失败提示保持横排，重试恢复播放，资料提示上下等距`, { timeout: 60000 }, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      try {
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.route(/\/api\/jav\/detail\?/, route => route.fulfill({ json: { ...JAV_DETAIL,
          message: '作品资料未取得，请稍后重试', preview_video_url: `/stream?id=${process.env.PEACH_E2E_ITEM}` } }));
        let unavailable = true;
        await page.route(/\/stream\?/, route => unavailable
          ? route.fulfill({ status: 404, body: '' }) : route.continue());
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
        const infoNote = page.locator('[data-jav-info] > [role="note"]');
        await infoNote.waitFor();
        const spacing = await infoNote.evaluate(node => {
          const box = node.getBoundingClientRect();
          return { before: box.top - node.previousElementSibling!.getBoundingClientRect().bottom,
            after: node.nextElementSibling!.getBoundingClientRect().top - box.bottom };
        });
        assert.ok(spacing.before >= 16 && Math.abs(spacing.before - spacing.after) < 1, JSON.stringify(spacing));
        await page.locator('[data-jav-preview-toggle]').click();
        const preview = page.locator('[data-jav-video]');
        const failure = preview.getByRole('note');
        await failure.waitFor();
        assert.equal(await preview.locator('.video-js, video').count(), 0, '失败后移除播放器及其加载状态');
        const bounds = await failure.evaluate(node => {
          const box = node.getBoundingClientRect(), frame = node.parentElement!.getBoundingClientRect();
          const text = node.querySelector('p')!.getBoundingClientRect();
          return { width: box.width, textWidth: text.width, inside: box.left >= frame.left && box.right <= frame.right,
            centerOffset: Math.abs((box.top + box.bottom - frame.top - frame.bottom) / 2) };
        });
        assert.ok(bounds.width >= 260 && bounds.textWidth >= 120 && bounds.inside && bounds.centerOffset < 1, JSON.stringify(bounds));
        unavailable = false;
        await failure.getByRole('button', { name: '立即重试', exact: true }).click();
        await page.waitForFunction(() => (document.querySelector<HTMLVideoElement>('[data-jav-video] video')?.readyState || 0) >= 1);
        assert.equal(await failure.count(), 0);
        assert.ok((await layout(page)).scrollWidth <= viewport.width + 1);
      } finally { await context.close() }
    });
    it(`${viewport.name}：页面重建后评论与资源复用成功快照`, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      try {
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.route(/\/api\/jav\/detail\?/, route => route.fulfill({ json: { ...JAV_DETAIL,
          release_date: '2020-01-01', preview_count: 0, source_image: false } }));
        let reviews = 0, resources = 0;
        const checked = new Date().toISOString();
        await page.route(/\/api\/jav\/reviews\?/, route => {
          reviews++;
          return route.fulfill({ json: { ok: true, page: 1, more: false, checked_at: checked,
            items: [{ id: 'saved', username: '示例用户', content: '已保存的评论正文', created_at: checked }] } });
        });
        await page.route(/\/api\/jav\/resources\?/, route => {
          resources++;
          return route.fulfill({ json: { state: 'ready', items: [], warnings: [], error: '', checked_at: checked } });
        });
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
        for (let visit = 0; visit < 2; visit++) {
          await page.locator('[data-jav-info] h1').waitFor();
          await page.locator('[data-jav-reviews] summary').click();
          await page.getByText('已保存的评论正文').waitFor();
          await page.locator('[data-jav-resources] summary').click();
          await page.locator('[data-want-magnets]').scrollIntoViewIfNeeded();
          await page.getByText('暂未找到资源链接').waitFor();
          await settle(page, '#stage');
          assert.deepEqual({ reviews, resources }, { reviews: 1, resources: 1 });
          assert.ok((await layout(page)).scrollWidth <= viewport.width + 1);
          if (visit === 0) await page.reload();
        }
        const refreshed = page.waitForResponse(response => response.url().includes('/api/jav/reviews?') && response.url().includes('refresh=1'));
        await page.getByRole('button', { name: '刷新评论', exact: true }).click();
        await refreshed;
        await settle(page, '#stage');
        assert.deepEqual({ reviews, resources }, { reviews: 2, resources: 1 });
        await page.route(/\/api\/jav\/reviews\?/, route => {
          reviews++;
          return route.fulfill({ json: { ok: false, page: 1, items: [], more: false, message: '来源暂时不可用' } });
        });
        await page.getByRole('button', { name: '刷新评论', exact: true }).click();
        await page.getByText('来源暂时不可用').waitFor();
        assert.ok(await page.getByText('已保存的评论正文').isVisible());
        assert.equal(reviews, 3);
      } finally { await context.close() }
    });
    it(`${viewport.name}：加载骨架的两栏保持在详情画框内`, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      let release!: () => void;
      const held = new Promise<void>(resolve => { release = resolve });
      try {
        await context.addInitScript(() => localStorage.setItem('peach.settings.v1', JSON.stringify({ detailAutoplay: false })));
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.route(/\/api\/jav\/detail\?/, async route => {
          await held;
          await route.fulfill({ json: { ...JAV_DETAIL, preview_count: 0 } });
        });
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001', { waitUntil: 'domcontentloaded' });
        const skeleton = page.locator('#stage [data-skeleton="detail"]');
        await skeleton.waitFor();
        const bounds = await skeleton.evaluate(node => {
          const grid = node.querySelector('[data-stage-grid]')!.getBoundingClientRect();
          const media = node.querySelector('[data-stage-media]')!.getBoundingClientRect();
          const side = node.querySelector('[data-stage-side]')!.getBoundingClientRect();
          const shell = node.closest('[data-stage]')!.getBoundingClientRect();
          const lines = [...node.querySelectorAll('[data-stage-side] .skeleton')].map(line => line.getBoundingClientRect());
          return { grid: { width: grid.width, height: grid.height }, shellHeight: shell.height, mediaHeight: media.height,
            mediaWithin: media.left >= grid.left - 1 && media.right <= grid.right + 1,
            columnsSeparate: side.top >= media.bottom - 1 || media.right <= side.left + 1,
            linesWithin: lines.every(line => line.left >= side.left - 1 && line.right <= side.right + 1) };
        });
        assert.ok(bounds.mediaWithin && bounds.columnsSeparate && bounds.linesWithin, JSON.stringify(bounds));
        await page.screenshot({ path: `../build/jav-detail-pending-${viewport.name}.png` });
        release();
        await page.locator('#stage [data-jav-detail] h1').waitFor();
        const ready = await page.locator('#stage [data-jav-detail][data-stage-grid]').boundingBox();
        const shell = await page.locator('#stage').boundingBox();
        const media = await page.locator('#stage [data-jav-detail] > [data-stage-media]').boundingBox();
        assert.ok(ready && shell && media && Math.abs(ready.width - bounds.grid.width) <= 1
          && Math.abs(shell.height - bounds.shellHeight) <= 1 && Math.abs(media.height - bounds.mediaHeight) <= 1,
          JSON.stringify({ ready, bounds }));
      } finally { release(); await context.close() }
    });
    it(`${viewport.name} 新作在站内打开、预览切换、评论分页与关闭返回`, { timeout: 60000 }, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, isMobile: viewport.mobile, hasTouch: viewport.mobile, reducedMotion: 'reduce' });
      try {
        await context.addInitScript(() => localStorage.setItem('peach.settings.v1', JSON.stringify({ detailAutoplay: false, feedAutoScroll: false })));
        const page = await context.newPage();
        const errors: string[] = [];
        page.on('pageerror', error => errors.push(error.message));
        await mockJavDetail(page);
        await page.route(/\/jav-image\?/, async route => {
          const portrait = new URL(route.request().url()).searchParams.get('image') === '1';
          if (portrait) await new Promise(resolve => setTimeout(resolve, 350));
          const [width, height] = portrait ? [600, 900] : [900, 600];
          await route.fulfill({ contentType: 'image/svg+xml',
            body: `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="#777"/></svg>` });
        });
        await page.route(/\/api\/entity\/shapes/, route => route.fulfill({ json: { home: { feed: true }, entities: [] } }));
        await page.route(/\/api\/feeds\/discoveries\?/, route => route.fulfill({ json: { ok: true, items: [
          { id: 1, code: 'EXM-001', title: '示例新作', performers: '示例人物', release_date: '2026-10-30' },
        ] } }));
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/');
        const card = page.locator('#feedNew [data-feed-id="1"]');
        await card.waitFor({ state: 'visible' });
        await card.getByRole('link', { name: '打开 EXM-001 的作品详情' }).click();
        await page.waitForURL('**/works/EXM-001');
        await page.locator('#stage [data-jav-detail] h1').waitFor({ state: 'visible' });
        assert.ok(await page.locator('#stage').evaluate(el => (el as HTMLDialogElement).open));
        assert.equal(await card.count(), 1, '原列表留在详情底下');
        await page.getByRole('img', { name: 'EXM-001 封面', exact: true }).waitFor({ state: 'visible' });
        const shared = await page.locator('[data-jav-info]').evaluate(el => {
          const faces = [...el.querySelectorAll('[data-identity-primary] [data-id-face]')].map(face => {
            const box = face.getBoundingClientRect(); return { width: box.width, height: box.height, y: box.y };
          });
          const stars = [...el.querySelectorAll('[data-jav-rating] [data-rate]')];
          const code = el.querySelector('[data-detail-title] b')!.getBoundingClientRect();
          const tag = el.querySelector('[data-jav-tags] [data-detail-tag]')!;
          const tagStyle = getComputedStyle(tag), detailStyle = getComputedStyle(el);
          const range = document.createRange();
          // 标题文字在带语言标记的 span 里：量它的第一个字。
          const text = el.querySelector('[data-detail-title] > span')!.firstChild!;
          range.setStart(text, 0); range.setEnd(text, 1);
          return { faces, stars: stars.length, filled: stars.filter(star => star.getAttribute('data-on') === 'true').length,
            icons: el.querySelectorAll('[data-stage-meta] [data-spec-item] svg').length,
            codeY: code.y, titleY: range.getBoundingClientRect().y,
            tag: el.querySelector('[data-jav-tags] [data-tag]')?.textContent,
            tagCat: el.querySelector('[data-jav-tags] [data-tag-cat]')?.getAttribute('data-tag-cat'),
            tagShape: { height: parseFloat(tagStyle.height), radius: parseFloat(tagStyle.borderRadius), border: parseFloat(tagStyle.borderTopWidth) },
            tagTokens: { height: parseFloat(detailStyle.getPropertyValue('--control-h-inline')),
              radius: parseFloat(detailStyle.getPropertyValue('--tag-radius')), border: 1 } };
        });
        assert.equal(shared.faces.length, 3, '女优、未知出演者与厂牌各有独立身份格');
        assert.equal(await page.locator('[data-id-gender="male"]').count(), 0);
        for (const [gender, label] of [['female', '女优'], ['unknown', '出演者']]) {
          assert.equal(await page.locator(`[data-id-gender="${gender}"] [data-id-label]`).textContent(), label);
          assert.equal(await page.locator(`[data-id-gender="${gender}"] [data-id-face]`).count(), 1);
        }
        assert.ok(shared.faces.every(face => face.width === 46 && face.height === 46));
        assert.ok(shared.faces.every(face => Math.abs(face.y - shared.faces[0]!.y) < 1));
        assert.equal(shared.stars, 5);
        assert.equal(shared.filled, 4);
        assert.equal(await page.locator('[data-jav-art]').evaluate(node => getComputedStyle(node).backgroundColor), 'rgb(0, 0, 0)');
        await page.locator('[data-jav-rating] [data-rate="1"]').hover();
        const fraction = await page.locator('[data-jav-info] > [data-jav-rating] [data-rate="5"]').evaluate(el =>
          el.querySelector('[data-rating-fill]')!.getBoundingClientRect().width / el.querySelector('[data-rating-icon]')!.getBoundingClientRect().width);
        assert.ok(Math.abs(fraction - 0.4) < 0.01, '4.4 的第五颗星填充 40%');
        const starLayers = await page.locator('[data-jav-info] > [data-jav-rating] [data-rate]').evaluateAll(nodes => nodes.map(node => {
          const [outline, fill] = node.querySelectorAll('svg');
          const a = outline!.getBoundingClientRect(), b = fill!.getBoundingClientRect();
          return Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y), Math.abs(a.width - b.width), Math.abs(a.height - b.height));
        }));
        assert.ok(starLayers.every(error => error < .5), JSON.stringify(starLayers));
        assert.equal(shared.icons, 2);
        assert.ok(Math.abs(shared.codeY - shared.titleY) < 2, '番号与标题在同一行开始');
        assert.equal(shared.tag, '痴女'); assert.equal(shared.tagCat, 'role');
        assert.deepEqual(shared.tagShape, shared.tagTokens, '新作标签沿用本地详情的高度、圆角与边框');
        await page.locator('[data-id-gender="female"] [data-id-face] img').waitFor({ state: 'visible' });
        assert.equal(await page.locator('[data-id-cell="studio"]').evaluate(node => node.tagName), 'SPAN', '未登记厂牌只显示名称');
        assert.equal(await page.locator('[data-follow-image-dots] button').count(), 13);
        const dots = await page.locator('[data-follow-image-dots]').evaluate(el => {
          const box = el.getBoundingClientRect();
          const rect = el.querySelector('[aria-current="true"]')!.getBoundingClientRect();
          return el.scrollWidth > el.clientWidth && rect.left >= box.left && rect.right <= box.right;
        });
        assert.ok(dots, '圆点条可滚动且当前项完整可见');
        assert.equal(await page.locator('[data-carousel-video]').evaluate(el => el.getBoundingClientRect().width), 20);
        assert.equal(await page.locator('[data-media-thumbnails]').count(), 1);
        await page.locator('[data-media-thumbnail="1"] img').waitFor({ state: 'visible' });
        const indicator = page.locator('[data-follow-image-dots]');
        const stripBox = await indicator.boundingBox(), mainBox = await page.locator('[data-jav-picture]').boundingBox();
        assert.ok(stripBox && mainBox && stripBox.y >= mainBox.y + mainBox.height);
        await indicator.hover();
        await page.mouse.wheel(0, 180);
        await page.waitForFunction(() => (document.querySelector('[data-follow-image-dots]')?.scrollLeft || 0) > 0);
        await page.evaluate(() => {
          const frames: { width: number; height: number }[] = [];
          Object.assign(window, { detailHeightFrames: frames });
          const sample = () => { const frame = document.querySelector('[data-stage-media]');
            if (frame) frames.push({ width: innerWidth, height: frame.getBoundingClientRect().height });
            if (frames.length < 120) requestAnimationFrame(sample);
          }; sample();
        });
        const imageDot = page.getByRole('button', { name: '预览 2', exact: true });
        await page.keyboard.press('Tab');
        await imageDot.focus();
        assert.equal(await page.locator('[data-media-preview-tip]').count(), 0);
        assert.equal(await page.locator('[data-follow-image-item][aria-current="true"]').getAttribute('data-follow-image-item'), '-1', '聚焦预览保持当前图片');
        await imageDot.click();
        await page.getByRole('img', { name: 'EXM-001 预览 2', exact: true }).waitFor();
        await page.getByRole('button', { name: '封面', exact: true }).click();
        if (viewport.mobile) {
          await page.setViewportSize({ width: 350, height: viewport.height });
          assert.equal(await page.locator('[data-follow-image-dots] button').count(), 13);
          assert.equal(await page.locator('[data-follow-image-count]').count(), 0);
          await page.setViewportSize({ width: viewport.width, height: viewport.height });
          await page.locator('[data-follow-image-dots]').waitFor({ state: 'visible' });
        }
        await page.getByRole('button', { name: '下一项媒体', exact: true }).click();
        await page.getByRole('img', { name: 'EXM-001 预览 1', exact: true }).waitFor({ state: 'visible' });
        await page.getByRole('button', { name: '上一项媒体', exact: true }).click();
        await page.getByRole('button', { name: '视频预览', exact: true }).first().click();
        await page.waitForFunction(() => { const video = document.querySelector<HTMLVideoElement>('[data-jav-video] video'); return video && video.readyState >= 1 && Number.isFinite(video.duration) && video.duration > 0 });
        assert.ok(await page.locator('[data-jav-video] video.vjs-tech').evaluate(video => (video as HTMLVideoElement).paused), '预览等待用户播放');
        const preview = page.locator('[data-jav-video]');
        const playerBox = await preview.locator('.video-js').boundingBox();
        assert.ok(playerBox && Math.abs(playerBox.width / playerBox.height - 16 / 9) < 0.02, JSON.stringify(playerBox));
        const indicatorBox = await page.locator('[data-follow-image-dots]').boundingBox();
        assert.ok(playerBox && indicatorBox && indicatorBox.y >= playerBox.y + playerBox.height, '视频 indicator 位于播放器下方');
        await preview.getByRole('button', { name: '播放', exact: true }).waitFor({ state: 'visible' });
        assert.equal(await preview.locator('.vjs-control-bar').evaluate(el => getComputedStyle(el).visibility), 'visible');
        await preview.locator('video.vjs-tech').evaluate(node => { (node as HTMLVideoElement).muted = true });
        await preview.getByRole('button', { name: '播放', exact: true }).click();
        await page.waitForFunction(() => (document.querySelector<HTMLVideoElement>('[data-jav-video] video')?.currentTime || 0) > 0);
        await preview.getByRole('button', { name: '暂停', exact: true }).click();
        assert.ok(await preview.locator('video.vjs-tech').evaluate(node => (node as HTMLVideoElement).paused));
        await preview.getByRole('button', { name: '设置', exact: true }).click();
        await preview.getByRole('menuitem', { name: /播放速度/ }).waitFor({ state: 'visible' });
        await preview.getByRole('button', { name: '设置', exact: true }).click();
        await page.getByRole('button', { name: '查看图片', exact: true }).click();
        assert.equal(await page.locator('[data-jav-video] video.vjs-tech').count(), 0, '切回图片卸下预览播放器');
        const frames = await page.evaluate(() => (window as unknown as { detailHeightFrames: { width: number; height: number }[] }).detailHeightFrames);
        assert.ok(frames.length > 3);
        for (const width of new Set(frames.map(frame => frame.width))) {
          const heights = frames.filter(frame => frame.width === width).map(frame => frame.height);
          assert.ok(Math.max(...heights) - Math.min(...heights) < 1, JSON.stringify({ width, heights }));
        }
        const reviewsToggle = page.locator('[data-jav-reviews] summary');
        const resourcesToggle = page.locator('[data-jav-resources] > details > summary');
        for (const toggle of [reviewsToggle, resourcesToggle]) {
          assert.equal(await toggle.getAttribute('aria-expanded'), 'false');
          assert.equal(await toggle.locator('svg').count(), 2, '对象图标和展开箭头齐备');
        }
        const sourceButton = page.getByRole('link', { name: '作品来源', exact: true });
        assert.deepEqual(await page.locator('[data-jav-actions] :is(button, a)').allTextContents(), ['作品来源', '想要', '查找资源']);
        assert.ok(await sourceButton.evaluate(el => parseFloat(getComputedStyle(el).borderWidth) > 0));
        const side = page.locator('[data-jav-info]');
        const before = await page.locator('#stage').boundingBox();
        const title = await side.locator('h1').elementHandle();
        await reviewsToggle.evaluate(node => {
          const state = window as unknown as { commentFrames: { height: number; y: number; media: number }[]; commentSampling: boolean };
          state.commentFrames = []; state.commentSampling = true;
          node.addEventListener('pointerdown', () => {
            const sample = () => {
              const shell = document.querySelector('#stage')!.getBoundingClientRect();
              const media = document.querySelector('[data-jav-art]')!.getBoundingClientRect();
              state.commentFrames.push({ height: shell.height, y: shell.y, media: media.height });
              if (state.commentSampling && state.commentFrames.length < 600) requestAnimationFrame(sample);
            };
            requestAnimationFrame(sample);
          }, { once: true });
        });
        await reviewsToggle.click();
        await page.waitForFunction(() => document.querySelectorAll('[data-jav-review]').length === 10);
        assert.equal(await page.locator('[data-jav-review] img').count(), 0, '评论正文按文本呈现');
        assert.equal(await page.locator('[data-jav-review] time').first().textContent(), '2026-10-12');
        assert.equal(await page.locator('[data-jav-review] [data-rating-stars]').first().locator('[data-rate]').count(), 5);
        const centers = await page.locator('[data-jav-review-meta]').first().evaluate(node => [...node.children].map(child => {
          const box = child.getBoundingClientRect(); return box.y + box.height / 2;
        }));
        assert.ok(Math.max(...centers) - Math.min(...centers) < 1, JSON.stringify(centers));
        assert.ok(await title!.evaluate(node => node.isConnected), '评论加载保留标题节点');
        assert.ok(await side.locator('h1').isVisible(), '评论加载后详情标题可见');
        assert.ok(await page.locator('[data-jav-actions]').isVisible(), '评论加载后详情操作可见');
        if (!viewport.mobile) {
          const after = await page.locator('#stage').boundingBox();
          assert.ok(before && after && Math.abs(before.height - after.height) < 1 && Math.abs(before.y - after.y) < 1, '评论展开保持详情框几何');
        }
        await page.getByRole('button', { name: '更多评论', exact: true }).click();
        await page.waitForFunction(() => document.querySelectorAll('[data-jav-review]').length === 12);
        assert.equal(await page.getByRole('button', { name: '更多评论', exact: true }).count(), 0);
        await reviewsToggle.click();
        await page.locator('[data-jav-review]').first().waitFor({ state: 'hidden' });
        assert.equal(await reviewsToggle.getAttribute('aria-expanded'), 'false');
        await reviewsToggle.click();
        await page.locator('[data-jav-review]').last().waitFor({ state: 'visible' });
        const commentFrames = await page.evaluate(() => {
          const state = window as unknown as { commentFrames: { height: number; y: number; media: number }[]; commentSampling: boolean };
          state.commentSampling = false; return state.commentFrames;
        });
        assert.ok(commentFrames.length > 3);
        for (const field of ['height', 'y', 'media'] as const) {
          const values = commentFrames.map(frame => frame[field]);
          assert.ok(Math.max(...values) - Math.min(...values) < 1, `评论切换 ${field} 保持一致：${JSON.stringify(values)}`);
        }
        await withPageDiagnostics(page, '展开作品资源列表', async () => {
          await resourcesToggle.click();
          await page.getByText('EXM-001 示例资源 1', { exact: false }).waitFor({ state: 'visible' });
        });
        assert.equal(await page.locator('[data-jav-resources] [data-resource-protocol]:visible').count(), 3);
        await page.getByText('更多资源（3 条）', { exact: true }).click();
        await page.getByText('EXM-001 示例资源 6', { exact: true }).waitFor({ state: 'visible' });
        assert.equal(await page.locator('[data-jav-resources] [data-resource-protocol]:visible').count(), 6);
        const resources = await page.locator('[data-jav-resources] [data-resource-protocol]:visible').evaluateAll(rows => rows.map(row => {
          const box = row.getBoundingClientRect(), title = row.querySelector('[data-resource-main]')!.getBoundingClientRect();
          const actions = row.querySelector('[data-resource-actions]')!.getBoundingClientRect();
          return { width: box.width, titleWidth: title.width, titleBottom: title.bottom, actionsTop: actions.top, actionsRight: actions.right, right: box.right };
        }));
        assert.ok(resources.every(row => row.titleWidth >= row.width - 1 && row.actionsTop >= row.titleBottom - 1 && row.actionsRight <= row.right + 1), JSON.stringify(resources));
        const lines = await page.locator('[data-jav-resources] [data-resource-protocol]:visible').evaluateAll(rows => rows.map(row => {
          const style = getComputedStyle(row);
          return { width: style.borderBottomWidth, color: style.borderBottomColor,
            expected: getComputedStyle(row.closest('[data-want-magnets]')!).borderTopColor };
        }));
        assert.ok(lines.every(line => line.width === '1px' && line.color === line.expected), JSON.stringify(lines));
        assert.ok(await page.locator('[data-jav-resources]').getByRole('button', { name: '添加下载', exact: true }).first().isDisabled());
        assert.deepEqual(await page.locator('[data-resource-actions]').first().locator('button, a').allTextContents(), ['链接来源', '复制链接', '添加下载']);
        assert.equal(await page.locator('[data-resource-facts]').first().getByText('高清', { exact: true }).count(), 0);
        const facts = await page.locator('[data-resource-facts]').first().evaluate(node => {
          const boxes = [...node.children].map(child => child.getBoundingClientRect());
          return boxes.map(box => box.y);
        });
        assert.ok(Math.max(...facts) - Math.min(...facts) < 1, JSON.stringify(facts));
        await resourcesToggle.click();
        await page.locator('[data-jav-resources] [data-resource-protocol]').first().waitFor({ state: 'hidden' });
        await resourcesToggle.click();
        await page.locator('[data-jav-resources] [data-resource-protocol]').first().waitFor({ state: 'visible' });
        await page.getByRole('button', { name: '想要', exact: true }).click();
        await page.getByRole('button', { name: '取消想要', exact: true }).waitFor({ state: 'visible' });
        await page.getByRole('button', { name: '取消想要', exact: true }).click();
        await page.getByRole('button', { name: '想要', exact: true }).waitFor({ state: 'visible' });
        await settle(page, '#stage[open]');
        const geometry = await layout(page);
        assert.ok(geometry.scrollWidth <= geometry.viewportWidth + 1);
        assert.deepEqual(errors, []);
        await page.screenshot({ path: `../build/jav-detail-${viewport.name}.png` });
        await page.locator('#closeStage').click();
        await page.waitForURL(requiredEnv('PEACH_E2E_ORIGIN') + '/');
        await card.waitFor({ state: 'visible' });
        assert.equal(await page.locator('#stage').count(), 0);
        await page.goBack();
        await page.locator('#stage [data-jav-detail] h1').waitFor({ state: 'visible' });
        await page.keyboard.press('Escape');
        await page.waitForURL(requiredEnv('PEACH_E2E_ORIGIN') + '/');
        await card.getByRole('link', { name: '打开 EXM-001 的作品详情' }).click();
        const detailUrl = page.url();
        await page.locator('[data-id-cell="studio"]').click();
        assert.equal(page.url(), detailUrl);
        assert.ok(await page.locator('#stage').isVisible(), '未登记厂牌不跳转筛选');
      } finally { await context.close() }
    });
    it(`${viewport.name}：已登记厂牌打开资料页`, { timeout: 60000 }, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      try {
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.route(/\/api\/jav\/detail\?/, route => route.fulfill({ json: { ...JAV_DETAIL,
          preview_count: 0, source_image: false, studio_refs: [{ id: 50, name: '示例厂牌', has_logo: false }] } }));
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
        const studio = page.locator('button[data-id-cell="studio"]');
        await studio.waitFor();
        await studio.click();
        await page.waitForURL(url => url.pathname === '/studios/50');
        assert.equal(await page.locator('#stage').count(), 0);
      } finally { await context.close() }
    });
    it(`${viewport.name} 深链刷新与来源未取得仍可关闭`, { timeout: 60000 }, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      try {
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.addInitScript(() => {
          const heights: number[] = [];
          Object.assign(window, { coldDetailHeights: heights });
          const sample = () => {
            const dialog = document.querySelector<HTMLDialogElement>('#stage[open]');
            if (dialog) heights.push(dialog.clientHeight);
            if (heights.length < 180) requestAnimationFrame(sample);
          }; requestAnimationFrame(sample);
        });
        await page.route(/\/api\/jav\/detail\?/, async route => {
          await new Promise(resolve => setTimeout(resolve, 400));
          await route.fulfill({ json: { ...JAV_DETAIL, state: 'partial', source_image: false,
            preview_count: 0, message: '作品资料未取得，请稍后重试' } });
        });
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
        await page.getByText('作品资料未取得，请稍后重试', { exact: true }).waitFor({ state: 'visible' });
        const heights = await page.evaluate(() => (window as unknown as { coldDetailHeights: number[] }).coldDetailHeights);
        assert.ok(heights.length > 5 && Math.max(...heights) - Math.min(...heights) < 1, JSON.stringify(heights));
        await page.reload();
        await page.getByText('作品资料未取得，请稍后重试', { exact: true }).waitFor({ state: 'visible' });
        await page.locator('#closeStage').click();
        await page.waitForURL('**/jav?tab=discover');
      } finally { await context.close() }
    });
    for (const readOnly of [false, true]) it(`${viewport.name}：下载服从数据库只读状态`, { timeout: 60000 }, async () => {
      const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, reducedMotion: 'reduce' });
      try {
        const page = await context.newPage();
        await mockJavDetail(page);
        await page.route('**/healthz', async route => {
          const response = await route.fetch();
          await route.fulfill({ json: { ...await response.json(), configurable: false, ledger_read_only: readOnly } });
        });
        let submitted: Record<string, unknown> | null = null;
        await page.route(/\/api\/downloads(?:\?|$)/, route => {
          if (route.request().method() === 'POST') {
            submitted = route.request().postDataJSON();
            return route.fulfill({ json: { ok: true, outcome: 'submitted', task: { id: 1 } } });
          }
          return route.fulfill({ json: { available: true, providers: [{ key: '115', label: '115', configured: true, target: '/fixture' }], tasks: [] } });
        });
        await page.goto(requiredEnv('PEACH_E2E_ORIGIN') + '/works/EXM-001');
        assert.equal(await page.getByRole('button', { name: '想要', exact: true }).isDisabled(), readOnly);
        await page.locator('[data-jav-resources] > details > summary').click();
        const add = page.locator('[data-jav-resources]').getByRole('button', { name: '添加下载', exact: true }).first();
        await add.waitFor({ state: 'visible' });
        if (readOnly) assert.ok(await add.isDisabled());
        else {
          await page.waitForFunction(() => !document.querySelector<HTMLButtonElement>('[data-jav-resources] [data-resource-actions] button:last-child')?.disabled);
          await add.click();
          await page.getByRole('button', { name: '已添加', exact: true }).first().waitFor();
          assert.equal(submitted?.provider, '115');
          assert.equal(submitted?.code, 'EXM-001');
        }
      } finally {
        await Promise.all(context.pages().map(page => page.unrouteAll({ behavior: 'wait' })));
        await context.close();
      }
    });
  }
});