import { test } from '@playwright/test';

test('Screenshot RBAC permission UI', async ({ page }) => {
  // Set larger viewport for better visibility
  await page.setViewportSize({ width: 1600, height: 1000 });

  // 使用相對路徑，baseURL 由 playwright.config.ts 控制
  await page.goto('/zh-TW/demo');
  await page.waitForTimeout(4000);

  // Scroll to show HITL section with approval cards
  await page.evaluate(() => window.scrollTo(0, 550));
  await page.waitForTimeout(1500);

  await page.screenshot({ path: 'test-results/phase3-hitl-section-final.png' });

  // Scroll more to see full approval cards with permission badge
  await page.evaluate(() => window.scrollTo(0, 750));
  await page.waitForTimeout(1000);

  await page.screenshot({ path: 'test-results/phase3-rbac-permission-badge.png' });

  // Scroll to bottom to see user role display
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(1000);

  await page.screenshot({ path: 'test-results/phase3-user-role-display.png' });
});