import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from 'swiper/modules';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { getValidImage } from '@/lib/utils';
import { useRouter } from 'next/navigation';

interface CategoryNavProps {
    categories: any[];
    loading: boolean;
    selectedCategoryId?: string;
    onCategorySelect?: (categoryId: string) => void;
}

const CategoryNav: React.FC<CategoryNavProps> = ({ categories, loading, selectedCategoryId, onCategorySelect }) => {
    const router = useRouter();

    return (
        <section className="bg-brand-50/50 py-8 rounded-2xl border border-brand-100/50">
            <div className="px-8">
                <div className="flex items-center justify-between mb-6">
                    <h3 className="text-xl font-bold text-gray-900">Shop by Category</h3>
                    <div className="flex gap-2">
                        <button className="category-prev w-9 h-9 rounded-full bg-white/80 border border-brand-100 flex items-center justify-center hover:bg-white transition-all disabled:opacity-30">
                            <ChevronLeft className="w-4 h-4 text-brand-500" />
                        </button>
                        <button className="category-next w-9 h-9 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md shadow-brand-200/50 hover:bg-brand-600 transition-all disabled:opacity-30">
                            <ChevronRight className="w-4 h-4" />
                        </button>
                    </div>
                </div>
                <Swiper
                    modules={[Navigation, Autoplay]}
                    spaceBetween={10}
                    slidesPerView={3}
                    navigation={{
                        prevEl: '.category-prev',
                        nextEl: '.category-next',
                    }}
                    breakpoints={{
                        400: { slidesPerView: 4, spaceBetween: 15 },
                        640: { slidesPerView: 5, spaceBetween: 20 },
                        768: { slidesPerView: 7, spaceBetween: 25 },
                        1024: { slidesPerView: 9, spaceBetween: 30 },
                        1280: { slidesPerView: 11, spaceBetween: 30 },
                    }}
                    autoplay={categories.length > 5 ? { delay: 3000, disableOnInteraction: false } : false}
                    centerInsufficientSlides={true}
                    className="category-swiper"
                >
                    {loading ? (
                        Array.from({ length: 10 }).map((_, i) => (
                            <SwiperSlide key={i}>
                                <div className="flex flex-col items-center gap-3 animate-pulse">
                                    <div className="w-16 h-16 rounded-full bg-gray-200 shadow-sm" />
                                    <div className="h-4 w-16 bg-gray-200 rounded" />
                                </div>
                            </SwiperSlide>
                        ))
                    ) : (
                        categories.map((cat, i) => (
                            <SwiperSlide key={cat._id || i}>
                                <div
                                    className="flex flex-col items-center gap-3 cursor-pointer group"
                                    onClick={() => {
                                        if (onCategorySelect) {
                                            onCategorySelect(cat._id);
                                        }
                                    }}
                                >
                                    <div className={`w-16 h-16 rounded-full overflow-hidden flex items-center justify-center shadow-sm transition-all duration-300 ${selectedCategoryId === cat._id ? 'border-2 border-brand-500 bg-brand-50 scale-110 shadow-md' : 'bg-white group-hover:shadow-md group-hover:-translate-y-1'}`}>
                                        <img
                                            src={getValidImage(cat.category_image)}
                                            alt={cat.category_name}
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                    <span className={`text-sm font-medium transition-colors text-center line-clamp-1 ${selectedCategoryId === cat._id ? 'text-brand-600 font-bold' : 'text-gray-700 group-hover:text-brand-600'}`}>
                                        {cat.category_name}
                                    </span>
                                </div>
                            </SwiperSlide>
                        ))
                    )}
                </Swiper>
            </div>
        </section>
    );
};

export default React.memo(CategoryNav);