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

test('최종 로그인 테스트 - 동적 ID 선택자 사용', async ({ page }) => {
  console.log('\n╔════════════════════════════════════════════════════╗');
  console.log('║        최종 로그인 테스트 (동적 ID 기반)            ║');
  console.log('╚════════════════════════════════════════════════════╝\n');

  // 1️⃣ 로그인 페이지 로드
  console.log('1️⃣ 로그인 페이지 접근...');
  await page.goto('http://localhost:5265/login', { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);
  console.log('   ✓ 페이지 로드됨');

  // 2️⃣ 입력 필드 확인 (동적 ID 선택자 사용)
  console.log('\n2️⃣ 입력 필드 확인 (MudTextField)...');

  // MudTextField는 자동 생성 ID를 사용하므로, 타입으로 선택
  const usernameField = page.locator('input[type="text"].mud-input-slot').first();
  const passwordField = page.locator('input[type="password"].mud-input-slot').first();

  // MudButton을 찾기 (Primary color + 텍스트 포함)
  const loginBtn = page.locator('button:has-text("로그인")').filter({ hasNot: page.locator('.components-reconnect') }).first();

  const usernameExists = await usernameField.count() > 0;
  const passwordExists = await passwordField.count() > 0;
  const btnExists = await loginBtn.count() > 0;

  console.log(`   아이디 필드: ${usernameExists ? '✅' : '❌'}`);
  console.log(`   비밀번호 필드: ${passwordExists ? '✅' : '❌'}`);
  console.log(`   로그인 버튼: ${btnExists ? '✅' : '❌'}`);

  if (!usernameExists || !passwordExists || !btnExists) {
    console.log('\n   ⚠️ 필드 찾기 실패, 페이지 HTML 샘플:');
    const html = await page.content();
    const inputCount = (html.match(/<input/g) || []).length;
    console.log(`   발견된 input 태그: ${inputCount}개`);
    console.log(`   login-shell: ${html.includes('login-shell') ? '있음' : '없음'}`);
  }

  // 3️⃣ 로그인 자격증명 입력
  console.log('\n3️⃣ 로그인 자격증명 입력...');
  await usernameField.fill('admin');
  await usernameField.waitFor({ state: 'visible' });
  console.log('   ✓ 아이디 입력 완료');

  await passwordField.fill('admin');
  await passwordField.waitFor({ state: 'visible' });
  console.log('   ✓ 비밀번호 입력 완료');

  // 4️⃣ 로그인 버튼 클릭
  console.log('\n4️⃣ 로그인 버튼 클릭...');
  await loginBtn.click();
  console.log('   ✓ 클릭됨');

  // 5️⃣ 응답 대기
  console.log('\n5️⃣ 응답 대기 중...');
  await page.waitForTimeout(3000);

  // 6️⃣ 최종 상태 확인
  console.log('\n6️⃣ 최종 상태 확인...');
  const finalUrl = page.url();
  const finalTitle = await page.title();
  const bodyText = await page.locator('body').textContent();

  console.log(`   📍 최종 URL: ${finalUrl}`);
  console.log(`   📄 페이지 제목: ${finalTitle}`);

  const isDashboard = finalUrl.includes('/dashboard') || finalUrl.includes('/');
  const hasDashboardText = bodyText?.includes('대시보드') || bodyText?.includes('관리자');

  console.log(`   📊 홈 페이지 이동: ${isDashboard ? '✅' : '❌'}`);
  console.log(`   📝 대시보드 콘텐츠: ${hasDashboardText ? '✅' : '❌'}`);

  // 7️⃣ 클라이언트 상태 확인
  console.log('\n7️⃣ 클라이언트 상태 확인...');
  const token = await page.evaluate(() => localStorage.getItem('quant_admin_access_token'));
  const username = await page.evaluate(() => localStorage.getItem('quant_admin_username'));

  console.log(`   토큰 저장됨: ${token ? '✅' : '❌'}`);
  console.log(`   아이디 저장됨: ${username ? '✅' : '❌'}`);

  // 8️⃣ 최종 결과
  console.log('\n╔════════════════════════════════════════════════════╗');
  if (isDashboard && (token || hasDashboardText)) {
    console.log('║            ✅ 로그인 성공!                       ║');
    console.log('║   API 로그인 완료 + 대시보드 이동 확인            ║');
  } else if (token) {
    console.log('║            ⚠️  API 로그인은 성공했으나            ║');
    console.log('║               페이지 리다이렉트 미확인             ║');
  } else {
    console.log('║            ❌ 로그인 실패                         ║');
  }
  console.log('╚════════════════════════════════════════════════════╝\n');

  // 9️⃣ API 직접 검증
  console.log('9️⃣ API 엔드포인트 검증...');
  const apiResponse = await page.evaluate(async () => {
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: 'admin', password: 'admin' })
      });
      return res.status;
    } catch (e) {
      return 'error';
    }
  });
  console.log(`   API 상태: ${apiResponse === 200 ? '✅ 200 OK' : `❌ ${apiResponse}`}\n`);
});