mini-starter/web/tests/e2e/pages/admin/platform-management.page.ts

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

/**
 * 平台状态常量
 */
export const PLATFORM_STATUS = {
  ENABLED: 0,
  DISABLED: 1,
} as const;

/**
 * 平台状态类型
 */
export type PlatformStatus = typeof PLATFORM_STATUS[keyof typeof PLATFORM_STATUS];

/**
 * 平台状态显示名称映射
 */
export const PLATFORM_STATUS_LABELS: Record<PlatformStatus, string> = {
  0: '启用',
  1: '禁用',
} as const;

/**
 * 平台数据接口
 */
export interface PlatformData {
  /** 平台名称 */
  platformName: string;
  /** 联系人 */
  contactPerson?: string;
  /** 联系电话 */
  contactPhone?: string;
  /** 联系邮箱 */
  contactEmail?: string;
}

/**
 * 网络响应数据接口
 */
export interface NetworkResponse {
  /** 请求URL */
  url: string;
  /** 请求方法 */
  method: string;
  /** 响应状态码 */
  status: number;
  /** 是否成功 */
  ok: boolean;
  /** 响应头 */
  responseHeaders: Record<string, string>;
  /** 响应体 */
  responseBody: unknown;
}

/**
 * 表单提交结果接口
 */
export interface FormSubmitResult {
  /** 提交是否成功 */
  success: boolean;
  /** 是否有错误 */
  hasError: boolean;
  /** 是否有成功消息 */
  hasSuccess: boolean;
  /** 错误消息 */
  errorMessage?: string;
  /** 成功消息 */
  successMessage?: string;
  /** 网络响应列表 */
  responses?: NetworkResponse[];
}

/**
 * 平台管理 Page Object
 *
 * 用于平台管理功能的 E2E 测试
 * 页面路径: /admin/platforms
 *
 * @example
 * ```typescript
 * const platformPage = new PlatformManagementPage(page);
 * await platformPage.goto();
 * await platformPage.createPlatform({ platformName: '测试平台' });
 * ```
 */
export class PlatformManagementPage {
  readonly page: Page;

  // ===== 页面级选择器 =====
  /** 页面标题 */
  readonly pageTitle: Locator;
  /** 创建平台按钮 */
  readonly createPlatformButton: Locator;
  /** 搜索输入框 */
  readonly searchInput: Locator;
  /** 搜索按钮 */
  readonly searchButton: Locator;
  /** 平台列表表格 */
  readonly platformTable: Locator;

  // ===== 对话框选择器 =====
  /** 创建对话框标题 */
  readonly createDialogTitle: Locator;
  /** 编辑对话框标题 */
  readonly editDialogTitle: Locator;

  // ===== 表单字段选择器 =====
  /** 平台名称输入框 */
  readonly platformNameInput: Locator;
  /** 联系人输入框 */
  readonly contactPersonInput: Locator;
  /** 联系电话输入框 */
  readonly contactPhoneInput: Locator;
  /** 联系邮箱输入框 */
  readonly contactEmailInput: Locator;

  // ===== 按钮选择器 =====
  /** 创建提交按钮 */
  readonly createSubmitButton: Locator;
  /** 更新提交按钮 */
  readonly updateSubmitButton: Locator;
  /** 取消按钮 */
  readonly cancelButton: Locator;

  // ===== 删除确认对话框选择器 =====
  /** 确认删除按钮 */
  readonly confirmDeleteButton: Locator;

  constructor(page: Page) {
    this.page = page;

    // 初始化页面级选择器
    // 使用精确文本匹配获取页面标题
    this.pageTitle = page.getByText('平台管理', { exact: true });
    // 使用 data-testid 定位创建平台按钮
    this.createPlatformButton = page.getByTestId('create-platform-button');
    // 使用 data-testid 定位搜索相关元素
    this.searchInput = page.getByTestId('search-input');
    this.searchButton = page.getByTestId('search-button');
    // 平台列表表格
    this.platformTable = page.locator('table');

    // 对话框标题选择器
    this.createDialogTitle = page.getByTestId('create-platform-dialog-title');
    this.editDialogTitle = page.getByTestId('edit-platform-dialog-title');

    // 表单字段选择器 - 使用 data-testid
    this.platformNameInput = page.getByTestId('platform-name-input');
    this.contactPersonInput = page.getByTestId('contact-person-input');
    this.contactPhoneInput = page.getByTestId('contact-phone-input');
    this.contactEmailInput = page.getByTestId('contact-email-input');

    // 按钮选择器
    this.createSubmitButton = page.getByTestId('create-submit-button');
    this.updateSubmitButton = page.getByTestId('update-submit-button');
    this.cancelButton = page.getByRole('button', { name: '取消' });

    // 删除确认对话框按钮
    this.confirmDeleteButton = page.getByTestId('confirm-delete-button');
  }

  // ===== 导航和基础验证 =====

  /**
   * 导航到平台管理页面
   */
  async goto(): Promise<void> {
    await this.page.goto('/admin/platforms');
    await this.page.waitForLoadState('domcontentloaded');
    // 等待页面标题出现
    await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
    // 等待表格数据加载
    await this.platformTable.waitFor({ state: 'visible', timeout: 20000 });
    await this.expectToBeVisible();
  }

  /**
   * 验证页面关键元素可见
   */
  async expectToBeVisible(): Promise<void> {
    await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
    await this.createPlatformButton.waitFor({ state: 'visible', timeout: 10000 });
  }

  // ===== 对话框操作 =====

  /**
   * 打开创建平台对话框
   */
  async openCreateDialog(): Promise<void> {
    await this.createPlatformButton.click();
    // 等待对话框出现
    await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  }

  /**
   * 打开编辑平台对话框
   * @param platformName 平台名称
   */
  async openEditDialog(platformName: string): Promise<void> {
    // 找到平台行并点击编辑按钮
    const platformRow = this.platformTable.locator('tbody tr').filter({ hasText: platformName });
    // 使用 role + name 组合定位编辑按钮，更健壮
    const editButton = platformRow.getByRole('button', { name: '编辑' });
    await editButton.click();

    // 等待编辑对话框出现
    await this.page.waitForSelector('[role="dialog"]', { state: 'visible', timeout: 5000 });
  }

  /**
   * 打开删除确认对话框
   * @param platformName 平台名称
   */
  async openDeleteDialog(platformName: string): Promise<void> {
    // 找到平台行并点击删除按钮
    const platformRow = this.platformTable.locator('tbody tr').filter({ hasText: platformName });
    // 使用 role + name 组合定位删除按钮，更健壮
    const deleteButton = platformRow.getByRole('button', { name: '删除' });
    await deleteButton.click();

    // 等待删除确认对话框出现
    await this.page.waitForSelector('[role="alertdialog"]', { state: 'visible', timeout: 5000 });
  }

  /**
   * 填写平台表单
   * @param data 平台数据
   */
  async fillPlatformForm(data: PlatformData): Promise<void> {
    // 等待表单出现
    await this.page.waitForSelector('form', { state: 'visible', timeout: 5000 });

    // 填写平台名称（必填字段）
    if (data.platformName) {
      await this.platformNameInput.fill(data.platformName);
    }

    // 填写联系人（可选字段）
    if (data.contactPerson !== undefined) {
      await this.contactPersonInput.fill(data.contactPerson);
    }

    // 填写联系电话（可选字段）
    if (data.contactPhone !== undefined) {
      await this.contactPhoneInput.fill(data.contactPhone);
    }

    // 填写联系邮箱（可选字段）
    if (data.contactEmail !== undefined) {
      await this.contactEmailInput.fill(data.contactEmail);
    }
  }

  /**
   * 提交表单
   * @returns 表单提交结果
   */
  async submitForm(): Promise<FormSubmitResult> {
    // 收集网络响应
    const responses: NetworkResponse[] = [];

    // 监听所有网络请求
    const responseHandler = async (response: Response) => {
      const url = response.url();
      // 监听平台管理相关的 API 请求
      if (url.includes('/platforms') || url.includes('platform')) {
        const requestBody = response.request()?.postData();
        const responseBody = await response.text().catch(() => '');
        let jsonBody = null;
        try {
          jsonBody = JSON.parse(responseBody);
        } catch {
          // 不是 JSON 响应
        }

        responses.push({
          url,
          method: response.request()?.method() ?? 'UNKNOWN',
          status: response.status(),
          ok: response.ok(),
          responseHeaders: await response.allHeaders().catch(() => ({})),
          responseBody: jsonBody || responseBody,
        });
      }
    };

    this.page.on('response', responseHandler as unknown as () => void);

    try {
      // 点击提交按钮（创建或更新）
      const submitButton = this.page.getByRole('button', { name: /^(创建|更新|保存)$/ });
      await submitButton.click();

      // 等待网络请求完成
      try {
        await this.page.waitForLoadState('domcontentloaded', { timeout: 5000 });
      } catch {
        // domcontentloaded 超时不是致命错误
        console.debug('domcontentloaded 超时，继续检查 Toast 消息');
      }
    } finally {
      // 确保监听器总是被移除
      this.page.off('response', responseHandler as unknown as () => void);
    }

    // 等待 Toast 消息显示
    await this.page.waitForTimeout(1500);

    // 检查 Toast 消息
    const errorToast = this.page.locator('[data-sonner-toast][data-type="error"]');
    const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');

    const hasError = await errorToast.count() > 0;
    const hasSuccess = await successToast.count() > 0;

    let errorMessage: string | null = null;
    let successMessage: string | null = null;

    if (hasError) {
      errorMessage = await errorToast.first().textContent();
    }
    if (hasSuccess) {
      successMessage = await successToast.first().textContent();
    }

    return {
      success: hasSuccess || (!hasError && !hasSuccess),
      hasError,
      hasSuccess,
      errorMessage: errorMessage ?? undefined,
      successMessage: successMessage ?? undefined,
      responses,
    };
  }

  /**
   * 取消对话框
   */
  async cancelDialog(): Promise<void> {
    await this.cancelButton.click();
    await this.waitForDialogClosed();
  }

  /**
   * 等待对话框关闭
   */
  async waitForDialogClosed(): Promise<void> {
    const dialog = this.page.locator('[role="dialog"]');
    await dialog.waitFor({ state: 'hidden', timeout: 5000 })
      .catch(() => console.debug('对话框关闭超时，可能已经关闭'));
    await this.page.waitForTimeout(500);
  }

  /**
   * 确认删除操作
   */
  async confirmDelete(): Promise<void> {
    await this.confirmDeleteButton.click();
    // 等待确认对话框关闭和网络请求完成
    await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
      .catch(() => console.debug('删除确认对话框关闭超时'));
    try {
      await this.page.waitForLoadState('domcontentloaded', { timeout: 5000 });
    } catch {
      // 继续执行
    }
    await this.page.waitForTimeout(1000);
  }

  /**
   * 取消删除操作
   */
  async cancelDelete(): Promise<void> {
    const cancelButton = this.page.locator('[role="alertdialog"]').getByRole('button', { name: '取消' });
    await cancelButton.click();
    await this.page.waitForSelector('[role="alertdialog"]', { state: 'hidden', timeout: 5000 })
      .catch(() => console.debug('删除确认对话框关闭超时（取消操作）'));
  }

  // ===== CRUD 操作方法 =====

  /**
   * 创建平台（完整流程）
   * @param data 平台数据
   * @returns 表单提交结果
   */
  async createPlatform(data: PlatformData): Promise<FormSubmitResult> {
    await this.openCreateDialog();
    await this.fillPlatformForm(data);
    const result = await this.submitForm();
    await this.waitForDialogClosed();
    return result;
  }

  /**
   * 编辑平台（完整流程）
   * @param platformName 平台名称
   * @param data 更新的平台数据
   * @returns 表单提交结果
   */
  async editPlatform(platformName: string, data: PlatformData): Promise<FormSubmitResult> {
    await this.openEditDialog(platformName);
    await this.fillPlatformForm(data);
    const result = await this.submitForm();
    await this.waitForDialogClosed();
    return result;
  }

  /**
   * 删除平台（完整流程）
   * @param platformName 平台名称
   * @returns 是否成功删除
   */
  async deletePlatform(platformName: string): Promise<boolean> {
    try {
      await this.openDeleteDialog(platformName);
      await this.confirmDelete();

      // 等待并检查 Toast 消息
      await this.page.waitForTimeout(1000);
      const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');
      const hasSuccess = await successToast.count() > 0;

      return hasSuccess;
    } catch (error) {
      console.debug(`删除平台 "${platformName}" 失败:`, error);
      return false;
    }
  }

  // ===== 搜索和验证方法 =====

  /**
   * 按平台名称搜索
   * @param name 平台名称
   * @returns 搜索结果是否包含目标平台
   */
  async searchByName(name: string): Promise<boolean> {
    await this.searchInput.fill(name);
    await this.searchButton.click();
    await this.page.waitForLoadState('domcontentloaded');
    await this.page.waitForTimeout(1000);
    // 验证搜索结果
    return await this.platformExists(name);
  }

  /**
   * 验证平台是否存在（使用精确匹配）
   * @param platformName 平台名称
   * @returns 平台是否存在
   */
  async platformExists(platformName: string): Promise<boolean> {
    const platformRow = this.platformTable.locator('tbody tr').filter({ hasText: platformName });
    const count = await platformRow.count();
    if (count === 0) return false;

    // 进一步验证第一列的文本是否完全匹配平台名称
    // 避免部分匹配导致的误判（如搜索"测试"匹配"测试平台A"）
    const firstCell = platformRow.locator('td').first();
    const actualText = await firstCell.textContent();
    return actualText?.trim() === platformName;
  }
}