import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import type { Room } from '../services/roomService';
import RoomCard from './RoomCard';

interface RoomCarouselProps {
  rooms: Room[];
  autoSlideInterval?: number; 
  showNavigation?: boolean;
}

const RoomCarousel: React.FC<RoomCarouselProps> = ({
  rooms,
  autoSlideInterval = 4000,
  showNavigation = true,
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  
  useEffect(() => {
    if (rooms.length <= 1) return;

    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev === rooms.length - 1 ? 0 : prev + 1));
    }, autoSlideInterval);

    return () => clearInterval(interval);
  }, [rooms.length, autoSlideInterval]);

  const goToPrevious = () => {
    if (isAnimating || rooms.length <= 1) return;
    setIsAnimating(true);
    setCurrentIndex((prev) => (prev === 0 ? rooms.length - 1 : prev - 1));
    setTimeout(() => setIsAnimating(false), 500);
  };

  const goToNext = () => {
    if (isAnimating || rooms.length <= 1) return;
    setIsAnimating(true);
    setCurrentIndex((prev) => (prev === rooms.length - 1 ? 0 : prev + 1));
    setTimeout(() => setIsAnimating(false), 500);
  };

  const goToSlide = (index: number) => {
    if (isAnimating || index === currentIndex) return;
    setIsAnimating(true);
    setCurrentIndex(index);
    setTimeout(() => setIsAnimating(false), 500);
  };

  if (rooms.length === 0) {
    return (
      <div className="luxury-card p-12 text-center animate-fade-in">
        <p className="text-gray-600 text-lg font-light tracking-wide">
          No rooms available
        </p>
      </div>
    );
  }

  
  
  const getTransform = () => {
    if (rooms.length === 1) {
      return 'translateX(0)';
    }
    
    
    
    
    
    
    let offset = 0;
    if (rooms.length <= 3) {
      offset = 0;
    } else if (currentIndex === 0) {
      offset = 0; 
    } else if (currentIndex === rooms.length - 1) {
      offset = (rooms.length - 3) * 33.33; 
    } else {
      offset = (currentIndex - 1) * 33.33; 
    }
    
    return `translateX(-${offset}%)`;
  };

  
  const getCenterIndex = () => {
    if (rooms.length === 1) {
      return 0;
    }
    if (rooms.length === 2) {
      return currentIndex === 0 ? 0 : 1;
    }
    if (rooms.length === 3) {
      return 1; 
    }
    if (currentIndex === 0) {
      return 1; 
    }
    if (currentIndex === rooms.length - 1) {
      return rooms.length - 2; 
    }
    return currentIndex; 
  };

  const centerIndex = getCenterIndex();

  return (
    <div className="relative w-full max-w-6xl mx-auto">
      {}
      <div className="relative overflow-hidden px-2 sm:px-3 md:px-4">
        {}
        <div
          className="flex transition-transform duration-500 ease-in-out"
          style={{
            transform: getTransform(),
          }}
        >
          {rooms.map((room, index) => {
            
            const isCenter = index === centerIndex || rooms.length <= 2;
            
            return (
              <div
                key={room.id}
                className="flex-shrink-0 px-1 sm:px-2 w-full md:w-1/2 lg:w-1/3"
              >
                <div 
                  className={`mx-auto transition-all duration-300 ${
                    isCenter 
                      ? 'scale-100 opacity-100 z-10' 
                      : 'scale-90 opacity-70'
                  }`}
                >
                  <RoomCard room={room} compact={true} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {}
      {showNavigation && rooms.length > 1 && (
        <>
          <button
            onClick={goToPrevious}
            disabled={isAnimating || currentIndex === 0}
            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 sm:-translate-x-4
              z-10 w-8 h-8 sm:w-9 sm:h-9
              bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
              text-white rounded-full
              flex items-center justify-center
              shadow-lg shadow-[var(--luxury-gold)]/40
              hover:shadow-xl hover:shadow-[var(--luxury-gold)]/50
              hover:scale-110
              active:scale-95
              transition-all duration-300
              disabled:opacity-50 disabled:cursor-not-allowed
              group backdrop-blur-sm"
            aria-label="Previous room"
          >
            <ChevronLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
          </button>

          <button
            onClick={goToNext}
            disabled={isAnimating || currentIndex >= rooms.length - 1}
            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 sm:translate-x-4
              z-10 w-8 h-8 sm:w-9 sm:h-9
              bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
              text-white rounded-full
              flex items-center justify-center
              shadow-lg shadow-[var(--luxury-gold)]/40
              hover:shadow-xl hover:shadow-[var(--luxury-gold)]/50
              hover:scale-110
              active:scale-95
              transition-all duration-300
              disabled:opacity-50 disabled:cursor-not-allowed
              group backdrop-blur-sm"
            aria-label="Next room"
          >
            <ChevronRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
          </button>
        </>
      )}

      {}
      {rooms.length > 1 && (
        <div className="flex justify-center items-center gap-1.5 sm:gap-2 mt-3 sm:mt-4">
          {rooms.map((_, index) => (
            <button
              key={index}
              onClick={() => goToSlide(index)}
              disabled={isAnimating}
              className={`transition-all duration-300 rounded-full
                ${
                  index === currentIndex
                    ? 'w-6 h-1.5 sm:w-7 sm:h-2 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] shadow-lg shadow-[var(--luxury-gold)]/40'
                    : 'w-1.5 h-1.5 sm:w-2 sm:h-2 bg-gray-300 hover:bg-[var(--luxury-gold)]/50'
                }
                disabled:cursor-not-allowed
              `}
              aria-label={`Go to room ${index + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default RoomCarousel;

