"use client";

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

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

export default function ChangePasswordModal({ isOpen, onClose, forceChange = false, onPasswordChanged }: ChangePasswordModalProps) {
  const t = useTranslations("individual.changePasswordModal");
  const [formData, setFormData] = useState({
    password: "",
    new_password: "",
    confirm_password: "",
  });
  const [showPassword, setShowPassword] = useState({
    current: false,
    new: false,
    confirm: false,
  });
  const [errors, setErrors] = useState({
    password: "",
    new_password: "",
    confirm_password: "",
  });
  const [success, setSuccess] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);

  // Reset form state when modal opens
  useEffect(() => {
    if (isOpen) {
      setFormData({ password: "", new_password: "", confirm_password: "" });
      setShowPassword({ current: false, new: false, confirm: false });
      setErrors({ password: "", new_password: "", confirm_password: "" });
      setSuccess(false);
      setApiError(null);
    }
  }, [isOpen]);

  // Translate known API error messages
  const translateApiError = (message: string): string => {
    const errorMap: Record<string, string> = {
      "Please provide correct current password.": t("incorrectPassword"),
      "Current password and New password cannot be same.": t("samePassword"),
    };
    return errorMap[message] || message;
  };

  const mutationCallbacks = {
    onSuccess: () => {
      setFormData({ password: "", new_password: "", confirm_password: "" });
      setSuccess(true);
      setTimeout(() => {
        if (forceChange && onPasswordChanged) {
          onPasswordChanged();
        }
        onClose();
      }, 2000);
    },
    onError: (error: any) => {
      const apiMessage = error?.response?.data?.message;
      setApiError(apiMessage ? translateApiError(apiMessage) : t("error"));
    },
  };

  const updatePasswordMutation = useUpdatePassword({
    mutation: mutationCallbacks,
  });

  const forceChangePasswordMutation = useForceChangePassword({
    mutation: mutationCallbacks,
  });

  const validateForm = () => {
    const newErrors = {
      password: "",
      new_password: "",
      confirm_password: "",
    };

    let isValid = true;

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

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

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

    setErrors(newErrors);
    return isValid;
  };

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

    if (!validateForm()) {
      return;
    }

    if (forceChange) {
      forceChangePasswordMutation.mutate({
        data: {
          new_password: formData.new_password,
          confirm_password: formData.confirm_password,
        },
      });
    } else {
      updatePasswordMutation.mutate({
        data: {
          password: formData.password,
          new_password: formData.new_password,
          confirm_password: formData.confirm_password,
        },
      });
    }
  };

  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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
    </svg>
  );

  const EyeIcon = ({ show }: { show: boolean }) => (
    show ? (
      <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="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>
    ) : (
      <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="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" />
      </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";

  const isLoading = forceChange ? forceChangePasswordMutation.isPending : updatePasswordMutation.isPending;

  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("title")}</h2>

        {/* Success State */}
        {success ? (
          <div className="py-8 text-center">
            <div className="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <p className="text-lg font-medium text-gray-900">{t("success")}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* API Error */}
            {apiError && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
                {apiError}
              </div>
            )}

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

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

            {/* Confirm New Password */}
            <div>
              <label className="block text-sm font-semibold text-gray-800 mb-2">
                {t("confirmPassword")}
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                  <LockIcon />
                </div>
                <input
                  type={showPassword.confirm ? "text" : "password"}
                  value={formData.confirm_password}
                  onChange={(e) => {
                    setFormData({ ...formData, confirm_password: e.target.value });
                    if (errors.confirm_password) {
                      setErrors({ ...errors, confirm_password: "" });
                    }
                  }}
                  placeholder={t("confirmNewPassword")}
                  className={inputClassName}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword({ ...showPassword, confirm: !showPassword.confirm })}
                  className="absolute inset-y-0 right-4 flex items-center cursor-pointer"
                >
                  <EyeIcon show={showPassword.confirm} />
                </button>
              </div>
              {errors.confirm_password && (
                <p className="text-sm mt-1" style={{ color: '#D12E34' }}>
                  {errors.confirm_password}
                </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}
                disabled={isLoading}
                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 disabled:opacity-50 cursor-pointer"
              >
                {t("cancel")}
              </button>
              )}
              <button
                type="submit"
                disabled={isLoading}
                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 disabled:opacity-50 cursor-pointer"
              >
                {isLoading ? t("updating") : t("save")}
              </button>
            </div>
          </form>
        )}
      </div>
    </Modal>
  );
}