import { chromium } from "playwright";
import { createServer } from "node:http";
import { readFile } from "node:fs/promises";
import { extname, join } from "node:path";
import { fileURLToPath } from "node:url";

const root = fileURLToPath(new URL(".", import.meta.url));
const frames = ["graybox", "formation-review", "approach-contact", "damage-feedback", "heal-response", "ranged-finish", "first-diagnosis"];
const mime = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript", ".png": "image/png", ".ttf": "font/ttf", ".json": "application/json" };

const server = createServer(async (request, response) => {
  const rawPath = decodeURIComponent((request.url || "/").split("?")[0]);
  const relativePath = rawPath === "/" ? "index.html" : rawPath.replace(/^\//, "");
  try {
    const body = await readFile(join(root, relativePath));
    response.writeHead(200, { "content-type": mime[extname(relativePath)] || "application/octet-stream" });
    response.end(body);
  } catch {
    response.writeHead(404);
    response.end("Not found");
  }
});

await new Promise(resolve => server.listen(0, "127.0.0.1", resolve));
const { port } = server.address();
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 844, height: 390 }, deviceScaleFactor: 1 });

for (const id of frames) {
  const url = id === "graybox"
    ? `http://127.0.0.1:${port}/graybox.html`
    : `http://127.0.0.1:${port}/index.html?frame=${id}`;
  await page.goto(url, { waitUntil: "networkidle" });
  await page.screenshot({ path: join(root, "previews", `${id}.png`) });
}

await browser.close();
server.close();