"use client";
import AppButton from "@/components/ui/button";
import { FormItem, FormWrapper } from "@/components/ui/form";
import AppInput from "@/components/ui/input";
import { doUpdateUser } from "@/lib/redux/features/user";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { ResponseStatus } from "@/types/common";
import { UpdateUserResponse } from "@/types/user";
import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { z } from "zod";
import { getAuthInfo } from "@/lib/redux/features/auth";

type EditProfileFormProps = {
  handleCloseEditModal: () => void;
  handleGetAuthInfo: (id: string) => void;
};
export default function EditProfileForm({
  handleCloseEditModal,
  handleGetAuthInfo,
}: EditProfileFormProps) {
  const t = useTranslations("Form");
  const dispatch = useAppDispatch();
  const authInfo = useAppSelector(getAuthInfo);

  const [isLoading, setIsLoading] = useState(false);

  const formSchema = z.object({
    firstName: z
      .string()
      .trim()
      .min(1, { message: t("validate.required", { length: 1 }) })
      .max(64, { message: t("validate.max_length_255", { length: 255 }) })
      .refine(
        (val) => /^[A-Za-z0-9\s!@#$%^&*()\-_=+\[\];:'",.?/~`|\\]+$/.test(val),
        {
          message: t("validate.name_special_characters_not_allowed"),
        },
      ),

    lastName: z
      .string()
      .trim()
      .min(1, { message: t("validate.required", { length: 1 }) })
      .max(64, { message: t("validate.max_length_255", { length: 255 }) })
      .refine(
        (val) => /^[A-Za-z0-9\s!@#$%^&*()\-_=+\[\];:'",.?/~`|\\]+$/.test(val),
        {
          message: t("validate.name_special_characters_not_allowed"),
        },
      ),
  });

  type EditProfileFormSchema = z.infer<typeof formSchema>;

  const editProfileForm = useForm<EditProfileFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    values: {
      firstName: authInfo?.firstName || "",
      lastName: authInfo?.lastName || "",
    },
  });

  async function onSubmit(values: EditProfileFormSchema) {
    try {
      if (!authInfo?.id) {
        console.error("User ID not found!");
        return;
      }
      setIsLoading(true);
      const request = {
        firstName: values.firstName.trim(),
        lastName: values.lastName.trim(),
        id: authInfo.id,
      };
      const result = await dispatch(doUpdateUser(request));
      const payload = result?.payload as UpdateUserResponse;

      if (payload && payload.status === ResponseStatus.SUCCESS) {
        handleCloseEditModal();
        await handleGetAuthInfo(authInfo.id);
      }
    } catch (error) {
      console.error("Edit profile error:", error);
    } finally {
      setIsLoading(false);
    }
  }

  // const handleGetAuthInfo = async (id: string) => {
  //   try {
  //     if (!id) {
  //       console.error("User ID not found!");
  //       return;
  //     }
  //     const result = await dispatch(doGetAuthInfo({ id }));
  //     const payload = result?.payload as GetUserDetailResponse;
  //     if (payload && payload.status === ResponseStatus.SUCCESS) {
  //       dispatch(setUserDetail(payload?.data));
  //       StorageHelper.setLocalObject(STORAGE_KEYS.user, payload?.data);
  //     }
  //   } catch (error) {
  //     console.error("Get user info error:", error);
  //   }
  // };

  // useEffect(() => {
  //   if (userDetail) {
  //     editProfileForm.setValue('firstName', userDetail.firstName || '');
  //     editProfileForm.setValue('lastName', userDetail.lastName || '');
  //   }
  // }, [userDetail, editProfileForm]);

  return (
    <FormWrapper<EditProfileFormSchema>
      form={editProfileForm}
      onSubmit={onSubmit}
      layout="vertical"
      className="space-y-4"
    >
      <FormItem name="firstName" label={t("first_name")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            value={value}
            {...field}
            placeholder={t("firs_name_placeholder")}
          />
        )}
      </FormItem>

      <FormItem name="lastName" label={t("last_name")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            value={value}
            {...field}
            placeholder={t("last_name_placeholder")}
          />
        )}
      </FormItem>

      <div className="flex justify-end items-center gap-2">
        <AppButton
          type="default"
          loading={isLoading}
          onClick={handleCloseEditModal}
          className="w-fit"
        >
          {t("button.cancel")}
        </AppButton>
        <AppButton
          type="primary"
          htmlType="submit"
          loading={isLoading}
          className="w-fit"
        >
          {t("button.save")}
        </AppButton>
      </div>
    </FormWrapper>
  );
}