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">
  <h1>Host page</h1>
  <script src="http://219.157.255.213:32006/embed/v2/loader.js" data-slot="oqh763sbarka2lw6u1iqefu0" defer></script></body></html>`);
});
await new Promise((r) => server.listen(3987, '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:3987');
const frame = page.locator('iframe[src*="/embed/"][src*="v=2"]');
await frame.waitFor({ timeout: 20000 });
await page.waitForTimeout(4000);
const inside = page.frameLocator('iframe[src*="/embed/"][src*="v=2"]');
console.log('[title] =', (await inside.locator('.stream-title').textContent().catch(() => '(none)'))?.trim());

const box = await frame.boundingBox();
await page.mouse.move((box ? box.x : 0) + 90, (box ? box.y : 0) + 150);
await page.waitForTimeout(600);
let popupOpened = false;
page.once('popup', () => { popupOpened = true; });
await inside.locator('a.stream-photo').first().click({ force: true, noWaitAfter: true });
const modalFrame = page.locator('iframe[title="PhotoLive photo detail"]');
await modalFrame.waitFor({ timeout: 8000 });
console.log('[modal] appeared; popup =', popupOpened);
await page.waitForTimeout(2500);
const detailUrl = page.frames().find((f) => f.url().includes('/p/'))?.url() ?? '';
console.log('[modal] detail =', detailUrl.slice(0, 90));
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');
server.close(); await browser.close();