import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly errorMessage: Locator;
  readonly logoutButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator('input[placeholder="请输入用户名"]');
    this.passwordInput = page.locator('input[placeholder="请输入密码"]');
    this.loginButton = page.locator('button:has-text("登录")');
    this.errorMessage = page.locator('.el-message--error .el-message__content');
    this.logoutButton = page.getByRole('button', { name: '退出登录' });
  }

  async goto() {
    await this.page.goto('/login');
    await this.page.waitForLoadState('networkidle');
  }

  async login(username: string, password: string) {
    console.log('Starting login process...');
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    console.log('Filled username and password');
    await this.loginButton.click();
    console.log('Clicked login button');

    try {
      await this.page.waitForURL('**/dashboard', { timeout: 10000 });
      console.log('Successfully navigated to dashboard');
      await this.page.waitForLoadState('networkidle');
      console.log('Network idle achieved');
      await this.page.waitForTimeout(2000);
      console.log('Wait completed');
    } catch (error) {
      console.log('Login failed or timeout:', error);
      const currentUrl = this.page.url();
      console.log('Current URL:', currentUrl);
      
      const errorMessage = await this.getErrorMessage();
      if (errorMessage) {
        console.log('Login error message:', errorMessage);
      }
      
      await this.page.waitForTimeout(1000);
      throw error;
    }
  }

  async getErrorMessage(): Promise<string | null> {
    try {
      await this.page.waitForSelector('.el-message--error', { timeout: 10000 });
      await this.page.waitForTimeout(500);
      const messageElement = await this.page.locator('.el-message--error .el-message__content').first();
      const text = await messageElement.textContent();
      return text;
    } catch {
      try {
        await this.page.waitForSelector('.el-message', { timeout: 5000 });
        await this.page.waitForTimeout(500);
        const messageElement = await this.page.locator('.el-message .el-message__content').first();
        const text = await messageElement.textContent();
        return text;
      } catch {
        return null;
      }
    }
  }

  async logout() {
    const avatar = this.page.locator('.el-avatar');
    await avatar.click();
    await this.page.waitForTimeout(1000);

    const logoutButton = this.page.locator('.el-dropdown-menu').getByText('退出登录');
    await logoutButton.click();
    await this.page.waitForURL('**/login', { timeout: 10000 });
  }

  async isLoggedIn(): Promise<boolean> {
    return this.page.url().includes('/dashboard');
  }
}