'use client';

import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '@/components/ui/carousel';
import { cn } from '@/lib/utils';
import Autoplay from 'embla-carousel-autoplay';
import { CheckCircle, Handshake, Lock, Zap } from 'lucide-react';
import { useEffect, useState } from 'react';

const upgradePlanData = [
    {
        icon: Zap,
        title: 'Remove watermarks',
        description: 'Export up to 50 watermark-free videos, perfect for posting to your creator channel (8¢ per video)',
    },
    {
        icon: CheckCircle,
        title: 'Personal license included',
        description: 'Full rights to use videos for personal social media, creator and non-commercial projects',
    },
    {
        icon: Lock,
        title: 'Lock in your pricing',
        description: 'Subscribe now and keep this price forever - even when we raise prices for new users',
    },
    {
        icon: Handshake,
        title: 'Support our development',
        description: 'Help us to improve and grow so you get the best features & experience',
    },
];

const UpgradePlanCarousel = () => {
    const [api, setApi] = useState<CarouselApi>();
    const [current, setCurrent] = useState(0);
    const [count, setCount] = useState(0);

    useEffect(() => {
        if (!api) {
            return;
        }

        setCount(api.scrollSnapList().length);
        setCurrent(api.selectedScrollSnap() + 1);

        api.on('select', () => {
            setCurrent(api.selectedScrollSnap() + 1);
        });
    }, [api]);

    const scrollTo = (index: number) => {
        api?.scrollTo(index);
    };

    return (
        <div className="mx-auto w-full max-w-2xl space-y-4">
            <Carousel
                plugins={[
                    Autoplay({
                        delay: 5500,
                    }),
                ]}
                setApi={setApi}
                className="w-full"
            >
                <CarouselContent>
                    {upgradePlanData.map((item, index) => {
                        const IconComponent = item.icon;
                        return (
                            <CarouselItem key={index}>
                                <div className="flex w-full items-center justify-center">
                                    <div className="space-y-2 text-center">
                                        <div className="mx-auto mb-0 flex h-20 w-20 items-center justify-center rounded-full">
                                            <IconComponent className="h-10 w-10" />
                                        </div>
                                        <h3 className="text-xl font-bold">{item.title}</h3>
                                        <p className="max-w-sm text-sm">{item.description}</p>
                                    </div>
                                </div>
                            </CarouselItem>
                        );
                    })}
                </CarouselContent>
            </Carousel>

            {/* Centered Dot Navigation */}
            <div className="flex justify-center space-x-2">
                {Array.from({ length: count }, (_, index) => (
                    <button
                        key={index}
                        onClick={() => scrollTo(index)}
                        className={cn(
                            'h-3 w-3 rounded-full transition-all duration-200 hover:scale-110',
                            current === index + 1 ? 'bg-primary scale-110' : 'bg-muted-foreground/30 hover:bg-muted-foreground/50',
                        )}
                        aria-label={`Go to slide ${index + 1}`}
                    />
                ))}
            </div>
        </div>
    );
};

export default UpgradePlanCarousel;