import { test } from '@playwright/test';
import { _electron as electron } from 'playwright';
import { promises as fs } from 'node:fs';
import nodePath from 'node:path';
import os from 'node:os';

const MAIN_JS = nodePath.join(process.cwd(), 'dist-electron/main/index.js');

test('screenshot titlebar buttons', async () => {
  const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-shot2-'));
  const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v');
  await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true });
  const app = await electron.launch({ args: ['--user-data-dir=' + ud, MAIN_JS] });
  const page = await app.firstWindow();
  await page.waitForLoadState('domcontentloaded');
  await page.evaluate((root: string) => (globalThis as any).dsh.invoke('vault:switch', { root }), v);
  await page.waitForTimeout(500);
  // Clip the top-right area where buttons are (full width, top 36px)
  await page.screenshot({ path: 'test-results/titlebar-buttons.png', clip: { x: 780, y: 0, width: 420, height: 36 } });
  // Get computed styles of each button to check visibility
  const btnInfo = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('button[title]')).filter(b => {
      const r = b.getBoundingClientRect();
      return r.top < 36; // titlebar buttons only
    }).map(b => {
      const cs = getComputedStyle(b);
      const r = b.getBoundingClientRect();
      return {
        title: b.getAttribute('title'),
        text: b.textContent,
        color: cs.color,
        fontSize: cs.fontSize,
        x: Math.round(r.x), y: Math.round(r.y),
        w: Math.round(r.width), h: Math.round(r.height)
      };
    });
  });
  console.log('TITLEBAR_BTNS:', JSON.stringify(btnInfo, null, 2));
  await app.close();
});