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

test.describe('로그인 기능 테스트 (Razor Pages)', () => {
  test.beforeEach(async ({ page }) => {
    // 로그인 페이지로 이동
    await page.goto('/Account/Login');
    // 페이지 로딩 대기
    await page.waitForLoadState('domcontentloaded');
  });

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

    // 입력 필드 확인 (ID 기반 셀렉터)
    const usernameInput = page.locator('#username');
    const passwordInput = page.locator('#password');
    const loginButton = page.locator('#loginBtn');

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

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

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

    // 비밀번호 입력
    const passwordInput = page.locator('#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('#username');
    await usernameInput.click();
    await usernameInput.type('admin', { delay: 50 });

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

    // 로그인 버튼 클릭
    const loginButton = page.locator('#loginBtn');
    await loginButton.click();

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

    // 페이지 변화 대기
    await page.waitForLoadState('domcontentloaded');
  });

  test('로그인 실패 시 오류 메시지 표시', async ({ page }) => {
    // 잘못된 자격증명 입력
    const usernameInput = page.locator('#username');
    const passwordInput = page.locator('#password');
    const loginButton = page.locator('#loginBtn');

    await usernameInput.fill('invaliduser');
    await passwordInput.fill('wrongpassword');
    await loginButton.click();

    // 오류 메시지 대기 (alert-error 클래스)
    const errorAlert = page.locator('.alert-error');
    await expect(errorAlert).toBeVisible({ timeout: 5000 });

    console.log('✓ 로그인 실패 오류 메시지 표시 확인');
  });

  test('보호된 페이지 접근 시 로그인 페이지로 리다이렉트', async ({ page }) => {
    // 관리자 대시보드 직접 접근 시도
    await page.goto('/Admin/Dashboard', { waitUntil: 'domcontentloaded' });

    // 로그인 페이지로 리다이렉트 되어야 함
    const currentUrl = page.url();
    expect(currentUrl).toContain('/Account/Login');

    console.log('✓ 보호된 페이지 접근 제어 확인');
  });

  test('전체 로그인 플로우 테스트', async ({ page }) => {
    console.log('\n=== 전체 로그인 플로우 테스트 ===');

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

    // 2단계: 입력 필드 찾기
    console.log('2️⃣  입력 필드 찾기...');
    const usernameInput = page.locator('#username');
    const passwordInput = page.locator('#password');
    const loginButton = page.locator('#loginBtn');

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

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

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

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

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

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

    // 로그인 성공 시 로그인 페이지가 아닌 다른 페이지로 이동되어야 함
    expect(!finalUrl.includes('/Account/Login')).toBeTruthy();

    console.log('\n✓ 전체 로그인 플로우 테스트 완료');
  });
});