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

test('Blazor WASM Interactivity Test', async ({ page }) => {
  console.log('\n╔════════════════════════════════════════════════════╗');
  console.log('║        Blazor WASM 상호작용 테스트                ║');
  console.log('╚════════════════════════════════════════════════════╝\n');

  console.log('1️⃣ /wasm-test 페이지 접근...');
  await page.goto('http://localhost:5265/wasm-test');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);

  console.log('   ✓ 페이지 로드 완료\n');

  console.log('2️⃣ "Click Me" 버튼 클릭...');
  const clickButton = page.locator('button:has-text("Click Me")');

  // 페이지 HTML 확인 (디버깅)
  const pageHtml = await page.locator('body').innerHTML();
  console.log('   페이지 로드됨, HTML 길이:', pageHtml.length);

  // 모든 strong 태그 찾기
  const strongCount = await page.locator('strong').count();
  console.log(`   찾은 <strong> 태그: ${strongCount}개`);

  if (strongCount < 2) {
    console.log('   ❌ 페이지 렌더링 실패 - strong 태그 부족');
    await page.screenshot({ path: 'test-results/wasm-test-fail.png', fullPage: true });
    return;
  }

  // 초기 클릭 수 확인
  let countText = await page.locator('strong').nth(0).textContent();
  console.log(`   초기 값: ${countText}`);

  // 5번 클릭
  for (let i = 0; i < 5; i++) {
    await clickButton.click();
    await page.waitForTimeout(200);
  }

  // 최종 클릭 수 확인
  countText = await page.locator('strong').nth(0).textContent();
  console.log(`   클릭 5회 후 값: ${countText}\n`);

  if (countText === '5') {
    console.log('✅ WASM 상호작용 정상 작동!');
    console.log('   결론: Blazor Interactive WebAssembly가 제대로 작동합니다.');
    console.log('   → 로그인 페이지의 문제는 Auth/Layout 특화 이슈입니다.\n');
  } else {
    console.log('❌ WASM 상호작용 실패!');
    console.log('   결론: Blazor Interactive WebAssembly가 전역적으로 작동하지 않습니다.');
    console.log('   → SDK/버전 레이어 문제를 확인해야 합니다.\n');
  }

  console.log('3️⃣ 텍스트 입력 필드 테스트...');
  const textField = page.locator('input[type="text"]').first();
  await textField.fill('Hello WASM');

  const typedText = await page.locator('strong').nth(1).textContent();
  console.log(`   입력 후 텍스트: ${typedText}\n`);

  if (typedText === 'Hello WASM') {
    console.log('✅ 텍스트 입력/바인딩 정상 작동!');
  } else {
    console.log('❌ 텍스트 입력/바인딩 실패!');
  }

  console.log('\n╔════════════════════════════════════════════════════╗');
  if (countText === '5' && typedText === 'Hello WASM') {
    console.log('║            ✅ WASM 완전 정상                      ║');
  } else {
    console.log('║            ❌ WASM 문제 있음                      ║');
  }
  console.log('╚════════════════════════════════════════════════════╝\n');
});