import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import Analytics from './Analytics';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { apiClient } from '../lib/apiClient';

// Mock recharts to avoid rendering complex SVG elements in JSDOM
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: any) => <div>{children}</div>,
  LineChart: () => <div>LineChart</div>,
  BarChart: () => <div>BarChart</div>,
  Line: () => <div />,
  Bar: () => <div />,
  XAxis: () => <div />,
  YAxis: () => <div />,
  CartesianGrid: () => <div />,
  Tooltip: () => <div />,
  Legend: () => <div />
}));

vi.mock('../lib/apiClient', () => ({
  apiClient: {
    get: vi.fn()
  }
}));

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

describe('Analytics Page', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders loading states initially', () => {
    (apiClient.get as any).mockImplementation(() => new Promise(() => {}));
    
    render(
      <QueryClientProvider client={queryClient}>
        <Analytics />
      </QueryClientProvider>
    );
    
    expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
  });

  it('renders correctly with empty data', async () => {
    (apiClient.get as any).mockResolvedValue({ data: [] });

    render(
      <QueryClientProvider client={queryClient}>
        <Analytics />
      </QueryClientProvider>
    );

    await waitFor(() => {
      // Ensure the chart wrappers rendered
      expect(screen.getByText(/LineChart/i)).toBeTruthy();
      expect(screen.getByText(/BarChart/i)).toBeTruthy();
    });
  });

  it('handles network error state gracefully', async () => {
    (apiClient.get as any).mockRejectedValue(new Error('Network error'));

    render(
      <QueryClientProvider client={queryClient}>
        <Analytics />
      </QueryClientProvider>
    );

    // Should still render headers and fallback data
    await waitFor(() => {
      expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
      expect(screen.getByText(/LineChart/i)).toBeTruthy(); // Falls back to static data currently
    });
  });
});