// @ts-nocheck

"use client";
import React from "react";
import { useForm, Controller } from "react-hook-form";
import Button from "../shared/reusableComponents/Reusablebutton";
import InputComponent from "../shared/reusableComponents/InputComponent";
import CustomTextAria from "../shared/reusableComponents/CustomTextAria";
import Image from "next/image";
import PhoneValidationExample from "../shared/PhoneInput";
import { Icon } from "@iconify/react";
import Link from "next/link";
import Divider from "../shared/Divider";
import CustomSelect from "../shared/reusableComponents/CustomSelect";
import Size from "../icons/Size";
import Upload_cover from "../shared/reusableComponents/Upload_Cover";
import { useQuery, useMutation } from "@tanstack/react-query";
import apiServiceCall from "@/utils/api/shared/apiServiceCall";
import { useTranslations } from "next-intl"; // استخدم useTranslations للـ client side

const ListYourPropertyForm = () => {
  const t = useTranslations("Header"); // استخدم useTranslations للـ client side

  const [files, setFiles] = React.useState<File[]>([]);
  const {
    register,
    handleSubmit,
    control,
    reset,
    formState: { errors },
  } = useForm();

  const {
    data: cities,
    isLoading: cityIsLoading,
    isSuccess: cityIsSuccess,
  } = useQuery({
    queryKey: ["city"],
    queryFn: async () => apiServiceCall({ url: "city" }),
  });
  const {
    data: types,
    isLoading: typeIsLoading,
    isSuccess: typeIsSuccess,
  } = useQuery({
    queryKey: ["type"],
    queryFn: async () => apiServiceCall({ url: "type" }),
  });
  const {
    data: areas,
    isLoading: areaIsLoading,
    isSuccess: areaIsSuccess,
  } = useQuery({
    queryKey: ["area"],
    queryFn: async () => apiServiceCall({ url: "area" }),
  });
  const {
    data: categories,
    isLoading: categoryIsLoading,
    isSuccess: categoryIsSuccess,
  } = useQuery({
    queryKey: ["category"],
    queryFn: async () => apiServiceCall({ url: "category" }),
  });

  const {
    data: faqData,
    isLoading: faqIsLoading,
    isSuccess: faqIsSuccess,
  } = useQuery({
    queryKey: ["list_property_FAQ"],
    queryFn: async () => apiServiceCall({ url: "list_property_FAQ" }),
  });

  const generateOptions = (data) => {
    return data?.map((item) => ({
      value: item?.id,
      label: item?.name,
    }));
  };

  //   const {
  //     data: areas,
  //     refetch,
  //     isSuccess: areasIsSuccess,
  //   } = useQuery({
  //     queryKey: ["area"],
  //     queryFn: async () =>
  //       apiServiceCall({
  //         url: `area?city_id=${props.formOptions.watch("city").value}`,
  //       }),
  //     enabled: !props.formOptions.watch("city") ? false : true,
  //   });

  const { mutate, isError, isSuccess, isPending } = useMutation({
    mutationFn: (data) => {
      const formData = new FormData();
      formData.append("name", data.name);
      formData.append("phone", data.phone);
      formData.append("email", data.email);
      formData.append("description", data.description);
      formData.append("city_id", data.city.value);
      formData.append("area_id", data.area.value);
      formData.append("category_id", data.category.value);
      formData.append("type_id", data.type.value);
      formData.append("price", data.price);
      formData.append("size", data.size);
      formData.append("bathrooms_count", data.bathrooms_count);
      formData.append("bedrooms_count", data.bedrooms_count);

      // Append each file to the FormData
      if (files && files.length > 0) {
        files.forEach((file) => {
          formData.append("attachments[]", file);
        });
      }

      return apiServiceCall({
        url: "list_property_from",
        body: formData,
        method: "POST",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
    },
    onError: (error) => {
      console.error("Error submitting property form:", error);
    },
    onSuccess: () => {
 
      reset();
      setFiles([]);
    },
  });

 

  const onSubmit = (data: any) => {
 
    mutate(data);
  };

  const handleFileChange = (uploadedFiles: File[]) => {
    setFiles(uploadedFiles);
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="bg-white-50 rounded-lg space-y-4 col-span-12 lg:col-span-7 md:order-2 lg:order-1 px-5 py-5 max-md:order-2 text-sm md:text-base"
    >
      <div className="flex flex-col lg:flex-row gap-5">
        <div className="w-full lg:w-1/2 border border-gray-300 bg-white rounded-lg p-5">
          <h2 className="text-4xl mb-5">{t("List_Your_Property")}</h2>
          <p className="text-xl font-light mb-5">
            {t("Share_your_details_to_list_your_property_for_everyone_to_see")}
          </p>
          <h3 className="text-xl font-light mb-5">{t("Owner_Details")}</h3>

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="text"
            label="Full Name"
            placeholder="Full Name"
            name="name"
            required
            {...register("name", { required: "Full name is required" })}
          />
          {errors.name && (
            <p className="text-red-500 text-sm mt-1">{errors.name.message}</p>
          )}

          <Controller
            name="phone"
            control={control}
            defaultValue=""
            rules={{ required: t("phone_required") }}
            render={({ field }) => (
              <PhoneValidationExample
                className="mt-5 [&_.phone-input-wrapper]:!bg-bodyBg [&_input]:!bg-bodyBg [&_.phone-input-wrapper]:!p-0 [&_.phone-input-wrapper]:!pl-3 [&_.phone-input-wrapper]:!gap-2 [&_input]:!p-4 [&_input]:!pl-0 [&_.phone-input-wrapper]:!border-0"
                label={t("phone_number")}
                value={field.value}
                onChange={field.onChange}
              />
            )}
          />
          {errors.phone && (
            <p className="text-red-500 text-sm mt-1">{errors.phone.message}</p>
          )}

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="email"
            label="Email Address"
            placeholder="Email Address"
            name="email"
            required
            {...register("email", { required: "Full name is required" })}
          />
          {errors.email && (
            <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>
          )}

          <Divider className="my-5" />

          <h3 className="text-xl font-light mb-5">{t("Owner Details")}</h3>

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="text"
            label="Asking Price"
            placeholder="Asking Price"
            name="price"
            required
            {...register("price", { required: "Full name is required" })}
          />
          {errors.price && (
            <p className="text-red-500 text-sm mt-1">{errors.price.message}</p>
          )}

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="number"
            label="Property Size"
            placeholder="Property Size"
            name="size"
            required
            {...register("size", { required: "Property size is required" })}
          />
          {errors.size && (
            <p className="text-red-500 text-sm mt-1">{errors.size.message}</p>
          )}

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="number"
            label="Number of Bathrooms"
            placeholder="Number of Bathrooms"
            name="bathrooms_count"
            required
            {...register("bathrooms_count", {
              required: "Number of bathrooms is required",
            })}
          />
          {errors.bathrooms_count && (
            <p className="text-red-500 text-sm mt-1">
              {errors.bathrooms_count.message}
            </p>
          )}

          <InputComponent
            className="mt-5 [&_input]:bg-bodyBg [&_input]:!border-0"
            type="number"
            label="Number of Bedrooms"
            placeholder="Number of Bedrooms"
            name="bedrooms_count"
            required
            {...register("bedrooms_count", {
              required: "Number of bedrooms is required",
            })}
          />
          {errors.bedrooms_count && (
            <p className="text-red-500 text-sm mt-1">
              {errors.bedrooms_count.message}
            </p>
          )}

          <CustomSelect
            name="category"
            control={control}
            width="100%"
            options={generateOptions(categories?.data)}
            
            label="Category"
            className="mt-5"
          />

          <CustomSelect
            name="type"
            control={control}
            width="100%"
            options={generateOptions(types?.data)}
            
            label="Proeprty Type"
            className="mt-5"
          />

          <CustomSelect
            name="city"
            control={control}
            width="100%"
            isLoading={cityIsLoading}
            options={generateOptions(cities?.data)}
            
            label="City"
            className="mt-5"
          />

          <CustomSelect
            name="area"
            control={control}
            width="100%"
            options={generateOptions(areas?.data?.data)}
            
            label="Area"
            className="mt-5"
          />

          <div className="mt-5">
            <Upload_cover multi setFile={handleFileChange} acceptType=".jpg, .jpeg, .png" />
          </div>

          <CustomTextAria
            className="mt-5 [&_textarea]:bg-bodyBg [&_textarea]:!border-0"
            label="Proeprty Description"
            placeholder="Proeprty Description"
            name="description"
            {...register("description", { required: "Full name is required" })}
          />
          {isSuccess && (
            <p className="text-green-500 text-sm mt-1">{t("sent_success")}</p>
          )}

          <Button className="mt-5" type="submit" styleMe>
            {t("send")}
          </Button>
        </div>
        <div className="w-full lg:w-1/2">
          <div className="w-full p-5 rounded-lg border border-gray-300 bg-white sticky top-5 flex flex-col justify-between">
            <div>
              <h2 className="text-4xl mb-8">{t("Why_List_with_Us")}</h2>
              {faqData?.data?.data?.map((item, index) => (
                <div className="flex items-start gap-3 mb-4" key={item.id}>
                  <div className="flex items-center justify-center rounded-lg">
                    <Icon
                      className="text-secondary text-2xl"
                      icon="simple-line-icons:check"
                    />
                  </div>

                  <div className="w-full">
                    <h3 className="text-dark-blue-500 mb-2 text-xl text-primary">
                      {item.question}
                    </h3>
                    <p className="text-dark-blue-400 text-base font-light text-[#6B665F]">
                      {item.answer}
                    </p>
                  </div>
                </div>
              ))}
              {faqIsLoading && (
                <div className="text-center py-4">Loading...</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </form>
  );
};

export default ListYourPropertyForm;