/* 前端回归测试：用最小假 DOM 在 Node 里跑 app.js，模拟完整交互链路。
   用法：node web/test_app.js
   覆盖：
     ① 单槽待处理：替换 / 去重 / 一次多张
     ② 结果历史：刷新后从服务端恢复、跨任务累积
     ③ 回归重点：添加新图并重新处理时，右侧已有结果绝不能被清空
     ④ 参数记录：每条记录带参数快照；「重新处理」把参数重新赋值到表单
     ⑤ 同一张图多次处理 → 参数记录更新为最新
     ⑥ 删除单条不被轮询复活 / 选中描边 / 打包 ZIP / 清空 */
'use strict';
const fs = require('fs');
const path = require('path');

const appSrc = fs.readFileSync(process.env.APP_SRC || path.join(__dirname, 'app.js'), 'utf8');
const zipSrc = fs.readFileSync(path.join(__dirname, 'zip.js'), 'utf8');

/* ---------------------------- 假 DOM ---------------------------- */
function makeNode(tag = 'div') {
  const listeners = {};
  const classes = new Set();
  let text = '';
  const node = {
    tag,
    parent: null,
    children: [],
    dataset: {},
    style: { setProperty() {}, width: '' },
    value: '',
    checked: false,
    hidden: false,
    disabled: false,
    title: '',
    src: '',
    href: '',
    download: '',
    files: null,
    scrollTop: 0,
    // textContent 与真实 DOM 一致：赋值会清空所有子节点
    get textContent() { return text; },
    set textContent(v) {
      text = String(v);
      for (const c of node.children) c.parent = null;
      node.children.length = 0;
    },
    // className 与 classList 共享同一份类名集合
    get className() { return [...classes].join(' '); },
    set className(v) {
      classes.clear();
      for (const c of String(v).split(/\s+/)) if (c) classes.add(c);
    },
    classList: {
      add(c) { classes.add(c); },
      remove(c) { classes.delete(c); },
      toggle(c, on) {
        const want = on === undefined ? !classes.has(c) : !!on;
        want ? classes.add(c) : classes.delete(c);
        return want;
      },
      contains(c) { return classes.has(c); },
    },
    append(...kids) {
      for (const k of kids) {
        // 真实 DOM 里 append(undefined) 会塞进一个文本节点 —— 静默的视觉 bug，
        // 所以这里直接抛错，逼出这类问题（app.js 的 el() 已过滤空子节点）
        if (k === undefined || k === null) throw new Error('append() 收到了 undefined/null 子节点');
        k.parent = node;
        node.children.push(k);
      }
    },
    remove() {
      if (!node.parent) return;
      const i = node.parent.children.indexOf(node);
      if (i >= 0) node.parent.children.splice(i, 1);
      node.parent = null;
    },
    addEventListener(type, fn) { (listeners[type] = listeners[type] || []).push(fn); },
    dispatch(type, ev = {}) {
      const event = { target: node, preventDefault() {}, stopPropagation() {}, ...ev };
      for (const fn of listeners[type] || []) fn(event);
    },
    closest(sel) {
      const parts = sel.split(',').map((s) => s.trim());
      let cur = node;
      while (cur) {
        for (const p of parts) {
          if (p.includes('[')) {                      // 形如 button[data-view]
            const m = /^([\w-]*)\[([\w-]+)\]$/.exec(p);
            if (m && (!m[1] || cur.tag === m[1]) && cur.dataset[m[2]] !== undefined) return cur;
          } else if (p === cur.tag) {
            return cur;
          } else if (p.startsWith('.') && cur.className.split(/\s+/).includes(p.slice(1))) {
            return cur;
          }
        }
        cur = cur.parent;
      }
      return null;
    },
    querySelectorAll() { return []; },
    setAttribute() {},
    click() { node.dispatch('click'); },
    scrollIntoView() {},
  };
  return node;
}

const byId = new Map();
const viewSwitch = makeNode('div');
global.document = {
  body: makeNode('body'),
  getElementById(id) {
    if (!byId.has(id)) byId.set(id, id === 'view-switch' ? viewSwitch : makeNode());
    return byId.get(id);
  },
  createElement(tag) { return makeNode(tag); },
  createTextNode(text) { const n = makeNode('#text'); n.textContent = String(text); return n; },
  addEventListener() {},
  querySelectorAll() { return []; },
};

global.window = { location: { assign() {} } };
new Function('window', zipSrc)(global.window);          // 让 window.BiRefNetZip 可用

const lsData = new Map();
global.localStorage = {
  getItem: (k) => (lsData.has(k) ? lsData.get(k) : null),
  setItem: (k, v) => lsData.set(k, String(v)),
  removeItem: (k) => lsData.delete(k),
};
Object.defineProperty(global, 'navigator', { value: { clipboard: {} }, configurable: true });
Object.defineProperty(global, 'File', {
  configurable: true,
  value: class File {
    constructor(parts, name, opts = {}) {
      const first = Array.isArray(parts) ? parts[0] : parts;
      this.name = name;
      this.type = opts.type || '';
      this.lastModified = opts.lastModified || 0;
      this.size = (first && first.size) || 0;
    }
  },
});
let lastBlob = null;
Object.defineProperty(global, 'Blob', {
  configurable: true,
  value: class Blob {
    constructor(parts, opts = {}) {
      this.parts = parts;
      this.type = opts.type || '';
      lastBlob = this;
    }
  },
});
global.URL = { createObjectURL: () => `blob:${Math.random()}`, revokeObjectURL() {} };
global.ClipboardItem = class {};
global.FormData = class {
  constructor() { this.entries = []; }
  append(k, v, name) { this.entries.push([k, v, name]); }
};

/* ------------------------- 假服务端 ------------------------- */
const STATE = {
  ok: true,
  node_dir: 'F:\\BiRefNet_WebUI\\vendor\\comfyui_birefnet_ll',
  output_dir: 'F:\\BiRefNet_WebUI\\outputs',
  environment: {
    python: '3.12.10', torch: '2.13.0+cu126', cuda: true,
    devices: [{ index: 0, name: 'NVIDIA GeForce RTX 3070 Laptop GPU', free_mem: 7, total_mem: 8 }],
  },
  models: [{
    key: 'Portrait', name: 'Portrait', file: 'Portrait.safetensors', arch: 'v1',
    size_mb: 843.9, backbone: 'swin_v1_l', path: 'models/Portrait.safetensors',
  }],
  defaults: { model: 'Portrait' },
};

/** 与 index.html 里的默认值保持一致，供测试手动铺一遍表单初始值。 */
const FORM_DEFAULTS = {
  'opt-model': 'Portrait', 'opt-device': 'auto', 'opt-dtype': 'auto', 'opt-arch': 'auto',
  'opt-resolution-mode': 'square', 'opt-width': '1024', 'opt-height': '1024',
  'opt-longest-side': '1024', 'opt-upscale': 'bilinear', 'opt-threshold': '0',
  'opt-blur1': '90', 'opt-blur2': '6', 'opt-background': 'transparent',
  'opt-bgcolor': '#ffffff', 'opt-final-side': '0',
};
const FORM_CHECKS = { 'opt-refine': true, 'opt-mask': false, 'batch-recursive': false };

const P_SQUARE = {
  model: 'Portrait', device: 'auto', dtype: 'auto', arch: 'auto',
  resolution_mode: 'square', width: 1024, height: 1024, longest_side: 1024,
  upscale_method: 'bilinear', mask_threshold: 0, refine_foreground: true,
  blur_size: 90, blur_size_two: 6, background: 'transparent', bg_color: '#ffffff',
  output_mask: false, final_longest_side: 0,
};
const P_GREEN = {
  ...P_SQUARE, model: 'birefnet', resolution_mode: 'longest', longest_side: 512,
  background: 'color', bg_color: '#00ff00', refine_foreground: false,
};

const stub = { polls: 0, posts: 0, detailFetches: 0, fileHits: 0, originalHits: 0, lastOptions: null, batchPolls: 0, batchPosts: 0, lastBatch: null };
const tasks = new Map();
let clock = 1;

function mkImage(index, name, over = {}) {
  const done = (over.state || 'done') === 'done';
  return {
    index, name, label: name.replace(/\.[^.]+$/, ''),
    state: 'done', stage: '完成', progress: 1,
    width: 1920, height: 1080, input_size: [1024, 1024], coverage: 0.42, elapsed: 3.1,
    error: null, warning: null,
    urls: done
      ? { original: `/api/tasks/${over.task}/file/${index}/original`, cutout: `/api/tasks/${over.task}/file/${index}/cutout`, mask: `/api/tasks/${over.task}/file/${index}/mask` }
      : {},
    ...over,
  };
}

function mkTask(id, options, images, state = 'done') {
  const task = { id, created: clock++, state, stage: state === 'done' ? '完成' : '排队中', progress: state === 'done' ? 1 : 0, options, images };
  tasks.set(id, task);
  return task;
}

// 历史：T1（无遮罩输出 + 列表里不带 options，逼前端补拉详情）+ T2（列表里直接带）
const T1 = mkTask('T100', P_SQUARE, [{ index: 0, name: 'old.jpg', label: 'old', state: 'done', stage: '完成', progress: 1, width: 800, height: 600, input_size: [1024, 1024], coverage: 0.3, elapsed: 2.2, error: null, warning: null, urls: {} }]);
T1.images[0].urls = { original: '/api/tasks/T100/file/0/original', cutout: '/api/tasks/T100/file/0/cutout' };
const T2 = mkTask('T200', P_GREEN, [mkImage(0, 'mid.jpg', { task: 'T200' })]);
T2.options = P_GREEN;

const taskList = () => [...tasks.values()]
  .sort((a, b) => b.created - a.created)
  .map((t) => ({
    id: t.id, created: t.created, state: t.state, stage: t.stage, progress: t.progress,
    mode: t.mode || 'upload', input_dir: t.input_dir || null, output_dir: t.output_dir || null,
    // 模仿服务端列表：T100 不返回 options（触发补拉详情）
    ...(t.id === 'T100' ? {} : { options: t.options }),
    images: t.images,
  }));

global.fetch = async (url, options = {}) => {
  const json = (body) => ({ ok: true, status: 200, text: async () => JSON.stringify(body) });
  const bin = (size) => ({
    ok: true, status: 200,
    blob: async () => ({ size, type: 'image/png' }),
    arrayBuffer: async () => new Uint8Array(size).buffer,
  });
  const method = options.method || 'GET';

  if (url.includes('/api/state')) return json(STATE);

  if (url.endsWith('/api/batch') && method === 'POST') {
    stub.batchPosts += 1;
    const body = JSON.parse(options.body);
    stub.lastBatch = body;
    const id = `B${400 + stub.batchPosts}`;
    const names = ['photo.jpg', 'a_pretty_long_original_filename_here.png', 'third.png'];
    const images = names.map((name, i) => ({
      index: i, name, label: name, state: 'pending', stage: '排队中', progress: 0,
      output_name: null, urls: {},
    }));
    const task = mkTask(id, body.options || {}, images, 'running');
    task.mode = 'batch';
    task.input_dir = body.input_dir;
    task.output_dir = body.output_dir || STATE.output_dir;
    return json({
      ok: true, task_id: id, mode: 'batch', count: images.length,
      input_dir: task.input_dir, output_dir: task.output_dir,
    });
  }

  if (url.includes('/api/tasks') && method === 'POST') {
    stub.posts += 1;
    const opts = JSON.parse(options.body.entries.find((e) => e[0] === 'options')[1]);
    stub.lastOptions = opts;
    const name = options.body.entries.find((e) => e[0] === 'files')[2] || 'upload.png';
    const id = `T${300 + stub.posts}`;
    const images = [{ index: 0, name, label: name.replace(/\.[^.]+$/, ''), state: 'pending', stage: '排队中', progress: 0, urls: {} }];
    mkTask(id, opts, images, 'running');
    return json({ ok: true, task_id: id, count: 1 });
  }

  if (/\/file\/\d+\/(cutout|mask|original)$/.test(url)) {
    stub.fileHits += 1;
    if (url.endsWith('/original')) stub.originalHits += 1;
    return bin(2048);
  }

  const detail = /\/api\/tasks\/([^/?]+)(?:\?([^#]*))?$/.exec(url);
  if (detail && method === 'GET') {
    stub.detailFetches += 1;
    const task = tasks.get(detail[1]);
    if (!task) return { ok: false, status: 404, text: async () => JSON.stringify({ ok: false, error: '任务不存在' }) };
    const isBatch = task.mode === 'batch';
    if (isBatch) stub.batchPolls += 1;
    // 轮询时推进状态：running → done（第二次拿到该任务时）
    if (task.state === 'running') {
      task.polls = (task.polls || 0) + 1;
      if (task.polls >= 2) {
        task.state = 'done';
        task.stage = '完成';
        task.progress = 1;
        task.images = task.images.map((img, i) => (isBatch
          // 批量：只补上 output_name / 完成态（服务端就是按 RMBG_ 命名写盘的）
          ? { ...img, state: 'done', stage: '完成', progress: 1, elapsed: 4.2, output_name: `RMBG_${img.label.slice(0, 20)}_1791360000.png` }
          : mkImage(i, img.name, { task: task.id })));
      } else {
        task.images = task.images.map((img) => ({ ...img, state: 'running', stage: '推理', progress: 0.5, urls: {} }));
      }
      stub.polls += 1;
    }
    // ?tail=N → 只回传最后 N 张（批量轮询用）
    const tail = Number((new URLSearchParams(detail[2] || '').get('tail')) || 0);
    const images = tail > 0 ? task.images.slice(Math.max(0, task.images.length - tail)) : task.images;
    return json({ ok: true, task: { id: task.id, created: task.created, mode: task.mode || 'upload', input_dir: task.input_dir || null, output_dir: task.output_dir || null, state: task.state, stage: task.stage, progress: task.progress, error: null, counts: { total: task.images.length, done: task.state === 'done' ? task.images.length : 0, failed: 0, pending: 0 }, images_total: task.images.length, images_from: task.images.length - images.length, options: task.options, images } });
  }

  if (url.endsWith('/api/tasks')) return json({ ok: true, tasks: taskList() });
  return json({ ok: false, error: '未知接口 ' + url });
};

/* ---------------------------- 执行 ---------------------------- */
for (const [id, v] of Object.entries(FORM_DEFAULTS)) byId.set(id, Object.assign(makeNode('input'), { id, value: v }));
for (const [id, v] of Object.entries(FORM_CHECKS)) byId.set(id, Object.assign(makeNode('input'), { id, checked: v }));
byId.set('thumbs', makeNode('ul'));
byId.set('results', makeNode('div'));
byId.set('empty', Object.assign(makeNode('div'), { className: 'empty-state' }));
byId.set('btn-run', makeNode('button'));
byId.set('btn-zip', Object.assign(makeNode('button'), { textContent: '打包下载 ZIP' }));
// 批量处理面板（index.html 里存在，但未被 app.js 主动触碰的节点要在这里铺好）
byId.set('batch-rows', makeNode('ul'));
byId.set('batch-report', Object.assign(makeNode('section'), { hidden: true }));
byId.set('batch-progress-bar', makeNode('i'));

// 预置一份「老版本（v1）」表单存档：当年 output_mask 默认是 true，参数名还是 max_output_side。
// 启动时的迁移逻辑必须把遮罩默认值修正掉、把旧尺寸参数搬到新输入框，且不动其它参数。
lsData.set('birefnet.webui.options', JSON.stringify({
  background: 'transparent', output_mask: true, max_output_side: 2048,
}));

new Function(appSrc)();

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
async function waitFor(cond, timeout = 5000) {
  const t0 = Date.now();
  while (Date.now() - t0 < timeout) { if (cond()) return true; await sleep(15); }
  return false;
}

const results = () => byId.get('results').children;
const cards = () => byId.get('results').children;
const cardState = (c) => c.className;
const head = (c) => c.children[0];
const nameBtnOf = (c) => head(c).children[0];
const badgeOf = (c) => head(c).children[1].textContent;
const delBtnOf = (c) => head(c).children[2];
const paramsLineOf = (c) => find(c, 'card-params');
const find = (node, cls) => {
  for (const child of node.children || []) {
    if (child.className.split(/\s+/).includes(cls)) return child;
    const hit = find(child, cls);
    if (hit) return hit;
  }
  return null;
};
const compareImgCount = (c) => ((find(c, 'compare')?.children || []).filter((n) => n.tag === 'img').length);
const statsCount = (c) => ((find(c, 'card-stats')?.children || []).length);
const actionsOf = (c) => find(c, 'card-actions');
const reuseBtnOf = (c) => actionsOf(c).children[0];

function pendingName() {
  const ul = byId.get('thumbs');
  if (ul.children.length !== 1) return `li×${ul.children.length}`;
  const meta = ul.children[0].children.find((x) => x.className.includes('pending-meta'));
  return meta ? meta.children[0].textContent : '(无 meta)';
}
function upload(files) {
  const input = byId.get('file-input');
  input.files = files;
  input.dispatch('change');
}
const F = (name, size, mtime) => ({ name, size, lastModified: mtime, type: 'image/jpeg' });
const formValue = (id) => (id === 'opt-refine' || id === 'opt-mask' ? byId.get(id).checked : byId.get(id).value);
const setForm = (id, v) => { if (id === 'opt-refine' || id === 'opt-mask') byId.get(id).checked = v; else byId.get(id).value = v; };
const savedParams = () => JSON.parse(lsData.get('birefnet.webui.imageParams') || '{}');

(async () => {
  await sleep(80);                                   // init / loadState / loadHistory

  const checks = [];
  const check = (name, ok, detail) => checks.push([name, ok, detail]);

  /* ============ 场景 0：老版本 localStorage 存档迁移 ============ */
  check('⓪ 老存档的 output_mask 不覆盖新默认（默认不输出遮罩）', formValue('opt-mask') === false, `checked=${formValue('opt-mask')}`);
  check('⓪ 老参数 max_output_side 搬到新的「最终尺寸 · 最长边」', formValue('opt-final-side') === '2048', formValue('opt-final-side'));
  check('⓪ 其余老参数照常恢复', formValue('opt-background') === 'transparent', formValue('opt-background'));
  check('⓪ 存档被标记为 v2（迁移只做一次）',
    (JSON.parse(lsData.get('birefnet.webui.options') || '{}')._schema) === 2,
    lsData.get('birefnet.webui.options'));
  setForm('opt-final-side', '0');                    // 复原，避免影响后续场景

  /* ============ 场景 1：刷新后从服务端恢复历史结果 ============ */
  check('① 启动即恢复 2 条历史记录', results().length === 2, `len=${results().length}`);
  check('① 列表缺 options 时自动补拉详情', stub.detailFetches >= 1, `fetches=${stub.detailFetches}`);
  check('① 历史记录显示参数行', (paramsLineOf(cards()[0])?.textContent || '').includes('Portrait'), paramsLineOf(cards()[0])?.textContent);
  check('① 历史记录直接可用（done）', cardState(cards()[0]).includes('done') && compareImgCount(cards()[0]) === 2, cardState(cards()[0]));
  check('① 无遮罩记录不产生 null 子节点', actionsOf(cards()[0]).children.every((c) => c.tag && c.tag !== '#text'), actionsOf(cards()[0]).children.map((c) => c.tag));
  check('① 计数 = 2', byId.get('result-count').textContent === '2', byId.get('result-count').textContent);

  /* ============ 场景 2：单槽待处理 ============ */
  upload([F('first.jpg', 1000, 111)]);
  await sleep(20);
  check('② 上传后待处理 1 张', pendingName() === 'first.jpg', pendingName());
  upload([F('second.jpg', 2000, 222)]);
  await sleep(20);
  check('② 新图替换旧图（仍只有 1 张）', pendingName() === 'second.jpg', pendingName());
  upload([F('second.jpg', 2000, 222)]);
  await sleep(20);
  check('② 完全相同的图被忽略', pendingName() === 'second.jpg' && byId.get('thumbs').children.length === 1, pendingName());
  upload([F('x.jpg', 10, 1), F('y.jpg', 20, 2), F('z.jpg', 30, 3)]);
  await sleep(20);
  check('② 一次多张只留最后一张', pendingName() === 'z.jpg', pendingName());

  /* ============ 场景 3（回归重点）：新任务不清空已有结果 ============ */
  const before = results().slice();
  upload([F('new.jpg', 5000, 9)]);
  await sleep(20);
  setForm('opt-background', 'transparent');
  setForm('opt-bgcolor', '#ffffff');
  setForm('opt-model', 'Portrait');
  setForm('opt-resolution-mode', 'square');
  byId.get('btn-run').dispatch('click');
  await waitFor(() => stub.polls >= 1);
  check('③ 新任务提交后旧结果仍在（核心回归）',
    results().length === 3 && results()[0] === before[0] && results()[1] === before[1],
    `len=${results().length}`);
  check('③ 提交时参数带上了当前表单值', stub.lastOptions && stub.lastOptions.model === 'Portrait' && stub.lastOptions.background === 'transparent', JSON.stringify(stub.lastOptions));
  check('③ 新卡片立刻显示参数行', (paramsLineOf(cards()[2])?.textContent || '').includes('透明'), paramsLineOf(cards()[2])?.textContent);

  await waitFor(() => stub.polls >= 2);
  await sleep(40);
  check('③ 新卡片进入 done 且旧结果完好', cardState(cards()[2]).includes('done') && results().length === 3, `${cardState(cards()[2])} len=${results().length}`);
  check('③ 旧卡片未被重建（DOM 复用）', results()[0] === before[0] && results()[1] === before[1], '被替换了');
  check('③ 参数已写入 localStorage', savedParams()['new.jpg']?.background === 'transparent', JSON.stringify(savedParams()['new.jpg'] || null));

  /* ============ 场景 4：重新处理 = 参数重新赋值 ============ */
  setForm('opt-background', 'color');
  setForm('opt-bgcolor', '#00ff00');
  setForm('opt-resolution-mode', 'longest');
  setForm('opt-longest-side', '512');
  setForm('opt-refine', false);
  await sleep(20);
  reuseBtnOf(cards()[2]).dispatch('click');
  await sleep(80);
  check('④ 重新处理把图片放回待处理', pendingName() === 'new.jpg', pendingName());
  check('④ 参数被重新赋值（背景透明）', formValue('opt-background') === 'transparent', formValue('opt-background'));
  check('④ 参数被重新赋值（颜色/尺寸/精修）',
    formValue('opt-bgcolor') === '#ffffff' && formValue('opt-resolution-mode') === 'square' && formValue('opt-refine') === true,
    `${formValue('opt-bgcolor')} / ${formValue('opt-resolution-mode')} / ${formValue('opt-refine')}`);

  /* ============ 场景 5：同一张图再次处理 → 参数更新为最新 ============ */
  setForm('opt-background', 'color');
  setForm('opt-bgcolor', '#00ff00');
  byId.get('btn-run').dispatch('click');
  await waitFor(() => stub.polls >= 3);
  check('⑤ 同图二次处理生成新记录（历史保留）', results().length === 4, `len=${results().length}`);
  check('⑤ 新记录参数为最新（纯色 #00ff00）', (paramsLineOf(cards()[3])?.textContent || '').includes('纯色 #00ff00'), paramsLineOf(cards()[3])?.textContent);
  check('⑤ localStorage 参数被最新值覆盖', savedParams()['new.jpg']?.background === 'color' && savedParams()['new.jpg']?.bg_color === '#00ff00', JSON.stringify(savedParams()['new.jpg'] || null));
  // 等这一轮真正跑完再进下一个场景（否则按钮仍处于「处理中」态，点击会被忽略）
  await waitFor(() => stub.polls >= 4 && cardState(cards()[3]).includes('done'));
  await sleep(30);
  check('⑤ 本轮任务已结束（可再次提交）', cardState(cards()[3]).includes('done'), cardState(cards()[3]));

  /* ============ 场景 6：删除单条 + 轮询不复活 ============ */
  delBtnOf(cards()[1]).dispatch('click');
  await sleep(20);
  check('⑥ 删除后剩 3 条', results().length === 3, `len=${results().length}`);
  check('⑥ 计数同步', byId.get('result-count').textContent === '3', byId.get('result-count').textContent);
  const pollsBefore = stub.polls;
  byId.get('btn-run').dispatch('click');             // 再起一个任务制造轮询
  await waitFor(() => stub.polls > pollsBefore + 1);
  await sleep(40);
  check('⑥ 被删记录未被轮询复活', results().length === 4 && !results().some((c) => nameBtnOf(c).textContent.includes('mid.jpg')), `len=${results().length}`);

  /* ============ 场景 7：选中描边 ============ */
  cards()[0].dispatch('click');
  await sleep(10);
  check('⑦ 点击卡片出现选中态', cardState(cards()[0]).includes('selected'), cardState(cards()[0]));
  cards()[0].dispatch('click');
  await sleep(10);
  check('⑦ 再点一次取消选中', !cardState(cards()[0]).includes('selected'), cardState(cards()[0]));
  nameBtnOf(cards()[0]).dispatch('click');
  await sleep(60);
  check('⑦ 点文件名不触发选中', !cardState(cards()[0]).includes('selected'), cardState(cards()[0]));

  /* ============ 场景 8：跨任务打包 ZIP ============ */
  const visible = results().length;
  byId.get('btn-zip').dispatch('click');
  await sleep(120);
  const zip = lastBlob ? Buffer.from(concat(lastBlob.parts)) : null;
  const eocd = zip ? zip.lastIndexOf(Buffer.from([0x50, 0x4b, 0x05, 0x06])) : -1;
  const entryCount = eocd >= 0 ? zip.readUInt16LE(eocd + 10) : -1;
  check('⑧ ZIP 条目数 = 可见结果数', entryCount === visible, `entries=${entryCount} visible=${visible}`);
  check('⑧ 打包后按钮恢复可用', byId.get('btn-zip').disabled === false, String(byId.get('btn-zip').disabled));
  if (zip) fs.writeFileSync(path.join(__dirname, '..', 'outputs', 'test_zip_out.zip'), zip);

  /* ============ 场景 9：清空 ============ */
  byId.get('btn-clear').dispatch('click');
  await sleep(20);
  check('⑨ 清空后列表为空', results().length === 0, `len=${results().length}`);
  check('⑨ 空状态重新显示', !byId.get('empty').classList.contains('hidden'), 'hidden 仍存在');
  check('⑨ 清空不影响参数记忆', savedParams()['new.jpg']?.background === 'color', JSON.stringify(savedParams()['new.jpg'] || null));

  /* ============ 场景 10：目录批量处理 ============ */
  check('⑩ 输出目录默认预填为项目 outputs', byId.get('batch-output-dir').value === STATE.output_dir, byId.get('batch-output-dir').value);
  setForm('batch-input-dir', 'F:\\photos\\待抠图');
  setForm('batch-output-dir', '');                    // 留空 → 由服务端兜底默认目录
  setForm('opt-background', 'color');
  byId.get('batch-recursive').checked = true;
  byId.get('btn-batch').dispatch('click');
  await waitFor(() => stub.batchPosts >= 1);
  check('⑩ 提交了输入/输出目录与递归开关',
    stub.lastBatch?.input_dir === 'F:\\photos\\待抠图' && stub.lastBatch?.output_dir === '' && stub.lastBatch?.recursive === true,
    JSON.stringify(stub.lastBatch));
  check('⑩ 抠图参数沿用左侧表单',
    stub.lastBatch?.options?.background === 'color' && stub.lastBatch?.options?.model === 'Portrait',
    JSON.stringify(stub.lastBatch?.options));

  await waitFor(() => byId.get('batch-rows').children.length === 3);
  check('⑩ 批量清单逐文件铺开', byId.get('batch-rows').children.length === 3, byId.get('batch-rows').children.length);
  check('⑩ 清单标出输入 → 输出目录',
    (byId.get('batch-report-path').textContent || '').includes('待抠图') && (byId.get('batch-report-path').textContent || '').includes('outputs'),
    byId.get('batch-report-path').textContent);
  check('⑩ 批量任务不铺单图结果卡片', results().length === 0, `cards=${results().length}`);
  check('⑩ 清单展开时不显示空状态', byId.get('empty').classList.contains('hidden'), '空状态可见');

  // 收尾会再拉一次全量（清单里每行都要是终态），所以要等按钮恢复才断言
  await waitFor(() => byId.get('btn-batch').textContent === '开始批量抠图');
  await sleep(60);
  const rows = byId.get('batch-rows').children;
  check('⑩ 收尾每行显示 RMBG_ 输出名', rows.every((r) => (r.cells.to.textContent || '').startsWith('RMBG_')), rows.map((r) => r.cells.to.textContent));
  check('⑩ 收尾每行状态为完成', rows.every((r) => r.cells.badge.textContent === '完成'), rows.map((r) => r.cells.badge.textContent));
  check('⑩ 汇总行给出张数', (byId.get('batch-report-sum').textContent || '').includes('共 3 张'), byId.get('batch-report-sum').textContent);
  check('⑩ 按钮恢复可点', byId.get('btn-batch').disabled === false && byId.get('btn-batch').textContent === '开始批量抠图', byId.get('btn-batch').textContent);
  check('⑩ 没有页面错误', byId.get('batch-error').hidden === true, byId.get('batch-error').textContent);

  byId.get('btn-batch-hide').dispatch('click');
  await sleep(20);
  check('⑩ 收起后清单隐藏、空状态回归',
    byId.get('batch-report').hidden === true && !byId.get('empty').classList.contains('hidden'), '收起逻辑异常');

  /* ============ 场景 11：最终尺寸·最长边 + 遮罩默认关闭 ============ */
  check('⑪ 「同时输出遮罩」默认不勾选（默认不产出遮罩文件）', formValue('opt-mask') === false, `checked=${formValue('opt-mask')}`);
  check('⑪ 「最终尺寸 · 最长边」默认 0', formValue('opt-final-side') === '0', formValue('opt-final-side'));

  setForm('opt-final-side', '1440');
  setForm('opt-mask', true);
  const posts11 = stub.posts;
  const polls11 = stub.polls;
  byId.get('btn-run').dispatch('click');
  await waitFor(() => stub.posts > posts11);
  check('⑪ 提交参数带 final_longest_side / output_mask',
    stub.lastOptions?.final_longest_side === 1440 && stub.lastOptions?.output_mask === true,
    JSON.stringify(stub.lastOptions));
  await waitFor(() => stub.polls > polls11 + 1);
  await sleep(50);
  check('⑪ 结果卡片参数摘要显示最长边',
    (paramsLineOf(cards()[0])?.textContent || '').includes('最长边 1440'),
    paramsLineOf(cards()[0])?.textContent);

  /* ============ 汇总 ============ */
  const errs = byId.get('error-text').textContent;
  console.log('='.repeat(64));
  let fail = 0;
  for (const [name, ok, detail] of checks) {
    console.log(`  ${ok ? '✔' : '✘'} ${name}${ok ? '' : `  -> 实际: ${JSON.stringify(detail)}`}`);
    if (!ok) fail++;
  }
  if (errs) console.log(`  ⚠ 页面上报错误: ${errs}`);
  console.log('='.repeat(64));
  console.log(fail || errs ? `失败 ${fail} 项${errs ? '（含页面错误）' : ''}` : `前端回归测试全部通过 ✔（${checks.length} 项）`);
  console.log(`ZIP 样本：outputs/test_zip_out.zip（${zip ? zip.length : 0} bytes，${entryCount} 个条目）`);
  process.exit(fail || errs ? 1 : 0);
})();

function concat(parts) {
  const list = parts.map((p) => Buffer.from(p));
  return Buffer.concat(list);
}