"use client";
import AppButton from "@/shared/buttons/AppButton";
import { Form } from "@/shared/ui/form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { useTranslations } from "next-intl";
import PasswordController from "@/shared/form-controls/PasswordController";
import LocalePath from "@/shared/LocalePath";
import { useLocale } from "next-intl";
import { useRouter } from "nextjs-toploader/app";
import { UseMutate } from "@/hooks/UseMutate";
import Swal from "sweetalert2";
import Success from "@/assets/images/success.gif";

export default function ChangePassword() {
  const t = useTranslations("");
  const locale = useLocale();
  const router = useRouter();
  const formSchema = yup.object({
    current_password: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.old_password") }),
      ),
    password: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.new_password") }),
      ),
    password_confirmation: yup
      .string()
      .required(t("validations.Please confirm your password"))
      .oneOf(
        [yup.ref("new_password"), null as any],
        t("validations.Passwords don't match"),
      ),
  });
  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      current_password: "",
      password: "",
      password_confirmation: "",
    },
  });
  const { mutate, isLoading } = UseMutate({
    endpoint: "client/profile/change-password",
    onSuccess: async (responseData: any) => {
      await Swal.fire({
        title: responseData?.message,
        timer: 3000,
        showConfirmButton: false,
        imageUrl: `${Success.src}`,
        customClass: {
          popup: "custom-popup-class",
          title: "custom-title-class",
        },
        padding: "1rem",
      });
      setTimeout(() => {
        router.replace(`${locale == "ar" ? "" : "/en"}/auth/login`);
      }, 500);
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    mutate({ ...values });
  }
  return (
    <div className="min-h-[calc(100vh-80px)] p-6 bg-gradient-to-br from-[#FFFBFC] to-white">
      <div className="container max-w-3xl">
        <LocalePath
          href="/profile"
          className="flex items-center gap-2 text-text-secondary hover:text-primary transition-colors mb-6 group"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-arrow-right"
          >
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
          <span>{t("Text.back_to_settings")} </span>
        </LocalePath>
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-6 lg:p-12 bg-gradient-to-br from-white to-[#FFFBFC] ">
          <div className="mb-8">
            <div className="grid md:grid-cols-[auto_1fr] items-center gap-4 mb-4">
              <div className="nd:mx-0 mx-auto w-14 h-14 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="28"
                  height="28"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-lock text-white"
                >
                  <rect
                    width="18"
                    height="11"
                    x="3"
                    y="11"
                    rx="2"
                    ry="2"
                  ></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
              </div>
              <div>
                <h1 className="text-3xl text-primary">
                  {t("LABELS.changePassword")}{" "}
                </h1>
                <p className="text-sm text-text-secondary mt-1">
                  {t("LABELS.updatePasswordDescription")}{" "}
                </p>
              </div>
            </div>
            <p className="text-text-secondary text-sm leading-relaxed">
              {t("Text.change_password_description")}
            </p>
          </div>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)}>
              <div className="space-y-6">
                <PasswordController
                  name="current_password"
                  label="old_password"
                  placeholder="old_password"
                />
                <PasswordController
                  name="password"
                  label="new_password"
                  placeholder="new_password"
                />
                <PasswordController
                  name="password_confirmation"
                  label="confirm_new_password"
                  placeholder="confirm_new_password"
                />
              </div>
              <div className="mt-8 bg-gradient-to-r from-info/10 to-primary/10 border-2 border-info/20 rounded-xl p-6">
                <div className="flex items-start gap-3">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="22"
                    height="22"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-circle-check-big text-info flex-shrink-0 mt-0.5"
                  >
                    <path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
                    <path d="m9 11 3 3L22 4"></path>
                  </svg>
                  <div className="space-y-2">
                    <p className="text-sm text-text-primary leading-relaxed">
                      {t("Text.change_password_confirmation")}
                    </p>
                  </div>
                </div>
              </div>
              <div className="mt-5 bg-error/5 border-2 border-error/20 rounded-xl p-5">
                <p className="text-sm text-error flex items-center gap-2">
                  <span className="text-lg">⚠️</span>
                  <span> {t("Text.change_password_note")}</span>
                </p>
              </div>
              <div className="mt-8 flex flex-col sm:flex-row gap-4">
                <AppButton
                  title={t("Text.confirm_update")}
                  buttonType="submit"
                  loader={isLoading}
                  disabled={isLoading}
                  button
                  rightIcon={
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="lucide lucide-circle-check-big *:stroke-white"
                    >
                      <path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
                      <path d="m9 11 3 3L22 4"></path>
                    </svg>
                  }
                  className="sm:flex-1 !w-full flex items-center justify-center gap-2"
                />
                <LocalePath
                  href="/profile/settings"
                  className="flex-1 text-center bg-transparent border border-gray-200 text-text-primary text-base px-8 py-2.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex items-center justify-center gap-2"
                >
                  {t("BUTTONS.cancel")}
                </LocalePath>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}