"use client";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import React, { useState } from "react";
// import ReCAPTCHA from "react-google-recaptcha";
import searchw from "../../../public/assets/icons/searchw.svg";
import searchp from "@/public/assets/icons/primarysearch.svg";
import HeroSwiper from "./HeroSwiper";
import apiServiceCall from "@/lib/apiServiceCall";
import { useQuery } from "@tanstack/react-query";
import Select from "react-select";
type SelectOption = {
  value: string | number;
  label: string;
};

type FormValues = {
  type_id: string;
  category_id: string;
  city_id: string;
  captchaToken: string;
};

const HeroHome = ({
  locale,
  homeData,
  images,
}: {
  locale: string;
  homeData: any;
  images: any;
}) => {
  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
  const t = useTranslations("BannerSection");
  const router = useRouter();
  const pathname = usePathname();

  const { data: categoriesData, isLoading: categoriesLoading } = useQuery({
    queryKey: ["categories"],
    queryFn: () =>
      apiServiceCall({
        url: `categories`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      }),
    select: (data) =>
      data?.data?.map((item: any) => {
        return {
          value: item?.id,
          label: item?.locales?.name,
        };
      }),
  });

  const { data: citiesData, isLoading: citiesLoading } = useQuery({
    queryKey: ["cities"],
    queryFn: () =>
      apiServiceCall({
        url: `cities`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      }),
    select: (data) =>
      data?.data?.map((item: any) => {
        return {
          value: item?.id,
          label: item?.locales?.name,
        };
      }),
  });
  const { data: typesData, isLoading: typesLoading } = useQuery({
    queryKey: ["typesData"],
    queryFn: () =>
      apiServiceCall({
        url: `types`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      }),
    select: (data) =>
      data?.data?.map((item: any) => {
        return {
          value: item?.id,
          label: item?.locales?.name,
        };
      }),
  });

  const {
    control,
    handleSubmit,
    setValue,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      type_id: "",
      category_id: "",
      city_id: "",
      captchaToken: "",
    },
  });

  const handleCaptchaChange = (token: string | null) => {
    if (token) {
      setValue("captchaToken", token);
      clearErrors("captchaToken");
      setCaptchaToken(token);
    } else {
      setError("captchaToken", {
        type: "manual",
        message: "Please verify you are not a robot",
      });
      setCaptchaToken(null);
    }
  };

  // Handle form submission
  const onSubmit: SubmitHandler<FormValues> = (data) => {
    // Only proceed if captcha is verified
    // if (!captchaToken) {
    //   setError("captchaToken", {
    //     type: "manual",
    //     message: "Please verify you are not a robot",
    //   });
    //   return;
    // }
    // Build the query string
    const queryParams = new URLSearchParams();

    // Add each filter value to URL params if it has a value
    if (data?.type_id) queryParams.append("type_id", data?.type_id);
    if (data?.category_id) queryParams.append("category_id", data?.category_id);
    if (data?.city_id) queryParams.append("city_id", data?.city_id);
    if (data?.type_id) queryParams.append("type_id", data?.type_id);
    if (data?.category_id) queryParams.append("category_id", data?.category_id);
    if (data?.city_id) queryParams.append("city_id", data?.city_id);

    // Extract locale from pathname (assuming format /[locale]/...)
    const localeMatch = pathname.match(/^\/([^/]+)/);
    const locale = localeMatch ? localeMatch[1] : "";

    router.push(
      `/${locale}/${
        data?.category_id || "property"
      }/filter?${queryParams.toString()}`
    );
  };

  return (
    <div
      className="mx-auto relative w-full !h-[620px] sm:!h-[350px] lg:!h-[598px] xl:!h-[598px]  "
      data-aos="fade-up"
      data-aos-duration="1500"
      data-aos-delay="100"
    >
      <div className="absolute inset-0 z-0">
        <HeroSwiper images={images} />
      </div>

      <div className="container mx-auto h-full !px-0  ">
        <div className="absolute  inset-0 z-10 bg-gradient-to-t from-[#000000] h-[50%] to-transparent top-[50%]" />
        <div
          className={`relative z-10 text-white w-full 
      w-[calc(100%-20px)]
      lg:w-[884px] 
      flex flex-col justify-end h-full gap-4 md:gap-7
      rtl:left-0 rtl:right-[10px] px-5 ltr:2xl:pl-[60px] rtl:2xl:pr-[60px] pb-5 lg:pb-16 rtl:sm:left-0 rtl:sm:right-[16px] rtl:lg:left-0 rtl:lg:right-[120px]
      `}
        >
          <div className="flex flex-col gap-4 sm:gap-1  ">
            <span
              className="text-[16px] lg:text-[20px] xl:text-[32px] lg:leading-[60px] font-light line-clamp-4 lg:line-clamp-6"
              data-aos="fade-up"
              data-aos-duration="1500"
              data-aos-delay="300"
            >
              {/* {t("Explore")} */}
              {homeData?.description}
            </span>
            <span
              className="text-[32px] sm:text-[25px] xl:text-[72px] lg:text-[52px] font-normal lg:leading-[110px] line-clamp-3"
              data-aos="fade-up"
              data-aos-duration="1500"
              data-aos-delay="400"
            >
              {/* {t("EMPOWRING")} */}
              {homeData?.name}
            </span>
          </div>
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="!text-dark flex flex-col sm:items-center sm:flex-row gap-4 md:gap-6 w-full"
            data-aos="fade-up"
            data-aos-duration="1500"
            data-aos-delay="500"
          >
            {/* ------------------------------------ */}
            <div className="relative flex flex-col sm:w-[150px] md:w-[220px] xl:w-[282px] gap-[11px]">
              <span className="text-white sm:text-[10px] md:text-[12px] lg:text-[14px] font-extralight">
                {/* {t(item.title)} */}
                {t("Property Type")}
              </span>
              <Controller
                name="type_id"
                control={control}
                render={({ field }) => (
                  <Select
                    {...field}
                    options={typesData}
                    className="text-[11px] md:text-[16px] font-normal "
                    placeholder={t("select type")}
                    classNamePrefix="react-select"
                    isLoading={typesLoading}
                    instanceId="type-select"
                    menuPortalTarget={
                      typeof window !== "undefined" ? document.body : null
                    }
                    styles={{
                      control: (base) => ({
                        ...base,
                        background: "transparent",
                        border: "none",
                        boxShadow: "none",
                        padding: 0,
                        minHeight: "unset",
                        zIndex: 1000,
                      }),
                      valueContainer: (base) => ({
                        ...base,
                        padding: 0,
                      }),
                      singleValue: (base) => ({
                        ...base,
                        color: "white",
                      }),
                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),

                      menu: (base) => ({
                        ...base,
                        zIndex: 9999,
                        position: "absolute",
                      }),
                      option: (base, state) => ({
                        ...base,
                        color: state.isFocused ? "white" : "black",
                        backgroundColor: state.isFocused ? "#5a0816" : "white",

                        ":active": {
                          backgroundColor: "#5A081626",
                          color: "black",
                        },
                      }),
                      indicatorSeparator: () => ({
                        display: "none",
                      }),
                      dropdownIndicator: (base, state) => ({
                        ...base,

                        color: state.isFocused ? "white" : "white",
                        ":hover": {
                          color: "white",
                        },
                      }),
                    }}
                    onChange={(option) => field.onChange(option?.value)}
                    value={
                      categoriesData?.find(
                        (option: SelectOption) => option.value === field.value
                      ) || null
                    }
                  />
                )}
              />
              <div className="border-b border-white/60 w-full"></div>
            </div>

            {/* ------------------------------------ */}
            <div className="flex flex-col sm:w-[150px] md:w-[220px] xl:w-[282px] gap-[11px]">
              <span className="text-white sm:text-[10px] md:text-[12px] lg:text-[14px] font-extralight">
                {/* {t(item.title)} */}
                {t("Category")}
              </span>
              <Controller
                name="category_id"
                control={control}
                render={({ field }) => (
                  <Select
                    {...field}
                    menuPortalTarget={
                      typeof window !== "undefined" ? document.body : null
                    }
                    options={categoriesData}
                    className="text-[11px] md:text-[16px] font-normal"
                    placeholder={t("select category")}
                    classNamePrefix="react-select"
                    isLoading={categoriesLoading}
                    instanceId="category-select"
                    styles={{
                      control: (base) => ({
                        ...base,
                        background: "transparent",
                        border: "none",
                        boxShadow: "none",
                        padding: 0,
                        minHeight: "unset",
                      }),
                      singleValue: (base) => ({
                        ...base,
                        color: "white",
                      }),
                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                      menu: (base) => ({
                        ...base,
                        zIndex: 50,
                      }),
                      option: (base, state) => ({
                        ...base,
                        color: state.isFocused ? "white" : "black",
                        backgroundColor: state.isFocused ? "#5a0816" : "white",

                        ":active": {
                          backgroundColor: "#5A081626",
                          color: "black",
                        },
                      }),
                      indicatorSeparator: () => ({
                        display: "none",
                      }),
                      valueContainer: (base) => ({
                        ...base,
                        padding: 0,
                      }),
                      dropdownIndicator: (base, state) => ({
                        ...base,
                        color: state.isFocused ? "white" : "white",
                        ":hover": {
                          color: "white",
                        },
                      }),
                    }}
                    onChange={(option) => field.onChange(option?.value)}
                    value={
                      categoriesData?.find(
                        (option : SelectOption) => option.value === field.value
                      ) || null
                    }
                  />
                )}
              />
              <div className="border-b border-white/60 w-full"></div>
            </div>
            {/* ------------------------------------ */}

            {/* ------------------------------------ */}
            <div className="flex flex-col sm:w-[150px] md:w-[220px] xl:w-[282px] gap-[11px]">
              <span className="text-white sm:text-[10px] md:text-[12px] lg:text-[14px] font-extralight">
                {/* {t(item.title)} */}
                {t("City")}
              </span>
              <Controller
                name="city_id"
                control={control}
                render={({ field }) => (
                  <Select
                    {...field}
                    menuPortalTarget={
                      typeof window !== "undefined" ? document.body : null
                    }
                    options={citiesData}
                    className="text-[11px] md:text-[16px] font-normal"
                    placeholder={t("select city")}
                    classNamePrefix="react-select"
                    isLoading={citiesLoading}
                    instanceId="city-select"
                    styles={{
                      control: (base) => ({
                        ...base,
                        background: "transparent",
                        border: "none",
                        boxShadow: "none",
                        padding: 0,
                        minHeight: "unset",
                      }),
                      valueContainer: (base) => ({
                        ...base,
                        padding: 0,
                      }),
                      singleValue: (base) => ({
                        ...base,
                        color: "white",
                      }),
                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                      menu: (base) => ({
                        ...base,
                        zIndex: 50,
                      }),
                      option: (base, state) => ({
                        ...base,
                        color: state.isFocused ? "white" : "black",
                        backgroundColor: state.isFocused ? "#5a0816" : "white",

                        ":active": {
                          backgroundColor: "#5A081626",
                          color: "black",
                        },
                      }),
                      indicatorSeparator: () => ({
                        display: "none",
                      }),
                      dropdownIndicator: (base, state) => ({
                        ...base,
                        color: state.isFocused ? "white" : "white",
                        ":hover": {
                          color: "white",
                        },
                      }),
                    }}
                    onChange={(option) => field.onChange(option?.value)}
                    value={
                      citiesData?.find(
                        (option : SelectOption) => option.value === field.value
                      ) || null
                    }
                  />
                )}
              />
              <div className="border-b border-white/60 w-full"></div>
            </div>
            {/* ------------------------------------ */}

            {/* <div className="w-full sm:w-auto">
              <ReCAPTCHA
                sitekey="YOUR_SITE_KEY_HERE" // Replace with your actual site key
                onChange={handleCaptchaChange}
                className="mb-4"
              />
              {errors.captchaToken && (
                <p className="text-red-500 text-sm mt-1">
                  Please verify you are not a robot
                </p>
              )}
            </div> */}

            <button
              type="submit"
              // disabled={!captchaToken}
              className="flex justify-end border-0 bg-transparent p-0 cursor-pointer relative group overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
              aria-label={t("Search Properties")}
            >
              <Image
                src={searchw}
                alt="searchw"
                className="w-[40px] h-[40px] md:w-[54px] md:h-[54px]  group-hover:opacity-0 transition-opacity duration-300"
              />
              <Image
                src={searchp}
                alt="searchw"
                className="w-[40px] h-[40px] md:w-[54px] md:h-[54px] absolute  opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              />

              {/* <div class="relative w-64 h-40 group overflow-hidden">
              <img src="/images/normal.jpg" class="w-full h-full object-cover group-hover:opacity-0 transition-opacity duration-300" />
              <img src="/images/hover.jpg" class="w-full h-full object-cover absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </div> */}

              {/* ---------------------الصوره هنا---------------------- */}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default HeroHome;