import { motion } from 'framer-motion';
import React, { useEffect, useRef, useState } from 'react';
import { useInView } from 'react-intersection-observer';

import HighlightCard from './HighlightCard';
import { HighlightItemProps } from './HighlightItem';

interface ScrollableCardStackProps {
  highlights: HighlightItemProps[];
  title?: string;
}

const ScrollableCardStack: React.FC<ScrollableCardStackProps> = ({
  highlights,
  title,
}) => {
  const [activeCardIndex, setActiveCardIndex] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });

  useEffect(() => {
    const handleScroll = () => {
      if (containerRef.current) {
        const container = containerRef.current;
        const cardWidth = 376 + 32;
        const scrollPosition = container.scrollLeft;
        const activeIndex = Math.round(scrollPosition / cardWidth);
        setActiveCardIndex(Math.max(0, Math.min(2, activeIndex)));
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener('scroll', handleScroll);
    }

    return () => {
      if (container) {
        container.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  return (
    <div className='relative' ref={ref}>
      {title && (
        <h3 className='mb-4 text-lg font-medium text-white'>{title}</h3>
      )}
      <div
        ref={containerRef}
        className='scrollbar-hide flex snap-x snap-mandatory gap-8 overflow-x-auto'
      >
        {highlights.map((highlight, idx) => (
          <motion.div
            key={idx}
            className='flex-shrink-0 snap-center'
            initial={{ x: -100, opacity: 0 }}
            animate={inView ? { x: 0, opacity: 1 } : {}}
            transition={{
              duration: 0.8,
              delay: idx * 0.15,
              ease: [0.4, 0, 0.2, 1],
            }}
          >
            <HighlightCard
              heading={highlight.heading || ''}
              subtext={highlight.subhead || ''}
              imageUrl={highlight.imageUrl || ''}
              imageHeight={highlight.imageHeight}
              imageWidth={highlight.imageWidth}
            />
          </motion.div>
        ))}
      </div>
      <div className='pointer-events-none absolute top-0 right-0 bottom-0 w-12 bg-gradient-to-l from-dumbo-50/30 to-transparent md:hidden'></div>
      <div className='pointer-events-none absolute top-0 bottom-0 left-0 w-12 bg-gradient-to-r from-dumbo-50/30 to-transparent md:hidden'></div>
      <div className='mt-4 flex justify-center sm:hidden'>
        <div className='flex space-x-2'>
          <div
            className={`h-2 w-2 rounded-full transition-colors duration-200 ${
              activeCardIndex === 0 ? 'bg-white/80' : 'bg-white/30'
            }`}
          ></div>
          <div
            className={`h-2 w-2 rounded-full transition-colors duration-200 ${
              activeCardIndex === 1 ? 'bg-white/80' : 'bg-white/30'
            }`}
          ></div>
          <div
            className={`h-2 w-2 rounded-full transition-colors duration-200 ${
              activeCardIndex === 2 ? 'bg-white/80' : 'bg-white/30'
            }`}
          ></div>
        </div>
      </div>
    </div>
  );
};

export default ScrollableCardStack;