'use client'

import { useState, useEffect } from 'react'
import { createClient } from '@/lib/supabase/client'
import { Card, CardContent } from '@/components/ui/card'
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from '@/components/ui/carousel'
import { SectionWrapper } from '@/components/shared/section-wrapper'
import { Star, Quote } from 'lucide-react'



interface Testimonial {
    id: string
    name: string
    role: string | null
    content: string
    rating: number
}

interface TestimonialCarouselProps {
    config?: {
        heading: string
        description: string
    }
}

export function TestimonialCarousel({ config }: TestimonialCarouselProps) {

    const [testimonials, setTestimonials] = useState<Testimonial[]>([])

    const heading = config?.heading || "What Our Clients Say"
    const description = config?.description || "Don't just take our word for it. Here's what our customers have to say about their experience with Hostimatic."

    useEffect(() => {
        const supabase = createClient()
        supabase
            .from('testimonials')
            .select('id, name, role, content, rating')
            .eq('is_active', true)
            .eq('is_featured', true)
            .order('created_at', { ascending: false })
            .limit(6)
            .then(({ data }) => {
                if (data && data.length > 0) setTestimonials(data)
                else {
                    setTestimonials([
                        { id: '1', name: 'Michel Steward', role: 'CTO at Psiisp', content: 'Hostimatic provided the exact infrastructure we needed. Their support is phenomenal and the uptime is rock solid.', rating: 5 },
                        { id: '2', name: 'Kamrul Hasan', role: 'Founder at Medistore', content: 'Moving to Hostimatic was the best decision for our e-commerce business. The speed improvement was instant.', rating: 5 },
                        { id: '3', name: 'Sarah Jenkins', role: 'Freelance Developer', content: 'I manage over 20 client sites on Hostimatic VPS. Never had a downtime issue in 2 years.', rating: 5 },
                    ])
                }
            })
    }, [])

    if (testimonials.length === 0) return null

    return (
        <SectionWrapper bg="white" id="testimonials">
            <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-navy mb-4">{heading}</h2>
                <p className="text-slate-600 max-w-2xl mx-auto">{description}</p>
            </div>

            <Carousel className="w-full max-w-4xl mx-auto">
                <CarouselContent>
                    {testimonials.map((testimonial) => (
                        <CarouselItem key={testimonial.id} className="md:basis-1/2 lg:basis-1/2">
                            <div className="p-1">
                                <Card className="border-0 shadow-lg bg-white relative overflow-hidden h-full">
                                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-purple to-brand-orange" />
                                    <CardContent className="flex flex-col items-start p-8 h-full">
                                        <Quote className="text-brand-orange/20 mb-4 h-10 w-10" />
                                        <div className="flex mb-4">
                                            {[...Array(5)].map((_, i) => (
                                                <Star key={i} className={`h-4 w-4 ${i < testimonial.rating ? 'text-yellow-400 fill-yellow-400' : 'text-slate-300'}`} />
                                            ))}
                                        </div>
                                        <p className="text-slate-700 italic mb-6 leading-relaxed flex-1">
                                            &quot;{testimonial.content}&quot;
                                        </p>
                                        <div className="flex items-center gap-3 mt-auto">
                                            <div className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center font-bold text-navy">
                                                {testimonial.name[0]}
                                            </div>
                                            <div>
                                                <h4 className="font-bold text-navy text-sm">{testimonial.name}</h4>
                                                <p className="text-xs text-slate-500 uppercase tracking-wide">{testimonial.role}</p>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
            </Carousel>
        </SectionWrapper>
    )
}
