#!/usr/bin/env node
/**
 * 租赁合同列表（含 OneOS 侧栏 + 顶栏）· 5 主题 × 浅/暗 截图
 *
 * Usage:
 *   node scripts/shot-lease-contract-themes.mjs
 *   node scripts/shot-lease-contract-themes.mjs --base=http://127.0.0.1:51720
 */
import fs from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { createRequire } from 'node:module';
import { THEME_SHOTS, buildSkinCss } from './lease-contract-theme-skins.mjs';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const root = path.resolve(__dirname, '..');
const outDir = path.join(root, 'src/resources/design-system/lease-contract-theme-shots');

function parseArgs(argv) {
  const args = { base: 'http://127.0.0.1:51720' };
  for (const a of argv) {
    if (a.startsWith('--base=')) args.base = a.slice('--base='.length);
  }
  return args;
}

async function loadPuppeteer() {
  const require = createRequire(import.meta.url);
  try {
    return require('puppeteer');
  } catch {
    return require('puppeteer-core');
  }
}

async function main() {
  const args = parseArgs(process.argv.slice(2));
  const demoUrl = `${args.base.replace(/\/$/, '')}/prototypes/oneos-prototype-demo/#proto=lease-contract-management`;
  fs.mkdirSync(outDir, { recursive: true });

  const puppeteer = await loadPuppeteer();

  const browser = await puppeteer.launch({
    headless: true,
    executablePath:
      process.env.PUPPETEER_EXECUTABLE_PATH ||
      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    defaultViewport: { width: 1440, height: 1024, deviceScaleFactor: 2 },
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });

  const page = await browser.newPage();
  page.setDefaultTimeout(60000);

  console.log('打开演示主页', demoUrl);
  await page.goto(demoUrl, { waitUntil: 'networkidle2' });

  // 1. 等待主 Shell 框架
  await page.waitForSelector('.oneos-shell', { timeout: 60000 });
  await page.waitForSelector('.oneos-shell-frame', { timeout: 60000 });

  // 2. 准确定位真正的子 iframe（排除主页面 mainFrame）
  let childFrame = null;
  for (let i = 0; i < 30; i++) {
    childFrame = page.frames().find(
      (f) => f !== page.mainFrame() && f.url().includes('lease-contract-management'),
    );
    if (childFrame) {
      const ready = await childFrame.evaluate(() => !!document.querySelector('.vm-filter-card'));
      if (ready) {
        console.log(`子 iframe 页面已真正渲染就绪 (耗时 ${i * 200}ms)`);
        break;
      }
    }
    await new Promise((r) => setTimeout(r, 200));
  }

  if (!childFrame) {
    throw new Error('未在演示壳中找到已渲染的子 iframe');
  }

  const modes = ['light', 'dark'];
  const results = [];

  for (const theme of THEME_SHOTS) {
    for (const mode of modes) {
      const css = buildSkinCss(theme, mode);

      // A) 给主外壳 (Main Page) 应用主题 css 与浅/深属性
      await page.evaluate(
        (cssText, modeName) => {
          document.documentElement.dataset.dsMode = modeName;
          document.documentElement.dataset.oneosTheme = modeName;
          const shell = document.querySelector('.oneos-shell');
          if (shell) shell.dataset.oneosTheme = modeName;

          let el = document.getElementById('ds-theme-shot-skin');
          if (!el) {
            el = document.createElement('style');
            el.id = 'ds-theme-shot-skin';
            document.head.appendChild(el);
          }
          el.textContent = cssText;

          // 彻底隐去 ThemeLab 弹框和标注图层
          let hideEl = document.getElementById('ds-theme-shot-hide');
          if (!hideEl) {
            hideEl = document.createElement('style');
            hideEl.id = 'ds-theme-shot-hide';
            document.head.appendChild(hideEl);
          }
          hideEl.textContent = `
            .ds-theme-lab, .ds-theme-lab--collapsed, [data-annotation-id="lc-theme-lab"],
            .axhub-annotation-host, [data-axhub-annotation], .PrototypeAnnotationHost,
            iframe[src*="annotation"] {
              display: none !important; visibility: hidden !important; pointer-events: none !important;
            }
          `;
        },
        css,
        mode,
      );

      // B) 给真正的子 iframe (Child Frame) 应用主题 css 与浅/深属性
      await childFrame.evaluate(
        (cssText, modeName) => {
          document.documentElement.dataset.dsMode = modeName;
          document.documentElement.dataset.oneosTheme = modeName;

          let el = document.getElementById('ds-theme-shot-skin');
          if (!el) {
            el = document.createElement('style');
            el.id = 'ds-theme-shot-skin';
            document.head.appendChild(el);
          }
          el.textContent = cssText;

          // 彻底隐去 ThemeLab 弹框和标注图层
          let hideEl = document.getElementById('ds-theme-shot-hide');
          if (!hideEl) {
            hideEl = document.createElement('style');
            hideEl.id = 'ds-theme-shot-hide';
            document.head.appendChild(hideEl);
          }
          hideEl.textContent = `
            .ds-theme-lab, .ds-theme-lab--collapsed, [data-annotation-id="lc-theme-lab"],
            .axhub-annotation-host, [data-axhub-annotation], .PrototypeAnnotationHost,
            iframe[src*="annotation"] {
              display: none !important; visibility: hidden !important; pointer-events: none !important;
            }
          `;

          // 展开“更多筛选”呈现完整条件
          const expand = document.querySelector(
            'button.ldb-filter-toggle, button.vm-btn-link.ldb-filter-toggle',
          );
          if (expand && expand.textContent.includes('更多')) {
            expand.click();
          }
        },
        css,
        mode,
      );

      await new Promise((r) => setTimeout(r, 400));

      const file = `${theme.id}-${mode}.png`;
      const outPath = path.join(outDir, file);

      // 截取完整演示外壳页面
      await page.screenshot({ path: outPath, type: 'png', fullPage: false });
      console.log('wrote', file);
      results.push({ file, theme: theme.name, mode, category: theme.category });
    }
  }

  const readme = `# 租赁合同（含 OneOS 侧栏 + 顶栏）· 5 主题比稿截图

生成时间：${new Date().toISOString().slice(0, 10)}  
底稿：演示外壳 \`/prototypes/oneos-prototype-demo/#proto=lease-contract-management\`（包含完整左侧菜单与顶部栏，外壳与内容主题/浅暗 100% 深度绑定）

| 文件 | 主题 | 分类 | 模式 |
|------|------|------|------|
${results.map((r) => `| \`${r.file}\` | ${r.theme} | ${r.category} | ${r.mode === 'light' ? '浅色' : '暗色'} |`).join('\n')}

## 五套主题风格

| 编号 | 主题 | 调性与气质 |
|------|------|------|
| A | Linear | 冷 · 紫靛 · 精致中后台 |
| B | Stripe | 冷 · 品牌紫 · 金融精致 |
| C | Airbnb | 暖 · 珊瑚红 · 出行品牌 |
| D | Claude | 暖 · 陶土米 · 人文克制 |
| E | Intercom | 暖 · 米白黑 · 温和 B2B（浅色主按钮用品牌橙） |

> 说明：外壳（侧边栏与顶栏）与内容区（租赁合同）在颜色调性与浅/暗模式下 100% 绑定一致，主题实验室悬浮弹框已移除。
`;
  fs.writeFileSync(path.join(outDir, 'README.md'), readme);
  await browser.close();
  console.log('完成 →', outDir);
}

main().catch((err) => {
  console.error(err);
  process.exit(1);
});