'use client'
import { useEffect, useState } from "react";
import Link from "next/link";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,

    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },

    navigation: {
        nextEl: '.srn',
        prevEl: '.srp',
    },

    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
};

export default function Testimonial() {

    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function loadReviews() {
            try {
                const res = await fetch("/api/reviews");
                const data = await res.json();

                // FILTER EMPTY REVIEWS (IMPORTANT) &  must be positive review: rating 4 or 5
                const cleaned = (data.reviews || []).filter(r =>

                    (r.text ||
                        r.description ||
                        r.snippet ||
                        r.review_text ||
                        r.body ||
                        r.content) &&
                    (r.text?.trim() !== "" ||
                        r.description?.trim() !== "" ||
                        r.snippet?.trim() !== "" ||
                        r.review_text?.trim() !== "" ||
                        r.body?.trim() !== "" ||
                        r.content?.trim() !== "") &&

                    
                    r.rating >= 4
                );


                setReviews(cleaned);
                // console.log(cleaned);
            } catch (error) {
                console.error("Failed to fetch reviews", error);
            } finally {
                setLoading(false);
            }
        }
        loadReviews();
    }, []);

    // Function to render stars based on rating
    function renderStars(rating) {
        return [...Array(5)].map((_, i) => (
            <span
                key={i}
                className={`fa fa-star ${i < rating ? "text-warning" : ""}`}
            ></span>
        ));
    }

    return (
        <>


            {/* Testimonial Section Two */}
            <section className="testimonial-section-two pb-0">
                <div
                    className="icon-layer-two"
                    style={{ backgroundImage: "url(/assets/images/home/review-right-bottom-element-home.webp)" }}
                ></div>

                <div className="auto-container">
                    {/* Section Title */}
                    <div className="sec-title centered">
                        <div className="title">Google Reviews</div>
                        <h2>Hear from our happy customers</h2>
                        <div className="separate"></div>
                    </div>

                    <div className="inner-container">
                        <Swiper {...swiperOptions} className="single-item-carousel">
                            {/* Testimonial Block Two */}

                            {loading && (
                                <p className="text-center">Loading reviews...</p>
                            )}

                            {/* Dynamic Reviews from API */}
                            {!loading && reviews.length > 0 &&
                                reviews.map((r, index) => (
                                    <SwiperSlide key={index}>
                                        <div className="testimonial-block-two">
                                            <div className="inner-box">
                                                <div className="rating gap-1 mb-3">
                                                    {renderStars(r.rating)}
                                                </div>
                                                <div className="text">
                                                    “
                                                    {r.text ||
                                                        r.description ||
                                                        r.snippet ||
                                                        r.review_text ||
                                                        r.body ||
                                                        r.content}
                                                    ”
                                                </div>
                                                <div className="designation">— {r.user?.name}</div>
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                ))
                            }

                            {/* <SwiperSlide>
                                <div className="testimonial-block-two">
                                    <div className="inner-box">
                                        <div className="rating gap-1 mb-3">
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                        </div>
                                        <div className="text">
                                            “Absolutely love this place! Every blend tastes fresh and natural. The flavors pop, and you can really tell they use quality ingredients. Sixty5 Street never disappoints.”
                                        </div>
                                        <div className="designation">— Emily R.</div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            
                            
                            <SwiperSlide>
                                <div className="testimonial-block-two">
                                    <div className="inner-box">
                                        <div className="rating gap-1 mb-3">
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                        </div>
                                        <div className="text">
                                            “The perfect spot when you need something refreshing. Their fruit mixes are vibrant, clean, and full of energy. I always leave feeling great.”
                                        </div>
                                        <div className="designation">— Jason M.</div>
                                    </div>
                                </div>
                            </SwiperSlide>

                            <SwiperSlide>
                                <div className="testimonial-block-two">
                                    <div className="inner-box">
                                        <div className="rating gap-1 mb-3">
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                        </div>
                                        <div className="text">
                                            “Sixty5 Street has mastered the art of fresh flavor. The bowls are colorful, the drinks are delicious, and everything feels thoughtfully prepared. A must-try!”
                                        </div>
                                        <div className="designation">— Sofia L.</div>
                                    </div>
                                </div>
                            </SwiperSlide>

                            <SwiperSlide>
                                <div className="testimonial-block-two">
                                    <div className="inner-box">
                                        <div className="rating gap-1 mb-3">
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                        </div>
                                        <div className="text">
                                            “Consistently amazing! The blends are smooth, balanced, and not overly sweet. You can taste the real fruit in every sip. Highly recommend for healthy cravings.”
                                        </div>
                                        <div className="designation">— David P.</div>
                                    </div>
                                </div>
                            </SwiperSlide>

                            <SwiperSlide>
                                <div className="testimonial-block-two">
                                    <div className="inner-box">
                                        <div className="rating gap-1 mb-3">
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                            <span className="fa fa-star"></span>
                                        </div>
                                        <div className="text">
                                            “Super fresh, super tasty. The street-style vibe makes the whole experience fun and lively. Sixty5 Street has quickly become one of my favorite places to grab a flavorful drink.”
                                        </div>
                                        <div className="designation">— Ava T.</div>
                                    </div>
                                </div>
                            </SwiperSlide> */}
                        </Swiper>

                        {/* Google Review Button */}
                        <div className="btns-box text-center mt-4">
                            <Link
                                href="https://www.google.com/search?sca_esv=0fe16c1f02c217b7&sxsrf=AE3TifOLptPQLUmmtN31E_3elXLW6TFOQw:1762618049873&si=AMgyJEtREmoPL4P1I5IDCfuA8gybfVI2d5Uj7QMwYCZHKDZ-E-aY0flGiK9jtBbvWKno0yJxYW9CK-ZYgm0G70i4ON2SMlNBNsid-fMvQPqNzI7FcY1u8NR67M0xsy1G8HMAZhtgOP2m&q=Sixty5+Street+Reviews&sa=X&ved=2ahUKEwjY5_L19-KQAxW89DgGHdw0AesQ0bkNegQILRAE&biw=1366&bih=633&dpr=1&sei=MHYRadbjFKWo4-EPlrjFkAs&zx=1762752154509&no_sw_cr=1#lrd=0x882b3dbb0e18ed73:0xbdb3783d6e6393c9,3,,,,"
                                target="_blank"
                                className="theme-btn btn-style-one clearfix"
                            >
                                <span className="icon"></span> Review us on Google
                            </Link>
                        </div>
                    </div>
                </div>
            </section>
            {/* End Testimonial Section Two */}

        </>
    )
}