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

<div class="popup_wrap">
    <div class="popup_inner">
        <div class="popup_tit">
            <h2 class="tit">사용자 그룹 선택</h2>
            <a href="#" class="pop-x-btn modalclose"></a>
        </div>
        <div class="popup_con">
            <div class="auth-container">
                <!-- 그룹 선택 영역 -->
                <div class="group-selection-area">
                    <div class="section-title">그룹 목록</div>
                    <div class="search-box">
                        <input type="text" id="groupSearchInput" class="input" placeholder="그룹명 검색...">
                        <button id="groupSearchBtn" class="newbtn bg1">검색</button>
                    </div>
                    <div class="table_area">
                        <table id="groupTable" class="display">
                            <thead>
                                <tr>
                                    <th>그룹 ID</th>
                                    <th>그룹명</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 그룹 목록이 여기에 동적으로 추가됩니다 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 역할 목록 영역 -->
                <div class="role-list-area">
                    <div class="section-title">역할 목록 <span id="selectedGroupName"></span></div>
                    <div class="table_area">
                        <table id="roleTable" class="display">
                            <thead>
                                <tr>
                                    <th>역할 ID</th>
                                    <th>역할명</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 역할 목록이 여기에 동적으로 추가됩니다 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 메뉴 트리 영역 -->
                <div class="menu-tree-area">
                    <div class="section-title">메뉴 목록 <span id="selectedRoleName"></span></div>
                    <div class="menu-tree-container">
                        <div class="menu-tree-wrapper">
                            <ul id="menuTree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="popup_foot">
            <a href="#" id="confirmBtn" class="newbtns bg4">확인</a>
            <a href="#" class="newbtns bg1 modalclose">취소</a>
        </div>
    </div>
</div>

<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>

<script type="text/javascript">
/**
 * 사용자 그룹 선택 모듈
 * 그룹, 역할, 메뉴 권한을 한 화면에서 관리합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 사용자 그룹 선택 네임스페이스
     */
    var UserGroupSelection = {
        selectedGroupId: null,
        selectedRoleId: null,
        zTreeObj: null,
        groupTable: null,
        roleTable: null,

        /**
         * 트리 설정
         */
        treeSetting: {
            view: {
                selectedMulti: false,
                nameIsHTML: false,
                showLine: true,
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "upperMenuId",
                    rootPId: null
                },
                key: {
                    name: "menuNm"
                }
            },
            callback: {
                onClick: function(event, treeId, treeNode) {
                    console.log("메뉴 클릭:", treeNode.menuId, treeNode.menuNm);
                }
            }
        },

        /**
         * DataTables 초기화
         */
        initDataTables: function() {
            var self = this;

            // 그룹 테이블 초기화
            this.groupTable = $('#groupTable').DataTable({
                searching: false,
                ordering: false,
                info: false,
                paging: false,
                scrollY: '100%',
                scrollCollapse: true,
                autoWidth: false,
                columns: [
                    { data: 'groupId', width: '40%' },
                    { data: 'groupNm', width: '60%' }
                ],
                createdRow: function(row, data, dataIndex) {
                    $(row).addClass('group-row');
                }
            });

            // 역할 테이블 초기화
            this.roleTable = $('#roleTable').DataTable({
                searching: false,
                ordering: false,
                info: false,
                paging: false,
                scrollY: '100%',
                scrollCollapse: true,
                autoWidth: false,
                columns: [
                    { data: 'roleId', width: '40%' },
                    { data: 'roleNm', width: '60%' }
                ],
                createdRow: function(row, data, dataIndex) {
                    $(row).addClass('role-row');
                }
            });

            // 그룹 테이블 행 클릭 이벤트
            $('#groupTable tbody').on('click', 'tr', function() {
                var data = self.groupTable.row(this).data();
                if (data) {
                    $('#groupTable tbody tr').removeClass('selected');
                    $(this).addClass('selected');
                    self.selectGroup(data.groupId, data.groupNm);
                }
            });

            // 역할 테이블 행 클릭 이벤트
            $('#roleTable tbody').on('click', 'tr', function() {
                var data = self.roleTable.row(this).data();
                if (data) {
                    $('#roleTable tbody tr').removeClass('selected');
                    $(this).addClass('selected');
                    self.selectRole(data.roleId, data.roleNm);
                }
            });
        },

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

            // 그룹 검색 버튼 클릭 이벤트
            $('#groupSearchBtn').on('click', function() {
                self.searchGroups();
            });

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

            // 확인 버튼 클릭 이벤트
            $('#confirmBtn').on('click', function() {
                self.confirmSelection();
            });

            // 취소 버튼 클릭 이벤트
            $('.modalclose').on('click', function() {
                self.closePopup();
            });
        },

        /**
         * 그룹 목록 조회
         */
        loadGroups: function() {
            var self = this;
            // URL에서 userGroupId 파라미터 가져오기
            var urlParams = new URLSearchParams(window.location.search);
            var selectedGroupId = urlParams.get('userGroupId');

            $.ajax({
                url: '<c:url value="/system/user/group/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y'
                },
                success: function(response) {
                    if (response.result) {
                        self.groupTable.clear().rows.add(unescapeHtml(response.data)).draw();
                        if (response.data && response.data.length > 0) {
                            var groupToSelect = null;
                            var rowIndex = 0;

                            // 전달받은 userGroupId와 일치하는 그룹 찾기
                            if (selectedGroupId) {
                                $.each(response.data, function(index, group) {
                                    if (group.groupId === selectedGroupId) {
                                        groupToSelect = group;
                                        rowIndex = index;
                                        return false; // 루프 종료
                                    }
                                });
                            }

                            // 일치하는 그룹이 없으면 첫 번째 그룹 선택
                            if (!groupToSelect && response.data.length > 0) {
                                groupToSelect = response.data[0];
                                rowIndex = 0;
                            }

                            if (groupToSelect) {
                                self.selectGroup(groupToSelect.groupId, groupToSelect.groupNm);
                                $('#groupTable tbody tr').removeClass('selected');
                                $('#groupTable tbody tr:eq(' + rowIndex + ')').addClass('selected');
                            }
                        }
                    } else {
                        alert(response.message || '그룹 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 그룹 검색
         */
        searchGroups: function() {
            var self = this;
            var keyword = $('#groupSearchInput').val();

            $.ajax({
                url: '<c:url value="/system/user/group/list.ajax"/>',
                type: 'POST',
                data: {
                    searchUseYn: 'Y',
                    searchKeyword: keyword
                },
                success: function(response) {
                    if (response.result) {
                        self.groupTable.clear().rows.add(unescapeHtml(response.data)).draw();
                        if (response.data && response.data.length > 0) {
                            // 첫 번째 그룹 자동 선택
                            var firstGroup = response.data[0];
                            self.selectGroup(firstGroup.groupId, firstGroup.groupNm);
                            $('#groupTable tbody tr:first').addClass('selected');
                        }
                    } else {
                        alert(response.message || '그룹 검색에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 그룹 선택
         */
        selectGroup: function(groupId, groupName) {
            var self = this;
            self.selectedGroupId = groupId;
            $('#selectedGroupName').text('- ' + groupName);

            // 선택된 역할 초기화
            self.selectedRoleId = null;
            $('#selectedRoleName').text('');
            self.roleTable.clear().draw();

            // 메뉴 트리 초기화
            self.zTreeObj = null;
            $("#menuTree").empty();

            // 역할 목록 조회
            self.loadRolesByGroup(groupId);
        },

        /**
         * 그룹별 역할 목록 조회
         */
        loadRolesByGroup: function(groupId) {
            var self = this;

            $.ajax({
                url: '<c:url value="/system/user/groupRole/list.ajax"/>',
                type: 'POST',
                data: {
                    groupId: groupId
                },
                success: function(response) {
                    if (response.result) {
                        self.roleTable.clear().rows.add(unescapeHtml(response.data)).draw();
                        if (response.data && response.data.length > 0) {
                            // 첫 번째 역할 자동 선택
                            var firstRole = response.data[0];
                            self.selectRole(firstRole.roleId, firstRole.roleNm);
                            $('#roleTable tbody tr:first').addClass('selected');
                        }
                    } 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;

            // 역할에 할당된 메뉴 목록 조회
            $.ajax({
                url: '<c:url value="/system/user/roleMenu/list.ajax"/>',
                type: 'POST',
                data: {
                    roleId: roleId
                },
                success: function(response) {
                    if (response.result) {
                        // 메뉴 데이터가 있는지 확인
                        if (response.data && response.data.length > 0) {
                            // 트리 초기화
                            self.zTreeObj = $.fn.zTree.init($("#menuTree"), self.treeSetting, unescapeHtml(response.data));

                            // 트리 전체 펼치기
                            self.zTreeObj.expandAll(true);
                        } else {
                            // 메뉴 데이터가 없을 경우 메시지 표시
                            $("#menuTree").html('<div class="no-data-message" style="padding: 10px; text-align: center;">메뉴 데이터가 없습니다.</div>');
                        }
                    } else {
                        alert(response.message || '메뉴 목록을 불러오는데 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 선택 확인
         */
        confirmSelection: function() {
            var self = this;

            if (!self.selectedGroupId) {
                alert('그룹을 선택해주세요.');
                return;
            }

            // 선택한 그룹과 역할 정보를 부모 창으로 전달
            var selectedData = {
                groupId: self.selectedGroupId,
                roleId: self.selectedRoleId
            };

            // 부모 창의 콜백 함수 호출
            if (window.opener && window.opener.userGroupSelectionCallback) {
                window.opener.userGroupSelectionCallback(selectedData);
                self.closePopup();
            } else {
                alert('부모 창의 콜백 함수를 찾을 수 없습니다.');
            }
        },

        /**
         * 팝업 닫기
         */
        closePopup: function() {
            window.close();
        },

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

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

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