import { Page, expect } from '@playwright/test';
import { TestLogger } from '../core/test-logger.js';

/**
 * 登录页面对象
 * 封装登录页面的所有操作
 */
export class LoginPage {
  private page: Page;
  private testLogger: TestLogger;
  private baseUrl: string;

  // 选择器
  private readonly usernameInput = 'input[placeholder="请输入用户名"]';
  private readonly passwordInput = 'input[placeholder="请输入密码"]';
  private readonly loginButton = 'button:has-text("登录")';
  private readonly alertSelector = '[role="alert"]';

  constructor(page: Page, testLogger: TestLogger, baseUrl: string = 'http://localhost:5174') {
    this.page = page;
    this.testLogger = testLogger;
    this.baseUrl = baseUrl;
  }

  /**
   * 导航到登录页面
   */
  async navigate(): Promise<void> {
    this.testLogger.info('🌐 导航到登录页面');
    await this.page.goto(`${this.baseUrl}/login`);
    await this.page.waitForLoadState('networkidle');
    this.testLogger.success('登录页面已加载');
  }

  /**
   * 填写用户名
   */
  async fillUsername(username: string): Promise<void> {
    this.testLogger.info(`📝 填写用户名: ${username}`);
    await this.page.fill(this.usernameInput, username);
    this.testLogger.success('用户名填写完成');
  }

  /**
   * 填写密码
   */
  async fillPassword(password: string): Promise<void> {
    this.testLogger.info('📝 填写密码');
    await this.page.fill(this.passwordInput, password);
    this.testLogger.success('密码填写完成');
  }

  /**
   * 点击登录按钮
   */
  async clickLoginButton(): Promise<void> {
    this.testLogger.info('🖱️ 点击登录按钮');
    await this.page.click(this.loginButton);
    this.testLogger.success('登录按钮已点击');
  }

  /**
   * 执行完整登录流程
   */
  async login(username: string, password: string): Promise<void> {
    this.testLogger.startStep('用户登录流程');
    
    await this.fillUsername(username);
    await this.fillPassword(password);
    await this.clickLoginButton();
    
    this.testLogger.endStep('用户登录流程', 'passed');
  }

  /**
   * 等待登录成功（跳转到仪表盘）
   */
  async waitForLoginSuccess(timeout: number = 10000): Promise<void> {
    this.testLogger.info('⏳ 等待登录成功');
    await this.page.waitForURL('**/dashboard', { timeout });
    this.testLogger.success('登录成功，已跳转到仪表盘');
  }

  /**
   * 等待错误提示
   */
  async waitForError(timeout: number = 5000): Promise<string> {
    this.testLogger.info('⏳ 等待错误提示');
    const alert = this.page.locator(this.alertSelector);
    await alert.waitFor({ state: 'visible', timeout });
    const errorText = await alert.textContent() || '';
    this.testLogger.info(`错误提示: ${errorText}`);
    return errorText;
  }

  /**
   * 验证登录表单存在
   */
  async verifyLoginFormExists(): Promise<boolean> {
    const usernameExists = await this.page.locator(this.usernameInput).count() > 0;
    const passwordExists = await this.page.locator(this.passwordInput).count() > 0;
    const buttonExists = await this.page.locator(this.loginButton).count() > 0;
    
    return usernameExists && passwordExists && buttonExists;
  }

  /**
   * 验证当前在登录页面
   */
  async verifyOnLoginPage(): Promise<boolean> {
    const url = this.page.url();
    return url.includes('/login');
  }

  /**
   * 清除表单
   */
  async clearForm(): Promise<void> {
    this.testLogger.info('🧹 清除登录表单');
    await this.page.fill(this.usernameInput, '');
    await this.page.fill(this.passwordInput, '');
    this.testLogger.success('表单已清除');
  }

  /**
   * 获取页面标题
   */
  async getPageTitle(): Promise<string> {
    return await this.page.title();
  }
}