"use client";
import EmptyData from "@/components/EmptyData";
import { CategoryType } from "@/lib/types";
import httpClient from "@/request/api";
import { getRouteLang } from "@/request/getLang";
import { endPoints } from "@/request/links";
import { useCategory } from "@/store/useCategory";
import { useQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import CatalogCardSkeletonSmall from "./loading";
import Image from "next/image";
import { ArrowUpRight } from "lucide-react";

export default function FilterCatalog() {
  const language = getRouteLang();
  const setCategory = useCategory((state) => state.setCategory);
  const { data, isLoading } = useQuery({
    queryKey: ["category", language],
    queryFn: () => httpClient(endPoints.category.all),
    select: (data): CategoryType[] => data?.data?.results,
  });
  useEffect(() => {
    console.log("product catalog data: ", data);
  }, [data]);

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(3)].map((_, index) => (
          <CatalogCardSkeletonSmall key={index} />
        ))}
      </div>
    );
  }

  // Ma'lumot yo'q holati
  if (!data || data.length === 0) {
    return (
      <EmptyData
        title="Katalog topilmadi"
        description="Hozircha kategoriyalar mavjud emas. Keyinroq qaytib keling."
        icon="shopping"
      />
    );
  }

  return (
    <div className="max-w-200 w-full mx-auto space-x-5 px-5 flex items-center justify-around my-10 -mt-30 pb-5 relative z-20 sm:overflow-x-hidden overflow-x-scroll">
      {data?.map((item) => (
        <div
          onClick={() => setCategory(item)}
          className="shrink-0 group relative w-55 h-60 overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 transition-all duration-500 hover:-translate-y-1 hover:border-red-700 cursor-pointer"
        >
          {/* Background glow effect */}
          <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

          {/* Decorative corner accent */}
          <div className="absolute top-0 right-0 w-16 h-16 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

          {/* Content container */}
          <div className="relative h-full flex flex-col p-4">
            {/* Title section */}
            <div className="mb-3">
              <div className="flex items-start justify-between gap-2">
                <h3 className="text-lg font-unbounded font-bold text-white leading-tight transition-colors duration-300">
                  {item.name}
                </h3>

                <div className="shrink-0 w-6 h-6 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
                  <ArrowUpRight
                    className="w-3.5 h-3.5 text-white"
                    strokeWidth={2.5}
                  />
                </div>
              </div>
            </div>

            {/* Image container */}
            <div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
              <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent z-10" />

              <div className="relative w-full h-full">
                <Image
                  src={item.image}
                  alt={item.name}
                  fill
                  className="object-contain p-3 transition-transform duration-700 group-hover:scale-105"
                />
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
