"use client";

import AuthButton from "@/components/auth/AuthButton";
import AuthHead from "@/components/auth/AuthHead";
import AuthPasswordInput from "@/components/auth/AuthPasswordInput";
import AuthOtpInput from "@/components/auth/AuthOtpInput";
import Container from "@/components/elements/Container";
import Link from "next/link";
import React, { useMemo, useState } from "react";
import useAxios from "@/hooks/useAxios";
import { useFormik } from "formik";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

const schema = yup.object().shape({
  otp: yup
    .string()
    .matches(/^\d{6}$/, "کد وارد شده صحیح نیست")
    .required("کد تایید را وارد کنید"),
  password: yup
    .string()
    .required("کلمه عبور نمی\u200Cتواند خالی باشد")
    .min(8, "کلمه عبور نباید کوتاه تر از 8 کاراکتر باشد")
    .matches(
      /^(?=.*[a-zA-Zآ-ی])(?=.*\d).{8,}$/,
      "کلمه عبور باید شامل حروف و اعداد باشد"
    ),
  confirmPassword: yup
    .string()
    .required("تکرار کلمه عبور نمی\u200Cتواند خالی باشد")
    .oneOf(
      [yup.ref("password")],
      "تکرار کلمه عبور باید با کلمه عبور مطابقت داشته باشد"
    ),
});

function ChangePassword() {
  const router = useRouter();
  const { request, loading } = useAxios();
  const [otpError, setOtpError] = useState(false);

  const resetIdentifier = useMemo(
    () =>
      typeof window !== "undefined"
        ? localStorage.getItem("reset_identifier")
        : null,
    []
  );
  const resetChannel = useMemo(
    () =>
      typeof window !== "undefined"
        ? localStorage.getItem("reset_channel")
        : null,
    []
  );
  const isEmailReset = resetChannel === "email";

  const formik = useFormik({
    initialValues: {
      otp: "",
      password: "",
      confirmPassword: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      if (!resetIdentifier) {
        toast.error("ابتدا از صفحه فراموشی رمز، کد دریافت کنید");
        router.push("/forget-password");
        return;
      }

      const isMobile = /^09\d{9}$/.test(resetIdentifier);
      try {
        await request("POST", "/login/change_password", {
          ...(isMobile
            ? { mobile: resetIdentifier }
            : { email: resetIdentifier }),
          otp: values.otp.trim(),
          new_password: values.password,
        });
        localStorage.removeItem("reset_identifier");
        localStorage.removeItem("reset_channel");
        toast.success("کلمه عبور با موفقیت تغییر کرد");
        router.push("/login-with-username");
      } catch (err: unknown) {
        setOtpError(true);
        const message =
          (err as { response?: { data?: { message?: string } } })?.response?.data
            ?.message || "تغییر کلمه عبور ناموفق بود";
        toast.error(message);
      }
    },
  });

  return (
    <Container>
      <div className="p-4 flex flex-col items-center h-screen justify-center">
        <AuthHead title="تغییر کلمه عبور" />
        <p className="text-sm text-gray-500 text-center mb-4 max-w-sm">
          {isEmailReset
            ? "کد ارسال‌شده به ایمیل و کلمه عبور جدید را وارد کنید."
            : "کد ارسال‌شده به موبایل و کلمه عبور جدید را وارد کنید."}
        </p>
        <form
          onSubmit={formik.handleSubmit}
          className="w-full max-w-sm flex flex-col items-center"
        >
          <AuthOtpInput
            className="mt-3"
            value={formik.values.otp}
            onChange={(otp) => {
              formik.setFieldValue("otp", otp);
              setOtpError(false);
            }}
            error={
              otpError || Boolean(formik.touched.otp && formik.errors.otp)
            }
            disabled={loading}
          />
          {formik.touched.otp && formik.errors.otp && (
            <small className="text-red-500 mt-2">{formik.errors.otp}</small>
          )}

          <AuthPasswordInput
            name="password"
            placeholder="کلمه عبور جدید"
            wrapperClassName="mt-4"
            className={`border ${
              formik.touched.password && formik.errors.password
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.password}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
          {formik.touched.password && formik.errors.password && (
            <small className="text-red-500 mt-2 block">
              {formik.errors.password}
            </small>
          )}

          <AuthPasswordInput
            name="confirmPassword"
            placeholder="تکرار کلمه عبور"
            wrapperClassName="mt-4"
            className={`border ${
              formik.touched.confirmPassword && formik.errors.confirmPassword
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.confirmPassword}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
          {formik.touched.confirmPassword && formik.errors.confirmPassword && (
            <small className="text-red-500 mt-2 block">
              {formik.errors.confirmPassword}
            </small>
          )}

          <AuthButton
            type="submit"
            className="mt-5"
            loading={loading}
            disabled={loading || formik.values.otp.length !== 6}
          >
            تغییر کلمه عبور
          </AuthButton>
        </form>

        <Link href="/forget-password">
          <small className="text-[#667AC1] font-bold text-xs mt-8 block">
            ارسال مجدد کد
          </small>
        </Link>
        <Link href="/login-with-username">
          <small className="text-[#FF5C00] font-bold text-xs mt-4 block">
            بازگشت به ورود
          </small>
        </Link>
      </div>
    </Container>
  );
}

export default ChangePassword;
