// 验证 showContextMenu / _showBatchMoveMenu 修复：
//   1) 长分类名 → 菜单不应被右边切
//   2) 很多分类 → 应可滚动 + 滚动条可见
//   3) 窄窗口 → 应 clamp 到视口内
//   4) 普通情况 → 仍能右对齐 batchBar
//
// 用 Playwright 跑实际浏览器，注入 stub window.api，直接走 task-list.js。

import { chromium } from 'playwright-core';
import { writeFileSync, mkdtempSync, rmSync } from 'fs';
import { tmpdir } from 'os';
import { join } from 'path';

const BASE = 'http://127.0.0.1:8765';
const tmpDir = mkdtempSync(join(tmpdir(), 'batch-move-test-'));

function buildTodo(longNames, count) {
  // 通用 tasks + 容器 + 任意条数的子分类（其中一些名字超长）
  const cats = [];
  // longNames 可能为 null（场景 2），此时全部用默认名生成
  const names = longNames || [];
  for (let i = 0; i < count; i++) {
    const name = names[i] || `分类 ${i}`;
    cats.push(`## ${name}\n\n- [ ] 长名字的分类测试任务 ${i}`);
  }
  return `# 全部任务\n\n${cats.join('\n\n')}\n\n# 已完成任务\n\n# 回收站\n`;
}

async function setup(store, todoMd) {
  await store.evaluate((md) => {
    window.__initialMd = md;
  }, todoMd);
}

async function runScenario(label, opts) {
  const { windowWidth, windowHeight, longNames, count, screenshot = false } = opts;
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ viewport: { width: windowWidth, height: windowHeight } });
  const page = await context.newPage();

  const errors = [];
  page.on('pageerror', (e) => errors.push(`pageerror: ${e.message}`));
  page.on('console', (msg) => {
    if (msg.type() === 'error') errors.push(`console.error: ${msg.text()}`);
  });

  // 在 goto 之前用 addInitScript 注册 stub —— addInitScript 注册的脚本
  // 会在页面每次重新加载时（含 location.reload()）都执行，存活的 window 全局
  // 变量也会被 location.reload() 清掉，所以 stub 必须放在 addInitScript 里。
  const todoMd = buildTodo(longNames, count);
  await page.addInitScript((md) => {
    const noop = () => {};
    const noopUnsub = () => noop;
    // 完整 stub：与 preload.js 暴露的 api 字段对齐 —— 缺一个就 bootstrap 失败
    window.api = {
      isDev: false,
      // 文件操作
      saveFileDialog: async () => null,
      readFile: async () => ({ ok: true, content: md }),
      writeFile: async () => ({ ok: true }),
      fileExists: async () => true,
      createFileIfMissing: async () => ({ ok: true }),
      createSnapshot: async () => ({ ok: true }),
      // 应用信息
      getDataDir: async () => '/tmp',
      getDefaultDataDir: async () => '/tmp',
      getHomeDir: async () => '/tmp',
      getVersion: async () => '0.0.0-test',
      getElectronVersion: async () => '0.0.0-test',
      openDataDir: async () => true,
      // 设置
      getSettings: async () => ({}),
      saveSettings: async () => true,
      chooseDataDir: async () => null,
      // 退出前保存
      notifyDirtyChanged: noop,
      notifyFlushDone: noop,
      onFlushPendingSave: noopUnsub,
      // 事件监听
      onMenuCommand: noopUnsub,
      onFileExternalChange: noopUnsub,
      // 窗口控制
      setAlwaysOnTop: async () => true,
      onAlwaysOnTopChanged: noopUnsub,
      minimizeWindow: async () => true,
      toggleMaximizeWindow: async () => false,
      closeWindow: async () => true,
      onMaximizeStateChanged: noopUnsub
    };
    window.__todoMd = md;
  }, todoMd);

  await page.goto(BASE + '/index.html');
  await page.waitForLoadState('domcontentloaded');
  // 给 app 一点时间渲染
  await page.waitForTimeout(800);

  // 进入第一个子分类（普通视图）→ 触发批量模式 → 选中 1 条 → 移到分类
  // 选第一个非「未分类」、非特殊分类的子分类
  // 注意：用 data-category 判定，不要用 textContent —— 因为 DOM 里 .category-count
  // 徽章会和分类名拼在同一行（带换行和空格），trim 后仍是 "未分类\n          0"
  // 这种格式，与 '未分类' 不等，循环会跳过判断误把「未分类」当成可点击目标。
  const catClicked = await page.evaluate(() => {
    const items = document.querySelectorAll('.category-item.subcategory');
    // 跳过第一个（通常是「未分类」）
    for (const el of items) {
      const name = el.dataset.category;
      if (name && name !== '未分类') {
        el.click();
        return name;
      }
    }
    return null;
  });

  await page.waitForTimeout(300);

  // 点批量按钮
  await page.evaluate(() => {
    const btn = document.querySelector('#btn-batch');
    if (btn) btn.click();
  });
  await page.waitForTimeout(200);

  // 选中第一条任务
  await page.evaluate(() => {
    const item = document.querySelector('.task-item');
    if (item) item.click();
  });
  await page.waitForTimeout(200);

  // 点「移到分类」按钮
  await page.evaluate(() => {
    const btn = document.querySelector('.batch-action[data-action="move"]');
    if (btn) btn.click();
  });
  await page.waitForTimeout(400);

  // 测量菜单的位置和视口关系
  const menuInfo = await page.evaluate(() => {
    const menu = document.getElementById('context-menu');
    if (!menu || menu.hidden) return null;
    const rect = menu.getBoundingClientRect();
    return {
      left: rect.left,
      right: rect.right,
      top: rect.top,
      bottom: rect.bottom,
      width: rect.width,
      height: rect.height,
      visible: !menu.hidden,
      viewportW: window.innerWidth,
      viewportH: window.innerHeight,
      itemCount: menu.querySelectorAll('.context-menu-item').length,
      // 滚动条是否可见（overflow-y: auto + 内容超 max-height）
      hasScroll: menu.scrollHeight > menu.clientHeight,
      // 哪些项被切（**视口外**，不是菜单外）—— 菜单本身 overflow-y:auto，
      // 滚到下方的项仍可访问，不算 bug。真实 bug 是菜单溢出 viewport 让用户看不到入口。
      itemsClipped: (() => {
        const items = [...menu.querySelectorAll('.context-menu-item')];
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const visible = items.filter(el => {
          const ir = el.getBoundingClientRect();
          // 只检查「被 viewport 切」—— 完全在视口外的项（包括菜单滚动到下方的项）
          // 不算 clipped，只要菜单本身在视口内且有滚动条就 OK
          return ir.right <= vw && ir.left >= 0 && ir.bottom <= vh && ir.top >= 0;
        });
        return items.length - visible.length;
      })()
    };
  });

  if (screenshot) {
    await page.screenshot({ path: join(tmpDir, `${label}.png`), fullPage: false });
  }

  await browser.close();

  return { label, catClicked, menuInfo, errors };
}

const results = [];

console.log('=== 场景 1：长分类名 ===');
const r1 = await runScenario('long-names', {
  windowWidth: 1024,
  windowHeight: 768,
  longNames: [
    '这是一个非常非常长的子分类名字用来测试溢出',
    '工作',
    '学习',
    '生活',
    '个人事务与重要客户跟进'
  ],
  count: 5
});
results.push(r1);
console.log(JSON.stringify(r1, null, 2));

console.log('\n=== 场景 2：很多分类（应可滚动）===');
const r2 = await runScenario('many-cats', {
  windowWidth: 1024,
  windowHeight: 600,
  longNames: null,
  count: 20
});
results.push(r2);
console.log(JSON.stringify(r2, null, 2));

console.log('\n=== 场景 3：窄窗口 ===');
const r3 = await runScenario('narrow-window', {
  windowWidth: 600,
  windowHeight: 500,
  longNames: null,
  count: 5
});
results.push(r3);
console.log(JSON.stringify(r3, null, 2));

console.log('\n=== 场景 4：超窄窗口（菜单应 clamp）===');
const r4 = await runScenario('very-narrow', {
  windowWidth: 380,
  windowHeight: 500,
  longNames: null,
  count: 5
});
results.push(r4);
console.log(JSON.stringify(r4, null, 2));

// 验证
function check(name, cond, info) {
  const tag = cond ? '✓' : '✗';
  console.log(`${tag} ${name}${info ? ` (${info})` : ''}`);
  return cond;
}

console.log('\n========== 验证 ==========');
let pass = 0, fail = 0;
for (const r of results) {
  console.log(`\n[${r.label}]`);
  if (!r.menuInfo) {
    console.log('  ✗ 菜单未显示');
    fail++;
    continue;
  }
  const m = r.menuInfo;
  // 1. 右边不超过视口
  if (check('菜单右边 ≤ 视口右边', m.right <= m.viewportW - 4, `right=${m.right}, vw=${m.viewportW}`)) pass++; else fail++;
  // 2. 左边不小于 4
  if (check('菜单左边 ≥ 4', m.left >= 4, `left=${m.left}`)) pass++; else fail++;
  // 3. 底边不超过视口
  if (check('菜单底边 ≤ 视口底边', m.bottom <= m.viewportH - 4, `bottom=${m.bottom}, vh=${m.viewportH}`)) pass++; else fail++;
  // 4. 顶边不小于 4
  if (check('菜单顶边 ≥ 4', m.top >= 4, `top=${m.top}`)) pass++; else fail++;
  // 5. 无项被切 —— 仅当菜单**没有**滚动时检查。
  // 菜单 overflow-y:auto 时，滚到下方的项虽然 DOM 存在但会被 viewport 切
  // （这是正常的滚动行为，用户主动 scrollTop 才能看到），不算 bug。
  // 真实 bug 是「菜单本身溢出 viewport」，由上面的 1/3 项覆盖。
  if (!m.hasScroll) {
    if (check('菜单内所有项可见（不被切）', m.itemsClipped === 0, `clipped=${m.itemsClipped}`)) pass++; else fail++;
  } else {
    if (check('菜单可滚动时跳过项可见性检查（滚动是正常的）', true)) pass++;
  }
  // 6. 有滚动条当内容超出
  if (m.itemCount > 15) {
    if (check('内容多时滚动条可见', m.hasScroll, `scrollH=${m.hasScroll}`)) pass++; else fail++;
  }
  // 7. 无 page error
  if (check('无 JS 错误', r.errors.length === 0, r.errors.join('; '))) pass++; else fail++;
}

console.log(`\n==========\n通过 ${pass} / 失败 ${fail}\n==========`);
rmSync(tmpDir, { recursive: true, force: true });
process.exit(fail === 0 ? 0 : 1);