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*="用户名"]').or(page.locator('.el-input__inner[placeholder*="用户名"]'));
    this.passwordInput = page.locator('input[type="password"]').or(page.locator('.el-input__inner[type="password"]'));
    this.loginButton = page.locator('button[type="submit"]').or(page.locator('button:has-text("登录")'));
    this.errorMessage = page.locator('.el-message--error').or(page.locator('.error-message'));
    this.logoutButton = page.getByRole('button', { name: '退出登录' });
  }

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

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
    
    try {
      await this.page.waitForURL('**/dashboard', { timeout: 10000 });
    } catch {
      await this.page.waitForTimeout(1000);
    }
  }

  async getErrorMessage(): Promise<string | null> {
    try {
      await this.page.waitForSelector('.el-message', { timeout: 3000 });
      const messageElement = await this.page.locator('.el-message').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');
  }
}