// 二期第1段验收抓图:脚本入口(两选) / 设定卡 / 上传脚本 / 三视图双通道
import { chromium } from "playwright";
import { mkdirSync } from "node:fs";

const BASE = process.env.BASE || "http://127.0.0.1:5173";
const API = process.env.API || "http://127.0.0.1:8010";
const OUT = process.argv[2] || "shots-seg1";
mkdirSync(OUT, { recursive: true });

const login = await (await fetch(`${API}/api/auth/login/`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username: "airshelf", password: "Restraint2026" })
})).json();
const tok = login.token;
const auth = { Authorization: `Token ${tok}`, "Content-Type": "application/json" };

// 要看的是「还没脚本」的空态,所以每次现建一个干净项目,抓完删掉
const prods = (await (await fetch(`${API}/api/products/`, { headers: auth })).json()).results || [];
const target = await (await fetch(`${API}/api/projects/`, {
  method: "POST", headers: auth,
  body: JSON.stringify({ name: `二期验收抓图-${Date.now() % 100000}`, product: prods[0].id })
})).json();
console.log("project:", target.id, target.name);

const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 });
await ctx.addInitScript((t) => localStorage.setItem("airshelf_token", t), tok);
const page = await ctx.newPage();
page.on("pageerror", (e) => console.error("  pageerror:", e.message));

async function shot(name, clip) {
  await page.screenshot({ path: `${OUT}/${name}.png`, ...(clip ? { clip } : { fullPage: true }) });
  console.log("shot", name);
}

// ── Stage 1 · 脚本入口 ──
await page.goto(`${BASE}/pipeline/${target.id}?st=1#stage-1`, { waitUntil: "networkidle", timeout: 40000 });
await page.waitForTimeout(2000);
const pane = await page.locator(".chat-pane").first().boundingBox();
await shot("1-script-entries", pane);

// 点「脚本辅助生成」→ 设定卡
await page.locator('.chat-mode[data-mode="ai"]').click();
await page.waitForTimeout(700);
await shot("2-assist-setup", await page.locator(".chat-pane").first().boundingBox());

// 返回 → 点「上传脚本」(会拉起选文件,用 filechooser 拦掉并喂一个 txt)
await page.locator(".setup-foot .btn-ghost").first().click();
await page.waitForTimeout(400);
page.once("filechooser", async (chooser) => {
  await chooser.setFiles({
    name: "样稿.txt",
    mimeType: "text/plain",
    buffer: Buffer.from("钩子：还在为卡裆发愁？\n痛点：久坐一天就变形\n卖点：高弹面料不变形\nCTA：点小黄车", "utf-8")
  });
});
await page.locator('.chat-mode[data-mode="manual"]').click();
await page.waitForTimeout(1500);
await shot("3-upload-script", await page.locator(".chat-pane").first().boundingBox());

// ── Stage 2 · 三视图双通道 ──
// 新建项目还没脚本,Stage 2 会停在「提取角色/场景」门口,看不到商品卡 → 换已跑过的演示项目
const projects = (await (await fetch(`${API}/api/projects/?page_size=100`, { headers: auth })).json()).results || [];
const demo = projects.find((p) => p.name.startsWith("演示")) || projects.find((p) => p.id !== target.id);
await page.goto(`${BASE}/pipeline/${demo.id}?st=2#stage-2`, { waitUntil: "networkidle", timeout: 40000 });
await page.waitForTimeout(3000);
await shot("4-triview-channels", await page.locator(".prod-row").first().boundingBox());

await browser.close();
await fetch(`${API}/api/projects/${target.id}/`, { method: "DELETE", headers: auth });
console.log("DONE ->", OUT);