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

test.describe('로그인 기능 테스트', () => {
  test.beforeEach(async ({ page }) => {
    // 로그인 페이지로 이동
    await page.goto('/login');
    // 페이지 로딩 및 Blazor WASM 하이드레이션 대기
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000);
  });

  test('로그인 페이지 렌더링 확인', async ({ page }) => {
    // 페이지 타이틀 확인
    await expect(page).toHaveTitle(/로그인/);

    // 입력 필드 확인
    const usernameInput = page.locator('input[type="text"]').first();
    const passwordInput = page.locator('input[type="password"]');
    const loginButton = page.locator('button:has-text("로그인")');

    await expect(usernameInput).toBeVisible();
    await expect(passwordInput).toBeVisible();
    await expect(loginButton).toBeVisible();

    console.log('✓ 로그인 페이지 렌더링 완료');
  });

  test('입력 필드에 텍스트 입력 가능 확인', async ({ page }) => {
    // 아이디 입력
    const usernameInput = page.locator('input[type="text"]').first();
    await usernameInput.click();
    await usernameInput.type('admin', { delay: 50 });

    // 비밀번호 입력
    const passwordInput = page.locator('input[type="password"]');
    await passwordInput.click();
    await passwordInput.type('test123', { delay: 50 });

    // 입력값 확인
    const usernameValue = await usernameInput.inputValue();
    const passwordValue = await passwordInput.inputValue();

    expect(usernameValue).toBe('admin');
    expect(passwordValue).toBe('test123');

    console.log('✓ 입력 필드 동작 확인');
  });

  test('로그인 버튼 클릭 가능 확인', async ({ page }) => {
    // 아이디 입력
    const usernameInput = page.locator('input[type="text"]').first();
    await usernameInput.click();
    await usernameInput.type('admin', { delay: 50 });

    // 비밀번호 입력
    const passwordInput = page.locator('input[type="password"]');
    await passwordInput.click();
    await passwordInput.type('admin', { delay: 50 });

    // 로그인 버튼 클릭
    const loginButton = page.locator('button:has-text("로그인")');
    await loginButton.click();

    console.log('✓ 로그인 버튼 클릭 가능');

    // 페이지 변화 대기
    await page.waitForTimeout(2000);
  });

  test('홈 페이지 접근 확인', async ({ page }) => {
    // 홈 페이지 접근
    await page.goto('/');

    // 로그인 페이지로 리다이렉트 되는지 확인
    await page.waitForTimeout(2000);

    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);

    // 대시보드 또는 로그인 페이지 중 하나여야 함
    const isLoginPage = currentUrl.includes('/login');
    const isDashboard = currentUrl.includes('/dashboard') || currentUrl.includes('/');

    expect(isLoginPage || isDashboard).toBeTruthy();

    console.log('✓ 홈 페이지 접근 확인');
  });

  test('전체 기능 통합 테스트', async ({ page }) => {
    console.log('\n=== 전체 기능 통합 테스트 ===');

    // 1단계: 로그인 페이지 확인
    console.log('1️⃣  로그인 페이지 확인...');
    await expect(page).toHaveTitle(/로그인/);

    // 2단계: 입력 필드 찾기
    console.log('2️⃣  입력 필드 찾기...');
    const usernameInput = page.locator('input[type="text"]').first();
    const passwordInput = page.locator('input[type="password"]');
    const loginButton = page.locator('button:has-text("로그인")');

    await expect(usernameInput).toBeVisible();
    await expect(passwordInput).toBeVisible();
    await expect(loginButton).toBeVisible();

    // 3단계: 로그인 정보 입력
    console.log('3️⃣  로그인 정보 입력...');
    await usernameInput.click();
    await usernameInput.fill('admin');
    await passwordInput.click();
    await passwordInput.fill('admin');

    // 4단계: 로그인 버튼 클릭
    console.log('4️⃣  로그인 버튼 클릭...');
    await loginButton.click();

    // 5단계: 페이지 변화 대기
    console.log('5️⃣  페이지 변화 대기...');
    await page.waitForTimeout(3000);

    // 6단계: 최종 상태 확인
    console.log('6️⃣  최종 상태 확인...');
    const finalUrl = page.url();
    const pageTitle = await page.title();

    console.log(`  최종 URL: ${finalUrl}`);
    console.log(`  페이지 타이틀: ${pageTitle}`);

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

    console.log('\n✓ 전체 기능 통합 테스트 완료');
  });
});