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

test('HTML 구조 검사', async ({ page }) => {
  await page.goto('http://localhost:5265/login', { waitUntil: 'networkidle' });
  await page.waitForTimeout(3000);

  const html = await page.content();
  
  // 중요한 요소 확인
  console.log('\n╔════════════════════════════════════════════════════╗');
  console.log('║         HTML 구조 검사                             ║');
  console.log('╚════════════════════════════════════════════════════╝\n');

  console.log('🔍 주요 요소 검사:');
  console.log(`   MudPaper 있음: ${html.includes('mud-paper') ? '✅' : '❌'}`);
  console.log(`   MudTextField 있음: ${html.includes('mud-textfield') ? '✅' : '❌'}`);
  console.log(`   login-container 있음: ${html.includes('login-container') ? '✅' : '❌'}`);
  console.log(`   login-card 있음: ${html.includes('login-card') ? '✅' : '❌'}`);
  console.log(`   form-input 있음: ${html.includes('form-input') ? '✅' : '❌'}`);
  
  console.log('\n📊 input 태그 개수:', (html.match(/<input/g) || []).length);
  console.log('📊 button 태그 개수:', (html.match(/<button/g) || []).length);
  
  console.log('\n📝 Body 내용 샘플:');
  const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
  if (bodyMatch) {
    const bodyContent = bodyMatch[1];
    // 처음 500자만 출력 (정리된 형태)
    const cleaned = bodyContent.replace(/\s+/g, ' ').substring(0, 600);
    console.log(cleaned);
  }
});