'use client';

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

export default function CSRCarousel({
  csrs,
  onSelectCsr,
}: {
  csrs: CSRCardData[];
  onSelectCsr: (csr: CSRCardData) => 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 firstChild = el.firstElementChild as HTMLElement;
    const gap = window.innerWidth >= 768 ? 32 : 16; // md:gap-8 (32px), gap-4 (16px)
    const cardWidth = firstChild ? firstChild.offsetWidth + gap : 432;

    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-[140px] z-10 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-full bg-white shadow-lg border border-gray-100 text-[#6E5904] hover:bg-[#FFD738] hover:text-[#1C1D1F] 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-[140px] z-10 w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-full bg-white shadow-lg border border-gray-100 text-[#6E5904] hover:bg-[#FFD738] hover:text-[#1C1D1F] 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-4 md:gap-8 overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-4"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {csrs.map((csr, idx) => (
              <div key={csr.id} className="snap-start">
                <CSRCard csr={csr} index={idx} onSelect={onSelectCsr} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}