"use client";

import Modal from "@/components/Modal";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { useUpdatePassword, useForceChangePassword } from "@/api/user/user-profile/user-profile";
import { toast } from "react-hot-toast";

interface ChangePasswordModalProps {
  isOpen: boolean;
  onClose: () => void;
  forceChange?: boolean;
  onPasswordChanged?: () => void;
}

export default function ChangePasswordModal({ isOpen, onClose, forceChange = false, onPasswordChanged }: ChangePasswordModalProps) {
  const t = useTranslations("practitioner");
  const [formData, setFormData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });
  const [showPasswords, setShowPasswords] = useState({
    current: false,
    new: false,
    confirm: false,
  });
  const [errors, setErrors] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });

  const mutationCallbacks = {
    onSuccess: () => {
      toast.success(t("modals.changePassword.successMessage"));
      setFormData({ currentPassword: "", newPassword: "", confirmPassword: "" });
      if (forceChange && onPasswordChanged) {
        onPasswordChanged();
      }
      onClose();
    },
    onError: (error: any) => {
      toast.error(error?.response?.data?.message || t("modals.changePassword.errorMessage"));
    },
  };

  // API mutation for updating password
  const { mutate: updatePassword, isPending: isUpdatePending } = useUpdatePassword({
    mutation: mutationCallbacks,
  });

  // API mutation for force changing password (no current password required)
  const { mutate: forceChangePassword, isPending: isForceChangePending } = useForceChangePassword({
    mutation: mutationCallbacks,
  });

  const isPending = forceChange ? isForceChangePending : isUpdatePending;

  const validateForm = () => {
    const newErrors = {
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    };

    let isValid = true;

    // Validate current password (skip for force change)
    if (!forceChange && !formData.currentPassword.trim()) {
      newErrors.currentPassword = t("modals.changePassword.validation.currentRequired");
      isValid = false;
    }

    // Validate new password
    if (!formData.newPassword.trim()) {
      newErrors.newPassword = t("modals.changePassword.validation.newRequired");
      isValid = false;
    } else if (formData.newPassword.length < 8) {
      newErrors.newPassword = t("modals.changePassword.validation.minLength");
      isValid = false;
    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])/.test(formData.newPassword)) {
      newErrors.newPassword = t("modals.changePassword.validation.complexity");
      isValid = false;
    }

    // Validate confirm password
    if (!formData.confirmPassword.trim()) {
      newErrors.confirmPassword = t("modals.changePassword.validation.confirmRequired");
      isValid = false;
    } else if (formData.newPassword !== formData.confirmPassword) {
      newErrors.confirmPassword = t("modals.changePassword.validation.mismatch");
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    if (forceChange) {
      forceChangePassword({
        data: {
          new_password: formData.newPassword,
          confirm_password: formData.confirmPassword,
        },
      });
    } else {
      updatePassword({
        data: {
          password: formData.currentPassword,
          new_password: formData.newPassword,
          confirm_password: formData.confirmPassword,
        },
      });
    }
  };

  const LockIcon = () => (
    <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
    </svg>
  );

  const EyeIcon = ({ visible }: { visible: boolean }) => (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      {visible ? (
        <>
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </>
      ) : (
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
      )}
    </svg>
  );

  const inputClassName = "w-full pl-12 pr-12 py-3.5 bg-gray-50 border border-gray-200 rounded-full text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition";

  return (
    <Modal isOpen={isOpen} onClose={forceChange ? () => {} : onClose} size="xl" hideClose={forceChange}>
      <div className="px-2">
        <h2 className="text-2xl font-bold text-gray-900 mb-8">{t("modals.changePassword.title")}</h2>

        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Current Password (hidden for force change) */}
          {!forceChange && (
          <div>
            <label className="block text-sm font-semibold text-gray-800 mb-2">
              {t("modals.changePassword.currentPassword")}
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                <LockIcon />
              </div>
              <input
                type={showPasswords.current ? "text" : "password"}
                value={formData.currentPassword}
                onChange={(e) => {
                  setFormData({ ...formData, currentPassword: e.target.value });
                  if (errors.currentPassword) {
                    setErrors({ ...errors, currentPassword: "" });
                  }
                }}
                placeholder={t("modals.changePassword.enterCurrentPassword")}
                className={inputClassName}
              />
              <button
                type="button"
                onClick={() => setShowPasswords({ ...showPasswords, current: !showPasswords.current })}
                className="absolute inset-y-0 right-4 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer"
              >
                <EyeIcon visible={showPasswords.current} />
              </button>
            </div>
            {errors.currentPassword && (
              <p className="text-sm mt-1" style={{ color: '#D12E34' }}>
                {errors.currentPassword}
              </p>
            )}
          </div>
          )}

          {/* New Password */}
          <div>
            <label className="block text-sm font-semibold text-gray-800 mb-2">
              {t("modals.changePassword.newPassword")}
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                <LockIcon />
              </div>
              <input
                type={showPasswords.new ? "text" : "password"}
                value={formData.newPassword}
                onChange={(e) => {
                  setFormData({ ...formData, newPassword: e.target.value });
                  if (errors.newPassword) {
                    setErrors({ ...errors, newPassword: "" });
                  }
                }}
                placeholder={t("modals.changePassword.enterNewPassword")}
                className={inputClassName}
              />
              <button
                type="button"
                onClick={() => setShowPasswords({ ...showPasswords, new: !showPasswords.new })}
                className="absolute inset-y-0 right-4 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer"
              >
                <EyeIcon visible={showPasswords.new} />
              </button>
            </div>
            {errors.newPassword && (
              <p className="text-sm mt-1" style={{ color: '#D12E34' }}>
                {errors.newPassword}
              </p>
            )}
            <p className="text-xs text-gray-500 mt-1">
              {t("modals.changePassword.passwordHint")}
            </p>
          </div>

          {/* Confirm New Password */}
          <div>
            <label className="block text-sm font-semibold text-gray-800 mb-2">
              {t("modals.changePassword.confirmNewPassword")}
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                <LockIcon />
              </div>
              <input
                type={showPasswords.confirm ? "text" : "password"}
                value={formData.confirmPassword}
                onChange={(e) => {
                  setFormData({ ...formData, confirmPassword: e.target.value });
                  if (errors.confirmPassword) {
                    setErrors({ ...errors, confirmPassword: "" });
                  }
                }}
                placeholder={t("modals.changePassword.confirmPassword")}
                className={inputClassName}
              />
              <button
                type="button"
                onClick={() => setShowPasswords({ ...showPasswords, confirm: !showPasswords.confirm })}
                className="absolute inset-y-0 right-4 flex items-center text-gray-400 hover:text-gray-600 transition cursor-pointer"
              >
                <EyeIcon visible={showPasswords.confirm} />
              </button>
            </div>
            {errors.confirmPassword && (
              <p className="text-sm mt-1" style={{ color: '#D12E34' }}>
                {errors.confirmPassword}
              </p>
            )}
          </div>

          {/* Divider */}
          <div className="border-t border-gray-100 my-6"></div>

          {/* Buttons */}
          <div className="flex justify-end gap-3 pt-2">
            {!forceChange && (
            <button
              type="button"
              onClick={onClose}
              className="px-8 py-3 text-base font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:bg-gray-50 transition cursor-pointer"
            >
              {t("modals.changePassword.cancel")}
            </button>
            )}
            <button
              type="submit"
              disabled={isPending}
              className="px-8 py-3 text-base font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isPending ? (
                <div className="flex items-center gap-2">
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                  {t("modals.changePassword.submit")}
                </div>
              ) : (
                t("modals.changePassword.submit")
              )}
            </button>
          </div>
        </form>
      </div>
    </Modal>
  );
}