"use client";
import Alert from "@/components/ui/alert";
import Button from "@/components/ui/button";
import {
  FormGroup,
  FormPassword,
  FormPhone,
  FormSelect,
  FormText,
  FormTextarea,
} from "@/components/ui/form";
import FormDynamicInput from "@/components/ui/form/FormDynamicInput";
import FormTag from "@/components/ui/form/FormTag";
import MapSection from "@/components/ui/google-map";
import Image from "@/components/ui/image";
import {
  useFetchMobilePrefixes,
  useFetchUserDetail,
} from "@/hooks/useFetchReferances";
import { useForm } from "@/hooks/useForm";
import { useRouter } from "@/i18n/routing";
import { useLocale } from "next-intl";
import { userService } from "@/services/userService";
import useAuthStore from "@/store/authStore";
import { getAuth } from "@/utils/helpersUtils";
import { translate } from "@/utils/i18nUtils";
import ProfileConfigValidation from "@/validations/profileConfigValidation";
import { Col, Row } from "antd";
import { useEffect, useState } from "react";
import { BiEnvelope } from "react-icons/bi";
import { FaWhatsapp } from "react-icons/fa";
import { FiEdit, FiLock, FiPhone, FiUser, FiX } from "react-icons/fi";

function RegisterAlert() {
  const { logout } = useAuthStore();
  const router = useRouter();

  useEffect(() => {
    const timeout = setTimeout(() => {
      logout();
      router.push("/");
    }, 4000);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

  return (
    <Alert type="success">{translate("notification.updateProfile")}</Alert>
  );
}

// Function to convert string of numbers to array
const parseContactNumbers = (contactNumbersString) => {
  if (!contactNumbersString || typeof contactNumbersString !== 'string') {
    return [];
  }

  return contactNumbersString
    .split('\n')
    .map(line => line.trim())
    .filter(line => line.length > 0)
    .map(line => {
      // If number is already in (prefix) number format, parse it
      const matches = line.match(/\((\d+)\)\s*(.+)/);
      if (matches) {
        return {
          prefix: matches[1],
          number: matches[2].trim()
        };
      }
      // If number without prefix, return as is
      return {
        prefix: "",
        number: line
      };
    });
};

// Function to convert array of numbers to string
const formatContactNumbers = (contactNumbersArray) => {
  if (!Array.isArray(contactNumbersArray) || contactNumbersArray.length === 0) {
    return "";
  }

  return contactNumbersArray
    .filter(item => item && (item.prefix || item.number))
    .map(item => {
      if (item.prefix && item.number) {
        return `(${item.prefix}) ${item.number}`;
      }
      return item.number || item.prefix || "";
    })
    .join('\n');
};

// Function to convert string of YouTube links to array
const parseYoutubeLinks = (youtubeLinksString) => {
  if (!youtubeLinksString || typeof youtubeLinksString !== 'string') {
    return [];
  }

  return youtubeLinksString
    .split('\n')
    .map(line => line.trim())
    .filter(line => line.length > 0);
};

// Function to convert array of YouTube links to string
const formatYoutubeLinks = (youtubeLinksArray) => {
  if (!Array.isArray(youtubeLinksArray) || youtubeLinksArray.length === 0) {
    return "";
  }

  return youtubeLinksArray
    .filter(link => link && typeof link === 'string' && link.trim().length > 0)
    .join('\n');
};

function ConfigPage({ translate, translateKey }) {
  const auth = getAuth();
  const locale = useLocale();
  const [user, fetchUser] = useFetchUserDetail();
  const [prefixItems, fetchPrefix, prefixLoading] = useFetchMobilePrefixes();
  const [prefix, setPrefix] = useState({
    phone: "",
    whatsapp: "",
    contact: {},
  });
  const [isRegister, setIsRegister] = useState(false);
  const [photo, setPhoto] = useState("");
  const [userPhoto, setUserPhoto] = useState(false);
  const { values, setField, handleSubmit, loading, handleBlur } = useForm({
    initialValues: {
      u_full_name: "",
      u_email: "",
      u_phones: "",
      whatsapp: "",
      currpass: "",
      newpass: "",
      newpassag: "",
      u_slogan: "",
      u_address: "",
      u_link: "",
      gmaplat: "",
      gmaplng: "",
      u_intagrampage: "",
      u_facebookpage: "",
      u_website: "",
      u_youtube: "",
      contact_numbers: "",
      u_hours: {},
      u_keywords: [],
    },
    validationSchema: ProfileConfigValidation,
    onSubmit: async (values) => {
      const data = {
        ...values,
        u_phones: values.u_phones ? `(${prefix.phone}) ${values.u_phones}` : "",
        whatsapp_pre: values.whatsapp ? `(${prefix.whatsapp})` : "",
        u_tags: values.u_keywords?.join(", ") || ""
      };

      // Parse contact_numbers from textarea and send in u_phones as array
      if (values.contact_numbers) {
        const parsedNumbers = parseContactNumbers(values.contact_numbers);
        if (parsedNumbers.length > 0) {
          data.u_phones = parsedNumbers
            .map(item => {
              const effectivePrefix = item.prefix || prefix.phone || "";
              if (effectivePrefix && item.number) {
                return `(${effectivePrefix}) ${item.number}`;
              }
              return item.number || "";
            })
            .filter(s => s.trim().length > 0);
        }
      }

      // Parse YouTube links from textarea and send as array
      if (values.u_youtube) {
        data.u_youtube = parseYoutubeLinks(values.u_youtube);
      } else {
        data.u_youtube = [];
      }

      const res = await userService.editUser({
        data,
        u_logo: userPhoto || [],
      });

      if (res.responseStatus.messageId === 1009) {
        setFieldError("email", translate("validation.alreadyEmail"));
        notification({
          type: "error",
          message: translate("validation.alreadyEmail"),
        });
      } else if (res.responseStatus.messageId === 1000) {
        setIsRegister(true);
      }
    },
  });

  const handlePhoto = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    setUserPhoto([file]);
    reader.onload = (e) => {
      setPhoto(e.target.result);
    };
    reader.readAsDataURL(file);
  };

  const handlePhotoDelete = () => {
    setPhoto(user?.picture || "");
    setUserPhoto(false);
  };

  useEffect(() => {
    fetchPrefix();
    fetchUser(getAuth().UserID);
  }, []);

  useEffect(() => {
    if (prefixItems && prefixItems.length > 0) {
      console.log(prefixItems);
    }
  }, [prefixItems]);

  useEffect(() => {
    if (user) {
      setField("u_full_name", user.fullname);
      setField("u_email", user.email);

      if (user?.phone_number) {

        if (prefixItems && prefixItems.length > 0) {
          const phonePrefix = user.phone_number.prefix.replace(/[()]/g, "");
          const matchingPrefix = prefixItems.find(item => item.id === phonePrefix);

          if (matchingPrefix) {
            setPrefix(prev => ({
              ...prev,
              phone: matchingPrefix.id
            }));
          } else {
            setPrefix(prev => ({
              ...prev,
              phone: phonePrefix
            }));
          }

          setField("u_phones", user.phone_number.number);
        }
      } else if (user?.phone) {
        const phoneSplit = user.phone.split(")");
        if (phoneSplit && phoneSplit.length > 1) {
          const phonePrefix = phoneSplit[0].replace("(", "");
          const phone = phoneSplit[1].trim();

          setPrefix(prev => ({
            ...prev,
            phone: phonePrefix
          }));
          setField("u_phones", phone);
        }
      }

      // Load contact_numbers for textarea from different sources
      let contactNumbersString = "";

      // Check u_phones (array of strings)
      if (user?.u_phones && Array.isArray(user.u_phones) && user.u_phones.length > 0) {

        contactNumbersString = user.u_phones.join('\n');
      } else if (user?.contact_numbers && Array.isArray(user.contact_numbers) && user.contact_numbers.length > 0) {
        const first = user.contact_numbers[0];
        if (typeof first === 'object') {

          contactNumbersString = user.contact_numbers
            .filter(item => item && (item.prefix || item.number))
            .map(item => {

              return item.number || item.prefix || "";
            })
            .join('\n');
        } else {
          contactNumbersString = user.contact_numbers.join('\n');
        }
      }

      if (contactNumbersString) {
        setField("contact_numbers", contactNumbersString);
      }

      if (user?.picture) setPhoto(user.picture);

      if (user?.whatsapp_pre && user?.whatsapp) {
        const whatsappPrefix = user.whatsapp_pre.replace(/[()]/g, "");

        if (prefixItems && prefixItems.length > 0) {
          const matchingPrefix = prefixItems.find(item => item.id === whatsappPrefix);

          if (matchingPrefix) {
            setPrefix(prev => ({
              ...prev,
              whatsapp: matchingPrefix.id
            }));
          } else {
            setPrefix(prev => ({
              ...prev,
              whatsapp: whatsappPrefix
            }));
          }
        } else {
          setPrefix(prev => ({
            ...prev,
            whatsapp: whatsappPrefix
          }));
        }

        setField("whatsapp", user.whatsapp);
      }

      if (auth.UserType === 2) {
        setField("u_slogan", user.slogan);
        setField("u_description", user.description);
        setField("u_hours", user.working_hours || []);
        setField("u_intagrampage", user.instagram);
        // Convert YouTube videos array to string for textarea
        setField("u_youtube", formatYoutubeLinks(user.youtube_videos || []));
        setField("u_facebookpage", user.facebook);
        setField("u_website", user.website);
        setField("u_link", user.link);
        setField("u_address", user.address);
        setField("gmaplat", user.gmaplat);
        setField("gmaplng", user.gmaplng);
        setField("u_keywords", user.keywords?.split(","));
      } else {
        // For regular users, use company_youtube field
        setField("u_youtube", formatYoutubeLinks(user.company_youtube || []));
      }


    }
  }, [user, prefixItems]);

  useEffect(() => {
    if (prefixItems && prefixItems.length > 0) {
      setPrefix(prev => {
        const newPrefix = { ...prev };

        if (!newPrefix.phone) {
          newPrefix.phone = prefixItems[0]?.id || '';
        }

        if (!newPrefix.whatsapp) {
          newPrefix.whatsapp = prefixItems[0]?.id || '';
        }

        return newPrefix;
      });
    }
  }, [prefixItems]);

  return (
    <div className="lg:w-[510px] w-full relative mx-auto border lg:py-12 lg:px-20 px-5 py-7 rounded-xl">
      <div className="absolute h-10 flex px-4 items-center bg-white text-lg text-primary top-0 -translate-y-5 left-14">
        <span>{translate(translateKey + ".config.pageTitle")}</span>
      </div>
      <div>
        {!isRegister ? (
          <form onSubmit={handleSubmit}>
            <Row gutter={[20, 20]}>
              <Col span={24}>
                <div className="flex items-center gap-x-8">
                  <div className="relative size-[80px]">
                    <Image
                      src={photo}
                      className="size-[80px]"
                      imageClass="rounded-full border"
                    />
                    {userPhoto && (
                      <button
                        type="button"
                        onClick={() => handlePhotoDelete()}
                        className="inline-flex absolute cursor-pointer rounded-full border bottom-0 -right-2 size-[30px] items-center justify-center bg-white"
                      >
                        <FiX />
                      </button>
                    )}
                    {!userPhoto && (
                      <label className="inline-flex absolute cursor-pointer rounded-full border bottom-0 -right-2 size-[30px] items-center justify-center bg-white">
                        <FiEdit />
                        <input
                          onChange={(e) => handlePhoto(e)}
                          type="file"
                          className="hidden"
                        />
                      </label>
                    )}
                  </div>
                  <div className="text-xl font-semibold line-clamp-1">
                    {values.u_full_name}
                  </div>
                </div>
              </Col>

              <Col span={24}>
                <FormGroup
                  label={translate(translateKey + ".config.fullname")}
                  suffix={<FiUser />}
                >
                  <FormText
                    value={values.u_full_name}
                    onChange={(val) => setField("u_full_name", val)}
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <FormGroup
                  disabled={true}
                  label={translate(translateKey + ".config.email")}
                  suffix={<BiEnvelope />}
                >
                  <FormText
                    value={values.u_email}
                    onChange={(val) => setField("u_email", val)}
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <FormGroup
                  disabled={values.u_phones ? true : false}
                  label={translate("pages.register.phone")}
                  error="u_phones"
                  suffix={<FiPhone />}
                >
                  <div className="!w-[160px]">
                    <FormSelect
                      options={prefixItems}
                      value={prefix.phone}
                      onChange={(val) => {
                        setPrefix((a) => ({ ...a, phone: val }));
                      }}
                      className="phone-prefix"
                      allowDefaultSelection={false}
                      name="phone_prefix"
                    />
                  </div>
                  <FormPhone
                    name="u_phones"
                    value={values.u_phones}
                    onChange={(val) => setField("u_phones", val)}
                    onBlur={handleBlur}
                    className="pl-0"
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <FormGroup
                  label={translate("pages.register.whatsapp")}
                  error="whatsapp"
                  suffix={<FaWhatsapp />}
                >
                  <div className="!w-[160px]">
                    <FormSelect
                      options={prefixItems}
                      value={prefix.whatsapp}
                      onChange={(val) => {
                        setPrefix((a) => ({ ...a, whatsapp: val }));
                      }}
                      className="phone-prefix"
                      allowDefaultSelection={false}
                      name="whatsapp_prefix"
                    />
                  </div>
                  <FormPhone
                    name="whatsapp"
                    value={values.whatsapp}
                    onChange={(val) => setField("whatsapp", val)}
                    onBlur={handleBlur}
                    className="pl-0"
                  />
                </FormGroup>
              </Col>

              {auth.UserType === 2 && (
                <>
                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.slogan")}
                      labelBottomText={translate(
                        translateKey + ".config.sloganInfo"
                      )}
                    >
                      <FormText
                        value={values.u_slogan}
                        onChange={(val) => setField("u_slogan", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.description")}
                    >
                      <FormTextarea
                        value={values.u_address}
                        onChange={(val) => setField("u_address", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.hour")}
                      labelBottomText={translate(
                        translateKey + ".config.hourInfo"
                      )}
                      noBorder={true}
                      elementClass="!h-auto"
                    >
                      <div>
                        {[...Array(7)].map((_, index) => {
                          const item = index + 1;
                          return (
                            <div
                              key={index}
                              className="flex items-center space-y-[8px]"
                            >
                              <div className="flex-1">
                                {translate(`enum.week.${item}`)}
                              </div>
                              <FormGroup className="flex-1">
                                <FormText
                                  value={values?.u_hours[item]}
                                  onChange={(val) =>
                                    setField("u_hours", {
                                      ...values.u_hours,
                                      [item]: val,
                                    })
                                  }
                                />
                              </FormGroup>
                            </div>
                          );
                        })}
                      </div>
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.link")}
                      labelBottomText={translate(
                        translateKey + ".config.linkInfo"
                      )}
                    >
                      <FormText
                        value={values.u_link}
                        onChange={(val) => setField("u_link", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.instagram")}
                    >
                      <FormText
                        value={values.u_intagrampage}
                        onChange={(val) => setField("u_intagrampage", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.facebook")}
                    >
                      <FormText
                        value={values.u_facebookpage}
                        onChange={(val) => setField("u_facebookpage", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.website")}
                      labelBottomText={translate(
                        translateKey + ".config.websiteInfo"
                      )}
                    >
                      <FormText
                        value={values.u_website}
                        onChange={(val) => setField("u_website", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.keyword")}
                      labelBottomText={translate(
                        translateKey + ".config.keywordInfo"
                      )}
                    >
                      <FormTag
                        value={values.u_keywords}
                        onChange={(val) => setField("u_keywords", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.youtubeVideo")}
                      labelBottomText={translate(
                        translateKey + ".config.youtubeVideoInfo"
                      )}
                    >
                      <FormTextarea
                        value={values.u_youtube}
                        onChange={(val) => setField("u_youtube", val)}
                      />
                    </FormGroup>
                  </Col>
                  <Col span={24}>
                    <FormGroup
                      className="profile__numbers"
                      label={translate(translateKey + ".config.contactPhone")}
                      labelBottomText={translate(
                        translateKey + ".config.contactNumberInfo"
                      )}
                      suffix={<FiPhone />}
                    >
                      <FormTextarea
                        value={values.contact_numbers || ""}
                        onChange={(val) => setField("contact_numbers", val)}
                        rows={4}
                        // placeholder="Введите номера телефонов, каждый с новой строки. Например:&#10;(050) 123-45-67&#10;(070) 987-65-43"
                      />
                    </FormGroup>
                  </Col>
                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.address")}
                      labelBottomText={translate(
                        translateKey + ".config.addressInfo"
                      )}
                    >
                      <FormTextarea
                        value={values.u_address}
                        onChange={(val) => setField("u_address", val)}
                      />
                    </FormGroup>
                  </Col>

                  <Col span={24}>
                    <FormGroup
                      label={translate(translateKey + ".config.googleMap")}
                      elementClass="!h-auto"
                    >
                      <MapSection
                        address={{
                          lat: values.gmaplat,
                          lng: values.gmaplng,
                        }}
                        onSelect={(val) => {
                          setField("gmaplat", val.lat);
                          setField("gmaplng", val.lon);
                        }}
                        draggable={true}
                        showMarker={true}
                        language={locale}
                      />
                    </FormGroup>
                  </Col>
                </>
              )}

              <Col span={24}>
                <FormGroup
                  label={translate(translateKey + ".config.password")}
                  suffix={<FiLock />}
                  error="currpass"
                >
                  <FormPassword
                    autoComplete="new-ps"
                    placeholder="******************"
                    value={values.currpass}
                    onChange={(val) => setField("currpass", val)}
                    onBlur={handleBlur}
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <FormGroup
                  label={translate(translateKey + ".config.newPassword")}
                  suffix={<FiLock />}
                  error="newpass"
                >
                  <FormPassword
                    autoComplete="new-ps"
                    placeholder="******************"
                    value={values.newpass}
                    onChange={(val) => setField("newpass", val)}
                    onBlur={handleBlur}
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <FormGroup
                  label={translate(translateKey + ".config.newRPassword")}
                  suffix={<FiLock />}
                  error="newpassag"
                >
                  <FormPassword
                    autoComplete="new-password"
                    placeholder="******************"
                    value={values.newpassag}
                    onChange={(val) => setField("newpassag", val)}
                    onBlur={handleBlur}
                  />
                </FormGroup>
              </Col>

              <Col span={24}>
                <Button loading={loading} block={true} type="submit">
                  {translate("button.save")}
                </Button>
              </Col>
            </Row>
          </form>
        ) : (
          <RegisterAlert />
        )}
      </div>
    </div>
  );
}

export default ConfigPage;