import { Review } from "../../../services/content/types";
import TestimonialCard from "../../../components/TestimonialCard";
import { useQuery } from "@tanstack/react-query";
import { DataCacheKey, staleTime } from "../../../global/constants";
import {
  startLoading,
  stopLoading,
} from "../../../features/loading/loadingSlice";
import { contentApi } from "../../../apis/contentApi";
import { useAppDispatch } from "../../../hooks/useRedux";
import { useTranslation } from "react-i18next";

const HomeTestimonial = () => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();

  const { data: loadReviewData = [] } = useQuery<Review[]>({
    queryKey: [DataCacheKey.REVIEWS],
    queryFn: async (): Promise<Review[]> => {
      try {
        dispatch(startLoading({}));
        const res = await contentApi.LoadReview({
          pageNumber: 0,
          pageSize: 10,
          isFeatured: true,
        });
        return res.data.reviews as Review[];
      } catch (error) {
        console.error(error);
        return []; // 🔴 bắt buộc
      } finally {
        dispatch(stopLoading());
      }
    },
    staleTime: staleTime,
  });

  return (
    <section className="relative overflow-hidden bg-[#EE0434] py-10 md:py-20 lg:py-24">
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-white/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-black/5 rounded-full blur-[80px] translate-y-1/2 -translate-x-1/2"></div>

      <div className="max-w-7xl mx-auto relative z-10 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
          <div className="lg:col-span-4 text-white space-y-4 md:space-y-6 text-center lg:text-left">
            <h2 className="text-2xl md:text-4xl lg:text-[36px] font-black leading-tight tracking-tight">
              {t("whatUs")} <br className="hidden lg:block" /> {t("sayAboutUs")}
            </h2>
            <p className="text-sm md:text-xl font-medium text-white/80 max-w-sm mx-auto lg:mx-0">
              {t("overMillionSatisfiedCustomers")}
            </p>
          </div>

          <div className="hidden lg:col-span-8 lg:grid grid-cols-2 gap-6 h-[550px] overflow-hidden relative">
            <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-[#EE0434] to-transparent z-20"></div>
            <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#EE0434] to-transparent z-20"></div>

            <div className="flex flex-col space-y-6 animate-marquee-up hover:[animation-play-state:paused]">
              {loadReviewData.map((item, i) => (
                <TestimonialCard key={i} item={item} />
              ))}
            </div>

            <div className="flex flex-col space-y-6 animate-marquee-down hover:[animation-play-state:paused]">
              {loadReviewData
                .slice()
                .reverse()
                .map((item, i) => (
                  <TestimonialCard key={i} item={item} />
                ))}
            </div>
          </div>
        </div>
      </div>

      <div className="lg:hidden w-screen overflow-hidden py-8 relative -ml-4">
        <div className="flex space-x-6 animate-scroll-x whitespace-nowrap px-4">
          {[...loadReviewData, ...loadReviewData, ...loadReviewData].map(
            (item, i) => (
              <div key={i} className="inline-block whitespace-normal align-top">
                <TestimonialCard item={item} />
              </div>
            )
          )}
        </div>
      </div>
    </section>
  );
};

export default HomeTestimonial;