<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*" %>

<!-- 소켓 상세 정보 모달 -->
<div id="socketDetailModal" class="modal modal-modern">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">회선 상세 정보</h2>
            <span class="close-modal">&times;</span>
        </div>
        <div class="modal-body">
            <!-- 탭 메뉴 -->
            <div class="socket-detail-tabs">
                <button class="tab-btn active" data-tab="institution-visual">
                    <i class="bi bi-pie-chart"></i> 기관 현황
                </button>
                <button class="tab-btn" data-tab="institution-status">
                    <i class="bi bi-building"></i> 기관 상태
                </button>
                <button class="tab-btn" data-tab="socket-status">
                    <i class="bi bi-plug"></i> 어댑터 상태
                </button>
                <button class="tab-btn" data-tab="socket-process">
                    <i class="bi bi-arrow-left-right"></i> 세션 상태
                </button>
            </div>

            <!-- 탭 컨텐츠 -->
            <div class="socket-detail-content">
                <!-- 기관 연결 현황 시각화 탭 -->
                <div id="institution-visual" class="tab-content active">
                    <div class="visual-stats-summary">
                        <div class="stats-card total-institutions">
                            <div class="stats-icon"><i class="bi bi-building"></i></div>
                            <div class="stats-details">
                                <div class="stats-number" id="total-institutions-count">0</div>
                                <div class="stats-label">총 기관</div>
                            </div>
                        </div>
                        <div class="stats-card normal-institutions">
                            <div class="stats-icon"><i class="bi bi-check-circle"></i></div>
                            <div class="stats-details">
                                <div class="stats-number" id="normal-institutions-count">0</div>
                                <div class="stats-label">정상</div>
                            </div>
                        </div>
                        <div class="stats-card warning-institutions">
                            <div class="stats-icon"><i class="bi bi-exclamation-triangle"></i></div>
                            <div class="stats-details">
                                <div class="stats-number" id="warning-institutions-count">0</div>
                                <div class="stats-label">경고</div>
                            </div>
                        </div>
                        <div class="stats-card error-institutions">
                            <div class="stats-icon"><i class="bi bi-x-circle"></i></div>
                            <div class="stats-details">
                                <div class="stats-number" id="error-institutions-count">0</div>
                                <div class="stats-label">오류</div>
                            </div>
                        </div>
                        <div class="stats-card inactive-institutions">
                            <div class="stats-icon"><i class="bi bi-dash-circle"></i></div>
                            <div class="stats-details">
                                <div class="stats-number" id="inactive-institutions-count">0</div>
                                <div class="stats-label">미사용</div>
                            </div>
                        </div>
                    </div>

                    <div class="connection-visual-container">
                        <div id="institution-grid" class="institution-grid"></div>
                    </div>
                </div>

                <!-- 기관 상태 탭 -->
                <div id="institution-status" class="tab-content">
                    <div class="institution-status-container">
                        <table class="institution-status-table modal-table">
                            <thead>
                            <tr>
                                <th>기관명</th>
                                <th>담당자명</th>
                                <th>연락처</th>
                                <th>정상어댑터</th>
                                <th>오류어댑터</th>
                                <th>회선상태</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 데이터가 동적으로 추가됩니다 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 회선 상태 탭 -->
                <div id="socket-status" class="tab-content">
                    <div class="socket-status-container">
                        <table class="socket-status-table modal-table">
                            <thead>
                            <tr>
                                <th>어댑터 그룹</th>
                                <th>인스턴스명</th>
                                <th>어댑터명</th>
                                <th>어댑터 설명</th>
                                <th>어댑터 유형</th>
                                <th>상태</th>
                                <th>기동 상태</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 데이터가 동적으로 추가됩니다 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 회선 연결 상태 탭 -->
                <div id="socket-process" class="tab-content">
                    <div class="socket-process-container">
                        <table class="socket-process-table modal-table">
                            <thead>
                            <tr>
                                <th>어댑터 그룹</th>
                                <th>인스턴스명</th>
                                <th>어댑터명</th>
                                <th>어댑터 설명</th>
                                <th>최대 연결</th>
                                <th>현재 연결</th>
                                <th>송신 수</th>
                                <th>수신 수</th>
                                <th>오류 수</th>
                                <th>상태</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 데이터가 동적으로 추가됩니다 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary refresh-socket-data">
                <i class="bi bi-arrow-clockwise" style="color: #ffffff;"></i>  새로고침
            </button>
            <button class="btn btn-secondary close-modal-btn">닫기</button>
        </div>
    </div>
</div>

<style>
    /* 기존 스타일 강화 */
    .modal-modern {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }

    .modal-modern .modal-content {
        position: relative;
        background-color: #fff;
        margin: 2% auto;
        padding: 0;
        width: 95%;
        max-width: 1400px;
        border: none;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        animation: modalSlideUp 0.3s;
    }

    @keyframes modalSlideUp {
        from {opacity: 0; transform: translateY(30px);}
        to {opacity: 1; transform: translateY(0);}
    }

    @keyframes modalFadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .modal-modern .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #e0e0e0;
        background-color: #f8f9fa;
        border-radius: 16px 16px 0 0;
    }

    .modal-modern .modal-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }

    .modal-modern .close-modal {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .modal-modern .close-modal:hover {
        color: #333;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .modal-modern .modal-body {
        padding: 1.5rem 2rem;
        max-height: 75vh;
        overflow-y: auto;
        background-color: #f8f9fa;
    }

    .modal-modern .modal-footer {
        padding: 1.2rem 2rem;
        border-top: 1px solid #e0e0e0;
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        border-radius: 0 0 16px 16px;
        background-color: #fff;
    }

    /* 탭 스타일 향상 */
    .socket-detail-tabs {
        display: flex;
        border-bottom: none;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        background-color: #fff;
        border-radius: 8px;
        padding: 0.5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .tab-btn {
        padding: 0.9rem 1.5rem;
        background: none;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        color: #666;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tab-btn:hover {
        color: #333;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .tab-btn.active {
        color: white;
        background-color: #007bff;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .tab-content.active {
        display: block;
    }

    /* 테이블 스타일 향상 */
    .modal-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .modal-table th {
        background-color: #007bff;
        color: white;
        padding: 1.2rem;
        text-align: left;
        font-weight: 800;
        top: 0;
        z-index: 10;
    }

    .modal-table td {
        padding: 1rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-table tbody tr {
        transition: background-color 0.2s;
    }

    .modal-table tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .modal-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* 버튼 스타일 향상 */
    .btn {
        padding: 0.8rem 1.5rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        font-size: inherit;
        transition: all 0.25s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary {
        background-color: #007bff;
        color: white;
    }

    .btn-primary:hover {
        background-color: #0069d9;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-secondary {
        background-color: #f1f5f9;
        color: #333;
    }

    .btn-secondary:hover {
        background-color: #e2e8f0;
    }

    /* 로딩 애니메이션 향상 */
    .loading-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }

    .loading-spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #007bff;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 통계 카드 스타일 향상 */
    .visual-stats-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stats-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        padding: 1.2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .stats-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .stats-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
    }

    .stats-details {
        flex: 1;
    }

    .stats-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .stats-label {
        font-size: 0.9rem;
        color: #666;
        margin-top: 0.2rem;
    }

    /* 카드 색상 */
    .total-institutions .stats-icon {
        background-color: rgba(0, 123, 255, 0.3);
        color: #007bff;
    }

    .normal-institutions .stats-icon {
        background-color: rgba(40, 167, 69, 0.3);
        color: #28a745;
    }

    .warning-institutions .stats-icon {
        background-color: rgba(255, 193, 7, 0.3);
        color: #ffc107;
    }

    .error-institutions .stats-icon {
        background-color: rgba(220, 53, 69, 0.3);
        color: #dc3545;
    }

    .inactive-institutions .stats-icon {
        background-color: rgba(108, 117, 125, 0.3);
        color: #6c757d;
    }

    /* 기관 카드 그리드 향상 */
    .connection-visual-container {
        background-color: #fff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .institution-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .institution-card {
        background-color: #f8f9fa;
        border-radius: 12px;
        padding: 1.2rem;
        transition: all 0.3s ease;
        border-left: 5px solid #ccc;
        cursor: pointer;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .institution-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .institution-status-indicator {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.2rem;
    }

    .institution-name {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #333;
        padding-right: 2rem;
    }

    .institution-info {
        display: grid;
        grid-template-columns: 80px 1fr;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .institution-info-label {
        color: #666;
    }

    .institution-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 1rem;
        border-top: 1px solid #e0e0e0;
        padding-top: 0.8rem;
    }

    .institution-stat {
        text-align: center;
        padding: 0.5rem;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* 상태 배지 스타일 */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.8rem;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-badge-normal {
        background-color: rgba(40, 167, 69, 0.15);
        color: #28a745;
    }

    .status-badge-warning {
        background-color: rgba(255, 193, 7, 0.15);
        color: #ffc107;
    }

    .status-badge-error {
        background-color: rgba(220, 53, 69, 0.15);
        color: #dc3545;
    }

    .status-badge-inactive {
        background-color: rgba(108, 117, 125, 0.15);
        color: #6c757d;
    }

    /* 반응형 디자인 */
    @media (max-width: 1024px) {
        .visual-stats-summary {
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        }

        .modal-modern .modal-content {
            width: 98%;
            margin: 1% auto;
        }

        .modal-modern .modal-body {
            padding: 1rem 1.5rem;
        }
    }

    @media (max-width: 768px) {
        .socket-detail-tabs {
            padding: 0.3rem;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 0.8rem 1rem;
            font-size: 0.9rem;
            flex-grow: 1;
        }

        .visual-stats-summary {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.8rem;
        }

        .stats-icon {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .stats-number {
            font-size: 1.5rem;
        }

        .institution-grid {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }

        .modal-modern .modal-header,
        .modal-modern .modal-footer {
            padding: 1rem 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .visual-stats-summary {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        }

        .institution-grid {
            grid-template-columns: 1fr;
        }

        .modal-modern .modal-body {
            padding: 1rem;
        }
    }

    .institution-card.status-normal {
        border-left: 5px solid #98e2a6;  /* 파스텔 그린 */
    }

    .institution-card.status-warning {
        border-left: 5px solid #ffe5a3;  /* 파스텔 옐로우 */
    }

    .institution-card.status-error {
        border-left: 5px solid #ffb3b3;  /* 파스텔 레드 */
    }

    .institution-card.status-inactive {
        border-left: 5px solid #d9d9d9;  /* 파스텔 그레이 */
    }
</style>

<script>
    // 소켓 상세 정보 모달 관련 스크립트
    (function() {
        // 모달 요소
        const modal = document.getElementById('socketDetailModal');
        const closeButtons = modal.querySelectorAll('.close-modal, .close-modal-btn');

        // 탭 관련 요소
        const tabButtons = modal.querySelectorAll('.tab-btn');
        const tabContents = modal.querySelectorAll('.tab-content');

        // 테이블 요소
        const institutionTable = modal.querySelector('.institution-status-table tbody');
        const statusTable = modal.querySelector('.socket-status-table tbody');
        const processTable = modal.querySelector('.socket-process-table tbody');

        // 시각화 요소
        const institutionGrid = document.getElementById('institution-grid');
        const totalInstitutionsCount = document.getElementById('total-institutions-count');
        const normalInstitutionsCount = document.getElementById('normal-institutions-count');
        const warningInstitutionsCount = document.getElementById('warning-institutions-count');
        const errorInstitutionsCount = document.getElementById('error-institutions-count');
        const inactiveInstitutionsCount = document.getElementById('inactive-institutions-count');

        // 현재 선택된 서버와 어댑터 그룹
        let currentServerName = '';
        let currentAdapterGroup = '';

        // 모달 닫기 이벤트
        closeButtons.forEach(button => {
            button.addEventListener('click', () => {
                modal.style.display = 'none';
            });
        });

        // 모달 외부 클릭 시 닫기
        window.addEventListener('click', (event) => {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });

        // 탭 전환 이벤트
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 활성 탭 변경
                tabButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');

                // 탭 컨텐츠 변경
                const tabId = button.getAttribute('data-tab');
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    if (content.id === tabId) {
                        content.classList.add('active');
                    }
                });
            });
        });

        // 새로고침 버튼 이벤트
        const refreshButton = modal.querySelector('.refresh-socket-data');
        refreshButton.addEventListener('click', () => {
            loadSocketData(currentServerName, currentAdapterGroup);
        });

        // 소켓 데이터 로드 함수
        function loadSocketData(serverName, adapterGroup) {
            // 현재 선택된 서버와 어댑터 그룹 저장
            currentServerName = serverName || '';
            currentAdapterGroup = adapterGroup || '';

            // 로딩 표시
            institutionTable.innerHTML = '<tr><td colspan="6"><div class="loading-indicator"><div class="loading-spinner"></div></div></td></tr>';
            statusTable.innerHTML = '<tr><td colspan="7"><div class="loading-indicator"><div class="loading-spinner"></div></div></td></tr>';
            processTable.innerHTML = '<tr><td colspan="10"><div class="loading-indicator"><div class="loading-spinner"></div></div></td></tr>';
            institutionGrid.innerHTML = '<div class="loading-indicator"><div class="loading-spinner"></div></div>';

            // API 호출
            ModernDashboardApi.getSocketCombined(serverName, adapterGroup, function(data) {
                if (data) {
                    // 기관 상태 데이터 표시
                    updateInstitutionStatusTable(data.institutionStatus);

                    // 기관 시각화 업데이트
                    updateInstitutionVisualization(data.institutionStatus);

                    // 회선 상태 데이터 표시
                    updateSocketStatusTable(data.socketStatus);

                    // 회선 연결 상태 데이터 표시
                    updateSocketProcessTable(data.socketProcess);
                }
            }, function(xhr, status, error) {
                // 에러 처리
                const errorMsg = '<div style="padding: 2rem; text-align: center; color: #dc3545;"><i class="fas fa-exclamation-circle" style="font-size: 3rem;"></i><p style="margin-top: 1rem;">데이터를 불러오는 중 오류가 발생했습니다.</p></div>';

                institutionTable.innerHTML = '<tr><td colspan="6">' + errorMsg + '</td></tr>';
                statusTable.innerHTML = '<tr><td colspan="7">' + errorMsg + '</td></tr>';
                processTable.innerHTML = '<tr><td colspan="10">' + errorMsg + '</td></tr>';
                institutionGrid.innerHTML = errorMsg;
                console.error('소켓 데이터 로드 실패:', error);
            });
        }

        // 기관 상태 테이블 업데이트
        function updateInstitutionStatusTable(data) {
            if (!data || data.length === 0) {
                institutionTable.innerHTML = '<tr><td colspan="6"><div style="padding: 2rem; text-align: center; color: #6c757d;"><i class="fas fa-info-circle" style="font-size: 2rem;"></i><p style="margin-top: 1rem;">표시할 데이터가 없습니다.</p></div></td></tr>';
                return;
            }

            let html = '';
            data.forEach(institution => {
                let statusClass = '';
                let statusText = '';

                // 상태에 따른 텍스트 및 클래스 설정
                if (institution.lineStatus === 'UNDEFINED') {
                    statusText = '미사용';
                    statusClass = 'status-badge status-badge-inactive';
                } else if (institution.lineStatus === 'WARN') {
                    statusText = '경고';
                    statusClass = 'status-badge status-badge-warning';
                } else if (institution.lineStatus === 'ERROR') {
                    statusText = '오류';
                    statusClass = 'status-badge status-badge-error';
                } else {
                    statusText = '정상';
                    statusClass = 'status-badge status-badge-normal';
                }

                html += '<tr>' +
                    '<td>' + (institution.institutionName || '-') + '</td>' +
                    '<td>' + (institution.contactPerson || '-') + '</td>' +
                    '<td>' + (institution.contactNumber || '-') + '</td>' +
                    '<td>' + (institution.normalAdapterCount || '0') + '</td>' +
                    '<td>' + (institution.errorAdapterCount || '0') + '</td>' +
                    '<td><span class="' + statusClass + '">' + statusText + '</span></td>' +
                    '</tr>';
            });

            institutionTable.innerHTML = html;
        }

        // 기관 시각화 업데이트
        function updateInstitutionVisualization(data) {
            if (!data || data.length === 0) {
                institutionGrid.innerHTML = '<div style="padding: 2rem; text-align: center; color: #6c757d;"><i class="fas fa-info-circle" style="font-size: 2rem;"></i><p style="margin-top: 1rem;">표시할 데이터가 없습니다.</p></div>';
                updateStatsCounts(0, 0, 0, 0, 0);
                return;
            }

            let html = '';
            let normalCount = 0;
            let warningCount = 0;
            let errorCount = 0;
            let inactiveCount = 0;

            data.forEach(institution => {
                let statusClass = 'status-normal';
                let statusIcon = '<i class="bi bi-check-circle" style="color: #28a745;"></i>';
                let statusName = '정상';

                // 상태에 따른 시각화 설정
                if (institution.lineStatus === 'UNDEFINED') {
                    statusClass = 'status-inactive';
                    statusIcon = '<i class="bi bi-dash-circle" style="color: #6c757d;"></i>';
                    statusName = '미사용';
                    inactiveCount++;
                } else if (institution.lineStatus === 'WARN') {
                    statusClass = 'status-warning';
                    statusIcon = '<i class="bi bi-exclamation-triangle" style="color: #ffc107;"></i>';
                    statusName = '경고';
                    warningCount++;
                } else if (institution.lineStatus === 'ERROR') {
                    statusClass = 'status-error';
                    statusIcon = '<i class="bi bi-x-circle" style="color: #dc3545;"></i>';
                    statusName = '오류';
                    errorCount++;
                } else {
                    normalCount++;
                }

                html += '<div class="institution-card ' + statusClass + '" data-code="' + institution.institutionCode + '">' +
                    '<div class="institution-status-indicator">' + statusIcon + '</div>' +
                    '<div class="institution-name">' + (institution.institutionName || '미지정 기관') + '</div>' +
                    '<div class="institution-info">' +
                    '<span class="institution-info-label">담당자:</span>' +
                    '<span>' + (institution.contactPerson || '-') + '</span>' +
                    '</div>' +
                    '<div class="institution-info">' +
                    '<span class="institution-info-label">연락처:</span>' +
                    '<span>' + (institution.contactNumber || '-') + '</span>' +
                    '</div>' +
                    '<div class="institution-info">' +
                    '<span class="institution-info-label">상태:</span>' +
                    '<span>' + statusName + '</span>' +
                    '</div>' +
                    '<div class="institution-stats">' +
                    '<div class="institution-stat">' +
                    '<div class="stat-number normal">' + (institution.normalAdapterCount || '0') + '</div>' +
                    '<div class="stat-label">정상 어댑터</div>' +
                    '</div>' +
                    '<div class="institution-stat">' +
                    '<div class="stat-number error">' + (institution.errorAdapterCount || '0') + '</div>' +
                    '<div class="stat-label">오류 어댑터</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            });

            institutionGrid.innerHTML = html;
            updateStatsCounts(data.length, normalCount, warningCount, errorCount, inactiveCount);

            // 기관 카드 클릭 이벤트 - 해당 기관 정보로 필터링
            const institutionCards = institutionGrid.querySelectorAll('.institution-card');
            institutionCards.forEach(card => {
                card.addEventListener('click', () => {
                    const institutionCode = card.getAttribute('data-code');
                    // 여기에 기관 코드로 필터링하는 로직 추가
                    console.log('기관 선택:', institutionCode);

                    // 기관에 해당하는 어댑터로 필터링하는 탭으로 이동
                    const socketStatusTab = document.querySelector('.tab-btn[data-tab="socket-status"]');
                    socketStatusTab.click();
                });
            });
        }

        // 통계 수치 업데이트
        function updateStatsCounts(total, normal, warning, error, inactive) {
            totalInstitutionsCount.textContent = total;
            normalInstitutionsCount.textContent = normal;
            warningInstitutionsCount.textContent = warning;
            errorInstitutionsCount.textContent = error;
            inactiveInstitutionsCount.textContent = inactive;
        }

        // 회선 상태 테이블 업데이트
        function updateSocketStatusTable(data) {
            if (!data || !data.rows || data.rows.length === 0) {
                statusTable.innerHTML = '<tr><td colspan="7"><div style="padding: 2rem; text-align: center; color: #6c757d;"><i class="fas fa-info-circle" style="font-size: 2rem;"></i><p style="margin-top: 1rem;">표시할 데이터가 없습니다.</p></div></td></tr>';
                return;
            }

            let html = '';
            data.rows.forEach(row => {
                let statusClass = row.status === 'true' ? 'status-badge status-badge-normal' : 'status-badge status-badge-error';
                const statusName = row.status === 'true' ? '정상' : '오류';

                html += '<tr>' +
                    '<td>' + (row.adptrBzwkGroupName || '-') + '</td>' +
                    '<td>' + (row.eaiSevrInstncName || '-') + '</td>' +
                    '<td>' + (row.adptrNickName || '-') + '</td>' +
                    '<td>' + (row.adptrBzwkDesc || '-') + '</td>' +
                    '<td>' + (row.adptrType || '-') + '</td>' +
                    '<td><span class="' + statusClass + '">' + statusName + '</span></td>' +
                    '<td>' + (row.starting || '-') + '</td>' +
                    '</tr>';
            });

            statusTable.innerHTML = html;
        }

        // 회선 연결 상태 테이블 업데이트
        function updateSocketProcessTable(data) {
            if (!data || !data.rows || data.rows.length === 0) {
                processTable.innerHTML = '<tr><td colspan="10"><div style="padding: 2rem; text-align: center; color: #6c757d;"><i class="fas fa-info-circle" style="font-size: 2rem;"></i><p style="margin-top: 1rem;">표시할 데이터가 없습니다.</p></div></td></tr>';
                return;
            }

            let html = '';
            data.rows.forEach(row => {
                let statusClass = row.status === 'true' ? 'status-badge status-badge-normal' : 'status-badge status-badge-error';
                const statusName = row.status === 'true' ? '정상' : '오류';

                html += '<tr>' +
                    '<td>' + (row.adptrBzwkGroupName || '-') + '</td>' +
                    '<td>' + (row.eaiSevrInstncName || '-') + '</td>' +
                    '<td>' + (row.adptrBzwkName || '-') + '</td>' +
                    '<td>' + (row.adptrBzwkDesc || '-') + '</td>' +
                    '<td>' + (row.maxConnection || '0') + '</td>' +
                    '<td>' + (row.currentConnection || '0') + '</td>' +
                    '<td>' + (row.sendCount || '0') + '</td>' +
                    '<td>' + (row.recvCount || '0') + '</td>' +
                    '<td>' + (row.errorCount || '0') + '</td>' +
                    '<td><span class="' + statusClass + '">' + statusName + '</span></td>' +
                    '</tr>';
            });

            processTable.innerHTML = html;
        }

        // 모달 열기 함수 (전역 스코프에 노출)
        window.openSocketDetailModal = function(serverName, adapterGroup) {
            // 모달 표시
            modal.style.display = 'block';

            // 데이터 로드
            loadSocketData(serverName, adapterGroup);
        };
    })();
</script>