'use client';

import { useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import EventPromoCard, { type EventPromoCardData } from './EventPromoCard';

export default function EventPromoCarousel({
  items,
  onSelectItem,
}: {
  items: EventPromoCardData[];
  onSelectItem: (item: EventPromoCardData) => void;
}) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    setCanScrollLeft(el.scrollLeft > 0);
    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 10);
  };

  const scroll = (direction: 'left' | 'right') => {
    const el = scrollRef.current;
    if (!el) return;
    const cardWidth = 432; // 400px card + 32px gap
    el.scrollBy({
      left: direction === 'left' ? -cardWidth : cardWidth,
      behavior: 'smooth',
    });
  };

  return (
    <section className="bg-white py-12 md:py-20">
      <div className="container mx-auto px-4">
        <div className="relative max-w-[1296px] mx-auto">
          {/* Navigation Arrows */}
          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollLeft ? 1 : 0.3 }}
            onClick={() => scroll('left')}
            disabled={!canScrollLeft}
            className="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-full bg-[#FFD738] shadow-lg text-[#1C1D1F] hover:bg-[#F5C800] transition-all disabled:cursor-default"
            aria-label="Scroll left"
          >
            <ChevronLeft className="w-5 h-5" />
          </motion.button>

          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollRight ? 1 : 0.3 }}
            onClick={() => scroll('right')}
            disabled={!canScrollRight}
            className="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-full bg-[#FFD738] shadow-lg text-[#1C1D1F] hover:bg-[#F5C800] transition-all disabled:cursor-default"
            aria-label="Scroll right"
          >
            <ChevronRight className="w-5 h-5" />
          </motion.button>

          {/* Scrollable Cards */}
          <div
            ref={scrollRef}
            onScroll={checkScroll}
            className="flex gap-8 overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-4"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {items.map((item, idx) => (
              <div key={item.id} className="snap-start">
                <EventPromoCard
                  item={item}
                  index={idx}
                  onSelect={onSelectItem}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}