"use client";

import Button from "@/components/common/Button";
import React, { useState, useEffect } from "react";
import Select from "react-select";
import { toast } from "react-toastify";
import { useTranslations } from "next-intl";
import { getCategory } from "@/lib/actions/productCategoryAction";
import { useRouter } from "next/navigation";
import { useAppSelector, useAppDispatch } from "@/app/store/hooks";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useForm, FormProvider } from "react-hook-form";
import Input from "@/components/common/CustomInputField";
import { submitProductRequest } from "@/lib/actions/productRequestAction";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  requestProductSchema,
  RequestProductSchemaType,
} from "@/lib/validations/authSchema";
import { getStoredLocale } from "@/lib/getLocale";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import { useSelectTheme } from "@/hooks/useSelectTheme";

export default function RequestAProduct() {
  const { themeKey, isDarkMode, customStyles } = useSelectTheme();

  // end

  const { user } = useAppSelector((state) => state?.auth);
  const t = useTranslations();
  const dispatch = useAppDispatch();
  const router = useRouter();
  const locale = getStoredLocale();
  const [isLoading, setIsLoading] = useState(false);
  const [initialData, setInitialData] = useState([]);
  const [selectedRadio, setSelectedRadio] = useState<any>(null);
  const [dropdowns, setDropdowns] = useState<any>([]);
  const [categoryError, setCategoryError] = useState<string | null>(null);

  // for dropDown Start
  useEffect(() => {
    if (!user?.token) return;
    const fetchCategory = async () => {
      setIsLoading(true);
      try {
        const response = await getCategory(user.token);
        if (response.success && Array.isArray(response?.data)) {
          setInitialData(response?.data);
          setDropdowns([]);
          setSelectedRadio(null);
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg")
        );
      } finally {
        setIsLoading(false);
      }
    };
    fetchCategory();
  }, [user?.token]);

  const findNestedItem = (id: string, items: any): any => {
    for (const item of items) {
      if (item.id === id) return item;
      if (item.children.length > 0) {
        const found = findNestedItem(id, item.children);
        if (found) return found;
      }
    }
    return null;
  };

  const convertToSelectOptions = (items: any) => {
    return items?.map((item: any) => {
      const label = item?.title?.[locale];
      return {
        value: item?.id,
        label: label,
      };
    });
  };

  const handleRadioChange = (id: string) => {
    setSelectedRadio(id);
    setCategoryError(null);
    const selectedItem = findNestedItem(id, initialData);
    if (selectedItem && selectedItem.children.length > 0) {
      setDropdowns([
        {
          id: id,
          options: convertToSelectOptions(selectedItem.children),
          selectedValue: null,
        },
      ]);
    } else {
      setDropdowns([]);
    }
    methods.setValue("categories", [id], { shouldValidate: true });
  };

  const handleDropdownSelect = (dropdownIndex: number, selectedOption: any) => {
    if (!selectedOption) return;

    const selectedItem = findNestedItem(selectedOption.value, initialData);
    if (!selectedItem) return;

    const newDropdowns = [...dropdowns.slice(0, dropdownIndex + 1)];
    newDropdowns[dropdownIndex] = {
      ...newDropdowns[dropdownIndex],
      selectedValue: selectedOption,
    };

    if (selectedItem.children.length > 0) {
      newDropdowns.push({
        id: selectedOption.value,
        options: convertToSelectOptions(selectedItem.children),
        selectedValue: null,
      });
    }
    setDropdowns(newDropdowns);

    const allSelectedIds = getAllSelectedIdsForm();
    methods.setValue("categories", allSelectedIds, { shouldValidate: true });
  };

  const methods = useForm<RequestProductSchemaType>({
    resolver: zodResolver(requestProductSchema(t)),
    defaultValues: {
      title: "",
      description: "",
      categories: [],
    },
  });
  const {
    handleSubmit,
    formState: { errors },
  } = methods;

  // Helper to collect selected category and subcategory IDs
  const getAllSelectedIdsForm = () => {
    const ids: string[] = [];
    if (selectedRadio) ids.push(selectedRadio);
    dropdowns.forEach((dropdown: any) => {
      if (dropdown.selectedValue) ids.push(dropdown.selectedValue.value);
    });
    return ids;
  };

  const onSubmit = async (data: any) => {
    const categories = getAllSelectedIdsForm();
    setCategoryError(null);
    setIsLoading(true);
    const payload = {
      ...data,
      categories,
    };
    try {
      const res = await submitProductRequest(payload, user?.token);
      toast.success(res.data?.message || t("request_a_product.success"));
      methods.reset();
      setSelectedRadio(null);
      setDropdowns([]);
      setCategoryError(null);
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setIsLoading(false);
    }
  };
  const handleBack = () => {
    window.history.back();
  };
  return (
    <>
      <MobilePageHeader
        title={t("request_a_product.title")}
        onBack={handleBack}
      />
      <div className="max-lg:min-h-px">
        <div className="request-wrapper max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row min-h-[500px]">
            <div className="w-full max-w-[590px] mb-6 lg:mb-0 max-lg:hidden">
              <img
                src="/request-product.webp"
                alt={t("request_a_product.image_alt")}
                className="w-full max-h-[851px] h-full object-cover"
              />
            </div>
            <div className="w-full max-w-[682px] py-10 px-[20px] border-neutrals100 border bg-white max-h-[851px] overflow-y-auto max-lg:overflow-visible max-lg:max-h-full max-lg:max-w-full max-lg:min-h-[560px] max-sm:px-0 max-sm:bg-transparent max-sm:border-hidden max-sm:pt-1 dark:bg-card dark:border-darkborder max-sm:dark:bg-transparent">
              <div className="text-center">
                <h1 className="text-2xl font-bold mb-2.5 text-neutrals800 dark:text-white max-md:text-xl">
                  {t("request_a_product.title")}
                </h1>
                <p className="text-sm text-neutrals500 dark:text-neutrals400">
                  {t("request_a_product.description")}
                </p>
              </div>
              <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit(onSubmit)}>
                  <div className="mt-10">
                    <div className="mb-5">
                      <div className="block text-sm font-medium text-neutrals800 mb-2.5 dark:text-neutrals400">
                        {" "}
                        {t("request_a_product.select_main_category")}{" "}
                        <span className="text-sm text-red-500">*</span>
                      </div>
                      <div className="flex justify-start flex-wrap items-center gap-3 max-lg:grid max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1 max-sm:grid-rows-1">
                        {initialData?.map((item: any) => {
                          const title = item?.title?.[locale];
                          return (
                            <label
                              key={item?.id}
                              className="flex items-center cursor-pointer"
                            >
                              <div className="min-w-[160px] w-full max-w-full flex items-center gap-2.5 border border-neutrals100 px-3 py-2.5 rounded-lg peer-checked:bg-neutrals50 peer-checked:shadow-lg dark:border-darkborder pl-3">
                                <div className="icon w-9">
                                  <img
                                    src={
                                      item?.slug == "product"
                                        ? "/products.svg"
                                        : item?.slug == "service"
                                        ? "/services.svg"
                                        : item?.slug == "community"
                                        ? "/community.svg"
                                        : "/jobs.svg"
                                    }
                                    alt={item?.title}
                                  />
                                </div>
                                <div className="min-w-[100px] w-full flex items-center justify-between gap-2 sm:gap-5">
                                  <span className="text-sm font-semibold text-neutrals700 dark:text-neutrals400">
                                    {title}
                                  </span>
                                  <span className="relative w-5 h-5">
                                    <input
                                      type="radio"
                                      name="mainCategory"
                                      value={item?.id}
                                      checked={selectedRadio === item.id}
                                      onChange={() =>
                                        handleRadioChange(item.id)
                                      }
                                      className="peer hidden"
                                    />
                                    <span className="absolute inset-0 rounded-full border border-neutrals200 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 dark:peer-checked:bg-primary400 dark:peer-checked:border-primary400 dark:border-neutrals400"></span>
                                    <span className="absolute top-1 left-1 w-3 h-3 rounded-full bg-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[5px] peer-checked:left-[5px] peer-checked:h-2.5"></span>
                                  </span>
                                </div>
                              </div>
                            </label>
                          );
                        })}
                      </div>
                      {/* {categoryError && (
                        <div className="text-red-800 text-sm mt-1">
                          {categoryError}
                        </div>
                      )} */}
                      {methods.formState.errors.categories && (
                        <div className="text-red-800 text-sm mt-1 dark:text-red-500">
                          {methods.formState.errors.categories.message}
                        </div>
                      )}
                    </div>

                    {/* React Select dropdowns for children */}
                    <div>
                      {dropdowns.map((dropdown: any, index: any) => (
                        <div key={`${dropdown.id}-${index}`} className="mb-4">
                          <label className="block text-sm font-medium text-neutrals800 mb-1 dark:text-neutrals400">
                            {t(
                              index === 0
                                ? "request_a_product.category_label"
                                : "request_a_product.subcategory_label"
                            )}
                          </label>
                          <Select
                            options={dropdown.options}
                            value={dropdown.selectedValue}
                            onChange={(selectedOption) =>
                              handleDropdownSelect(index, selectedOption)
                            }
                            placeholder={t("request_a_product.select_option")}
                            className="react-select-container"
                            classNamePrefix="react-select"
                            key={themeKey}
                            styles={customStyles}
                          />
                        </div>
                      ))}
                    </div>

                    <div className="mb-5 darkbg-change-input">
                      <Input
                        label={t("request_a_product.title_label")}
                        name="title"
                        type="text"
                        placeholder={t("request_a_product.title_placeholder")}
                        required
                      />
                    </div>

                    <div className="mb-5 darkbg-change-input">
                      <Input
                        label={t("request_a_product.description_label")}
                        name="description"
                        type="textarea"
                        placeholder={t(
                          "request_a_product.description_placeholder"
                        )}
                        required
                      />
                    </div>
                    <div className="text-center">
                      <Button
                        type="submit"
                        label={
                          isLoading
                            ? t("request_a_product.requesting")
                            : t("request_a_product.request")
                        }
                        variant="secondary"
                        className="mx-auto min-w-[233px] md:flex items-center justify-center"
                        disabled={isLoading}
                      >
                        {isLoading ? (
                          <div
                            role="status"
                            className="flex items-center justify-center"
                          >
                            <svg
                              className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                className="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                strokeWidth="4"
                              ></circle>
                              <path
                                className="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                              ></path>
                            </svg>
                            <span className="sr-only">
                              {t("button.loading")}
                            </span>
                          </div>
                        ) : null}
                      </Button>
                    </div>
                  </div>
                </form>
              </FormProvider>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}