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><body style="min-height:900px">
  <script src="http://219.157.255.213:32006/embed/v2/loader.js" data-slot="se1bt8mqvmeese4jx9gixnj4" defer></script></body></html>`);
});
await new Promise((r) => server.listen(3977, '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:3977');
const frame = page.locator('iframe[src*="/embed/"][src*="v=2"]');
await frame.waitFor({ timeout: 20000 });
await page.waitForTimeout(3000);
const f = page.frames().find((fr) => fr.url().includes('v=2'));
const offset = async () => {
  const t = await f.locator('.stream-track').evaluate((el) => el.style.transform);
  return Number.parseFloat((/translateY\((-?[\d.]+)px\)/.exec(t) ?? ['0', '0'])[1]);
};
const box = await frame.boundingBox();
const cx = (box ? box.x : 0) + 90, cy = (box ? box.y : 0) + 150;
const scrolling = async (ms = 1000) => { const a = await offset(); await page.waitForTimeout(ms); return a !== (await offset()); };

console.log('1. baseline scrolling =', await scrolling());

// 窗内拖动 → 鼠标移开 → 恢复
await page.mouse.move(cx, cy); await page.mouse.down();
await page.mouse.move(cx, cy + 40, { steps: 4 }); await page.mouse.up();
await page.mouse.move(30, 30); await page.waitForTimeout(1500);
console.log('2. after in-frame drag (pointer away) =', await scrolling());

// 窗外释放 → 2s 看门狗 → 恢复
await page.mouse.move(cx, cy); await page.mouse.down();
await page.mouse.move(cx + 120, cy + 200, { steps: 4 }); await page.mouse.up();
await page.waitForTimeout(3500);
console.log('3. after outside-release =', await scrolling());

// 长跑 30s
const s1 = await offset(); await page.waitForTimeout(30000); const s2 = await offset();
console.log('4. 30s moved =', Math.abs(s2 - s1).toFixed(0), 'px (expect ~480)');

// hover 语义
await page.mouse.move(cx, cy); await page.waitForTimeout(800);
const h1 = await offset(); await page.waitForTimeout(800); const h2 = await offset();
await page.mouse.move(30, 30); await page.waitForTimeout(1500);
const h3 = await offset(); await page.waitForTimeout(800); const h4 = await offset();
console.log('5. hover pause =', h1 === h2, '; leave resume =', h3 !== h4);

// 点击弹框仍正常
await page.mouse.click(cx, cy);
await page.locator('iframe[title="PhotoLive photo detail"]').waitFor({ timeout: 8000 });
console.log('6. photo click modal works');
await page.screenshot({ path: '../../docs/designs/ui04-implementation/actual/server/freeze-fixed-final.png' });
server.close(); await browser.close();