"use client";

import Button from "@/components/common/Button";
import React, { useState } from "react";
import { IoCheckmarkCircleSharp, IoCheckmarkOutline } from "react-icons/io5";
import { FormProvider } from "react-hook-form";
import { useForm } from "react-hook-form";
import Input from "@/components/common/CustomInputField";
import { useTranslations } from "next-intl";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  resetPasswordSchemaLoggedin,
  ResetPasswordSchemaLoggedinType,
} from "@/lib/validations/authSchema";
import { toast } from "react-toastify";
import { getStoredLocale } from "@/lib/getLocale";
import axios from "axios";
import { useRouter } from "next/navigation";
import { useAppSelector, useAppDispatch } from "@/app/store/hooks";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { userLogout } from "@/lib/userLogout";

export default function ChangePassword() {
  const { user } = useAppSelector((state) => state?.auth);
  const t = useTranslations();
  const dispatch = useAppDispatch();
  const router = useRouter();
  const locale = getStoredLocale();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const methods = useForm({
    resolver: zodResolver(resetPasswordSchemaLoggedin(t)),
    defaultValues: {
      current_password: "",
      password: "",
      password_confirmation: "",
    },
    mode: "onSubmit",
  });

  const { handleSubmit, watch } = methods;
  const password = watch("password");
  const hasUppercase = /[A-Z]/.test(password);
  const hasLowercase = /[a-z]/.test(password);
  const hasNumber = /\d/.test(password);
  const hasSpecialChar = /[@$!%*?&]/.test(password);
  const hasMinLength = password.length >= 8;

  const onSubmit = async (data: any) => {
    setIsSubmitting(true);
    try {
      const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/profile-password`;
      await axios.post(apiUrl, data, {
        withCredentials: true,
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: `Bearer ${user.token}`,
          "Accept-Language": locale,
        },
      });
      methods.reset();
      setShowPopup(true);
      toast.success(t("validation.password_changed_successfully"));
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      if (error.response?.data?.error) {
        Object.entries(error.response.data.error).forEach(([key, value]) => {
          methods.setError(key as keyof ResetPasswordSchemaLoggedinType, {
            type: "server",
            message: Array.isArray(value) ? value[0] : value,
          });
        });
      } else {
        toast.error(
          error.response?.data?.message || t("validation.update_failed")
        );
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  const [showPopup, setShowPopup] = useState(false);
  const [logoutAll, setLogoutAll] = useState(false);


  const handleLogout = async () => {
    setShowPopup(false);
    toast.info("Logging out...");
    await userLogout(dispatch, router);
  };

  return (
    <div>
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="py-5 px-10 max-md:px-4 bg-white dark:bg-darkbg">
            <div className="grid md:grid-cols-1 gap-4">
              <div className="relative w-[49%] max-md:w-full">
                <Input
                  label={t("change_password_drawer.old_password_label")}
                  name="current_password"
                  type="password"
                  required={true}
                  placeholder={t(
                    "change_password_drawer.old_password_placeholder"
                  )}
                />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="relative">
                  <Input
                    label={t("change_password_drawer.new_password_label")}
                    name="password"
                    type="password"
                    required={true}
                    placeholder={t(
                      "change_password_drawer.new_password_placeholder"
                    )}
                  />
                </div>
                <Input
                  label={t("change_password_drawer.confirm_password_label")}
                  name="password_confirmation"
                  type="password"
                  required={true}
                  placeholder={t(
                    "change_password_drawer.confirm_password_placeholder"
                  )}
                  validationRules={{
                    validate: (value) =>
                      value === methods.getValues("password") ||
                      t("validation.password_mismatch"),
                  }}
                />
              </div>
              <div className="mt-4">
                <p className="text-sm text-neutrals500 mb-2 dark:text-neutrals400">
                  {t("validation.password_must_contain")}
                </p>
                <ul className="text-sm text-gray-600 space-y-1 pl-0 dark:text-neutrals400">
                  <li className="text-xs flex items-center gap-1">
                    {hasUppercase ? (
                      <IoCheckmarkCircleSharp className="text-kzgreen" />
                    ) : (
                      <IoCheckmarkCircleSharp className="text-neutrals500 dark:text-neutrals400" />
                    )}
                    {t("validation.password_uppercase")}
                  </li>
                  <li className="text-xs flex items-center gap-1">
                    {hasLowercase ? (
                      <IoCheckmarkCircleSharp className="text-kzgreen" />
                    ) : (
                      <IoCheckmarkCircleSharp className="text-neutrals500 dark:text-neutrals400" />
                    )}
                    {t("validation.password_lowercase")}
                  </li>
                  <li className="text-xs flex items-center gap-1">
                    {hasNumber ? (
                      <IoCheckmarkCircleSharp className="text-kzgreen" />
                    ) : (
                      <IoCheckmarkCircleSharp className="text-neutrals500 dark:text-neutrals400" />
                    )}
                    {t("validation.password_number")}
                  </li>
                  <li className="text-xs flex items-center gap-1">
                    {hasSpecialChar ? (
                      <IoCheckmarkCircleSharp className="text-kzgreen" />
                    ) : (
                      <IoCheckmarkCircleSharp className="text-neutrals500 dark:text-neutrals400" />
                    )}
                    {t("validation.password_special_char")}
                  </li>
                  <li className="text-xs flex items-center gap-1">
                    {hasMinLength ? (
                      <IoCheckmarkCircleSharp className="text-kzgreen" />
                    ) : (
                      <IoCheckmarkCircleSharp className="text-neutrals500 dark:text-neutrals400" />
                    )}
                    {t("validation.password_min_length")}
                  </li>
                </ul>
              </div>
              <div className="mt-6 py-6 px-0 max-md:px-4 flex justify-end gap-2 border-t border-neutrals100 dark:border-darkborder max-md:pb-0 max-md:pr-0">
                <Button
                  type="button"
                  label={t("button.cancel")}
                  variant="outline"
                  onClick={() => methods.reset()}
                />
                <Button
                  type="submit"
                  label={
                    isSubmitting ? `${t("button.saving")}` : t("button.save")
                  }
                  variant="secondary"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? (
                    <div
                      role="status"
                      className="flex items-center justify-center"
                    >
                      <svg
                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      <span className="sr-only">{t("button.loading")}</span>
                    </div>
                  ) : null}
                </Button>
              </div>
            </div>
          </div>
        </form>
      </FormProvider>
      {showPopup && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
          <div className="bg-white dark:bg-darkbg rounded-2xl p-6 w-full max-w-md shadow-lg">
            <h3 className="text-lg font-semibold mb-0.5">
              {t("password_changed_successfully")}
            </h3>
            <p className="text-sm mb-4 text-neutrals500 dark:text-neutrals400">
              {t("password_changed_reason")}
            </p>

            {/* Optional checkbox for Case 2 */}
            <div className="flex items-center justify-start mb-10">

              <label className="flex items-center gap-2 text-base">
                <span className="relative w-5 h-5">
                  <input
                    type="checkbox"
                    id="logoutAll"
                    checked={logoutAll}
                    onChange={() => setLogoutAll(!logoutAll)}
                    className="mr-2 cursor-pointer peer hidden"
                  />
                  <span className="absolute inset-0 rounded-[4px] border border-neutrals200 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500"></span>
                  <span className="text-lg font-semibold absolute top-0 left-0 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[1px] peer-checked:left-[1px] peer-checked:h-2.5"><IoCheckmarkOutline /></span>
                </span>
                {t("logout_when_available")}
              </label>
            </div>

            <div className="flex justify-end gap-3">
              <Button
                label={t("stay_logged_in")}
                variant="outline"
                onClick={() => setShowPopup(false)}
              />
              <Button
                label={t("stay_logout")}
                variant="secondary"
                onClick={handleLogout}
              />
            </div>
          </div>
        </div>
      )}

    </div>
  );
}