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

test('WASM 페이지 HTML 디버깅', async ({ page }) => {
  console.log('\n╔════════════════════════════════════════════════════╗');
  console.log('║        WASM 페이지 HTML 디버깅                   ║');
  console.log('╚════════════════════════════════════════════════════╝\n');

  await page.goto('http://localhost:5265/wasm-test');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);

  // 전체 HTML 가져오기
  const html = await page.content();

  // blazor.web.js 로드 확인
  if (html.includes('blazor.web.js')) {
    console.log('✅ blazor.web.js 스크립트 태그 found');
  } else {
    console.log('❌ blazor.web.js 스크립트 태그 NOT found');
  }

  // MudBlazor 로드 확인
  if (html.includes('MudBlazor.min.js')) {
    console.log('✅ MudBlazor.min.js 스크립트 태그 found');
  } else {
    console.log('❌ MudBlazor.min.js 스크립트 태그 NOT found');
  }

  // MudContainer 확인
  if (html.includes('mud-container')) {
    console.log('✅ MudContainer 컴포넌트 렌더링됨');
  } else {
    console.log('❌ MudContainer 컴포넌트 NOT 렌더링됨');
  }

  // app div 확인
  if (html.includes('id="app"')) {
    console.log('✅ id="app" div found');
  } else {
    console.log('❌ id="app" div NOT found');
  }

  // MudPaper 확인
  if (html.includes('mud-paper')) {
    console.log('✅ MudPaper 컴포넌트 렌더링됨');
  } else {
    console.log('❌ MudPaper 컴포넌트 NOT 렌더링됨');
  }

  // Blazor 스크립트 로드 확인
  if (html.includes('_framework/blazor.web.js')) {
    console.log('✅ _framework/blazor.web.js 로드 경로 correct');
  } else {
    console.log('❌ _framework/blazor.web.js 로드 경로 NOT correct');
  }

  // HTML 일부 출력
  console.log('\n📝 <body> 태그 일부:');
  const bodyMatch = html.match(/<body[^>]*>/i);
  if (bodyMatch) {
    console.log(bodyMatch[0]);
  }

  console.log('\n📝 스크립트 태그들:');
  const scriptMatches = html.match(/<script[^>]*src="[^"]*"[^>]*><\/script>/gi);
  if (scriptMatches) {
    scriptMatches.forEach((script, i) => {
      if (script.includes('blazor') || script.includes('MudBlazor') || script.includes('_framework')) {
        console.log(`  [${i}] ${script}`);
      }
    });
  }

  console.log('\nHTML 길이:', html.length);
  console.log('첫 3000자:', html.substring(0, 3000));
});
