"use client";

import { useRef, useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay, Pagination } from 'swiper/modules';
import { ArrowLeft, ArrowRight, Quote, Star } from 'lucide-react';

import { cn } from '@/lib/cn';
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from '@/components/ui/button';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export function Feedback() {
    const swiperRef = useRef<any>(null);
    const t = useTranslations();
    const feedbacks = t.raw("home.feedbacks");

    return (
        <section className="py-24 relative overflow-hidden bg-white">
            {/* Background Decoration - Adjusted to prevent edge lines */}
            <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/3 size-[500px] bg-primary-tw-100/20 rounded-full blur-[100px] pointer-events-none" />
            <div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 size-[400px] bg-blue-100/20 rounded-full blur-[100px] pointer-events-none" />

            <div className="container mx-auto px-4 box relative z-10">
                <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
                    <div className="max-w-2xl">
                        <h2 className="text-4xl md:text-5xl font-black text-gray-900 mb-4 tracking-tight">
                            {t("home.feedback title")}
                        </h2>
                        <p className="text-gray-500 text-lg">
                            {t("home.trusted-by.after")}
                        </p>
                    </div>
                    
                    <div className="flex gap-3">
                        <Button
                            variant="outline"
                            size="icon"
                            className="size-12 rounded-full border-gray-200 bg-white shadow-sm hover:bg-primary-tw-600 hover:text-white hover:border-primary-tw-600 transition-all duration-300"
                            onClick={() => swiperRef.current?.slidePrev()}
                        >
                            <ArrowLeft className="size-5 rtl:rotate-180" />
                        </Button>
                        <Button
                            variant="outline"
                            size="icon"
                            className="size-12 rounded-full border-gray-200 bg-white shadow-sm hover:bg-primary-tw-600 hover:text-white hover:border-primary-tw-600 transition-all duration-300"
                            onClick={() => swiperRef.current?.slideNext()}
                        >
                            <ArrowRight className="size-5 rtl:rotate-180" />
                        </Button>
                    </div>
                </div>

                <Swiper
                    onBeforeInit={(swiper) => {
                        swiperRef.current = swiper;
                    }}
                    spaceBetween={30}
                    slidesPerView={1}
                    autoplay={{
                        delay: 5000,
                        disableOnInteraction: false,
                    }}
                    breakpoints={{
                        768: { slidesPerView: 2 },
                        1024: { slidesPerView: 3 },
                    }}
                    modules={[Navigation, Autoplay, Pagination]}
                    className="!pb-16 !h-full"
                >
                    {feedbacks.map((feedback: any, index: number) => (
                        <SwiperSlide key={index} className="!h-auto">
                            <div className="h-full bg-white border border-gray-100 p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all duration-500 group relative mt-6 flex flex-col">
                                {/* Quote Icon */}
                                <div className="absolute -top-6 right-8 size-12 bg-primary-tw-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-primary-tw-200 group-hover:scale-110 group-hover:-rotate-12 transition-transform duration-500">
                                    <Quote className="size-6 fill-current" />
                                </div>

                                <div className="flex flex-col h-full flex-1">
                                    {/* Rating */}
                                    <div className="flex gap-1 mb-6">
                                        {[...Array(5)].map((_, i) => (
                                            <Star 
                                                key={i} 
                                                className={cn(
                                                    "size-4",
                                                    i < feedback.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-200"
                                                )} 
                                            />
                                        ))}
                                    </div>

                                    {/* Content */}
                                    <blockquote className="flex-1">
                                        <p className="text-gray-600 leading-relaxed text-lg mb-8 italic">
                                            "{feedback.feedback}"
                                        </p>
                                    </blockquote>

                                    {/* Author */}
                                    <div className="flex items-center gap-4 pt-6 border-t border-gray-50 mt-auto">
                                        <Avatar className="size-14 border-2 border-primary-tw-50">
                                            <AvatarFallback className='bg-primary-tw-50 text-primary-tw-600 font-bold uppercase'>
                                                {feedback.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2)}
                                            </AvatarFallback>
                                        </Avatar>
                                        <div>
                                            <h4 className="font-bold text-gray-900 text-lg leading-tight">
                                                {feedback.name}
                                            </h4>
                                            <p className="text-primary-tw-600 text-sm font-medium">
                                                {feedback.entity || t("home.mwaheb-clients")}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </section>
    );
};