import { createServer } from 'node:http';
import { chromium } from '@playwright/test';
const server = createServer((_q, res) => {
  res.setHeader('content-type', 'text/html; charset=utf-8');
  res.end(`<!doctype html><html><head><meta charset="utf-8" /></head><body style="min-height:900px">
  <script src="http://219.157.255.213:32006/embed/v2/loader.js" data-slot="dg0mo4i5gov39g1vv0wgisgb" defer></script></body></html>`);
});
await new Promise((r) => server.listen(3991, '127.0.0.1', r));
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('http://127.0.0.1:3991');
const frame = page.locator('iframe[src*="/embed/"][src*="v=2"]');
await frame.waitFor({ timeout: 20000 });
await page.waitForTimeout(2500);
const inside = page.frameLocator('iframe[src*="/embed/"][src*="v=2"]');

// ① 标题条显示
const title = await inside.locator('.stream-title').textContent();
console.log('[title] =', title?.trim());

// ② 点击照片 → 宿主弹框（不再新标签）
const box = await frame.boundingBox();
await page.mouse.move((box ? box.x : 0) + 90, (box ? box.y : 0) + 140);
await page.waitForTimeout(500);
let popupOpened = false;
page.once('popup', () => { popupOpened = true; });
await inside.locator('a.stream-photo').first().click();
const modalFrame = page.locator('iframe[title="PhotoLive photo detail"]');
await modalFrame.waitFor({ timeout: 8000 });
console.log('[modal] appeared = true; popup opened =', popupOpened);
await page.waitForTimeout(2500);
const detailUrl = page.frames().find((f) => f.url().includes('/p/'))?.url() ?? '';
console.log('[modal] detail url =', detailUrl.slice(0, 80));
await page.screenshot({ path: '../../docs/designs/ui04-implementation/actual/server/photo-modal-live.png' });

// ③ 关闭
await page.locator('button[aria-label^="Close photo"], button[aria-label^="关闭照片"]').click();
await modalFrame.waitFor({ state: 'detached', timeout: 5000 });
console.log('[modal] closed = true');
server.close(); await browser.close();