'use strict';

const childProcess = require('child_process');
const fs = require('fs');
const http = require('http');
const net = require('net');
const os = require('os');
const path = require('path');
const WebSocket = require('ws');

const REPO_DIR = path.resolve(__dirname, '..', '..');
const OUTPUT_DIR = path.join(__dirname, 'screenshots');
const REPORT_PATH = path.join(__dirname, 'visual-report.json');
const CHROME_PATH = process.env.CHROME_PATH
  || '/home/hdzx/.cache/ms-playwright/chromium-1228/chrome-linux64/chrome';
const PASSWORD = 'UsageVisual!234';
const THEMES = [
  'washi', 'coolvibe', 'editorial', 'sage', 'ink', 'dawn',
  'carbon', 'nocturne', 'cinder', 'gilded', 'wasteland',
];

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getFreePort() {
  return new Promise((resolve, reject) => {
    const server = net.createServer();
    server.unref();
    server.on('error', reject);
    server.listen(0, '127.0.0.1', () => {
      const address = server.address();
      server.close(() => resolve(address.port));
    });
  });
}

async function getJson(url) {
  return new Promise((resolve, reject) => {
    const request = http.get(url, (response) => {
      let body = '';
      response.setEncoding('utf8');
      response.on('data', (chunk) => { body += chunk; });
      response.on('end', () => {
        try {
          resolve(JSON.parse(body));
        } catch (error) {
          reject(error);
        }
      });
    });
    request.on('error', reject);
    request.setTimeout(2000, () => request.destroy(new Error(`请求超时：${url}`)));
  });
}

async function waitFor(check, timeoutMs = 15000, intervalMs = 80) {
  const started = Date.now();
  let lastError = null;
  while (Date.now() - started < timeoutMs) {
    try {
      const value = await check();
      if (value) return value;
    } catch (error) {
      lastError = error;
    }
    await sleep(intervalMs);
  }
  throw lastError || new Error(`等待条件超时（${timeoutMs}ms）`);
}

function writeUsageFixtures(sessionsDir) {
  const tools = [
    ['search-server', 'web_search'],
    ['data-server', 'query_data'],
    ['code-server', 'run_code'],
    ['doc-server', 'fetch_doc'],
    ['api-server', 'api_request'],
    ['file-server', 'read_file'],
    ['memory-server', 'remember'],
    ['browser-server', 'open_page'],
    ['terminal-server', 'run_task'],
    ['github-server', 'list_issues'],
  ];
  const skills = ['数据分析', '报表生成', '文档总结', '代码解释', '翻译助手'];
  for (let day = 1; day <= 31; day += 1) {
    const messages = [];
    const messageCount = 7 + (day % 7);
    for (let index = 0; index < messageCount; index += 1) {
      const hour = 1 + (index % 20);
      const minute = (index * 7) % 60;
      const timestamp = new Date(Date.UTC(2026, 6, day, hour, minute)).toISOString();
      const skill = skills[(day + index) % skills.length];
      messages.push({
        role: 'user',
        content: `视觉验收消息 ${day}-${index}`,
        timestamp,
        crossConversation: (day + index) % 4 === 0,
        composerMentions: index % 2 === 0
          ? [{ kind: 'skill', name: skill, label: `$${skill}` }]
          : [],
      });

      if (index % 2 === 0) {
        const [server, tool] = tools[(day + index) % tools.length];
        const failed = (day + index) % 9 === 0;
        const other = !failed && (day + index) % 13 === 0;
        messages.push({
          role: 'assistant',
          content: `视觉验收回复 ${day}-${index}`,
          timestamp: new Date(Date.UTC(2026, 6, day, hour, minute + 1)).toISOString(),
          toolCalls: [{
            name: 'McpToolCall',
            kind: 'mcp_tool_call',
            input: { server, tool, arguments: { fixture: true } },
            result: 'visual-fixture-result',
            done: !other,
            meta: {
              kind: 'mcp_tool_call',
              status: failed ? 'failed' : other ? 'pending' : 'completed',
            },
          }],
        });
      }
    }
    const created = new Date(Date.UTC(2026, 6, day, 0, 0)).toISOString();
    const updated = new Date(Date.UTC(2026, 6, day, 23, 30)).toISOString();
    const id = `visual-usage-${String(day).padStart(2, '0')}`;
    fs.writeFileSync(path.join(sessionsDir, `${id}.json`), JSON.stringify({
      id,
      title: `使用统计视觉验收会话 ${String(day).padStart(2, '0')}`,
      agent: day % 2 === 0 ? 'codexapp' : 'claude',
      cwd: `/tmp/usage-visual/project-${day % 4}`,
      projectName: `视觉项目 ${day % 4}`,
      created,
      updated,
      messages,
    }, null, 2));
  }
}

async function connectCdp(webSocketUrl) {
  const socket = new WebSocket(webSocketUrl);
  await new Promise((resolve, reject) => {
    socket.once('open', resolve);
    socket.once('error', reject);
  });
  let sequence = 0;
  const pending = new Map();
  const rejectPending = (error) => {
    for (const entry of pending.values()) entry.reject(error);
    pending.clear();
  };
  socket.on('message', (payload) => {
    const message = JSON.parse(String(payload));
    if (!message.id || !pending.has(message.id)) return;
    const entry = pending.get(message.id);
    pending.delete(message.id);
    if (message.error) entry.reject(new Error(message.error.message || JSON.stringify(message.error)));
    else entry.resolve(message.result || {});
  });
  socket.on('close', () => rejectPending(new Error('Chrome CDP 连接已关闭')));
  socket.on('error', (error) => rejectPending(error));
  return {
    socket,
    send(method, params = {}) {
      sequence += 1;
      const id = sequence;
      return new Promise((resolve, reject) => {
        pending.set(id, { resolve, reject });
        socket.send(JSON.stringify({ id, method, params }), (error) => {
          if (!error) return;
          pending.delete(id);
          reject(error);
        });
      });
    },
  };
}

async function evaluate(cdp, expression) {
  const result = await cdp.send('Runtime.evaluate', {
    expression,
    returnByValue: true,
    awaitPromise: true,
  });
  if (result.exceptionDetails) {
    throw new Error(result.exceptionDetails.text || '页面脚本执行失败');
  }
  return result.result?.value;
}

async function setViewport(cdp, width, height) {
  await cdp.send('Emulation.setDeviceMetricsOverride', {
    width,
    height,
    deviceScaleFactor: 1,
    mobile: false,
    screenWidth: width,
    screenHeight: height,
  });
  await sleep(120);
}

async function capture(cdp, fileName) {
  const result = await cdp.send('Page.captureScreenshot', {
    format: 'png',
    fromSurface: true,
    captureBeyondViewport: false,
  });
  fs.writeFileSync(path.join(OUTPUT_DIR, fileName), Buffer.from(result.data, 'base64'));
}

async function stopChildProcess(child) {
  if (!child || child.exitCode !== null) return;
  const exited = new Promise((resolve) => child.once('exit', resolve));
  child.kill('SIGTERM');
  await Promise.race([exited, sleep(2000)]);
}

async function collectGeometry(cdp, theme, width, height) {
  return evaluate(cdp, `(() => {
    const rect = (selector) => {
      const element = document.querySelector(selector);
      if (!element) return null;
      const box = element.getBoundingClientRect();
      return {
        x: Math.round(box.x * 10) / 10,
        y: Math.round(box.y * 10) / 10,
        width: Math.round(box.width * 10) / 10,
        height: Math.round(box.height * 10) / 10,
      };
    };
    const metricRects = Array.from(document.querySelectorAll('.usage-dashboard__metric')).map((element) => {
      const box = element.getBoundingClientRect();
      return { x: Math.round(box.x), y: Math.round(box.y), width: Math.round(box.width), height: Math.round(box.height) };
    });
    const overflowSelectors = [
      '.usage-dashboard__metric-label',
      '.usage-dashboard__metric-copy strong',
      '.usage-dashboard__panel-heading h3',
      '.usage-dashboard__tool-name',
      '.usage-dashboard__rank-list strong',
      '.usage-dashboard__session-link',
    ];
    const textOverflow = overflowSelectors.flatMap((selector) => Array.from(document.querySelectorAll(selector))
      .filter((element) => element.scrollWidth > element.clientWidth + 1)
      .map((element) => ({ selector, text: element.textContent.trim().slice(0, 80) })));
    const dashboard = document.querySelector('.usage-dashboard');
    const body = document.querySelector('.usage-dashboard__body');
    const sparklineCanvases = document.querySelectorAll('[data-usage-spark] canvas').length;
    const donutCanvases = document.querySelectorAll('.usage-dashboard__donut-chart canvas').length;
    return {
      theme: ${JSON.stringify(theme)},
      viewport: { width: ${width}, height: ${height} },
      dashboard: rect('.usage-dashboard'),
      header: rect('.usage-dashboard__header'),
      toolbar: rect('.usage-dashboard__toolbar'),
      metricGrid: rect('.usage-dashboard__metric-grid'),
      metrics: metricRects,
      primary: rect('.usage-dashboard__content-grid--primary'),
      trend: rect('.usage-dashboard__panel--trend'),
      mcp: rect('.usage-dashboard__panel--mcp'),
      lower: rect('.usage-dashboard__content-grid--lower'),
      status: rect('.usage-dashboard__panel--status'),
      projects: rect('.usage-dashboard__panel--projects'),
      sessions: rect('.usage-dashboard__panel--sessions'),
      dashboardOverflowX: Math.max(0, dashboard.scrollWidth - dashboard.clientWidth),
      bodyOverflowX: Math.max(0, body.scrollWidth - body.clientWidth),
      bodyScrollHeight: body.scrollHeight,
      bodyClientHeight: body.clientHeight,
      metricColumns: getComputedStyle(document.querySelector('.usage-dashboard__metric-grid')).gridTemplateColumns,
      primaryColumns: getComputedStyle(document.querySelector('.usage-dashboard__content-grid--primary')).gridTemplateColumns,
      panelBackground: getComputedStyle(document.querySelector('.usage-dashboard__panel')).backgroundColor,
      pageBackground: getComputedStyle(dashboard).backgroundColor,
      charts: {
        runtime: typeof window.echarts?.init === 'function',
        sparklines: sparklineCanvases,
        trend: document.querySelectorAll('#usage-dashboard-trend canvas').length,
        donuts: donutCanvases,
        ready: sparklineCanvases === 5
          && document.querySelectorAll('#usage-dashboard-trend canvas').length === 1
          && donutCanvases === 3,
      },
      skillTextVisible: /Skill/i.test(dashboard.innerText),
      textOverflow,
    };
  })()`);
}

async function main() {
  if (!fs.existsSync(CHROME_PATH)) throw new Error(`找不到 Chrome：${CHROME_PATH}`);
  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
  const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'cc-web-usage-visual-'));
  const configDir = path.join(tempRoot, 'config');
  const sessionsDir = path.join(tempRoot, 'sessions');
  const logsDir = path.join(tempRoot, 'logs');
  const profileDir = path.join(tempRoot, 'chrome-profile');
  [configDir, sessionsDir, logsDir, profileDir].forEach((dir) => fs.mkdirSync(dir, { recursive: true }));
  writeUsageFixtures(sessionsDir);

  const port = await getFreePort();
  const debugPort = await getFreePort();
  let server = null;
  let chrome = null;
  let cdp = null;
  try {
    server = childProcess.spawn(process.execPath, ['server.js'], {
      cwd: REPO_DIR,
      env: {
        ...process.env,
        PORT: String(port),
        CC_WEB_PASSWORD: PASSWORD,
        CC_WEB_CONFIG_DIR: configDir,
        CC_WEB_SESSIONS_DIR: sessionsDir,
        CC_WEB_LOGS_DIR: logsDir,
        CC_WEB_USAGE_STATISTICS: '1',
      },
      stdio: ['ignore', 'pipe', 'pipe'],
    });
    let serverError = '';
    server.stderr.on('data', (chunk) => { serverError += String(chunk); });
    await waitFor(() => new Promise((resolve) => {
      const request = http.get(`http://127.0.0.1:${port}/`, (response) => {
        response.resume();
        resolve(response.statusCode === 200);
      });
      request.on('error', () => resolve(false));
    }), 20000);
    if (server.exitCode !== null) throw new Error(serverError || '测试服务提前退出');

    chrome = childProcess.spawn(CHROME_PATH, [
      '--headless=new',
      '--no-sandbox',
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--hide-scrollbars',
      '--remote-allow-origins=*',
      `--remote-debugging-port=${debugPort}`,
      `--user-data-dir=${profileDir}`,
      '--window-size=1467,943',
      'about:blank',
    ], { stdio: ['ignore', 'ignore', 'pipe'] });

    const targets = await waitFor(async () => {
      const list = await getJson(`http://127.0.0.1:${debugPort}/json/list`);
      return list.find((target) => target.type === 'page') ? list : null;
    }, 20000);
    const pageTarget = targets.find((target) => target.type === 'page');
    cdp = await connectCdp(pageTarget.webSocketDebuggerUrl);
    await cdp.send('Page.enable');
    await cdp.send('Runtime.enable');
    await cdp.send('Network.enable');
    await cdp.send('Network.setBlockedURLs', { urls: ['https://cdnjs.cloudflare.com/*'] });
    await cdp.send('Page.addScriptToEvaluateOnNewDocument', {
      source: `(() => {
        class Renderer {}
        window.marked = { Renderer, setOptions() {}, parse: (value) => String(value || '') };
        window.hljs = {
          getLanguage: () => false,
          highlight: (_value, options) => ({ value: String(options?.language || '') }),
          highlightAuto: (value) => ({ value: String(value || '') }),
        };
        window.mermaid = { initialize() {}, render: async () => ({ svg: '' }) };
      })();`,
    });
    await setViewport(cdp, 1467, 943);
    const navigation = await cdp.send('Page.navigate', { url: `http://127.0.0.1:${port}/` });
    if (navigation.errorText) throw new Error(`页面导航失败：${navigation.errorText}`);
    try {
      await waitFor(() => evaluate(cdp, "document.readyState === 'complete'"), 30000);
    } catch (error) {
      const diagnostic = await evaluate(cdp, `(() => ({
        href: location.href,
        readyState: document.readyState,
        title: document.title,
        body: document.body?.textContent?.trim().slice(0, 240) || '',
      }))()`);
      throw new Error(`页面未完成加载：${JSON.stringify(diagnostic)}；${error.message}`);
    }
    await waitFor(() => evaluate(cdp, "!!document.querySelector('#login-form')"), 10000);
    await sleep(500);
    await evaluate(cdp, `(() => {
      document.querySelector('#login-password').value = ${JSON.stringify(PASSWORD)};
      document.querySelector('#login-form').requestSubmit();
      return true;
    })()`);
    try {
      try {
        await waitFor(() => evaluate(cdp, "document.querySelector('#login-overlay').hidden && !document.querySelector('#usage-dashboard-open').hidden"), 3000);
      } catch {
        await evaluate(cdp, `(() => {
          document.querySelector('#login-password').value = ${JSON.stringify(PASSWORD)};
          document.querySelector('#login-form').requestSubmit();
          return true;
        })()`);
        await waitFor(() => evaluate(cdp, "document.querySelector('#login-overlay').hidden && !document.querySelector('#usage-dashboard-open').hidden"), 17000);
      }
    } catch (error) {
      const diagnostic = await evaluate(cdp, `(() => ({
        loginHidden: document.querySelector('#login-overlay')?.hidden,
        loginError: document.querySelector('#login-error')?.hidden ? '' : document.querySelector('#login-error')?.textContent,
        appHidden: document.querySelector('#app')?.hidden,
        usageHidden: document.querySelector('#usage-dashboard-open')?.hidden,
        marked: typeof window.marked?.parse,
        echarts: typeof window.echarts?.init,
      }))()`);
      throw new Error(`登录后页面未就绪：${JSON.stringify(diagnostic)}；${error.message}`);
    }
    await evaluate(cdp, "document.querySelector('#usage-dashboard-open').click(); true");
    await waitFor(() => evaluate(cdp, "!document.querySelector('#usage-dashboard-panel').hidden"), 10000);
    await waitFor(() => evaluate(cdp, "document.querySelector('#usage-dashboard-panel').dataset.state !== 'loading'"), 30000);
    await sleep(320);
    const loadingLayout = await evaluate(cdp, `(() => {
      const metricGrid = document.querySelector('.usage-dashboard__metric-grid');
      const beforeTop = metricGrid.getBoundingClientRect().top;
      document.querySelector('#usage-dashboard-refresh').click();
      const afterTop = metricGrid.getBoundingClientRect().top;
      return {
        state: document.querySelector('#usage-dashboard-panel').dataset.state,
        label: document.querySelector('#usage-dashboard-refresh-label').textContent,
        busy: document.querySelector('#usage-dashboard-refresh').getAttribute('aria-busy'),
        contentShift: Math.round(Math.abs(afterTop - beforeTop) * 10) / 10,
        standaloneLoading: !!document.querySelector('#usage-dashboard-loading'),
      };
    })()`);
    if (loadingLayout.state !== 'loading'
      || loadingLayout.label !== '整理中'
      || loadingLayout.busy !== 'true'
      || loadingLayout.contentShift > 0.5
      || loadingLayout.standaloneLoading) {
      throw new Error(`加载状态仍引发布局变化：${JSON.stringify(loadingLayout)}`);
    }
    await waitFor(() => evaluate(cdp, `document.querySelector('#usage-dashboard-panel').dataset.state !== 'loading'
      && document.querySelector('#usage-dashboard-refresh-label').textContent === '刷新'`), 30000);
    await sleep(300);
    await evaluate(cdp, `(() => {
      const from = document.querySelector('#usage-dashboard-from');
      const to = document.querySelector('#usage-dashboard-to');
      from.value = '2026-07-01';
      to.value = '2026-07-31';
      from.dispatchEvent(new Event('change', { bubbles: true }));
      to.dispatchEvent(new Event('change', { bubbles: true }));
      document.querySelector('#usage-dashboard-apply').click();
      return true;
    })()`);
    try {
      await waitFor(() => evaluate(cdp, `document.querySelector('#usage-dashboard-panel').dataset.state === 'ready'
        && document.querySelector('[data-usage-metric="newSessions"]').textContent !== '0'
        && document.querySelectorAll('[data-usage-spark] canvas').length === 5
        && document.querySelectorAll('#usage-dashboard-trend canvas').length === 1
        && document.querySelectorAll('.usage-dashboard__donut-chart canvas').length === 3
        && document.querySelectorAll('#usage-dashboard-project-rows li').length === 4
        && !/Skill/i.test(document.querySelector('#usage-dashboard-panel').innerText)`), 30000);
    } catch (error) {
      const diagnostic = await evaluate(cdp, `(() => ({
        state: document.querySelector('#usage-dashboard-panel').dataset.state,
        error: document.querySelector('#usage-dashboard-error').textContent,
        from: document.querySelector('#usage-dashboard-from').value,
        to: document.querySelector('#usage-dashboard-to').value,
        applyDisabled: document.querySelector('#usage-dashboard-apply').disabled,
        newSessions: document.querySelector('[data-usage-metric="newSessions"]').textContent,
        status: document.querySelector('#usage-dashboard-status').textContent,
      }))()`);
      throw new Error(`自定义统计查询未返回预期数据：${JSON.stringify(diagnostic)}；${error.message}`);
    }

    await evaluate(cdp, `(() => {
      const rows = document.querySelectorAll('#usage-dashboard-mcp-rows tr').length;
      const more = document.querySelector('#usage-dashboard-mcp-more');
      if (rows !== 6 || !more || more.hidden || !/其余/.test(more.textContent)) {
        throw new Error(JSON.stringify({ rows, moreHidden: more?.hidden, moreText: more?.textContent }));
      }
      more.click();
      return true;
    })()`);
    await waitFor(() => evaluate(cdp, `document.querySelectorAll('#usage-dashboard-mcp-rows tr').length === 10
      && document.querySelector('#usage-dashboard-mcp-more').getAttribute('aria-expanded') === 'true'`), 5000);
    await evaluate(cdp, "document.querySelector('#usage-dashboard-mcp-more').click(); true");
    await waitFor(() => evaluate(cdp, "document.querySelectorAll('#usage-dashboard-mcp-rows tr').length === 6"), 5000);

    const report = { generatedAt: new Date().toISOString(), chrome: CHROME_PATH, views: [], themes: [] };
    const viewports = [
      { width: 1467, height: 943, name: 'reference' },
      { width: 1024, height: 768, name: 'desktop-narrow' },
      { width: 768, height: 1024, name: 'tablet' },
      { width: 390, height: 844, name: 'mobile' },
    ];
    await evaluate(cdp, "document.documentElement.dataset.theme = 'washi'; document.querySelector('.usage-dashboard__body').scrollTop = 0; true");
    for (const viewport of viewports) {
      await setViewport(cdp, viewport.width, viewport.height);
      await evaluate(cdp, "document.querySelector('.usage-dashboard__body').scrollTop = 0; true");
      await sleep(100);
      await capture(cdp, `dashboard-washi-${viewport.width}x${viewport.height}.png`);
      report.views.push(await collectGeometry(cdp, 'washi', viewport.width, viewport.height));
    }

    await setViewport(cdp, 1467, 943);
    await evaluate(cdp, "document.querySelector('.usage-dashboard__body').scrollTop = 0; document.querySelector('.usage-dashboard__rate-action')?.click(); true");
    await waitFor(() => evaluate(cdp, "!document.querySelector('#usage-dashboard-detail').hidden"), 5000);
    await sleep(220);
    await capture(cdp, 'dashboard-washi-detail-1467x943.png');
    await evaluate(cdp, "document.querySelector('#usage-dashboard-detail-close').click(); document.querySelector('.usage-dashboard__body').scrollTop = 0; true");

    await setViewport(cdp, 1440, 900);
    for (const theme of THEMES) {
      await evaluate(cdp, `document.documentElement.dataset.theme = ${JSON.stringify(theme)}; document.querySelector('.usage-dashboard__body').scrollTop = 0; true`);
      await sleep(80);
      await capture(cdp, `dashboard-theme-${theme}-1440x900.png`);
      report.themes.push(await collectGeometry(cdp, theme, 1440, 900));
    }
    fs.writeFileSync(REPORT_PATH, JSON.stringify(report, null, 2));
    process.stdout.write(`${JSON.stringify({ report: REPORT_PATH, screenshots: fs.readdirSync(OUTPUT_DIR).length }, null, 2)}\n`);
  } finally {
    if (cdp?.socket?.readyState === WebSocket.OPEN) cdp.socket.close();
    await stopChildProcess(chrome);
    await stopChildProcess(server);
    fs.rmSync(tempRoot, { recursive: true, force: true });
  }
}

main().catch((error) => {
  console.error(error.stack || error.message || String(error));
  process.exitCode = 1;
});