"use client";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import { ChevronRight } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { ServicesLoading } from "./loading";
import { EmptyServices } from "./empty";
import { useServiceDetail } from "@/store/useService";
import { cardVariants, containerVariants } from "@/lib/animations";

export function ServicePageServices() {
  const t = useTranslations();
  const locale = useLocale();
  const setServiceId = useServiceDetail((state) => state.setServiceId);

  // get request
  const { data, isLoading, isError } = useQuery({
    queryKey: ["firesafety"],
    queryFn: () => httpClient(endPoints.services.all),
    select: (data) => {
      const serviceData = data?.data?.data?.results;
      return serviceData.reduce(
        (resultArray: any, item: any, index: number) => {
          const chunkIndex = Math.floor(index / 4);

          if (!resultArray[chunkIndex]) {
            resultArray[chunkIndex] = []; // Yangi chunk boshlash
          }

          resultArray[chunkIndex].push(item);

          return resultArray;
        },
        [] as any[][],
      );
    },
  });

  return (
    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header for github */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="space-y-4 md:space-y-6"
        >
          <div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
            <DotAnimatsiya />
            {t("home.services.title")}
          </div>
          <h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
            {t("home.services.subtitle")}
          </h1>
          <p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
            {t("home.services.description")}
          </p>
        </motion.div>

        {/* Conditional Rendering */}
        {isLoading ? (
          <div className="my-10">
            <ServicesLoading />
          </div>
        ) : !data || (Array.isArray(data) && data.length === 0) ? (
          <div className="my-10">
            <EmptyServices />
          </div>
        ) : (
          data.map((item: any, index: number) => (
            <motion.div
              key={index}
              variants={containerVariants}
              initial="hidden"
              animate="visible"
            >
              {/* cards */}
              <div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-3 my-4">
                {item[0] && (
                  <motion.div
                    variants={cardVariants}
                    className="sm:w-[55%] overflow-hidden w-full"
                    onClick={() => setServiceId(item[0].id)}
                  >
                    <Link
                      href={`/${locale}/services/detail`}
                      className="overflow-hidden block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
                    >
                      <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                        {item[0]?.title}
                      </p>
                      <p className="font-almarai text-gray-400 max-w-80 w-full">
                        {item[0]?.subtitle}
                      </p>
                      <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
                        {t("home.services.learnmore")}{" "}
                        <ChevronRight size={20} />
                      </button>
                      <Image
                        src={item[0]?.main_image}
                        alt="images"
                        width={200}
                        height={100}
                        className="object-contain sm:absolute bottom-0 -right-2 z-10"
                      />
                    </Link>
                  </motion.div>
                )}

                {item[1] && (
                  <Link
                    href={`/${locale}/services/detail`}
                    className="sm:w-[45%] w-full"
                  >
                    <motion.div
                      onClick={() => setServiceId(item[1]?.id)}
                      variants={cardVariants}
                    >
                      <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
                        <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                          {item[1]?.title}
                        </p>
                        <p className="font-almarai text-gray-400 max-w-70 w-full">
                          {item[1]?.subtitle}
                        </p>
                        <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
                          {t("home.services.learnmore")}{" "}
                          <ChevronRight size={20} />
                        </button>
                        <Image
                          src={item[1]?.main_image}
                          alt="images"
                          width={200}
                          height={100}
                          className="object-contain sm:absolute -bottom-4 -right-4 z-10"
                        />
                      </div>
                    </motion.div>
                  </Link>
                )}
              </div>

              <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-3 w-full mx-auto">
                {item[2] && (
                  <motion.div
                    variants={cardVariants}
                    onClick={() => setServiceId(item[2]?.id)}
                    className="sm:w-[40%] w-full -mt-5"
                  >
                    <Link
                      href={`/${locale}/services/detail`}
                      className="block hover:cursor-pointer relative rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
                    >
                      <Image
                        src={item[2]?.main_image}
                        alt="images"
                        width={250}
                        height={200}
                        className="object-contain mt-5"
                      />
                      <div className="space-y-1 pb-3 px-5">
                        <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                          {item[2]?.title}
                        </p>
                        <p className="font-almarai text-gray-400 max-w-80 w-full">
                          {item[2]?.subtitle}
                        </p>
                        <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
                          {t("home.services.learnmore")}{" "}
                          <ChevronRight size={20} />
                        </button>
                      </div>
                    </Link>
                  </motion.div>
                )}

                <div className="sm:w-[60%] w-full">
                  {item[3] && (
                    <motion.div
                      onClick={() => setServiceId(item[3]?.id)}
                      variants={cardVariants}
                    >
                      <Link href={`/${locale}/services/detail`}>
                        <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
                          <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                            {item[3]?.title}
                          </p>
                          <p className="font-almarai text-gray-400 max-w-70 w-full">
                            {item[3]?.subtitle}
                          </p>
                          <button className="font-almarai sm:mt-40 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
                            {t("home.services.learnmore")}{" "}
                            <ChevronRight size={20} />
                          </button>
                          <Image
                            src={item[3]?.main_image}
                            alt="images"
                            width={200}
                            height={100}
                            className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
                          />
                        </div>
                      </Link>
                    </motion.div>
                  )}
                </div>
              </div>
            </motion.div>
          ))
        )}
      </div>
    </div>
  );
}