<%@ page language="java" contentType="text/html; charset=utf-8"%>
<header>
    <div class="header-title">
        <i class="bi bi-speedometer2"></i>
        <h1>eLink 모니터링 대시보드</h1>
        <div class="global-loading-indicator" id="global-loading-indicator"></div>
    </div>
    <div class="header-controls">
        <div class="time-display" id="current-time"></div>
        <div class="refresh-controls">
            <span class="refresh-status active"></span>
            <span class="refresh-label">자동 새로고침:</span>
            <div class="btn-group">
                <button class="btn refresh-btn btn-sm" data-interval="2">2초</button>
                <button class="btn refresh-btn btn-sm" data-interval="5">5초</button>
                <button class="btn refresh-btn btn-sm active" data-interval="10">10초</button>
                <button class="btn refresh-btn btn-sm" data-interval="0">사용안함</button>
            </div>
        </div>
        <button class="btn btn-sm" id="refresh-btn">
            <i class="bi bi-arrow-clockwise"></i> 수동 새로고침
        </button>
    </div>
</header>

<script>
    // 새로고침 간격 버튼 클릭 이벤트
    $('.refresh-btn').click(function() {
        // 버튼 활성화 상태 변경
        $('.refresh-btn').removeClass('active');
        $(this).addClass('active');

        // 새로고침 간격 설정
        refreshInterval = parseInt($(this).data('interval'));

        // 로컬 스토리지에 저장
        localStorage.setItem('dashboardRefreshInterval', refreshInterval);

        // 타이머 재시작
        startRefreshTimer();

        // 새로고침 상태 표시 업데이트
        updateRefreshStatus();
    });

    // 수동 새로고침 버튼 클릭 이벤트
    $('#refresh-btn').click(function() {
        refreshDashboardData();
    });

    // 전역 로딩 인디케이터 제어 함수
    function showGlobalLoadingIndicator() {
        $('#global-loading-indicator').addClass('active');
    }

    function hideGlobalLoadingIndicator() {
        $('#global-loading-indicator').removeClass('active');
    }

    // 문서 로드 완료 시 이벤트 리스너 등록
    $(document).ready(function() {
        // DashboardEventManager 이벤트 구독
        if (window.DashboardEventManager) {
            // 데이터 로딩 시작 이벤트
            window.DashboardEventManager.on('loading-start', function() {
                showGlobalLoadingIndicator();
            });

            // 데이터 로딩 완료 이벤트
            window.DashboardEventManager.on('loading-end', function() {
                hideGlobalLoadingIndicator();
            });
        }
    });
</script>

<style>
    /* 전역 로딩 인디케이터 스타일 */
    .global-loading-indicator {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-left: 10px;
        border-radius: 50%;
        border: 2px solid rgba(79, 70, 229, 0.2);
        border-top-color: var(--color-primary);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    .global-loading-indicator.active {
        opacity: 1;
        visibility: visible;
        animation: spin 0.8s linear infinite;
    }

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