// 给"还原后的面板"拍图。用真实 CDP：把指针移到右边缘让面板滑出，等过渡走完再截。
// 出两张：面板本体、以及点色块弹出的取色器。
// 用法：node tools/checks/shot-panel.mts [base] [outDir]
import { mkdir, writeFile } from "node:fs/promises";
import { withPage, sleep } from "../cdp.mjs";

const BASE = process.argv[2] ?? "http://127.0.0.1:5173";
const OUT_DIR = (process.argv[3] ?? ".scratch/shots").replace(/[\\/]+$/, "");
const W = 1280;
const H = 900;

await mkdir(OUT_DIR, { recursive: true });

await withPage({ width: W, height: H, profile: "tools/.cache/edge-panel-shot" }, async ({ send, evaluate }) => {
  await send("Page.navigate", { url: `${BASE}/release/collection-all/` });
  await sleep(3500);

  const shoot = async (name) => {
    const shot = await send("Page.captureScreenshot", { format: "png" });
    const path = `${OUT_DIR}/${name}.png`;
    await writeFile(path, Buffer.from(shot.data, "base64"));
    console.log(`  已保存 ${path}`);
  };

  // 指针移到右边缘 → 面板滑出（这是它唯一的打开方式）
  await send("Input.dispatchMouseEvent", { type: "mouseMoved", x: W - 8, y: H / 2, button: "none", buttons: 0 });
  await sleep(500);
  console.log(`  面板状态 data-open=${await evaluate(`document.getElementById("wesim").dataset.open`)}`);
  await shoot("panel-official-look");

  // 点色块 → 取色器
  await evaluate(`document.querySelector("#wesim .swatch").click()`);
  await sleep(400);
  console.log(`  取色器已打开：${await evaluate(`!!document.getElementById("wesim-picker")`)}`);
  await shoot("panel-color-picker");

  // 收起取色器，再展开「壁纸预设切换」的下拉
  await evaluate(`document.querySelector("#wesim-picker .pk-foot button:not(.primary)").click()`);
  await sleep(200);
  await evaluate(`(function(){
    var rows = document.querySelectorAll("#wesim .body .row");
    for (var i = 0; i < rows.length; i++) {
      var l = rows[i].querySelector(".label");
      if (l && l.textContent === "壁纸预设切换") { rows[i].querySelector(".combo-btn").click(); return true; }
    }
    return false;
  })()`);
  await sleep(300);
  console.log(`  下拉已展开：${await evaluate(`!!document.getElementById("wesim-combo")`)}`);
  await shoot("panel-combo-open");
});