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

test.describe('品牌定制管理完整工作流', () => {
  test.describe.configure({ mode: 'serial' });

  const testBrandName = `测试品牌_${Date.now()}`;
  const testSlogan = `测试口号_${Date.now()}`;
  const testPrimaryColor = '#FF5722';
  const testSecondaryColor = '#37474F';

  test('品牌定制页面可正常加载', async ({ page }) => {
    await test.step('导航到品牌定制页面', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1000);
    });

    await test.step('验证页面标题存在', async () => {
      await expect(page.locator('h2')).toContainText('品牌定制', { timeout: 10000 });
    });

    await test.step('验证四个配置卡片渲染', async () => {
      // Logo 设置卡片
      await expect(page.locator('.brand-card').filter({ hasText: 'Logo 设置' })).toBeVisible({ timeout: 5000 });
      // 背景图设置卡片
      await expect(page.locator('.brand-card').filter({ hasText: '背景图设置' })).toBeVisible({ timeout: 5000 });
      // 品牌配色卡片
      await expect(page.locator('.brand-card').filter({ hasText: '品牌配色' })).toBeVisible({ timeout: 5000 });
      // 品牌信息卡片
      await expect(page.locator('.brand-card').filter({ hasText: '品牌信息' })).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证实时预览区域存在', async () => {
      await expect(page.locator('.brand-card').filter({ hasText: '实时预览' })).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证 WebSocket 连接标签存在', async () => {
      const wsTag = page.locator('.brand-page-header .el-tag');
      await expect(wsTag).toBeVisible({ timeout: 5000 });
    });
  });

  test('更新品牌信息', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('填写品牌名称', async () => {
      const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
      const nameInput = brandCard.locator('input').first();
      await nameInput.clear();
      await nameInput.fill(testBrandName);
    });

    await test.step('填写品牌口号', async () => {
      const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
      const sloganInput = brandCard.locator('input').nth(1);
      await sloganInput.clear();
      await sloganInput.fill(testSlogan);
    });

    await test.step('点击保存信息', async () => {
      const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
      await brandCard.locator('button:has-text("保存信息")').click();
    });

    await test.step('验证保存成功提示', async () => {
      await expect(page.locator('.el-message--success').first()).toBeVisible({ timeout: 8000 });
    });

    await test.step('验证预览区域品牌名称更新', async () => {
      await page.waitForTimeout(500);
      const mockBrandName = page.locator('.mock-brand-name');
      await expect(mockBrandName).toContainText(testBrandName, { timeout: 5000 });
    });
  });

  test('更新品牌配色', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('修改主色调', async () => {
      const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
      // 主色调 HEX 输入框（.color-input 是 el-input 容器，需定位内部 <input>）
      const primaryHexInput = colorCard.locator('.color-row').first().locator('input').first();
      await primaryHexInput.clear();
      await primaryHexInput.fill(testPrimaryColor);
      // 触发 blur 验证
      await primaryHexInput.blur();
    });

    await test.step('修改辅助色', async () => {
      const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
      const secondaryHexInput = colorCard.locator('.color-row').nth(1).locator('input').first();
      await secondaryHexInput.clear();
      await secondaryHexInput.fill(testSecondaryColor);
      await secondaryHexInput.blur();
    });

    await test.step('保存配色', async () => {
      const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
      await colorCard.locator('button:has-text("保存配色")').click();
    });

    await test.step('验证保存成功', async () => {
      await expect(page.locator('.el-message--success').first()).toBeVisible({ timeout: 8000 });
    });
  });

  test('品牌配色 - 输入非法HEX值应校验', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('输入无效HEX值并尝试保存', async () => {
      const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
      const primaryHexInput = colorCard.locator('.color-row').first().locator('input').first();
      await primaryHexInput.clear();
      await primaryHexInput.fill('not-a-color');
      await primaryHexInput.blur();

      await colorCard.locator('button:has-text("保存配色")').click();
    });

    await test.step('验证校验警告提示', async () => {
      await expect(page.locator('.el-message--warning').first()).toBeVisible({ timeout: 5000 });
    });
  });

  test('品牌信息 - 空名称校验', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('清空品牌名称并保存', async () => {
      const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
      const nameInput = brandCard.locator('input').first();
      await nameInput.clear();
      await brandCard.locator('button:has-text("保存信息")').click();
    });

    await test.step('验证警告提示', async () => {
      await expect(page.locator('.el-message--warning').first()).toBeVisible({ timeout: 5000 });
    });
  });

  test('Logo 区域 - 上传组件正常渲染', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('验证 Logo 上传区域存在', async () => {
      const logoCard = page.locator('.brand-card').filter({ hasText: 'Logo 设置' });
      await expect(logoCard.locator('.el-upload')).toBeVisible({ timeout: 5000 });
    });
  });

  test('背景图区域 - 上传组件正常渲染', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('验证背景图上传区域存在', async () => {
      const bgCard = page.locator('.brand-card').filter({ hasText: '背景图设置' });
      await expect(bgCard.locator('.el-upload')).toBeVisible({ timeout: 5000 });
    });
  });

  test('实时预览 - 底部导航切换', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('验证默认首页可见', async () => {
      await expect(page.locator('.mock-brand-section')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
    });

    await test.step('切换到课程tab', async () => {
      await page.locator('.mock-tab-item').nth(1).click();
      await page.waitForTimeout(300);
      await expect(page.locator('.mock-search-area')).toBeVisible({ timeout: 5000 });
    });

    await test.step('切换到我的课程tab', async () => {
      await page.locator('.mock-tab-item').nth(2).click();
      await page.waitForTimeout(300);
      await expect(page.locator('.mock-booking-card').first()).toBeVisible({ timeout: 5000 });
    });

    await test.step('切换到我的tab', async () => {
      await page.locator('.mock-tab-item').nth(3).click();
      await page.waitForTimeout(300);
      await expect(page.locator('.mock-profile-card')).toBeVisible({ timeout: 5000 });
    });

    await test.step('切换回首页', async () => {
      await page.locator('.mock-tab-item').first().click();
      await page.waitForTimeout(300);
      await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
    });
  });

  test('实时预览 - 课程详情钻取与返回', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('点击今日推荐课程', async () => {
      await page.locator('.mock-course-card').first().click();
      await page.waitForTimeout(300);
    });

    await test.step('验证课程详情页渲染', async () => {
      await expect(page.locator('.mock-detail-header')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('.mock-detail-title')).toBeVisible({ timeout: 5000 });
    });

    await test.step('验证详情信息卡片', async () => {
      await expect(page.locator('.mock-detail-info')).toBeVisible({ timeout: 5000 });
    });

    await test.step('点击返回按钮', async () => {
      await page.locator('.mock-back-btn').click();
      await page.waitForTimeout(300);
    });

    await test.step('验证返回首页', async () => {
      await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
    });
  });

  test('实时预览 - 今日推荐查看更多进入搜索', async ({ page }) => {
    await test.step('导航到品牌定制', async () => {
      await page.goto('/brand');
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(1500);
    });

    await test.step('点击查看全部', async () => {
      await page.locator('.mock-section-more').click();
      await page.waitForTimeout(300);
    });

    await test.step('验证进入课程搜索页', async () => {
      await expect(page.locator('.mock-search-area')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('.mock-search-list')).toBeVisible({ timeout: 5000 });
    });
  });
});