import { describe, it, expect, vi } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import { renderWithProviders } from '../../test/utils/renderWithProviders';

// Mock SSE hook
vi.mock('../../hooks/useAlertSSE', () => ({
  useAlertSSE: () => ({ connected: false, connectionState: 'disconnected', recentAlerts: [], reconnect: vi.fn() }),
}));

// Mock useThemeMode
vi.mock('../../hooks/useThemeMode', () => ({
  useThemeMode: () => false,
}));

import AlertDashboard from './AlertDashboard';

describe('AlertDashboard', () => {
  it('renders the dashboard title', async () => {
    vi.setConfig({ testTimeout: 15000 });
    renderWithProviders(<AlertDashboard />);

    await waitFor(() => {
      expect(screen.getByText('告警仪表盘')).toBeInTheDocument();
    });
  });

  it('shows statistics cards', async () => {
    renderWithProviders(<AlertDashboard />);

    await waitFor(() => {
      expect(screen.getByText('待处理')).toBeInTheDocument();
    });
    expect(screen.getByText('已确认')).toBeInTheDocument();
    expect(screen.getByText('危急值')).toBeInTheDocument();
  });

  it('shows alert list card', async () => {
    renderWithProviders(<AlertDashboard />);

    await waitFor(() => {
      expect(screen.getByText('告警列表')).toBeInTheDocument();
    });
  });

  it('shows SSE connection status indicator', async () => {
    renderWithProviders(<AlertDashboard />);

    await waitFor(() => {
      expect(screen.getByText('连接断开')).toBeInTheDocument();
    });
  });

  it('shows status filter dropdown', async () => {
    renderWithProviders(<AlertDashboard />);

    await waitFor(() => {
      expect(screen.getByText('告警仪表盘')).toBeInTheDocument();
    });
    // The status filter Select should be present
    const selects = document.querySelectorAll('.ant-select');
    expect(selects.length).toBeGreaterThan(0);
  });
});
