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

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"> - 역할 메뉴 맵핑</div>
                <a href="<c:url value='/system/auth/main.do'/>" class="newbtn bg1">목록</a>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_booking">
            <div class="row">
                <!-- 역할 선택 영역 -->
                <div class="col-sm-6">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">역할 선택</li>
                            <li class="rig">
                            </li>
                        </ul>
                        <div class="containers">
                            <div class="search-box">
                                <input type="text" id="roleSearchInput" placeholder="역할명 검색..." class="input">
                                <button id="roleSearchBtn" class="newbtn bg1">검색</button>
                            </div>
                            <div class="tabels">
                                <table id="roleTable" class="display">
                                    <thead>
                                        <tr>
                                            <th>역할 ID</th>
                                            <th>역할명</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 역할 목록이 여기에 동적으로 추가됩니다 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 메뉴 권한 관리 영역 -->
                <div class="col-sm-6">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">메뉴 권한 관리 <span id="selectedRoleName"></span></li>
                            <li class="rig">
                                <button id="saveMenuPermissionBtn" class="newbtn bg4" disabled>권한 저장</button>
                            </li>
                        </ul>
                        <div class="containers">
                            <div class="tabels cols2">
                                <div class="list-title">
                                    <span></span>
                                    <div class="btn-group">
                                        <button id="expandAllBtn" class="newbtn bg1" disabled>전체 펼치기</button>
                                        <button id="collapseAllBtn" class="newbtn bg1" disabled>전체 접기</button>
                                        <button id="checkAllBtn" class="newbtn bg1" disabled>전체 선택</button>
                                        <button id="uncheckAllBtn" class="newbtn bg1" disabled>전체 해제</button>
                                    </div>
                                </div>
                                <div class="menu-tree-wrapper">
                                    <ul id="menuTree" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<link rel="stylesheet" type="text/css" href="<c:url value='/css/zTreeStyle.css' />">
<script type="text/javascript" src="<c:url value='/js/jquery.ztree.core-3.5.js' />" ></script>
<script type="text/javascript" src="<c:url value='/js/jquery.ztree.excheck-3.5.js' />" ></script>

<style>
.search-box {
    display: flex;
    margin-bottom: 15px;
    padding: 0 15px;
}

.search-box input {
    flex: 1;
    margin-right: 5px;
}

.list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 10px;
    padding: 0 15px;
    font-weight: bold;
}

#selectedRoleName {
    font-weight: normal;
    color: #3498db;
    margin-left: 10px;
}

.role-row {
    cursor: pointer;
}

.role-row:hover, .role-row.selected {
    background-color: #e0f7fa;
}

.menu-tree-wrapper {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

.btn-group {
    display: flex;
    gap: 5px;
}

.btn-group .newbtn {
    padding: 5px 10px;
    font-size: 12px;
}
</style>

<script type="text/javascript">
/**
 * 역할-메뉴 권한 관리 모듈
 * 역할에 메뉴 접근 권한을 부여하거나 회수하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 역할-메뉴 권한 관리 네임스페이스
     */
    var RoleMenuManagement = {
        selectedRoleId: null,
        zTreeObj: null,

        /**
         * 트리 설정
         */
        treeSetting: {
            view: {
                selectedMulti: false,
                nameIsHTML: false,
                showLine: true,
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "upperMenuId",
                    rootPId: null
                },
                key: {
                    name: "menuNm"
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            callback: {
                onClick: function(event, treeId, treeNode) {
                    RoleMenuManagement.zTreeObj.checkNode(treeNode, !treeNode.checked, true);
                },
                onCheck: function(event, treeId, treeNode) {
                    console.log("체크 상태 변경:", treeNode.menuId, treeNode.checked);
                }
            }
        },

        /**
         * 이벤트 핸들러 설정
         */
        bindEvents: function() {
            var self = this;

            // 역할 검색 버튼 클릭 이벤트
            $('#roleSearchBtn').on('click', function() {
                self.searchRoles();
            });

            // 역할 검색 입력 필드 엔터키 이벤트
            $('#roleSearchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    self.searchRoles();
                    return false;
                }
            });

            // 전체 펼치기 버튼 클릭 이벤트
            $('#expandAllBtn').on('click', function() {
                if (self.zTreeObj) {
                    self.zTreeObj.expandAll(true);
                }
            });

            // 전체 접기 버튼 클릭 이벤트
            $('#collapseAllBtn').on('click', function() {
                if (self.zTreeObj) {
                    self.zTreeObj.expandAll(false);
                }
            });

            // 전체 선택 버튼 클릭 이벤트
            $('#checkAllBtn').on('click', function() {
                if (self.zTreeObj) {
                    self.zTreeObj.checkAllNodes(true);
                }
            });

            // 전체 해제 버튼 클릭 이벤트
            $('#uncheckAllBtn').on('click', function() {
                if (self.zTreeObj) {
                    self.zTreeObj.checkAllNodes(false);
                }
            });

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

        /**
         * 역할 목록 조회
         */
        loadRoles: function() {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/auth/role/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y'
                },
                success: function(response) {
                    if (response.result) {
                        self.renderRoleList( unescapeHtml(response.data) );
                    } else {
                        alert(response.message || '역할 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 역할 목록 렌더링
         */
        renderRoleList: function(roles) {
            var self = this;
            var $tbody = $('#roleTable tbody');
            $tbody.empty();

            if (roles && roles.length > 0) {
                $.each(roles, function(index, role) {
                    var $tr = $('<tr class="role-row" data-role-id="' + role.roleId + '"></tr>');
                    $tr.append('<td>' + role.roleId + '</td>');
                    $tr.append('<td>' + role.roleNm + '</td>');

                    $tr.on('click', function() {
                        $('.role-row').removeClass('selected');
                        $(this).addClass('selected');
                        self.selectRole(role.roleId, role.roleNm);
                    });

                    $tbody.append($tr);
                });
            } else {
                $tbody.append('<tr><td colspan="2" class="text-center">역할이 없습니다.</td></tr>');
            }
        },

        /**
         * 역할 검색
         */
        searchRoles: function() {
            var self = this;
            var keyword = $('#roleSearchInput').val();

            $.ajax({
                url: '<c:url value="/system/auth/role/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y',
                    searchKeyword: keyword
                },
                success: function(response) {
                    if (response.result) {
                        self.renderRoleList(response.data);
                    } else {
                        alert(response.message || '역할 검색에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 역할 선택
         */
        selectRole: function(roleId, roleName) {
            var self = this;
            self.selectedRoleId = roleId;
            $('#selectedRoleName').text('- ' + roleName);

            // 메뉴 트리 초기화
            self.initMenuTree(roleId);
        },

        /**
         * 메뉴 트리 초기화
         */
        initMenuTree: function(roleId) {
            var self = this;

            // 버튼 활성화
            $('#expandAllBtn, #collapseAllBtn, #checkAllBtn, #uncheckAllBtn, #saveMenuPermissionBtn').prop('disabled', false);

            // 전체 메뉴 목록 조회
            $.ajax({
                url: '<c:url value="/system/menu/tree.ajax"/>',
                type: 'POST',
                success: function(response) {
                    if (response.result) {
                        var allMenus = response.data;

                        // 역할에 할당된 메뉴 목록 조회
                        $.ajax({
                            url: '<c:url value="/system/auth/roleMenu/list.ajax"/>',
                            type: 'POST',
                            data: {
                                roleId: roleId
                            },
                            success: function(assignedResponse) {
                                if (assignedResponse.result) {
                                    var assignedMenus = assignedResponse.data;
                                    var assignedMenuIds = {};

                                    // 할당된 메뉴 ID를 객체로 변환하여 빠른 검색 가능하게 함
                                    if (assignedMenus && assignedMenus.length > 0) {
                                        $.each(assignedMenus, function(index, menu) {
                                            assignedMenuIds[menu.menuId] = true;
                                        });
                                    }

                                    // 전체 메뉴에 체크 상태 설정
                                    if (allMenus && allMenus.length > 0) {
                                        $.each(allMenus, function(index, menu) {
                                            menu.checked = assignedMenuIds[menu.menuId] === true;
                                        });
                                    }

                                    // 트리 초기화
                                    self.zTreeObj = $.fn.zTree.init($("#menuTree"), self.treeSetting, unescapeHtml(allMenus));

                                    // 트리 전체 펼치기
                                    self.zTreeObj.expandAll(true);
                                } else {
                                    alert(assignedResponse.message || '할당된 메뉴 목록을 불러오는데 실패했습니다.');
                                }
                            }
                        });
                    } else {
                        alert(response.message || '메뉴 트리 로드에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 메뉴 권한 저장
         */
        saveMenuPermissions: function() {
            var self = this;

            if (!self.selectedRoleId) {
                alert('역할을 선택해주세요.');
                return;
            }

            if (!self.zTreeObj) {
                alert('메뉴 트리가 초기화되지 않았습니다.');
                return;
            }

            // 체크된 노드 가져오기
            var checkedNodes = self.zTreeObj.getCheckedNodes(true);
            var menuIds = [];

            if (checkedNodes && checkedNodes.length > 0) {
                $.each(checkedNodes, function(index, node) {
                    menuIds.push(node.menuId);
                });
            }

            // 권한 저장 요청
            $.ajax({
                url: '<c:url value="/system/auth/roleMenu/assignMultiple.ajax"/>',
                type: 'POST',
                data: {
                    roleId: self.selectedRoleId,
                    menuIds: menuIds
                },
                success: function(response) {
                    if (response.result) {
                        alert(response.message || '메뉴 권한이 성공적으로 저장되었습니다.');
                    } else {
                        alert(response.message || '메뉴 권한 저장에 실패했습니다.');
                    }
                }
            });
        },


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

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

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