<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.eactive.eai.rms.common.datasource.*" %>

<div class="dashboard-adapter-summary">
    <div class="dashboard-header">
        <div class="header-title-container">
            <h2 class="section-title">회선 상태</h2>
            <%--<div class="adapter-actions">
                <button class="filter-btn view-socket-detail active">상세보기</button>
            </div>--%>
        </div>
    </div>
    <div class="card adapter-summary-card">
        <div class="adapter-summary-container">
            <div class="adapter-summary-header">
                <div class="adapter-type-column">어댑터 유형</div>
                <div class="adapter-status-column">
                    <div class="status-label error-label">에러</div>
                    <div class="status-label warning-label">경고</div>
                    <div class="status-label normal-label">정상</div>
                    <div class="status-label inactive-label">정지</div>
                    <div class="status-label total-label">합계</div>
                </div>
            </div>
            <div class="adapter-summary-body">
                <!-- 어댑터 요약 데이터가 동적으로 추가됩니다 -->
            </div>
        </div>
    </div>
</div>

<!-- 어댑터 요약 행 템플릿 -->
<template id="adapter-summary-row-template">
    <div class="adapter-summary-row">
        <div class="adapter-type-column">
            <div class="adapter-type-info">
                <span class="adapter-type-name">Socket</span>
                <span class="status-badge adapter-status-normal">정상</span>
            </div>
        </div>
        <div class="adapter-status-column">
            <div class="status-count error-count">0</div>
            <div class="status-count warning-count">0</div>
            <div class="status-count normal-count">0</div>
            <div class="status-count inactive-count">0</div>
            <div class="status-count total-count">0</div>
        </div>
    </div>
</template>

<!-- 소켓 상세 정보 모달 포함 -->
<jsp:include page="dashboard-socket-detail.jsp" />

<style>
    /* 어댑터 섹션 */
    .adapter-card {
        overflow: hidden;
    }

    .adapter-table-container {
        max-height: 300px;
        overflow-y: auto;
    }

    /* 어댑터 탭 스타일 개선 */
    .dashboard-adapters .card-tabs {
        display: flex;
        border-bottom: 1px solid var(--color-gray-200);
        background-color: var(--color-gray-50);
        overflow-x: auto;
    }

    .dashboard-adapters .tab-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-gray-600);
        background: none;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }

    .dashboard-adapters .tab-btn:hover {
        color: var(--color-primary);
    }

    .dashboard-adapters .tab-btn.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background-color: white;
    }

    .dashboard-adapters .tab-content {
        display: none;
        padding: 1rem;
    }

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

    /* 어댑터 섹션 스타일 조정 */
    .adapters-container .card {
        height: 100%;
        min-height: 293px;
    }

    .dashboard-adapter-summary {
        margin-bottom: 1rem;
    }

    .adapter-summary-card {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .adapter-summary-container {
        padding: 0.5rem 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .adapter-summary-header {
        display: flex;
        font-weight: bold;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .adapter-summary-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around; /* 내용을 수직으로 균등 배분 */
    }

    .adapter-summary-row {
        display: flex;
        padding: 0.25rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .adapter-summary-row:last-child {
        border-bottom: none;
    }

    .adapter-type-column {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .adapter-type-info {
        display: flex;
        align-items: center;
    }

    .adapter-type-name {
        font-weight: bold;
        margin-right: 0.5rem;
    }

    .adapter-status-column {
        flex: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .status-label, .status-count {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        font-size: 0.7rem;
        font-weight: bold;
        text-transform: uppercase;
    }

    .adapter-status-normal {
        background-color: rgba(76, 175, 80, 0.15);
        color: #4caf50;
    }

    .adapter-status-warning {
        background-color: rgba(255, 152, 0, 0.15);
        color: #ff9800;
    }

    .adapter-status-error {
        background-color: rgba(229, 57, 53, 0.15);
        color: #e53935;
    }

    .adapter-status-inactive {
        background-color: rgba(158, 158, 158, 0.15);
        color: #9e9e9e;
    }

    .error-label, .error-count {
        color: #e53935;
    }

    .warning-label, .warning-count {
        color: #ff9800;
    }

    .normal-label, .normal-count {
        color: #4caf50;
    }

    .inactive-label, .inactive-count {
        color: #9e9e9e;
    }

    .total-label, .total-count {
        font-weight: bold;
    }

    .empty-data-message {
        padding: 1rem;
        text-align: center;
        color: #757575;
        font-style: italic;
    }

    /* 어댑터 헤더 스타일 */
    .adapter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    /* 대시보드 헤더 스타일 */
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }

    /* 제목과 버튼을 한 줄에 나란히 표시하기 위한 컨테이너 */
    .header-title-container {
        display: flex;
        align-items: center;
    }

    .adapter-actions {
        margin-left: 10px; /* 제목과 버튼 사이 간격 */
        display: flex;
        align-items: center;
    }

    .filter-btn:hover {
        background-color: var(--color-gray-200);
        color: var(--color-gray-800);
    }

    .filter-btn.active {
        background-color: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }

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

    .btn-primary:hover {
        background-color: #0069d9;
        opacity: 1 !important;
    }
</style>

<script>
    // 어댑터 요약 행 생성 함수
    function createAdapterSummaryRow(adapterSummary) {
        var template = document.getElementById('adapter-summary-row-template');
        var clone = document.importNode(template.content, true);

        // 어댑터 유형 설정
        clone.querySelector('.adapter-type-name').textContent = adapterSummary.adapterType || '—';

        // 상태 설정
        var statusBadge = clone.querySelector('.status-badge');
        statusBadge.className = 'status-badge';

        if (adapterSummary.overallStatus === 'normal') {
            statusBadge.classList.add('adapter-status-normal');
            statusBadge.textContent = '정상';
        } else if (adapterSummary.overallStatus === 'warning') {
            statusBadge.classList.add('adapter-status-warning');
            statusBadge.textContent = '경고';
        } else if (adapterSummary.overallStatus === 'error') {
            statusBadge.classList.add('adapter-status-error');
            statusBadge.textContent = '오류';
        } else if (adapterSummary.overallStatus === 'inactive') {
            statusBadge.classList.add('adapter-status-inactive');
            statusBadge.textContent = '정지';
        } else {
            statusBadge.classList.add('adapter-status-inactive');
            statusBadge.textContent = '알 수 없음';
        }

        // 상태별 카운트 설정
        clone.querySelector('.error-count').textContent = formatNumber(adapterSummary.errorCount || 0);
        clone.querySelector('.warning-count').textContent = formatNumber(adapterSummary.warningCount || 0);
        clone.querySelector('.normal-count').textContent = formatNumber(adapterSummary.normalCount || 0);
        clone.querySelector('.inactive-count').textContent = formatNumber(adapterSummary.inactiveCount || 0);
        clone.querySelector('.total-count').textContent = formatNumber(adapterSummary.totalCount || 0);

        return clone;
    }

    // 어댑터 요약 테이블 업데이트 함수
    function updateAdapterSummaryTable(data) {
        if (!data || !data.serverAdapters) return;

        // 어댑터 요약 컨테이너 찾기
        var summaryBody = document.querySelector('.adapter-summary-body');
        if (!summaryBody) return;

        // 컨테이너 초기화
        summaryBody.innerHTML = '';

        // 모든 서버의 어댑터 요약 데이터 통합
        var allAdapterSummaries = [];
        data.serverAdapters.forEach(function(serverAdapter) {
            if (serverAdapter.adapterSummaries && serverAdapter.adapterSummaries.length > 0) {
                allAdapterSummaries = allAdapterSummaries.concat(serverAdapter.adapterSummaries);
            }
        });

        // 어댑터 유형별로 그룹화
        var adapterTypeMap = {};
        allAdapterSummaries.forEach(function(summary) {
            if (!adapterTypeMap[summary.adapterType]) {
                adapterTypeMap[summary.adapterType] = summary;
            } else {
                // 기존 데이터에 카운트 누적
                var existing = adapterTypeMap[summary.adapterType];
                existing.errorCount = (existing.errorCount || 0) + (summary.errorCount || 0);
                existing.warningCount = (existing.warningCount || 0) + (summary.warningCount || 0);
                existing.normalCount = (existing.normalCount || 0) + (summary.normalCount || 0);
                existing.inactiveCount = (existing.inactiveCount || 0) + (summary.inactiveCount || 0);
                existing.totalCount = (existing.totalCount || 0) + (summary.totalCount || 0);

                // 전체 상태 업데이트
                if (summary.overallStatus === 'error' || existing.overallStatus === 'error') {
                    existing.overallStatus = 'error';
                } else if (summary.overallStatus === 'warning' || existing.overallStatus === 'warning') {
                    existing.overallStatus = 'warning';
                }
            }
        });

        // 필터링된 어댑터 유형만 표시 (Socket, Socket2, HTTP)
        var filteredAdapterTypes = Object.keys(adapterTypeMap).filter(function(type) {
            return type === 'Socket' || type === 'Socket2' || type === 'HTTP';
        });

        if (filteredAdapterTypes.length > 0) {
            // 어댑터 유형별로 행 추가
            filteredAdapterTypes.forEach(function(type) {
                var summaryRow = createAdapterSummaryRow(adapterTypeMap[type]);
                summaryBody.appendChild(summaryRow);
            });
        } else {
            // 데이터가 없는 경우 안내 메시지 표시
            var emptyRow = document.createElement('div');
            emptyRow.className = 'empty-data-message';
            emptyRow.textContent = '표시할 어댑터 데이터가 없습니다.';
            summaryBody.appendChild(emptyRow);
        }
    }

    // 어댑터 요약 데이터 로드 함수
    function loadAdapterSummaryData() {
        // 어댑터 요약 데이터 API 호출
        ModernDashboardApi.getAdapterStatus(null, function(data) {
            if (data) {
                updateAdapterSummaryTable(data);
            }
        });
    }

    // 문서 로드 완료 시 초기화
    $(document).ready(function() {
        // 초기 데이터 로드
        loadAdapterSummaryData();

        // 소켓 어댑터 상세 보기 버튼 이벤트
        $('.view-socket-detail').on('click', function() {
            // 소켓 상세 정보 모달 열기
            openSocketDetailModal();
        });

        // DashboardEventManager를 사용하여 새로고침 이벤트 구독
        if (window.DashboardEventManager) {
            window.DashboardEventManager.on('refresh', function() {
                // 어댑터 요약 데이터 새로고침
                loadAdapterSummaryData();
            });
        }
    });
</script>