import AuthLayout from "@/components/auth/auth-layout";
import InputGroup from "@/components/auth/InputGroup";
import BackButtonTitle from "@/components/ui/BackButtonTitle";
import Button from "@/components/ui/Button";
import { useQueryMutation } from "@/hooks/mutate/useQueryMutation";
import { useColor } from "@/hooks/useColor";
import { emailOrPhone } from "@/utils/helper";
import { router, useLocalSearchParams } from "expo-router";
import { LockKeyIcon } from "phosphor-react-native";
import { useForm } from "react-hook-form";
import { Text, View } from "react-native";

interface PasswordResetFormType {
  type: string;
  email: string;
  password?: string;
  password_confirmation?: string;
}

export default function ChangePassword() {
  const { primary } = useColor();
  const { otp, email, phone } = useLocalSearchParams<{
    otp?: string;
    email?: string;
    phone?: string;
  }>();
  const {
    control,
    formState: { errors: formErrors },
    handleSubmit,
    reset,
  } = useForm<PasswordResetFormType>();

  const {
    mutate: verifyOTP,
    isLoading: verifyLoading,
    backendErrors: errors,
  } = useQueryMutation({
    isPublic: true,
    url: "/forgot-password",
  });

  const handleSubmitPassword = handleSubmit((data) => {
    if (!otp) {
      return;
    }
    verifyOTP(
      {
        ...emailOrPhone(email ?? phone ?? "", !!email),
        password: data.password,
        password_confirmation: data.password_confirmation,
        otp,
      },
      {
        onSuccess: async (response) => {
          reset();
          router.push("/sign-in");
        },
        onError: (err) => {
          reset();
          console.log(err);
        },
      },
    );
  });

  return (
    <AuthLayout>
      <View className="pb-10">
        <View className="py-2">
          <BackButtonTitle title="Update Password" />
        </View>

        <View className="mt-8 mb-6 p-6 rounded-3xl" style={{ backgroundColor: primary[5] }}>
          <View className="size-14 rounded-2xl justify-center items-center shadow-sm" style={{ backgroundColor: "white" }}>
            <LockKeyIcon size={32} color={primary.base} weight="duotone" />
          </View>
          <Text className="text-3xl font-manrope-extrabold text-slate-900 pt-5">New Password</Text>
          <Text className="text-slate-500 w-[95%] pt-2 text-lg font-manrope-medium leading-6">Create a strong, secure new password that you haven&apos;t used before.</Text>
        </View>

        <View className="py-2 gap-y-5">
          <InputGroup control={control} label="New Password" name="password" error={formErrors.password} backendError={errors?.password} secureTextEntry={true} />
          <InputGroup
            control={control}
            label="Confirm Password"
            name="password_confirmation"
            error={formErrors.password_confirmation}
            backendError={errors?.password_confirmation}
            secureTextEntry={true}
          />

          <Button onPress={handleSubmitPassword} isLoading={verifyLoading} text="Update Password" className="mt-4" />
        </View>
      </View>
    </AuthLayout>
  );
}
