import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '../../../../test/utils/test-utils';
import RoomCard from '../RoomCard';
import type { Room } from '../../services/roomService';

// Mock the FavoriteButton component
vi.mock('../FavoriteButton', () => ({
  default: ({ roomId }: any) => (
    <button data-testid={`favorite-button-${roomId}`}>Favorite</button>
  ),
}));

// Mock the useFormatCurrency hook
vi.mock('../../../features/payments/hooks/useFormatCurrency', () => ({
  useFormatCurrency: () => ({
    formatCurrency: (amount: number) => `$${amount}`,
  }),
}));

const mockRoom: Room = {
  id: 1,
  room_type_id: 1,
  room_number: '101',
  floor: 1,
  status: 'available',
  featured: true,
  price: 150,
  description: 'A beautiful room',
  capacity: 2,
  room_size: '30 sqm',
  view: 'Ocean',
  images: ['/images/room1.jpg'],
  amenities: ['WiFi', 'TV', 'AC'],
  created_at: '2024-01-01T00:00:00Z',
  updated_at: '2024-01-01T00:00:00Z',
  room_type: {
    id: 1,
    name: 'Deluxe Room',
    description: 'Spacious and comfortable',
    base_price: 150,
    capacity: 2,
    amenities: ['WiFi', 'TV', 'AC'],
    images: ['/images/room1.jpg'],
  },
  average_rating: 4.5,
  total_reviews: 10,
};

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

  it('should render room card with correct information', () => {
    render(<RoomCard room={mockRoom} />);

    expect(screen.getByText(/Room 101/i)).toBeInTheDocument();
    expect(screen.getByText('Deluxe Room')).toBeInTheDocument();
    expect(screen.getByText('$150')).toBeInTheDocument();
    expect(screen.getByText('A beautiful room')).toBeInTheDocument();
  });

  it('should display room amenities', () => {
    render(<RoomCard room={mockRoom} />);

    // Check if amenities are displayed (they might be in a list or as icons)
    expect(screen.getAllByText(/WiFi/i).length).toBeGreaterThan(0);
  });

  it('should display room capacity', () => {
    render(<RoomCard room={mockRoom} />);

    expect(screen.getByText(/2/i)).toBeInTheDocument();
  });

  it('should display favorite button', () => {
    render(<RoomCard room={mockRoom} />);

    expect(screen.getByTestId('favorite-button-1')).toBeInTheDocument();
  });

  it('should render link to room detail page', () => {
    render(<RoomCard room={mockRoom} />);

    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/rooms/101');
  });

  it('should handle missing room_type gracefully', () => {
    const roomWithoutType = { ...mockRoom, room_type: undefined };
    const { container } = render(<RoomCard room={roomWithoutType as Room} />);
    
    // Component should return null if room_type is missing
    expect(container.firstChild).toBeNull();
  });

  it('should use placeholder image when no images provided', () => {
    const roomWithoutImages = {
      ...mockRoom,
      images: [],
      room_type: {
        ...mockRoom.room_type!,
        images: [],
      },
    };
    
    render(<RoomCard room={roomWithoutImages} />);
    
    const image = screen.getByRole('img');
    expect(image).toHaveAttribute('src', expect.stringContaining('placeholder'));
  });

  it('should display rating if available', () => {
    render(<RoomCard room={mockRoom} />);

    // Rating should be displayed
    expect(screen.getByText('4.5')).toBeInTheDocument();
    expect(screen.getByText('(10)')).toBeInTheDocument();
  });
});

