import { Link } from '@inertiajs/react';
import {
    Carousel,
    CarouselContent,
    CarouselItem,
} from '@/components/ui/carousel';
import { Button } from '@/components/ui/button';
import { ArrowRight, Sparkles } from 'lucide-react';
import Autoplay from 'embla-carousel-autoplay';
import { useState, useEffect } from 'react';
import type { CarouselApi } from '@/components/ui/carousel';

interface Slide {
    id: number;
    image: string;
    title_html: string;
    caption_html: string;
    button_text: string | null;
    button_url: string | null;
    sort: number;
    active: boolean;
}

interface HeroSliderProps {
    slides: Slide[];
}

export default function HeroSlider({ slides }: HeroSliderProps) {
    const [api, setApi] = useState<CarouselApi>();
    const [current, setCurrent] = useState(0);

    useEffect(() => {
        if (!api) return;
        setCurrent(api.selectedScrollSnap());
        api.on('select', () => setCurrent(api.selectedScrollSnap()));
    }, [api]);

    if (!slides || slides.length === 0) return null;

    return (
        <section className="relative overflow-hidden bg-slate-950">
            {/* Animated Mesh Gradient Background */}
            <div className="absolute inset-0 overflow-hidden">
                <div className="absolute -top-40 -left-40 w-[600px] h-[600px] bg-primary/40 rounded-full mix-blend-screen filter blur-3xl animate-pulse" />
                <div className="absolute top-20 -right-40 w-[600px] h-[600px] bg-purple-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
                <div className="absolute -bottom-40 left-1/4 w-[600px] h-[600px] bg-cyan-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse" style={{ animationDelay: '4s' }} />
            </div>

            {/* Grid Pattern */}
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:48px_48px]" />

            <Carousel
                setApi={setApi}
                opts={{ align: 'start', loop: true }}
                plugins={[Autoplay({ delay: 6000, stopOnInteraction: false })]}
                className="w-full relative z-10"
            >
                <CarouselContent>
                    {slides.map((slide) => (
                        <CarouselItem key={slide.id}>
                            <div className="relative min-h-[700px] md:min-h-[750px] lg:min-h-[800px] w-full flex items-center">
                                <div className="container mx-auto px-4 py-20">
                                    <div className="grid lg:grid-cols-2 gap-12 items-center">
                                        {/* Left: Text */}
                                        <div className="space-y-8">
                                            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white text-sm">
                                                <span className="relative flex h-2 w-2">
                                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                                                </span>
                                                <span>Available for new projects</span>
                                            </div>

                                            <h1
                                                className="text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight"
                                                dangerouslySetInnerHTML={{ __html: slide.title_html }}
                                            />

                                            <div
                                                className="text-lg md:text-xl text-white/70 leading-relaxed max-w-xl"
                                                dangerouslySetInnerHTML={{ __html: slide.caption_html }}
                                            />

                                            <div className="flex flex-col sm:flex-row gap-4">
                                                {slide.button_text && slide.button_url && (
                                                    <Button
                                                        size="lg"
                                                        className="bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-500 text-white font-semibold px-8 h-14 text-base group shadow-lg shadow-primary/50"
                                                        asChild
                                                    >
                                                        {slide.button_url.startsWith('http') ? (
                                                            <a href={slide.button_url} target="_blank" rel="noopener noreferrer">
                                                                {slide.button_text}
                                                                <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
                                                            </a>
                                                        ) : (
                                                            <Link href={slide.button_url}>
                                                                {slide.button_text}
                                                                <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
                                                            </Link>
                                                        )}
                                                    </Button>
                                                )}
                                                <Button
                                                    size="lg"
                                                    variant="outline"
                                                    className="bg-white/5 backdrop-blur-sm border-white/20 text-white hover:bg-white/10 hover:text-white font-semibold px-8 h-14 text-base"
                                                    asChild
                                                >
                                                    <Link href="/portfolio">View Our Work</Link>
                                                </Button>
                                            </div>

                                            <div className="flex flex-wrap items-center gap-6 pt-4 text-white/60 text-sm">
                                                <div className="flex items-center gap-2">
                                                    <Sparkles className="w-4 h-4 text-amber-400" />
                                                    <span>10+ Years Experience</span>
                                                </div>
                                                <div className="flex items-center gap-2">
                                                    <Sparkles className="w-4 h-4 text-amber-400" />
                                                    <span>200+ Projects Delivered</span>
                                                </div>
                                            </div>
                                        </div>

                                        {/* Right: Image */}
                                        <div className="relative hidden lg:block">
                                            <div className="absolute inset-0 bg-gradient-to-r from-primary to-purple-500 rounded-3xl blur-3xl opacity-30" />
                                            <div className="relative rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
                                                <img
                                                    src={slide.image}
                                                    alt=""
                                                    className="w-full h-[500px] object-cover"
                                                />
                                                <div className="absolute inset-0 bg-gradient-to-tr from-slate-900/40 via-transparent to-transparent" />
                                            </div>
                                            <div className="absolute -top-4 -right-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-xl">
                                                <div className="flex items-center gap-3">
                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center">
                                                        <Sparkles className="w-5 h-5 text-white" />
                                                    </div>
                                                    <div>
                                                        <div className="text-white font-bold text-lg">98%</div>
                                                        <div className="text-white/70 text-xs">Satisfaction</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="absolute -bottom-4 -left-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-xl">
                                                <div className="flex items-center gap-3">
                                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
                                                        <span className="text-white font-bold">★</span>
                                                    </div>
                                                    <div>
                                                        <div className="text-white font-bold text-lg">5.0</div>
                                                        <div className="text-white/70 text-xs">Client Rating</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
            </Carousel>

            {/* Slide Indicators */}
            {slides.length > 1 && (
                <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex gap-2 z-20">
                    {slides.map((_, index) => (
                        <button
                            key={index}
                            onClick={() => api?.scrollTo(index)}
                            className={`h-2 rounded-full transition-all ${
                                current === index ? 'w-12 bg-primary' : 'w-2 bg-white/40 hover:bg-white/60'
                            }`}
                            aria-label={`Go to slide ${index + 1}`}
                        />
                    ))}
                </div>
            )}
        </section>
    );
}