"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";

export function OurService() {
  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) => data?.data?.data?.results,
  });

  console.log("service data: ", data);

  // Animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: [0.22, 1, 0.36, 1] as const,
      },
    },
  };

  return (
    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
      <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>
        ) : (
          <motion.div
            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-5 my-10">
              <motion.div
                variants={cardVariants}
                className="sm:w-[55%] overflow-hidden w-full"
                onClick={() => setServiceId(data[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">
                    {data[0].title}
                  </p>
                  <p className="font-almarai text-gray-400 max-w-80 w-full">
                    {data[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={data[0].main_image}
                    alt="images"
                    width={200}
                    height={100}
                    className="object-contain sm:absolute bottom-0 -right-2 z-10"
                  />
                </Link>
              </motion.div>

              <motion.div
                onClick={() => setServiceId(data[1].id)}
                variants={cardVariants}
                className="sm:w-[45%] w-full"
              >
                <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">
                    {data[1].title}
                  </p>
                  <p className="font-almarai text-gray-400 max-w-70 w-full">
                    {data[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={data[1].main_image}
                    alt="images"
                    width={200}
                    height={100}
                    className="object-contain sm:absolute -bottom-4 -right-4 z-10"
                  />
                </div>
              </motion.div>
            </div>

            <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
              <motion.div
                variants={cardVariants}
                onClick={() => setServiceId(data[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={data[2].main_image}
                    alt="images"
                    width={300}
                    height={200}
                    className="object-contain mt-5"
                  />
                  <div className="space-y-4 py-6 px-8">
                    <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                      {data[2].title}
                    </p>
                    <p className="font-almarai text-gray-400 max-w-80 w-full">
                      {data[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">
                <motion.div
                  onClick={() => setServiceId(data[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">
                        {data[3].title}
                      </p>
                      <p className="font-almarai text-gray-400 max-w-70 w-full">
                        {data[3].subtitle}
                      </p>
                      <button className="font-almarai sm:mt-35 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={data[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>

                <motion.div
                  variants={cardVariants}
                  className="py-4 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
                >
                  <h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
                    {t("home.services.viewMoreServices")}
                  </h2>
                  <Link
                    href="/services"
                    className="font-almarai shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
                  >
                    {t("home.services.viewMore")}
                  </Link>
                </motion.div>
              </div>
            </div>
          </motion.div>
        )}
      </div>
    </div>
  );
}