"use client";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import Title from "../../components/Title";
import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "../../components/ui/carousel";
import Image from "next/image";
import { Data } from "../../components/Data";
import Link from "next/link";
import { ArrowUpFromDot, MapPin, Star } from "lucide-react";
import Autoplay from "embla-carousel-autoplay";
import Fade from "embla-carousel-fade";
import CompanyCard from "../../components/Cards/CompanyCard";
import CPagination from "../../components/ui/pagination";
import CategoryAndFilter from "../../components/CategoryAndFilter";
import SearchComponent from "../../components/SearchComponent";
import Filter from "../../components/Filter";
import getCompanies from "../../../server/getCompanies";
import axiosClient from "../../../services/axiosClient";
import getCities from "../../../server/getCities";
import getCategories from "../../../server/getCategories";
import Spinner from "../../components/ui/Spinner";

export default function Companies() {
  const params = useParams();
  const locale = params?.locale;
  const pathname = usePathname();
  const t = useTranslations("");
  const [api, setApi] = useState();
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);
  const [companies, setCompanies] = useState([]);
  const [cities, setCities] = useState([]);
  const [categories, setCategories] = useState([]);
  const searchParams = useSearchParams();
  const [isLoading, setIsLoading] = useState(false);

  // Get Companies
  const getCompaniesData = async () => {
    const page = searchParams.get("page") || 1;
    const search = searchParams.get("search") || "";
    const location = searchParams.get("city_id") || "";
    // Получаем все значения для categories[]
    const categories = searchParams.getAll("categories[]") || [];

    try {
      const res = await getCompanies({
        params: {
          locale: "en",
          page,
          search,
          location,
          categories,
        },
      });
      setCompanies(res || []);
    } catch (error) {
      console.log("🚀 ~ getCompanies ~ error:", error);
    }
  };

  // Get Cities
  const getCitiesData = async () => {
    try {
      setIsLoading(true);
      const cities = await getCities();
      const categories = await getCategories();
      setCities(cities?.data || []);
      setCategories(categories?.data || []);
    } catch (error) {
      console.log("🚀 ~ getCities ~ error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getCitiesData();
  }, [locale]);

  useEffect(() => {
    getCompaniesData();
    // getCitiesData();
  }, [searchParams, locale]);

  useEffect(() => {
    if (!api) {
      return;
    }

    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap() + 1);

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1);
    });
  }, [api]);

  const sorts = [
    { id: 1, name: "Rating", value: "rating" },
    { id: 2, name: "Popularity", value: "popularity" },
  ];

  if (isLoading && (companies?.data?.length === 0 || cities?.length === 0)) {
    return <Spinner isSpinning />;
  }

  return (
    <div className="max-w-full! w-full bg-white ">
      <div className="w-full container flex flex-col gap-5 lg:gap-7 py-10 xl:py-20 ">
        <Title
          isCentered={true}
          className="max-w-210.5 mx-auto "
          classNameTitle="leading-[113%]! "
          classNameSubTitle="mt-4 text-lg font-medium normal-case"
          classNameLink="text-sm font-medium mt-8 md:mt-10 lg:mt-16 border-none"
          title={t("companies.companysPageTitle")}
          subTitle={t("companies.companysPageDescription")}
          link="/offers"
          linkText={t("viewServices")}
        />
        {companies?.subscribed && (
          <Carousel
            setApi={setApi}
            opts={{
              align: "start",
              loop: true,
            }}
            plugins={[
              Autoplay({
                delay: 5000,
                stopOnMouseEnter: true,
                stopOnInteraction: false,
              }),
              //   ClassNames(),
              Fade(),
            ]}
            className="w-full flex flex-col gap-8 rounded-[14px] md:rounded-[20px] overflow-hidden"
          >
            <CarouselContent className="rounded-[14px] md:rounded-[20px]">
              {companies?.subscribed?.map((item, index) => (
                <CarouselItem key={index}>
                  <div className="w-full flex-row min-h-62.75 md:min-h-101.25! p-5 md:px-12.5 flex items-center  justify-between relative rounded-[10px] md:rounded-[20px] overflow-hidden group">
                    <div className="absolute inset-0">
                      <div
                        className={`absolute inset-0 bg-[url('/explore.png')] bg-cover bg-center ${
                          current === index + 1 ? "opacity-100" : "opacity-80"
                        } transition-all duration-700`}
                        style={{
                          backgroundImage: item?.banner
                            ? `url(${item?.banner})`
                            : `url(${item?.banner})`,
                        }}
                      ></div>

                      {/* Overlay для затемнения */}
                      <div className="absolute inset-0 bg-black/20"></div>
                    </div>

                    <div
                      className={`relative rounded-[14px] md:rounded-[20px] backdrop-blur-xl w-max z-10 flex flex-col gap-4 sm:gap-5 lg:gap-8 2xl:gap-11.25 items-center justify-center bg-[#383A5766] text-white px-4 py-5 md:p-6 text-center max-w-full ${
                        current === index + 1
                          ? "translate-y-0 opacity-100"
                          : "translate-y-full opacity-0"
                      } transition-all duration-500`}
                    >
                      {/* Title */}
                      <div className="flex w-full justify-between gap-2 md:gap-21.75">
                        <div className="flex flex-col items-start">
                          <h2 className="uppercase text-xs md:text-lg lg:text-xl font-bold text-start">
                            {item?.display_name}
                          </h2>
                          <p className="text-[0.7rem] md:text-lg lg:text-xl font-medium text-[#DCDEF3]">
                            {item?.category_name}
                          </p>
                        </div>
                        <div className="relative w-14 sm:w-24 shrink-0 aspect-[2/1.1]">
                          <Image
                            src={item?.logo}
                            alt={item?.category_name}
                            className="object-cover"
                            fill
                          />
                        </div>
                      </div>
                      {/* Address */}
                      <div className="flex w-full items-center justify-start gap-1 md:gap-2">
                        <MapPin className="size-3 md:size-5" />
                        <p className="text-xs md:text-base text-start">
                          {item?.full_address}
                        </p>
                      </div>
                      {/* Review and link */}
                      <div className="flex w-full items-center justify-start gap-3">
                        <div className="flex w-full items-center gap-1.5 md:gap-3">
                          <Star className="size-4 md:size-6 text-[#FFD33C] fill-[#FFD33C] mb-0.5" />
                          <p className=" md:font-medium text-base md:text-lg lg:text-[1.6rem]">
                            {item?.rating}
                          </p>
                        </div>
                        {/* Link */}
                        <Link
                          href="sdd"
                          className="min-w-max flex items-center  gap-2"
                        >
                          <p className="text-[0.7rem] md:text-lg font-semibold underline uppercase">
                            {" "}
                            {t("viewAll")}
                          </p>
                          <ArrowUpFromDot className="size-3 md:size-5 rotate-90" />
                        </Link>
                      </div>
                    </div>

                    {/* Popular */}
                    <div className="relative w-1 h-1 flex self-start ">
                      <div className="absolute top-0 right-0 bg-white px-2 md:px-3.5 py-0.5 flex flex-row gap-1 md:gap-1.5 items-center z-10 rounded-[9px]">
                        <p className="text-[0.5rem] md:text-base lg:text-lg font-medium text-[#2F346F]">
                          {t("popular")}
                        </p>
                        <Star
                          strokeWidth={1.5}
                          className="size-2 md:size-4 text-[#2F346F]"
                        />
                      </div>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselDots
              className="absolute bottom-4 max-[768px]:left-1/2  md:right-1 -translate-x-1/2"
              dotItemClassName="![width:16px] md:![width:24px] ![height:2px] !bg-gray-400 !rounded-none"
              dotItemActiveClassName="![width:32px] md:![width:57px] ![height:4px] !bg-white !rounded-full"
            />
          </Carousel>
        )}
      </div>
      {/* Companies /////////////////////////////*/}
      <div className="bg-[#FAFAFA]">
        <div className="container flex flex-col gap-8 lg:gap-12 xl:gap-16 py-5 ">
          <div className="flex flex-col gap-6 xl:gap-9">
            {/* Category and Filter */}
            <div className="w-full flex items-center md:items-start justify-between relative gap-10">
              <Filter
                filters={[
                  {
                    queryKey: "search",
                    translationKey: "companies.companySearchPlaceholder",
                    type: "search",
                    classNameSearch:
                      "w-full md:w-64 lg:w-80 xl:w-[494px] mr-auto",
                  },
                  {
                    data: cities,
                    queryKey: "city_id",
                    translationKey: "companies.companyFilterLocation",
                    type: "radio",
                    urlParamType: "id",
                  },
                  {
                    data: categories,
                    queryKey: "categories[]",
                    translationKey: "companies.companyFilterCategory",
                    type: "checkbox",
                    urlParamType: "id",
                  },
                  {
                    data: sorts,
                    queryKey: "sort_by",
                    translationKey: "companies.sortBy",
                    type: "radio",
                    urlParamType: "value",
                  },
                ]}
              />
            </div>
            {/* Companies */}
            {/* {isLoading && <Spinner isSpinning />} */}
            <div className="w-full  gap-4 lg:gap-5 xl:gap-7 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
              {companies?.data?.length ? (
                companies?.data?.map((item, index) => (
                  <CompanyCard key={index} item={item} />
                ))
              ) : (
                <div className="w-full flex items-center justify-center text-center text-xl py-4">
                  {t("companies.companyNotFound")}
                </div>
              )}
            </div>
          </div>
          <CPagination
            className="flex text-sm "
            totalPages={companies?.meta?.last_page}
          />
        </div>
      </div>
    </div>
  );
}