"use client";

import { Button, Image } from "react-bootstrap";
import { FormikContext, useFormik, Form as FormikForm } from "formik";
import * as Yup from "yup";
import { useRouter } from "next/navigation";
import { CxPassword } from "@/components/default/Field/CxTextInput";
import { useRequest } from "@/components/App/request";
import { toastrC } from "@/utils/helpers";
import { useApp } from "@/components/App";
import styles from "@/styles/Component/Login/Login.module.scss";

const validationSchema = Yup.object({
  password: Yup.string()
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#?])[A-Za-z\d@$!%*?&#?]{8,}$/,
      "Password must be at least 8 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character (@$!%*?&#?)"
    )
    .required("Password is required"),

  password_confirmation: Yup.string()
    .oneOf([Yup.ref("password"), null], "Passwords must match")
    .required("Confirmation Password is required")
});

const ChangePassword = () => {
  const { request } = useRequest();
  const router = useRouter();
  const { state } = useApp();

  if (!state?.email) {
    router.push("/auth/forgot-password");
  }

  const formik = useFormik({
    initialValues: {
      code: state?.code || "",
      email: state?.email || "",
      password_confirmation: "",
      password: ""
    },
    validationSchema: validationSchema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        setSubmitting(true);
        const res = await request("RESET_PASSWORD", values);

        if (res.status) {
          toastrC(res.message, "success", "Success");
          setTimeout(() => {
            router.push("/auth/login");
          }, 1000);
        } else {
          toastrC(res.message, "error", "Error");
        }
      } catch (error) {
        toastrC(error.message, "error", "Error");
      } finally {
        setSubmitting(false);
      }
    }
  });
  return (
    <div className={styles.LoginCard}>
      <h1>Change Password</h1>
      <FormikContext value={formik}>
        <FormikForm onSubmit={formik.handleSubmit}>
          <CxPassword
            name="password"
            type="text"
            label="New Password"
            placeholder="Enter your new password"
            contClassName="mb-3"
          />
          <CxPassword
            name="password_confirmation"
            type="text"
            label="Confirm Password"
            placeholder="Confirm your new password"
            contClassName="mb-3"
          />

          <Button
            type="submit"
            disabled={formik.isSubmitting}
            className="btn-custom"
          >
            {formik.isSubmitting ? (
              "Submitting ..."
            ) : (
              <>
                Change Password
                <Image src="../assets/cursor-icon.png" alt="cursor-icon" />
              </>
            )}
          </Button>
        </FormikForm>
      </FormikContext>
    </div>
  );
};

export default ChangePassword;