// UI-Screenshot Teil 2 — Modals, Hover-States, schmales Fenster, Queue mit
// aktivem Download. Ergaenzt ui-screenshot.js fuer die selteneren UI-Pfade.
const { _electron: electron } = require('playwright');
const fs = require('fs');
const path = require('path');

const OUT_DIR = path.join(process.cwd(), 'tmp_ui_shots');

async function run() {
  fs.mkdirSync(OUT_DIR, { recursive: true });
  const electronPath = require('electron');
  const app = await electron.launch({ executablePath: electronPath, args: ['.'], cwd: process.cwd() });
  const win = await app.firstWindow();
  await win.setViewportSize({ width: 1280, height: 900 });
  await win.waitForTimeout(2500);

  const shot = async (name) => {
    try { await win.screenshot({ path: path.join(OUT_DIR, `${name}.png`), animations: 'disabled', timeout: 8000 }); process.stdout.write(`shot: ${name}\n`); }
    catch (e) { process.stdout.write(`shot FAILED: ${name} — ${String(e).split('\n')[0]}\n`); }
  };

  // VODs mit xqc laden fuer Modal-Kontext
  await win.evaluate(() => window.showTab('vods'));
  await win.evaluate(async () => { await window.selectStreamer('xqc'); });
  await win.waitForTimeout(4000);

  // 1. Clip/Trim-Dialog Modal (Trim VOD auf erster Card)
  const trimBtn = win.locator('.vod-card .vod-btn.secondary').first();
  if (await trimBtn.count()) {
    await trimBtn.click().catch(() => {});
    await win.waitForTimeout(800);
    await shot('07-modal-trim');
    await win.keyboard.press('Escape');
    await win.waitForTimeout(400);
  }

  // 2. Command Palette (Ctrl+K)
  await win.keyboard.press('Control+K');
  await win.waitForTimeout(500);
  await shot('08-command-palette');
  // Tippe etwas zum Filtern
  await win.keyboard.type('set');
  await win.waitForTimeout(300);
  await shot('08-command-palette-filtered');
  await win.keyboard.press('Escape');
  await win.waitForTimeout(300);

  // 3. Template Guide Modal (Settings -> Template-Guide oeffnen falls Button da)
  await win.evaluate(() => window.showTab('settings'));
  await win.waitForTimeout(500);
  const tgOpened = await win.evaluate(() => {
    if (typeof window.openTemplateGuide === 'function') { window.openTemplateGuide(); return true; }
    return false;
  });
  if (tgOpened) {
    await win.waitForTimeout(700);
    await shot('09-template-guide');
    await win.keyboard.press('Escape');
    await win.waitForTimeout(400);
  }

  // 4. VOD-Card Hover (Storyboard-Preview)
  await win.evaluate(() => window.showTab('vods'));
  await win.waitForTimeout(800);
  const firstCard = win.locator('.vod-card').first();
  if (await firstCard.count()) {
    await firstCard.hover();
    await win.waitForTimeout(1200); // debounce + storyboard fetch
    await shot('10-vod-hover');
  }

  // 5. Schmales Fenster (responsive) — 760px
  await win.setViewportSize({ width: 760, height: 900 });
  await win.waitForTimeout(800);
  await shot('11-narrow-vods');
  await win.evaluate(() => window.showTab('settings'));
  await win.waitForTimeout(500);
  await shot('11-narrow-settings');

  // 6. Sehr schmal — 520px
  await win.setViewportSize({ width: 520, height: 800 });
  await win.evaluate(() => window.showTab('vods'));
  await win.waitForTimeout(800);
  await shot('12-tiny-vods');

  await app.close();
  process.stdout.write(`\nDone part 2.\n`);
}

run().catch((e) => { process.stderr.write(String(e) + '\n'); process.exit(1); });