import { describe, it, expect, vi, beforeEach } from 'vitest';
import { screen, waitFor } from '../../../test/utils/test-utils';
import { renderWithRouter } from '../../../test/utils/test-utils';
import DashboardPage from '../DashboardPage';

// Mock useNavigate and useAuthStore
const mockNavigate = vi.fn();
const mockLogout = vi.fn();

vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useNavigate: () => mockNavigate,
  };
});

vi.mock('../../../store/useAuthStore', () => ({
  default: () => ({
    logout: mockLogout,
  }),
}));

describe('Admin DashboardPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render loading state initially', () => {
    renderWithRouter(<DashboardPage />);
    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
  });

  it('should fetch and display dashboard stats', async () => {
    renderWithRouter(<DashboardPage />);

    await waitFor(() => {
      expect(screen.queryByText(/Loading/i)).not.toBeInTheDocument();
    }, { timeout: 5000 });

    // Check if stats are displayed
    await waitFor(() => {
      expect(screen.getByText(/Total Revenue/i)).toBeInTheDocument();
    });
  });

  it('should display recent payments', async () => {
    renderWithRouter(<DashboardPage />);

    await waitFor(() => {
      expect(screen.queryByText(/Loading/i)).not.toBeInTheDocument();
    }, { timeout: 5000 });

    // Payments section should be present
    await waitFor(() => {
      const paymentsSection = screen.queryByText(/Recent Payments/i);
      if (paymentsSection) {
        expect(paymentsSection).toBeInTheDocument();
      }
    });
  });

  it('should handle date range changes', async () => {
    renderWithRouter(<DashboardPage />);

    await waitFor(() => {
      expect(screen.queryByText(/Loading/i)).not.toBeInTheDocument();
    }, { timeout: 5000 });

    // Date range inputs should be present (they might be type="date" inputs)
    const dateInputs = screen.queryAllByRole('textbox');
    const dateInputsByType = screen.queryAllByDisplayValue(/2024|2025/i);
    // Either text inputs or date inputs should be present
    expect(dateInputs.length + dateInputsByType.length).toBeGreaterThan(0);
  });
});

