// @ts-check
const { test, expect } = require('@playwright/test');

/**
 * 订阅排队系统测试
 * 验证功能点：
 * 1. 飞书花名字段必填验证
 * 2. 排队人数显示
 * 3. 订阅成功显示排队位置
 * 4. VIP 优先排队（后端逻辑）
 * 5. 多桩并行通知逻辑（后端逻辑）
 */

test.describe('订阅排队系统 - 前端测试', () => {

  test.beforeEach(async ({ page }) => {
    // 使用 Mock 模式
    await page.goto('/?mock=true');
    // 等待页面加载完成
    await page.waitForSelector('#dc-grid > *', { timeout: 10000 });
  });

  test.describe('飞书花名字段验证', () => {

    test('订阅表单包含飞书花名输入框', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 验证飞书花名输入框存在
      await expect(page.locator('#feishu-name-input')).toBeVisible();
      await expect(page.locator('label:has-text("飞书花名")')).toBeVisible();
    });

    test('飞书花名为空时显示错误提示', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 只填写邮箱，不填写飞书花名
      await page.locator('#email-input').fill('test@example.com');
      await page.locator('#subscribe-submit-btn').click();

      // 应显示飞书花名错误提示
      await expect(page.locator('#feishu-name-error')).toBeVisible();
      await expect(page.locator('#feishu-name-error')).toHaveText('请填写飞书花名');
    });

    test('飞书花名和邮箱都为空时，先提示飞书花名', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 直接点击提交
      await page.locator('#subscribe-submit-btn').click();

      // 飞书花名错误应该显示
      await expect(page.locator('#feishu-name-error')).toBeVisible();
    });

    test('填写飞书花名后错误提示消失', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 触发错误
      await page.locator('#subscribe-submit-btn').click();
      await expect(page.locator('#feishu-name-error')).toBeVisible();

      // 填写飞书花名
      await page.locator('#feishu-name-input').fill('测试用户');

      // 错误提示应该隐藏
      await expect(page.locator('#feishu-name-error')).toBeHidden();
    });
  });

  test.describe('排队人数显示', () => {

    test('打开订阅弹窗时显示排队人数区域', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 排队状态区域应该存在（可能隐藏或显示取决于后端返回）
      await expect(page.locator('#queue-status')).toBeAttached();
    });

    test('排队人数显示正确格式', async ({ page }) => {
      // Mock API 响应
      await page.route('**/api/queue/status', async route => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: {
              queue_count: 5,
              message: '当前排队人数：5 人'
            }
          })
        });
      });

      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 等待排队状态显示
      await expect(page.locator('#queue-status')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('#queue-count-text')).toContainText('5 人');
    });

    test('排队人数为 0 时隐藏排队状态', async ({ page }) => {
      // Mock API 响应
      await page.route('**/api/queue/status', async route => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            data: {
              queue_count: 0,
              message: '当前无人排队，订阅后立即生效'
            }
          })
        });
      });

      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 排队状态应该隐藏
      await expect(page.locator('#queue-status')).toBeHidden({ timeout: 5000 });
    });
  });

  test.describe('订阅成功显示排队位置', () => {

    test('订阅成功后显示排队位置', async ({ page }) => {
      // Mock 订阅 API 响应
      await page.route('**/api/subscribe', async route => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            message: '订阅成功',
            data: {
              email: 'test@example.com',
              feishu_name: '测试用户',
              charger_type: 'all',
              charger_type_text: '任意类型',
              queue_position: 3,
              expires: '本周有效'
            }
          })
        });
      });

      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 填写表单
      await page.locator('#feishu-name-input').fill('测试用户');
      await page.locator('#email-input').fill('test@example.com');
      await page.locator('#subscribe-submit-btn').click();

      // 应显示排队位置的 Toast
      await expect(page.locator('.toast')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('.toast')).toContainText('第 3 位');
    });

    test('订阅成功后关闭弹窗', async ({ page }) => {
      // Mock 订阅 API 响应
      await page.route('**/api/subscribe', async route => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            message: '订阅成功',
            data: {
              email: 'test@example.com',
              feishu_name: '测试用户',
              charger_type: 'all',
              queue_position: 1,
              expires: '本周有效'
            }
          })
        });
      });

      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 填写表单
      await page.locator('#feishu-name-input').fill('测试用户');
      await page.locator('#email-input').fill('test@example.com');
      await page.locator('#subscribe-submit-btn').click();

      // 弹窗应该关闭
      await expect(page.locator('#subscribe-modal')).not.toHaveClass(/show/, { timeout: 5000 });
    });

    test('订阅失败显示错误信息', async ({ page }) => {
      // Mock 订阅 API 响应 - 失败
      await page.route('**/api/subscribe', async route => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: false,
            message: '该邮箱已订阅，无需重复订阅'
          })
        });
      });

      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 填写表单
      await page.locator('#feishu-name-input').fill('测试用户');
      await page.locator('#email-input').fill('existing@example.com');
      await page.locator('#subscribe-submit-btn').click();

      // 应显示错误 Toast
      await expect(page.locator('.toast')).toBeVisible({ timeout: 5000 });
      await expect(page.locator('.toast')).toContainText('已订阅');
    });
  });

  test.describe('表单字段完整性', () => {

    test('关闭弹窗后清空所有字段', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 填写表单
      await page.locator('#feishu-name-input').fill('测试用户');
      await page.locator('#email-input').fill('test@example.com');

      // 关闭弹窗（点击遮罩）
      await page.locator('#subscribe-modal').click({ position: { x: 10, y: 10 } });

      // 等待弹窗关闭
      await expect(page.locator('#subscribe-modal')).not.toHaveClass(/show/, { timeout: 3000 });

      // 重新打开
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 字段应该为空
      await expect(page.locator('#feishu-name-input')).toHaveValue('');
      await expect(page.locator('#email-input')).toHaveValue('');
    });

    test('所有充电类型和厂商品牌都可以选择', async ({ page }) => {
      await page.click('button:has-text("订阅提醒")');
      await expect(page.locator('#subscribe-modal')).toBeVisible();

      // 验证三种充电类型
      await expect(page.locator('input[name="charger-type"][value="all"]')).toBeChecked();

      await page.locator('label:has(input[name="charger-type"][value="DC"])').click();
      await expect(page.locator('input[name="charger-type"][value="DC"]')).toBeChecked();

      await page.locator('label:has(input[name="charger-type"][value="AC"])').click();
      await expect(page.locator('input[name="charger-type"][value="AC"]')).toBeChecked();

      // 验证三种厂商品牌
      await expect(page.locator('input[name="vendor"][value="all"]')).toBeChecked();

      // 选择蔚来
      await page.locator('label:has(input[name="vendor"][value="nio"])').click();
      await expect(page.locator('input[name="vendor"][value="nio"]')).toBeChecked();

      // 选择公牛
      await page.locator('label:has(input[name="vendor"][value="gongniu"])').click();
      await expect(page.locator('input[name="vendor"][value="gongniu"]')).toBeChecked();
    });
  });
});

test.describe('订阅排队系统 - API Mock 测试', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/?mock=true');
    await page.waitForSelector('#dc-grid > *', { timeout: 10000 });
  });

  test('订阅 API 请求包含飞书花名', async ({ page }) => {
    let requestBody = null;

    // 监听请求
    await page.route('**/api/subscribe', async route => {
      requestBody = route.request().postDataJSON();
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          message: '订阅成功',
          data: { queue_position: 1 }
        })
      });
    });

    await page.click('button:has-text("订阅提醒")');
    await page.locator('#feishu-name-input').fill('张三');
    await page.locator('#email-input').fill('zhangsan@company.com');
    await page.locator('#subscribe-submit-btn').click();

    // 等待请求完成
    await page.waitForResponse('**/api/subscribe');

    // 验证请求体
    expect(requestBody).not.toBeNull();
    expect(requestBody.feishu_name).toBe('张三');
    expect(requestBody.email).toBe('zhangsan@company.com');
    expect(requestBody.charger_type).toBe('all');
    expect(requestBody.vendor).toBe('all');
  });

  test('VIP 用户排队位置始终为 1', async ({ page }) => {
    // Mock VIP 用户订阅响应
    await page.route('**/api/subscribe', async route => {
      const body = route.request().postDataJSON();

      if (body.email === 'vip.com') {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            message: '订阅成功',
            data: {
              email: 'vip.com',
              feishu_name: body.feishu_name,
              queue_position: 1,
              charger_type: body.charger_type
            }
          })
        });
      } else {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            success: true,
            message: '订阅成功',
            data: {
              email: body.email,
              queue_position: 5,
              charger_type: body.charger_type
            }
          })
        });
      }
    });

    // 测试普通用户
    await page.click('button:has-text("订阅提醒")');
    await page.locator('#feishu-name-input').fill('普通用户');
    await page.locator('#email-input').fill('normal@company.com');
    await page.locator('#subscribe-submit-btn').click();

    await expect(page.locator('.toast')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('.toast')).toContainText('第 5 位');
  });
});

test.describe('订阅排队系统 - UI 交互测试', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/?mock=true');
    await page.waitForSelector('#dc-grid > *', { timeout: 10000 });
  });

  test('订阅按钮状态变化', async ({ page }) => {
    // Mock 慢速响应
    await page.route('**/api/subscribe', async route => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          message: '订阅成功',
          data: { queue_position: 1 }
        })
      });
    });

    await page.click('button:has-text("订阅提醒")');
    await page.locator('#feishu-name-input').fill('测试用户');
    await page.locator('#email-input').fill('test@example.com');

    const btn = page.locator('#subscribe-submit-btn');
    await btn.click();

    // 按钮应该被禁用并显示"订阅中..."
    await expect(btn).toBeDisabled();
    await expect(btn).toHaveText('订阅中...');

    // 等待完成
    await expect(btn).toBeEnabled({ timeout: 5000 });
    await expect(btn).toHaveText('确认订阅');
  });

  test('点击遮罩关闭弹窗', async ({ page }) => {
    await page.click('button:has-text("订阅提醒")');
    await expect(page.locator('#subscribe-modal')).toBeVisible();

    // 点击弹窗外部（遮罩层）
    const modal = page.locator('#subscribe-modal');
    await modal.click({ position: { x: 5, y: 5 } }); // 点击边缘

    // 弹窗应该关闭
    await expect(modal).not.toHaveClass(/show/, { timeout: 3000 });
  });

  test('错误提示在填写后自动隐藏', async ({ page }) => {
    await page.click('button:has-text("订阅提醒")');
    await expect(page.locator('#subscribe-modal')).toBeVisible();

    // 触发邮箱错误
    await page.locator('#email-input').fill('invalid');
    await page.locator('#subscribe-submit-btn').click();
    await expect(page.locator('#email-error')).toBeVisible();

    // 修正邮箱
    await page.locator('#email-input').fill('valid@example.com');
    await expect(page.locator('#email-error')).toBeHidden();
  });
});
