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

test('로그인 API 호출 추적', async ({ page }) => {
  console.log('\n╔════════════════════════════════════════════════════╗');
  console.log('║        로그인 API 호출 추적 & 디버깅             ║');
  console.log('╚════════════════════════════════════════════════════╝\n');

  // 네트워크 요청 추적
  const requests: string[] = [];
  page.on('request', request => {
    if (request.url().includes('api')) {
      console.log(`📤 Request: ${request.method()} ${request.url()}`);
      requests.push(`${request.method()} ${request.url()}`);
    }
  });

  page.on('response', response => {
    if (response.url().includes('api')) {
      console.log(`📥 Response: ${response.status()} ${response.url()}`);
    }
  });

  // 페이지 접근
  console.log('1️⃣  로그인 페이지 접근...');
  await page.goto('http://localhost:5265/login');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  // 입력 및 로그인
  console.log('\n2️⃣  로그인 시도...');
  const usernameInput = page.locator('input[type="text"]').first();
  const passwordInput = page.locator('input[type="password"]');
  const loginButton = page.locator('button:has-text("로그인")');

  await usernameInput.fill('admin');
  await passwordInput.fill('admin');

  console.log('📝 입력 완료: admin / admin');

  // 로그인 버튼 클릭 전 요청 모니터
  console.log('\n3️⃣  로그인 버튼 클릭...');

  // 네트워크 응답 대기
  const [response] = await Promise.all([
    page.waitForResponse(
      response =>
        response.url().includes('/api/auth/login') &&
        (response.status() === 200 || response.status() === 401 || response.status() === 400),
      { timeout: 10000 }
    ),
    loginButton.click()
  ]).catch(err => {
    console.log('❌ 응답 대기 실패:', err.message);
    return [null];
  });

  if (response) {
    console.log(`\n✅ 로그인 API 응답: ${response.status()}`);

    const responseText = await response.text();
    console.log(`📄 응답 본문: ${responseText}`);

    try {
      const json = JSON.parse(responseText);
      console.log('🔍 파싱된 JSON:');
      console.log(JSON.stringify(json, null, 2));
    } catch (e) {
      console.log('❌ JSON 파싱 실패');
    }
  } else {
    console.log('❌ 로그인 API 응답 없음');
  }

  // 최종 상태 확인
  console.log('\n4️⃣  최종 상태 확인...');
  await page.waitForTimeout(2000);

  const finalUrl = page.url();
  const finalTitle = await page.title();
  const bodyText = await page.locator('body').textContent();

  console.log(`📍 최종 URL: ${finalUrl}`);
  console.log(`📄 최종 제목: ${finalTitle}`);
  console.log(`📝 "대시보드" 포함: ${bodyText?.includes('대시보드') ? '✅ 예' : '❌ 아니오'}`);
  console.log(`📝 "로그인" 포함: ${bodyText?.includes('로그인') ? '✅ 예' : '❌ 아니오'}`);

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

  console.log('\n╔════════════════════════════════════════════════════╗');
  if (finalUrl.includes('/dashboard')) {
    console.log('║            ✅ 로그인 성공!                       ║');
  } else {
    console.log('║            ❌ 로그인 실패                         ║');
  }
  console.log('╚════════════════════════════════════════════════════╝\n');
});