// An actual browser recording of the working site. Only a cursor indicator is injected.
import { mkdir, rename, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';
const { chromium } = await import(process.env.PLAYWRIGHT_MODULE || 'playwright');
const output = resolve(process.env.CAPTURE_DIR || 'output/playwright');
const url = process.env.PREVIEW_URL || 'http://127.0.0.1:4317';
await mkdir(output, { recursive: true });
const startUTC = new Date().toISOString(), start = performance.now();
const browser = await chromium.launch({ headless: true, ...(process.env.CHROMIUM_EXECUTABLE ? { executablePath: process.env.CHROMIUM_EXECUTABLE } : {}) });
const context = await browser.newContext({ viewport: { width: 1440, height: 1080 }, deviceScaleFactor: 1, recordVideo: { dir: output, size: { width: 1440, height: 1080 } } });
await context.addInitScript(() => {
  addEventListener('DOMContentLoaded', () => {
    const marker = document.createElement('div');
    marker.setAttribute('aria-hidden', 'true');
    marker.style.cssText = 'position:fixed;left:-30px;top:-30px;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #fff6d5;border-radius:50%;background:#af704bbd;box-shadow:0 1px 5px #0006;pointer-events:none;z-index:10000;';
    document.body.appendChild(marker);
    addEventListener('mousemove', e => { marker.style.left = e.clientX + 'px'; marker.style.top = e.clientY + 'px'; });
    addEventListener('mousedown', () => marker.style.transform = 'scale(.7)');
    addEventListener('mouseup', () => marker.style.transform = 'scale(1)');
  });
});
const page = await context.newPage();
const video = page.video();
await page.goto(url);
await page.waitForTimeout(1900);
const box = await page.locator('#dial-surface').boundingBox();
const cx = box.x + box.width / 2, cy = box.y + box.height / 2, r = box.width * .34;
await page.mouse.move(cx, cy - r, { steps: 24 });
await page.mouse.down();
for (let i = 0; i <= 45; i++) {
  const a = (-90 + i / 45 * 120) * Math.PI / 180;
  await page.mouse.move(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
  await page.waitForTimeout(22);
}
await page.mouse.up();
await page.waitForTimeout(700);
await page.locator('#open-section').click();
await page.waitForTimeout(2100);
await page.locator('#section-dial').focus();
await page.locator('#section-dial').press('End');
await page.waitForTimeout(850);
await page.locator('#section-dial').press('Enter');
await page.waitForTimeout(2100);
await page.locator('[data-section="0"]').click();
await page.waitForTimeout(1000);
await page.locator('[data-project="1"]').click();
await page.waitForTimeout(2000);
await page.locator('[data-project="2"]').click();
await page.waitForTimeout(2200);
await page.locator('.text-link').click();
await page.waitForTimeout(1600);
await page.mouse.wheel(0, 610);
await page.waitForTimeout(1700);
await page.goto(url);
await page.waitForTimeout(1600);
await context.close();
const recordedPath = await video.path();
await rename(recordedPath, resolve(output, 'pocket-observatory-demo.webm'));
await browser.close();
const record = { startedUTC: startUTC, endedUTC: new Date().toISOString(), elapsedSeconds: +((performance.now() - start) / 1000).toFixed(3), viewport: { width: 1440, height: 1080 }, browserRecording: 'Playwright recordVideo / Chromium', audio: 'none', overlay: 'Small pointer marker only; site pixels and interactions are captured live.', sequence: ['Opening Work view', 'Pointer rotation selects About and shifts constellation', 'OPEN reads About', 'Keyboard End / Enter opens Contact with visible focus', 'Direct Work navigation', 'Type in Motion', 'Turning Point', 'Plain text view and scroll', 'Return to opening view'] };
await writeFile(resolve(output, 'capture.json'), JSON.stringify(record, null, 2) + '\n');
console.log(JSON.stringify(record));
