import React, { useEffect, useState, useCallback } from 'react';
import useEmblaCarousel from 'embla-carousel-react';

const testimonials = [
    {
        text: "Dieses Buch war der Wendepunkt in meiner chronischen Erschöpfung. Roberto schreibt mit einer Klarheit, die einen direkt im Herzen trifft.",
        author: "Stefan M.",
        role: "Unternehmer",
        stars: 5,
    },
    {
        text: "Man spürt auf jeder Seite, dass hier jemand schreibt, der den Weg selbst gegangen ist. Grounded Luxury trifft es perfekt.",
        author: "Julia K.",
        role: "Ärztin",
        stars: 5,
    },
    {
        text: "Das Retreat war lebensverändernd. Die Kombination aus Natur, Theorie und Praxis ist in dieser Form einzigartig.",
        author: "Markus L.",
        role: "Creative Director",
        stars: 5,
    },
    {
        text: "Endlich ein Ansatz, der Wissenschaft und Spiritualität nicht als Gegensätze sieht, sondern vereint. Danke für diese Arbeit.",
        author: "Sarah B.",
        role: "Psychologin",
        stars: 5,
    },
    {
        text: "Ich habe schon viele Methoden ausprobiert, aber erst Riboneo hat mir geholfen, wirklich zur Ruhe zu kommen und meine Energie zurückzugewinnen.",
        author: "Thomas W.",
        role: "Architekt",
        stars: 5,
    },
];

const TestimonialCarousel: React.FC = () => {
    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'start' });
    const [selectedIndex, setSelectedIndex] = useState(0);

    const scrollTo = useCallback((index: number) => {
        if (emblaApi) emblaApi.scrollTo(index);
    }, [emblaApi]);

    const onSelect = useCallback(() => {
        if (!emblaApi) return;
        setSelectedIndex(emblaApi.selectedScrollSnap());
    }, [emblaApi]);

    useEffect(() => {
        if (!emblaApi) return;
        onSelect();
        emblaApi.on('select', onSelect);

        // Auto-play functionality
        const intervalId = setInterval(() => {
            if (emblaApi.canScrollNext()) {
                emblaApi.scrollNext();
            } else {
                emblaApi.scrollTo(0);
            }
        }, 5000);

        return () => {
            emblaApi.off('select', onSelect);
            clearInterval(intervalId);
        };
    }, [emblaApi, onSelect]);

    return (
        <div className="relative max-w-7xl mx-auto px-6">
            <div className="overflow-hidden" ref={emblaRef}>
                <div className="flex -ml-4">
                    {testimonials.map((testimonial, index) => (
                        <div className="flex-[0_0_100%] md:flex-[0_0_50%] lg:flex-[0_0_33.333%] min-w-0 pl-4" key={index}>
                            <div className="h-full p-10 bg-secondary/20 dark:bg-white/5 shape-squircle flex flex-col justify-between">
                                <div>
                                    <div className="flex gap-1 text-yellow-500 mb-6">
                                        {[...Array(testimonial.stars)].map((_, i) => (
                                            <span key={i} className="material-symbols-outlined fill-1">star</span>
                                        ))}
                                    </div>
                                    <p className="text-lg italic mb-8 leading-relaxed text-slate-700 dark:text-slate-300">"{testimonial.text}"</p>
                                </div>
                                <div className="flex items-center gap-4">
                                    <div className="w-12 h-12 rounded-full bg-slate-300 flex-shrink-0"></div>
                                    <div>
                                        <p className="font-bold text-slate-900 dark:text-white">{testimonial.author}</p>
                                        <p className="text-sm opacity-60 text-slate-600 dark:text-slate-400">{testimonial.role}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="flex justify-center gap-3 mt-10">
                {testimonials.map((_, index) => (
                    <button
                        key={index}
                        className={`w-3 h-3 rounded-full transition-all duration-300 ${index === selectedIndex ? 'bg-primary w-8' : 'bg-slate-300 dark:bg-white/20 hover:bg-primary/50'
                            }`}
                        onClick={() => scrollTo(index)}
                        aria-label={`Go to slide ${index + 1}`}
                    />
                ))}
            </div>
        </div>
    );
};

export default TestimonialCarousel;