import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '../../test/utils/test-utils';
import HomePage from '../../features/content/pages/HomePage';

// Mock the components that might cause issues
vi.mock('../../features/rooms/components/BannerCarousel', () => ({
  default: ({ children, banners }: any) => (
    <div data-testid="banner-carousel">
      {banners.map((banner: any) => (
        <div key={banner.id} data-testid={`banner-${banner.id}`}>
          {banner.title}
        </div>
      ))}
      {children}
    </div>
  ),
}));

vi.mock('../../features/rooms/components/SearchRoomForm', () => ({
  default: ({ className }: any) => (
    <div data-testid="search-room-form" className={className}>
      Search Form
    </div>
  ),
}));

vi.mock('../../features/rooms/components/RoomCarousel', () => ({
  default: ({ rooms }: any) => (
    <div data-testid="room-carousel">
      {rooms.map((room: any) => (
        <div key={room.id} data-testid={`room-${room.id}`}>
          {room.room_number}
        </div>
      ))}
    </div>
  ),
}));

vi.mock('../../features/rooms/components/BannerSkeleton', () => ({
  default: () => <div data-testid="banner-skeleton">Loading banners...</div>,
}));

vi.mock('../../features/rooms/components/RoomCardSkeleton', () => ({
  default: () => <div data-testid="room-card-skeleton">Loading room...</div>,
}));

describe('HomePage', () => {
  beforeEach(() => {
    // Clear any previous mocks
    vi.clearAllMocks();
  });

  it('should render the homepage with loading state initially', async () => {
    render(<HomePage />);
    
    // Should show loading skeletons initially
    expect(screen.getByTestId('banner-skeleton')).toBeInTheDocument();
  });

  it('should fetch and display banners', async () => {
    render(<HomePage />);

    await waitFor(() => {
      expect(screen.getByTestId('banner-carousel')).toBeInTheDocument();
    }, { timeout: 3000 });

    // Check if banner is displayed
    await waitFor(() => {
      expect(screen.getByTestId('banner-1')).toBeInTheDocument();
      expect(screen.getByText('Welcome to Our Hotel')).toBeInTheDocument();
    });
  });

  it('should fetch and display featured rooms', async () => {
    render(<HomePage />);

    await waitFor(() => {
      expect(screen.getByTestId('room-carousel')).toBeInTheDocument();
    }, { timeout: 3000 });

    // Check if rooms are displayed
    await waitFor(() => {
      expect(screen.getByTestId('room-1')).toBeInTheDocument();
    });
  });

  it('should fetch and display page content', async () => {
    render(<HomePage />);

    await waitFor(() => {
      expect(screen.getByText(/Featured & Newest Rooms/i)).toBeInTheDocument();
    }, { timeout: 3000 });
  });

  it('should display search room form', async () => {
    render(<HomePage />);

    await waitFor(() => {
      expect(screen.getByTestId('search-room-form')).toBeInTheDocument();
    });
  });

  it('should handle API errors gracefully', async () => {
    // This test would require mocking the API to return an error
    // For now, we'll just verify the component renders
    render(<HomePage />);
    
    // Component should still render even if API fails
    expect(screen.getByTestId('banner-skeleton')).toBeInTheDocument();
  });
});

