import { chromium } from "playwright-core";

import { readFileSync, readdirSync, renameSync, mkdirSync } from "fs";

const EXE = "/root/.npm/_npx/361ceb562f3b3235/node_modules/playwright-core/.local-browsers/chromium-1228/chrome-linux64/chrome";

const SCR = "/tmp/claude-0/-shared-projects/26d7af11-61c4-4183-85c3-70d9aac72ef6/scratchpad";

const REC = "/shared/projects/SteppingApp/promo/rec";

const BASE = "http://REDACTED-IP:3000";

const DJ = readFileSync(`${SCR}/.djid`, "utf8").trim();

const EV = readFileSync(`${SCR}/.evid`, "utf8").trim();

const scenes = [

  { id: "s1", url: "/", vp: [1920, 1080], dur: 11.3, act: "hero" },

  { id: "s2", url: "/", vp: [1920, 1080], dur: 7.45, act: "toRoute" },

  { id: "s3", url: "/city/atlanta", vp: [1920, 1080], dur: 12.15, act: "scroll" },

  { id: "s4", url: `/city/atlanta/event/${EV}`, vp: [1920, 1080], dur: 8.18, act: "scroll" },

  { id: "s5", url: "/city/atlanta/yard", vp: [1920, 1080], dur: 11.3, act: "scroll" },

  { id: "s6", url: `/city/atlanta/profile/dj/${DJ}`, vp: [1920, 1080], dur: 5.55, act: "hold" },

  { id: "s7", url: "/city/atlanta/route", vp: [1920, 1080], dur: 11.5, act: "scroll" },

  { id: "s8", url: "/", vp: [430, 932], dur: 10.25, act: "scroll", mobile: true },

  { id: "s9", url: "/", vp: [1920, 1080], dur: 9.2, act: "hero" },

];

const args = ["--no-sandbox", "--disable-dev-shm-usage", "--use-gl=angle", "--use-angle=swiftshader", "--enable-unsafe-swiftshader", "--ignore-gpu-blocklist"];

const browser = await chromium.launch({ executablePath: EXE, args });

for (const s of scenes) {

  const dir = `${REC}/${s.id}`;

  mkdirSync(dir, { recursive: true });

  const ctx = await browser.newContext({

    viewport: { width: s.vp[0], height: s.vp[1] },

    deviceScaleFactor: 1,

    recordVideo: { dir, size: { width: s.vp[0], height: s.vp[1] } },

    ...(s.mobile ? { isMobile: true, hasTouch: true } : {}),

  });

  const page = await ctx.newPage();

  await page.goto(`${BASE}${s.url}`, { waitUntil: "networkidle" });

  await page.waitForTimeout(s.act === "hero" ? 1800 : 900);

  const ms = s.dur * 1000;

  if (s.act === "hero") {

    const [W, H] = s.vp;

    const pts = [[W * 0.6, H * 0.42], [W * 0.72, H * 0.55], [W * 0.54, H * 0.5], [W * 0.68, H * 0.46]];

    const per = ms / pts.length;

    for (const [x, y] of pts) {

      await page.mouse.move(x, y, { steps: 24 });

      await page.mouse.click(x, y);

      await page.waitForTimeout(Math.max(per - 250, 200));

    }

  } else if (s.act === "toRoute") {

    await page.evaluate(() => {

      const l = window.__lenis; const el = document.querySelector("#route");

      if (el && l) l.scrollTo(el.offsetTop - 90, { duration: 4.5 });

    });

    await page.waitForTimeout(ms);

  } else if (s.act === "scroll") {

    await page.evaluate((d) => {

      const l = window.__lenis; const t = document.body.scrollHeight - window.innerHeight;

      if (l) l.scrollTo(t, { duration: d }); else window.scrollTo({ top: t, behavior: "smooth" });

    }, s.dur - 1.5);

    await page.waitForTimeout(ms);

  } else {

    await page.waitForTimeout(ms);

  }

  await ctx.close();

  const f = readdirSync(dir).find((x) => x.endsWith(".webm"));

  renameSync(`${dir}/${f}`, `${REC}/${s.id}.webm`);

  console.log(s.id, "recorded");

}

await browser.close();

console.log("ALL RECORDED");