<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title">초기화 비밀번호 변경</div>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="box_column">
            <div class="containers">
                <div class="forms_table_non">
                    <form id="passwordForm">
                        <table>
                            <colgroup>
                                <col style="width: 30%;">
                                <col style="width: 70%;">
                            </colgroup>
                            <tbody>
                                <tr style="display: none;">
                                    <th class="th">사용자 ID</th>
                                    <td>
                                        <input type="text" id="userId" name="userId" class="input" value="${user.userId}" readonly>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="th">사용자 계정</th>
                                    <td>
                                        <input type="text" id="userAcnt" name="userAcnt" class="input" value="${user.userAcnt}" readonly>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="th"><span class="required">*</span> 초기화 비밀번호</th>
                                    <td>
                                        <input type="password" id="currentPasswd" name="currentPasswd" class="input" validation-check="required">
                                    </td>
                                </tr>
                                <tr>
                                    <th class="th"><span class="required">*</span> 새 비밀번호</th>
                                    <td>
                                        <input type="password" id="newPasswd" name="newPasswd" class="input" validation-check="required">
                                        <div class="hint-message">※ 영문, 숫자, 특수문자를 포함하여 8자 이상 입력해주세요.</div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="th"><span class="required">*</span> 새 비밀번호 확인</th>
                                    <td>
                                        <input type="password" id="confirmPasswd" name="confirmPasswd" class="input" validation-check="required">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-center mt-4">
                            <button type="button" id="saveBtn" class="newbtn bg4">비밀번호 변경</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
/**
 * 비밀번호 변경 모듈
 * 사용자 비밀번호를 변경하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 비밀번호 변경 네임스페이스
     */
    var PasswordChange = {
        /**
         * 이벤트 핸들러 설정
         */
        bindEvents: function() {
            var self = this;

            // 저장 버튼 클릭 이벤트
            $('#saveBtn').on('click', function() {
                self.savePassword();
            });
        },

        /**
         * 비밀번호 변경 처리
         */
        savePassword: function() {
            var self = this;

            // 폼 유효성 검증
            if (!this.validateForm()) {
                return;
            }

            // 폼 데이터 수집
            var formData = {
                currentPasswd: $("#currentPasswd").val(),
                newPasswd: $("#newPasswd").val(),
                confirmPasswd: $("#confirmPasswd").val()
            };

            // AJAX 요청
            $.ajax({
                url: "<c:url value='/mypage/password.ajax'/>",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.result) {
                        alert(response.message);
                        // 루트 페이지로 이동
                        window.location.href = "<c:url value='/'/>";
                    } else {
                        alert(response.message);
                    }
                }
            });
        },

        /**
         * 폼 유효성 검증
         * @returns {boolean} 유효성 검증 결과
         */
        validateForm: function() {
            // validation-check 속성을 기반으로 폼 검증
            var isValid = validateFormByAttributes('passwordForm');

            // 비밀번호 일치 여부 확인
            if (isValid) {
                var newPasswd = $('#newPasswd').val();
                var confirmPasswd = $('#confirmPasswd').val();

                if (newPasswd !== confirmPasswd) {
                    alert("새 비밀번호와 확인 비밀번호가 일치하지 않습니다.");
                    $('#confirmPasswd').focus();
                    return false;
                }

                // 비밀번호 복잡성 검증
                if (!this.validatePasswordComplexity(newPasswd)) {
                    return false;
                }
            }

            return isValid;
        },

        /**
         * 비밀번호 복잡성 검증
         * @param {string} password 검증할 비밀번호
         * @returns {boolean} 유효성 검증 결과
         */
        validatePasswordComplexity: function(password) {
            // 비밀번호는 8자 이상이어야 함
            if (password.length < 8) {
                alert("비밀번호는 8자 이상이어야 합니다.");
                $('#newPasswd').focus();
                return false;
            }

            // 영문, 숫자, 특수문자 포함 여부 검증
            var hasLetter = /[a-zA-Z]/.test(password);
            var hasNumber = /[0-9]/.test(password);
            var hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);

            if (!hasLetter || !hasNumber || !hasSpecial) {
                alert("비밀번호는 영문, 숫자, 특수문자를 모두 포함해야 합니다.");
                $('#newPasswd').focus();
                return false;
            }

            return true;
        },

        /**
         * 모듈 초기화
         */
        init: function() {
            this.bindEvents();
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        PasswordChange.init();
    });

})(window, jQuery);
</script>