import React, { useRef, useEffect } from 'react';
import TiltedCard from '../components/reactbits/Components/TiltedCard/TiltedCard';

// Custom Media Carousel component with mouse scroll and auto-scroll
const CustomMediaCarousel = ({ media, userProfile }) => {
  const carouselRef = useRef(null);
  const scrollIntervalRef = useRef(null);

  // Auto-scroll logic
  useEffect(() => {
    const carousel = carouselRef.current;
    if (!carousel) return;

    // Start auto-scroll
    scrollIntervalRef.current = setInterval(() => {
      // Scroll by the width of one card (approx)
      const cardWidth = carousel.querySelector('.flex-shrink-0')?.offsetWidth || 256; // Default width if no card found
      const currentScroll = carousel.scrollLeft;
      const maxScroll = carousel.scrollWidth - carousel.clientWidth;

      if (currentScroll >= maxScroll) {
        // If at the end, jump back to the beginning smoothly
        carousel.scrollTo({ left: 0, behavior: 'smooth' });
      } else {
        // Scroll forward
        carousel.scrollBy({ left: cardWidth + 16, behavior: 'smooth' }); // Add gap (16px = space-x-4)
      }
    }, 3000); // Scroll every 3 seconds

    // Clear interval on user interaction (mouse wheel, drag)
    const handleUserInteraction = () => {
      clearInterval(scrollIntervalRef.current);
    };

    carousel.addEventListener('wheel', handleUserInteraction);
    // Add more event listeners for drag/touch if needed, but wheel covers mouse scroll

    // Clean up interval and event listeners on component unmount
    return () => {
      clearInterval(scrollIntervalRef.current);
      carousel.removeEventListener('wheel', handleUserInteraction);
    };
  }, [media]); // Re-run effect if media changes

  if (!media || media.length === 0) {
    return <div className="text-campfire-ash text-center">Нет контента для отображения.</div>;
  }

  return (
    // Use flexbox for horizontal layout and overflow-x-auto for scrolling
    // Add padding-bottom to prevent scrollbar from covering content
    // Added custom scrollbar styles via Tailwind config (if configured) or direct CSS
    // Added ref for scrolling
    <div
      ref={carouselRef}
      className="flex overflow-x-auto space-x-8 pb-4 scrollbar-thin scrollbar-thumb-campfire-amber scrollbar-track-campfire-charcoal"
      style={{ scrollSnapType: 'x mandatory' }} // Optional: Add scroll snap for smoother card-by-card scrolling
    >
      {media.map((mediaItem) => (
        // Wrap MediaCard in a div with flex-shrink-0 to prevent shrinking
        // Set a fixed width for each card in the carousel
        <div
          key={mediaItem.id}
          className="flex-shrink-0 w-40 sm:w-48 md:w-56 lg:w-64" // Adjust width as needed
          style={{ scrollSnapAlign: 'start' }} // Optional: Align snap to the start of the card
        >
          <TiltedCard 
            imageSrc={mediaItem.poster_path}
            captionText={mediaItem.title}
            rating={mediaItem.rating}
            releaseDate={mediaItem.release_date}
          />
        </div>
      ))}
    </div>
  );
};

export default CustomMediaCarousel;
