"use client";

import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useBoolean } from "usehooks-ts";

import successIcon from "@/assets/svg/icons/success.svg";
import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { NewPasswordForm } from "@/components/widget/new-password-form/new-password-form";
import { useResetPassword } from "@/services/white-label/auth/reset-password.services";
import { passwordValidation } from "@/validations/form-rules/password-rules";

const NewPassword = () => {
  const params = useSearchParams();
  const { value, toggle } = useBoolean(false);
  const resetPasswordMutation = useResetPassword({
    onSuccess() {
      toggle();
    },
  });

  const token = params.get("token") || "";
  const email = params.get("email") || "";

  if (value) {
    return (
      <div className="flex min-h-[80vh] items-center justify-center">
        <Card className="flex max-w-[392px] flex-col gap-6 bg-white p-6 shadow-2xl">
          <div className="flex flex-col gap-2">
            <Image
              className="mb-5"
              src={successIcon}
              width={48}
              height={48}
              alt="success"
            />
            <span className="text-lg font-medium text-[#1D2939]">
              Şifreniz değiştirildi
            </span>
            <span className="text-base text-gray-500">
              Giriş yaparak işlemlerine devam edebilirsin.
            </span>
          </div>

          <Link
            className="flex flex-row gap-1 text-base font-semibold text-gray-500"
            href="/auth/login"
          >
            <Button variant="primary" className="w-full">
              Giriş Yap
            </Button>
          </Link>
        </Card>
      </div>
    );
  }
  return (
    <div className="flex min-h-[80vh] items-center justify-center">
      <NewPasswordForm
        onSubmit={(values) => {
          resetPasswordMutation.mutate({
            Token: token,
            Email: email,
            NewPassword: values.newPassword,
            NewPasswordAgain: values.newPasswordAgain,
          });
        }}
        validations={{
          password: passwordValidation,
        }}
      />
    </div>
  );
};

export default NewPassword;