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

test.describe('侧边栏导航', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/providers');
  });

  test('应显示侧边栏', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    await expect(sider).toBeVisible();
  });

  test('应显示应用名称', async ({ page }) => {
    await expect(page.locator('.ant-layout-sider').getByText('AI Gateway')).toBeVisible();
  });

  test('应显示导航菜单项', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    await expect(sider.getByText('供应商管理')).toBeVisible();
    await expect(sider.getByText('用量统计')).toBeVisible();
  });

  test('应能折叠和展开侧边栏', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    const trigger = page.locator('.ant-layout-sider-trigger');

    await expect(sider).toBeVisible();

    await trigger.click();
    await page.waitForTimeout(300);

    await trigger.click();
    await page.waitForTimeout(300);

    await expect(sider).toBeVisible();
  });

  test('折叠时应只显示图标', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    const trigger = page.locator('.ant-layout-sider-trigger');

    await trigger.click();
    await page.waitForTimeout(300);

    const collapsedSider = page.locator('.ant-layout-sider-collapsed');
    await expect(collapsedSider).toBeVisible();
  });

  test('应显示主题切换按钮', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    const themeButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'moon' }) });
    await expect(themeButton).toBeVisible();
  });

  test('应能通过主题切换按钮切换主题', async ({ page }) => {
    const sider = page.locator('.ant-layout-sider');
    const themeButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'moon' }) });

    await themeButton.click();
    await page.waitForTimeout(300);

    const lightButton = sider.getByRole('button').filter({ has: page.getByRole('img', { name: 'sun' }) });
    await expect(lightButton).toBeVisible();
  });
});