<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Map"%>
<%@ page import="com.eactive.eai.rms.common.context.MonitoringContext"%>
<%@ page import="com.eactive.eai.rms.common.util.CommonUtil"%>
<%@ page import="com.eactive.eai.rms.common.datasource.DataSourceType"%>
<%@ page import="com.eactive.eai.rms.common.datasource.DataSourceTypeManager"%>
<%@ page import="com.eactive.eai.common.util.SystemUtil"%>
<%@ page import="javax.persistence.criteria.CriteriaBuilder" %>
<%@ page import="java.util.Comparator" %>
<%@ include file="/jsp/common/include/localemessage.jsp" %>

<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");
    request.setCharacterEncoding("utf-8");
    MonitoringContext monitoringContext = (MonitoringContext)CommonUtil.getBean(request, "monitoringContext");

    String NEW_TITLE = (String) session.getAttribute(MonitoringContext.NEW_DASHBOARD_TITLE);
    String fepBatchUrl = monitoringContext.getStringProperty("FEP_BATCH_SERVER", "");
    String eaiBatchUrl = monitoringContext.getStringProperty("EAI_BATCH_SERVER", "");

    // 온라인 데이터 소스 타입 목록 가져오기
    List<DataSourceType> srvList = DataSourceTypeManager.getOnlineDataSourceTypes();

    // GW 추가
    if( DataSourceTypeManager.getDataSourceType("FGW") != null ){
        srvList.add(DataSourceTypeManager.getDataSourceType("FGW"));
    }

    if( DataSourceTypeManager.getDataSourceType("CGW") != null ){
        srvList.add(DataSourceTypeManager.getDataSourceType("CGW"));
    }

    int srvCnt = srvList.size();

    // 서버 타입별 목록을 저장할 맵 생성
    Map<String, List<DataSourceType>> serverTypeMap = new HashMap<>();

    // 서버타입 맵을 application 스코프에 저장 (모든 컴포넌트에서 접근 가능)
    application.setAttribute("serverTypeMap", serverTypeMap);

    // 서버 타입별로 분류
    for (DataSourceType server : srvList) {
        String serverName = server.getName();

        // 서버 타입에 해당하는 리스트가 없으면 생성
        if (!serverTypeMap.containsKey(serverName)) {
            serverTypeMap.put(serverName, new ArrayList<DataSourceType>());
        }

        // 서버를 해당 타입 리스트에 추가
        serverTypeMap.get(serverName).add(server);
    }

    // BAP(일괄전송) 서버 타입 추가
    DataSourceType bapServer = DataSourceTypeManager.getDataSourceType(DataSourceTypeManager.BAP);
    if (bapServer != null && !serverTypeMap.containsKey(DataSourceTypeManager.BAP)) {
        List<DataSourceType> bapList = new ArrayList<>();
        bapList.add(bapServer);
        serverTypeMap.put(DataSourceTypeManager.BAP, bapList);
    }

    // 서버 데이터 생성 (JavaScript 용)
    StringBuilder serverDataJS = new StringBuilder();
    serverDataJS.append("var serverDataArray = [");

    boolean first = true;
    for (Map.Entry<String, List<DataSourceType>> entry : serverTypeMap.entrySet()) {
        String serverType = entry.getKey();
        List<DataSourceType> servers = entry.getValue();

        // BAT 서버는 제외
        if (DataSourceTypeManager.BAT.equals(serverType)) {
            continue;
        }

        for (DataSourceType server : servers) {
            if (!first) {
                serverDataJS.append(",");
            }

            String name = server.getName();
            String text = server.getText();

            serverDataJS.append("{");
            serverDataJS.append("type:'").append(serverType).append("',");
            serverDataJS.append("name:'").append(name).append("',");
            serverDataJS.append("text:'").append(text).append("'");
            serverDataJS.append("}");

            first = false;
        }
    }

    serverDataJS.append("];");
%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>eLink 모니터링 대시보드</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 폰트 -->
    <jsp:include page="/jsp/common/include/fonts.jsp"/>
    <!-- 아이콘 -->
    <link href="<%=request.getContextPath()%>/addon/bootstrap-icons-1.11.3/bootstrap-icons.min.css" rel="stylesheet" />
    <!-- 커스텀 CSS -->
    <link href="<%=request.getContextPath()%>/dashboard-modern/css/main.css" rel="stylesheet" />

    <!-- jQuery -->
    <script src="<%=request.getContextPath()%>/js/jquery-3.7.1.min.js"></script>
    <!-- 커스텀 JavaScript -->
    <script src="<%=request.getContextPath()%>/dashboard-modern/js/modern-dashboard-api.js"></script>
    <script src="<%=request.getContextPath()%>/dashboard-modern/js/modern-dashboard.js"></script>

    <!-- API 초기화 (가장 먼저 실행) -->
    <script>
        // 페이지 로드 전 API 초기화
        ModernDashboardApi.init('<%=request.getContextPath()%>');
    </script>

    <style>
    	/* 모든 카드는 7:3 기준으로 수정, 광주은행 요청사항 */
    
        /* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
        .first-row {
            grid-template-columns: 7fr 3fr;
        }

        /* 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 */
        .second-row {
            grid-template-columns: 7fr 3fr;
        }

        /* 3번 줄 (7:3 비율) - 어댑터 상태, 장애통보(SMS) */
        .third-row {
            grid-template-columns: 7fr 3fr;
        }

        /* 컴팩트한 대시보드를 위한 추가 스타일 */
        .container {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        /* 카드 내부 여백 줄임 */
        .card {
            padding: 0.75rem;
        }

        /* 테이블 행 높이 줄임 */
        table tr td, table tr th {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }

        /* 반응형 디자인 */
        @media (max-width: 1200px) {
            .first-row {
                grid-template-columns: 1fr;
            }
            .second-row {
                grid-template-columns: 1fr;
            }
            .third-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 헤더 영역 -->
    <jsp:include page="components/dashboard-header.jsp" />
    
    <!-- 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 -->
    <div class="dashboard-row first-row">
        <!-- 서버 상태 섹션 (5/8 비율) -->
        <div class="server-container">
            <jsp:include page="components/dashboard-servers.jsp">
                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
            </jsp:include>
        </div>

        <!-- 장애통보(SMS) 섹션 (2/10 비율) -->
        <div class="sms-container">
            <jsp:include page="components/dashboard-sms.jsp" />
        </div>

        <!-- 피크 처리 성능 섹션 (1/8 비율) -->
        <%--<div class="peak-container">
            <jsp:include page="components/dashboard-peak.jsp" />
        </div>--%>
    </div>

    <!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
    <div class="dashboard-row second-row">
        <!-- 어댑터 섹션 (8/10 비율) -->
        <div class="adapters-container">
            <jsp:include page="components/dashboard-adapter.jsp">
                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
            </jsp:include>
        </div>

        <!-- 거래 처리 집계 섹션 (우측) -->
        <div class="transaction-container" style="overflow-y:auto;">
            <jsp:include page="components/dashboard-transactions.jsp">
                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
            </jsp:include>
        </div>
    </div>

    <!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
    <div class="dashboard-row third-row">
    
        <!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
        <div class="transaction-overview-container">
            <jsp:include page="components/dashboard-tran-chart.jsp" />
        </div>
        
        <!-- 배치 처리 상태 섹션 (3/8 비율) -->
        <div class="batch-container">
            <jsp:include page="components/dashboard-batch.jsp" />
        </div>
    </div>
    <!-- 인터페이스 로그 조회 모달 -->
    <jsp:include page="components/dashboard-interface-detail.jsp" />
    <!-- 푸터 영역 -->
    <jsp:include page="components/dashboard-footer.jsp" />
</div>

<script type="text/javascript">
    // 행의 높이를 맞추는 함수 (카드를 직접 타겟)
    function matchRowHeights() {
        $('.dashboard-row').each(function() {
            var maxHeight = 0;
            // 각 행에 있는 .card 요소를 직접 찾음
            var $cards = $(this).find('.card');

            if ($cards.length > 1) {
                // 자식 요소의 자연 높이를 얻기 위해 min-height 초기화
                $cards.css('min-height', '0');

                // 자식 카드들의 최대 높이를 찾음
                $cards.each(function() {
                    var currentHeight = $(this).outerHeight();
                    if (currentHeight > maxHeight) {
                        maxHeight = currentHeight;
                    }
                });

                // 모든 자식 카드에 최대 높이를 min-height로 적용
                if (maxHeight > 0) {
                    $cards.css('min-height', maxHeight + 'px');
                }
            }
        });
    }

    $(document).ready(function() {
        // 대시보드 초기화
        initDashboard('<%=request.getContextPath()%>');

        // 현재 시간 표시 및 업데이트
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);

        // 초기 데이터 로드
        refreshDashboardData();

        // 로컬 스토리지에서 저장된 새로고침 간격 불러오기
        if (localStorage.getItem('dashboardRefreshInterval')) {
            window.refreshInterval = parseInt(localStorage.getItem('dashboardRefreshInterval'));

            // 저장된 간격에 해당하는 버튼 활성화
            $('.refresh-btn').removeClass('active');
            $('.refresh-btn[data-interval="' + window.refreshInterval + '"]').addClass('active');
        }

        // modern-dashboard.js의 함수 호출
        window.startRefreshTimer();
        window.updateRefreshStatus();

        // --- 높이 맞춤 로직 ---
        // 초기 렌더링 후 높이 맞춤 (약간의 지연 후)
        setTimeout(function() { matchRowHeights(); }, 300);

        // 데이터 로딩이 끝날 때마다 높이 다시 맞춤
        if (window.DashboardEventManager) {
            window.DashboardEventManager.on('loading-end', function() {
                // 데이터 렌더링을 위한 약간의 지연 후 높이 맞춤
                setTimeout(function() { matchRowHeights(); }, 100);
            });
        }

        // 창 크기 조절 시 높이 다시 맞춤 (디바운싱 적용)
        var resizeTimeout;
        $(window).on('resize', function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() { matchRowHeights(); }, 200);
        });
    });
</script>
</body>
</html>