/**
 * CPO-102 Visual Verification
 * ============================
 * 截圖驗收：Glass Sidebar + Header + HITL Approval Cards
 */

import { test, expect } from '@playwright/test'

test.describe('CPO-102 Layout Visual Verification', () => {
  test('Screenshot: Full Command Center Layout', async ({ page }) => {
    // Navigate to demo page (zh-TW)
    await page.goto('/zh-TW/demo')

    // Wait for DOM ready (skip networkidle due to SSE)
    await page.waitForLoadState('domcontentloaded')
    await page.waitForTimeout(3000)  // Allow SSE data + animations

    // Take full page screenshot
    await page.screenshot({
      path: 'test-results/cpo102-fullpage-zh-TW.png',
      fullPage: true,
    })

    // Scroll to HITL section and capture
    await page.evaluate(() => window.scrollTo(0, 800))
    await page.waitForTimeout(500)
    await page.screenshot({
      path: 'test-results/cpo102-hitl-section-zh-TW.png',
      fullPage: false,
    })

    // Scroll to Status Orb section
    await page.evaluate(() => window.scrollTo(0, 2000))
    await page.waitForTimeout(500)
    await page.screenshot({
      path: 'test-results/cpo102-status-section-zh-TW.png',
      fullPage: false,
    })

    // Verify key Chinese text
    const pageContent = await page.content()
    expect(pageContent).toContain('即時戰情室')
    expect(pageContent).toContain('授權卡片')

    console.log('✅ Screenshots saved to test-results/')
  })
})