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

test('실제 로그인 테스트 - 대시보드까지 확인', async ({ page }) => {
  console.log('\n\n╔════════════════════════════════════════════╗');
  console.log('║        실제 로그인 완료 테스트            ║');
  console.log('╚════════════════════════════════════════════╝\n');

  // 1단계: 로그인 페이지 접속
  console.log('1️⃣ 로그인 페이지 접속...');
  const loginResponse = await page.goto('http://localhost:5265/login.html', { waitUntil: 'load' });
  console.log(`   상태: ${loginResponse?.status()} ${loginResponse?.status() === 200 ? '✅' : '❌'}`);
  console.log(`   URL: ${page.url()}`);

  // 2단계: 로그인 폼 확인
  console.log('\n2️⃣ 로그인 폼 확인...');
  const form = await page.locator('#loginForm');
  const formVisible = await form.isVisible();
  console.log(`   폼 존재: ${formVisible ? '✅' : '❌'}`);

  // 3단계: 자격증명 입력
  console.log('\n3️⃣ 자격증명 입력...');
  await page.fill('#username', 'admin');
  console.log('   아이디 입력: ✅');
  await page.fill('#password', 'admin');
  console.log('   비밀번호 입력: ✅');

  // 4단계: 로그인 버튼 클릭
  console.log('\n4️⃣ 로그인 버튼 클릭...');
  const button = await page.locator('#loginBtn');
  await button.click();
  console.log('   클릭 완료: ✅');

  // 5단계: API 응답 대기
  console.log('\n5️⃣ API 응답 대기 중...');
  
  // 네트워크 요청 모니터링
  let apiSuccess = false;
  let apiResponse = null;
  
  page.on('response', response => {
    if (response.url().includes('/api/auth/login')) {
      apiResponse = response;
      console.log(`   API 응답: ${response.status()}`);
      if (response.status() === 200) {
        apiSuccess = true;
        console.log('   로그인 API: ✅ 200 OK');
      }
    }
  });

  // URL 변경 대기 (리다이렉트)
  console.log('\n6️⃣ 페이지 리다이렉트 대기...');
  try {
    await page.waitForURL('/', { timeout: 5000 });
    console.log(`   최종 URL: ${page.url()}`);
    console.log('   리다이렉트: ✅');
  } catch (e) {
    console.log(`   최종 URL: ${page.url()}`);
    console.log(`   리다이렉트 대기 시간 초과 (5초) - URL 확인 중...`);
  }

  // 7단계: 대시보드 콘텐츠 확인
  console.log('\n7️⃣ 대시보드 콘텐츠 확인...');
  
  await page.waitForTimeout(2000); // 페이지 로드 대기
  
  const dashboardTitle = await page.title();
  console.log(`   페이지 제목: ${dashboardTitle}`);

  // 대시보드 요소 확인
  const appbar = await page.locator('.mud-appbar').isVisible().catch(() => false);
  const drawer = await page.locator('.mud-drawer').isVisible().catch(() => false);
  const mainContent = await page.locator('.mud-main-content').isVisible().catch(() => false);
  
  console.log(`   AppBar (헤더): ${appbar ? '✅' : '❌'}`);
  console.log(`   Drawer (사이드바): ${drawer ? '✅' : '❌'}`);
  console.log(`   Main Content (본체): ${mainContent ? '✅' : '❌'}`);

  // QuantEngine 텍스트 확인
  const bodyText = await page.content();
  const hasQuantEngine = bodyText.includes('QuantEngine');
  console.log(`   QuantEngine 텍스트: ${hasQuantEngine ? '✅' : '❌'}`);

  // 최종 결과
  console.log('\n' + '═'.repeat(50));
  
  if (apiSuccess && (appbar || drawer || mainContent)) {
    console.log('✅ 로그인 성공! 대시보드 로드됨');
    console.log(`   • API: 200 OK`);
    console.log(`   • 최종 URL: ${page.url()}`);
    console.log(`   • 대시보드 요소: 확인됨`);
  } else {
    console.log('❌ 로그인 실패 또는 대시보드 미로드');
    console.log(`   • API 성공: ${apiSuccess ? '예' : '아니오'}`);
    console.log(`   • 대시보드 요소: ${appbar || drawer || mainContent ? '예' : '아니오'}`);
    console.log(`   • 최종 URL: ${page.url()}`);
  }

  console.log('═'.repeat(50) + '\n');

  // 스크린샷
  await page.screenshot({ path: 'test-results/real-login-result.png', fullPage: true });
  console.log('📸 스크린샷 저장: test-results/real-login-result.png\n');
});