// 二期第7段验收抓图:5.1 存为模板入口 + 弹窗;5.2 新建项目选模板;5.3 同套路重出预期文案
import { chromium } from "playwright";
import { mkdirSync } from "node:fs";

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

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

const projects = (await (await fetch(`${API}/api/projects/`, { headers: auth })).json()).results || [];
const project = projects.find((p) => p.name.includes("夜光面膜"));
console.log("project:", project.id, project.name);

const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1440, height: 960 }, 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, locator) {
  const clip = locator ? await locator.boundingBox() : undefined;
  await page.screenshot({ path: `${OUT}/${name}.png`, ...(clip ? { clip } : { fullPage: false }) });
  console.log("shot", name);
}

// ── 1 · 脚本页底栏「存为模板」入口 ──
await page.goto(`${BASE}/pipeline/${project.id}?st=1#stage-1`, { waitUntil: "networkidle", timeout: 40000 });
await page.waitForTimeout(2500);
const foot = page.locator(".stage-foot").first();
await foot.scrollIntoViewIfNeeded();
await page.waitForTimeout(400);
await shot("1-save-template-entry", foot);

// ── 2 · 存为模板弹窗:摊开「会存进模板的内容」 ──
await page.getByRole("button", { name: /存为模板/ }).click();
await page.waitForTimeout(700);
await shot("2-save-template-modal", page.locator(".modal").first());

const nameInput = page.locator(".modal .input").first();
await nameInput.fill(`口播 · 痛点前置 · 4 镜 #${Date.now() % 1000}`);
await page.waitForTimeout(200);
await page.getByRole("button", { name: /保存模板/ }).click();
await page.waitForTimeout(1500);
await shot("3-saved-toast");

const templates = (await (await fetch(`${API}/api/script-templates/`, { headers: auth })).json()).results || [];
console.log("templates:", templates.map((t) => `${t.name} / ${t.shot_count}镜 / ${t.total_duration}s`));
console.log("outline_text:\n" + (templates[0]?.outline_text || "(空)"));

// ── 4 · 新建项目 · 第 2 步选模板 + 预期说明 ──
await page.goto(`${BASE}/projects/new`, { waitUntil: "networkidle", timeout: 40000 });
await page.waitForTimeout(1800);
const cards = page.locator(".product-card");
const count = await cards.count();
for (let i = 0; i < count; i += 1) {
  if ((await cards.nth(i).innerText()).includes("鎏金精华水")) { await cards.nth(i).click(); break; }
}
await page.waitForTimeout(500);
const select = page.locator(".wiz-pane select.input").first();
await select.selectOption({ index: 1 });
await page.waitForTimeout(600);
const pane = page.locator(".step-pane-wrap").last();
await pane.scrollIntoViewIfNeeded();
await page.waitForTimeout(400);
await shot("4-wizard-template-picked", pane);

// ── 5 · 用模板开新项目 → 脚本页设定卡已带模板参数 + 预期文案 ──
const created = await (await fetch(`${API}/api/projects/`, {
  method: "POST", headers: auth,
  body: JSON.stringify({
    name: `鎏金精华水 · 同套路 · ${Date.now() % 10000}`,
    product: (await (await fetch(`${API}/api/products/`, { headers: auth })).json()).results.find((p) => p.title === "鎏金精华水").id,
    metadata: { wizard: { template_id: templates[0].id, selling_point_ids: [] } }
  })
})).json();
console.log("new project wizard:", JSON.stringify(created.metadata.wizard, null, 2));

await page.goto(`${BASE}/pipeline/${created.id}?st=1#stage-1`, { waitUntil: "networkidle", timeout: 40000 });
await page.waitForTimeout(2500);
await page.locator('.chat-mode[data-mode="ai"]').click();
await page.waitForTimeout(900);
await shot("5-setup-card-with-template", page.locator(".chat-pane").first());

await browser.close();
console.log("done ->", OUT);