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

/**
 * DC 充电桩卡片样式测试
 * 验证 DC 桩在不同状态下的卡片显示样式
 */

test.describe('DC 充电桩卡片样式', () => {

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

  test('DC 空闲卡片应有图标而非纯文字', async ({ page }) => {
    // 找到空闲状态的 DC 卡片
    const freeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });

    if (await freeCard.count() > 0) {
      // 卡片应包含 car 图标（Lucide 图标会被渲染为 SVG）
      const carIcon = freeCard.locator('svg[data-lucide="car"], svg.lucide-car');
      await expect(carIcon.first()).toBeVisible();

      // 卡片应有背景样式，不是纯文字
      const card = freeCard.first();
      const hasGradient = await card.evaluate(el => {
        const style = window.getComputedStyle(el);
        return style.background.includes('gradient') ||
               style.backgroundColor !== 'rgba(0, 0, 0, 0)';
      });
      expect(hasGradient).toBeTruthy();
    }
  });

  test('DC 空闲卡片应显示状态图标区域', async ({ page }) => {
    const freeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });

    if (await freeCard.count() > 0) {
      // 应有圆角图标容器
      const iconContainer = freeCard.locator('.rounded-2xl').first();
      await expect(iconContainer).toBeVisible();
    }
  });

  test('DC 空闲卡片应显示空闲时长', async ({ page }) => {
    const freeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });

    if (await freeCard.count() > 0) {
      // 应显示 "空闲 X 分钟" 或 "空闲中"
      await expect(freeCard.first()).toContainText(/空闲/);
    }
  });

  test('DC 空闲卡片应有职场调侃文案', async ({ page }) => {
    const freeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });

    if (await freeCard.count() > 0) {
      // 底部应有调侃文案（引号包裹的文字）
      const card = freeCard.first();
      const text = await card.innerText();
      const hasQuote = text.includes('"') || text.includes('"');
      expect(hasQuote).toBeTruthy();
    }
  });

  test('DC 空闲卡片与 AC 空闲卡片样式一致', async ({ page }) => {
    const dcFreeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });
    const acFreeCard = page.locator('#ac-grid > div').filter({ hasText: '空闲可用' });

    if (await dcFreeCard.count() > 0 && await acFreeCard.count() > 0) {
      // 两者都应有空闲图标
      const dcIcon = dcFreeCard.first().locator('svg');
      const acIcon = acFreeCard.first().locator('svg');

      await expect(dcIcon.first()).toBeVisible();
      await expect(acIcon.first()).toBeVisible();
    }
  });

  // ==================== 新增：16号枪和17号枪样式一致性测试 ====================
  test('16号枪和17号枪空闲时样式一致', async ({ page }) => {
    // 获取 16号枪和17号枪卡片
    const card16 = page.locator('#dc-grid > div').filter({ hasText: '16号枪' });
    const card17 = page.locator('#dc-grid > div').filter({ hasText: '17号枪' });

    // 检查两张卡片都存在
    const count16 = await card16.count();
    const count17 = await card17.count();

    if (count16 > 0 && count17 > 0) {
      // 获取两张卡片的类名
      const class16 = await card16.first().getAttribute('class');
      const class17 = await card17.first().getAttribute('class');

      // 两者应有相同的基础卡片类
      const cardClass16 = class16?.split(' ').find(c => c.startsWith('card-'));
      const cardClass17 = class17?.split(' ').find(c => c.startsWith('card-'));

      // 如果两者都是空闲状态，应有相同的 card-free 类
      const is16Free = class16?.includes('card-free');
      const is17Free = class17?.includes('card-free');

      // 如果都是空闲，样式类应一致
      if (is16Free && is17Free) {
        expect(cardClass16).toBe(cardClass17);
      }
    }
  });

  test('所有 DC 空闲卡片应有相同的图标结构', async ({ page }) => {
    const freeCards = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });
    const count = await freeCards.count();

    if (count > 1) {
      // 检查所有空闲卡片都有 car 图标
      for (let i = 0; i < count; i++) {
        const card = freeCards.nth(i);
        // 每张卡片都应有 SVG 图标
        const svg = card.locator('svg');
        await expect(svg.first()).toBeVisible();
      }
    }
  });

  test('DC 空闲卡片应有圆形图标容器', async ({ page }) => {
    const freeCard = page.locator('#dc-grid > div').filter({ hasText: '空闲可用' });

    if (await freeCard.count() > 0) {
      // 检查有 rounded-2xl 的图标容器
      const iconWrapper = freeCard.first().locator('.rounded-2xl');
      const count = await iconWrapper.count();
      expect(count).toBeGreaterThan(0);
    }
  });

  test('充电中卡片应渲染 ElectricBorder 特效层', async ({ page }) => {
    await page.click('#filter-charging');
    await page.waitForSelector('.card-charging', { timeout: 10000 });

    const chargingCards = page.locator('#dc-grid > div.card-charging, #ac-grid > div.card-charging');
    const count = await chargingCards.count();
    expect(count).toBeGreaterThan(0);

    for (let i = 0; i < count; i++) {
      const card = chargingCards.nth(i);
      await expect(card).toHaveClass(/electric-border/);
      await expect(card.locator('.eb-canvas')).toHaveCount(1);
      await expect(card.locator('.eb-glow-1')).toHaveCount(1);
      await expect(card.locator('.eb-glow-2')).toHaveCount(1);
      await expect(card.locator('.eb-background-glow')).toHaveCount(1);
    }

    await page.waitForFunction(() =>
      [...document.querySelectorAll('.card-charging .eb-canvas')].some((canvas) =>
        canvas.width > 0 && canvas.height > 0 && canvas.dataset.electricBorderReady === 'true'
      )
    );
    const initializedCanvasCount = await page.locator('.card-charging .eb-canvas').evaluateAll((canvases) =>
      canvases.filter((canvas) => canvas.width > 0 && canvas.height > 0 && canvas.dataset.electricBorderReady === 'true').length
    );
    expect(initializedCanvasCount).toBeGreaterThan(0);
  });
});
