import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useUserChangePasswordMutation } from '@/entities/user/api/use-user-change-password-mutation';
import { snackBar } from '@/shared/lib/toast';

export const PasswordModifyLoginPasswordPage = () => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();
  const [currentPassword, setCurrentPassword] = useState<string>('');
  const [newPassword, setNewPassword] = useState<string>('');
  const [confirmPassword, setConfirmPassword] = useState<string>('');
  const [usrid, ] = useState<string>('nictest00');

  const changePasswordMutation = useUserChangePasswordMutation({
    onSuccess: () => {
      snackBar(t('account.passwordChangedSuccessfully'));
      // Clear form
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
      // Navigate back
      navigate(PATHS.account.password.manage);
    },
    onError: (error) => {
      snackBar(error?.response?.data?.message || t('account.passwordChangeFailed'));
    }
  });

  useSetHeaderTitle(t('account.changeLoginPassword'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.account.password.manage);
  });

  // 저장 버튼 활성화 조건 체크
  const isFormValid = () => {
    return (
      currentPassword.length >= 8 &&
      newPassword.length >= 8 &&
      confirmPassword.length >= 8 &&
      newPassword === confirmPassword
    );
  };

  // 저장 버튼 클릭 핸들러
  const handleSave = () => {
    if (!isFormValid()) return;

    // TODO: Validate current password before submitting
    changePasswordMutation.mutate({
      usrid: usrid,
      currentPassword: currentPassword,
      newPassword: newPassword,
    });
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list add">
              <div className="user-add">
                <div className="ua-row">
                  <div className="ua-label">{t('account.currentPassword')} <span className="red">*</span></div>
                  <input
                    className="wid-100"
                    type="password"
                    placeholder=""
                    value={currentPassword}
                    onChange={(e) => setCurrentPassword(e.target.value)}
                  />
                </div>
                <div className="ua-row">
                  <div className="ua-label">{t('account.newPassword')} <span className="red">*</span></div>
                  <input
                    className={`wid-100 ${confirmPassword && newPassword !== confirmPassword ? 'error' : ''}`}
                    type="password"
                    placeholder=""
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                  />
                </div>
                <div className="ua-row">
                  <div className="ua-label">{t('account.reEnterNewPassword')} <span className="red">*</span></div>
                  <input
                    className={`wid-100 ${confirmPassword && newPassword !== confirmPassword ? 'error' : ''}`}
                    type="password"
                    placeholder=""
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                  />
                </div>
                {confirmPassword && newPassword !== confirmPassword && (
                  <div className="ua-help error">{t('account.inputMismatch')}</div>
                )}
              </div>

              <div className="apply-row">
                <button
                  className="btn-50 btn-blue flex-1"
                  type="button"
                  disabled={!isFormValid() || changePasswordMutation.isPending}
                  onClick={handleSave}
                >{changePasswordMutation.isPending ? t('account.processing') : t('common.save')}</button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};