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

<div class="dashboard-summary">
  <h2 class="section-title">실시간 트랜잭션 현황</h2>
  <div class="card">
    <div class="chart-controls">
      <div class="btn-group" style="display: none">
        <button class="btn btn-chart-type" data-type="area">영역</button>
        <button class="btn btn-chart-type active" data-type="line">선형</button>
        <button class="btn btn-chart-type" data-type="bar">막대</button>
      </div>
      <div class="btn-group ml-2">
        <button class="btn btn-time-range" data-range="5m">5분</button>
        <button class="btn btn-time-range active" data-range="10m">10분</button>
        <button class="btn btn-time-range" data-range="30m">30분</button>
        <button class="btn btn-time-range" data-range="1h">1시간</button>
      </div>
    </div>
    <div class="chart-container">
      <div id="transaction-chart" class="chart-content">
        <i class="bi bi-bar-chart-line"></i>
        <span>트랜잭션 데이터를 로딩 중입니다...</span>
      </div>
    </div>
  </div>
</div>

<!-- ApexCharts 라이브러리 로드 -->
<script src="<%=request.getContextPath()%>/addon/apexcharts/apexcharts.js"></script>

<!-- 트랜잭션 차트 관련 스크립트 -->
<script>
  // 트랜잭션 시계열 데이터 관리 객체
  const TransactionTimeSeriesData = {
    // 서비스별 시계열 데이터를 저장할 맵
    serviceData: {},

    // 최대 데이터 포인트 수 (60분 간격, 10초마다 갱신 = 360개 포인트)
    maxDataPoints: 360,

    // 초기화
    init: function() {
      // 서비스 목록 초기화
      this.initServiceTypes();
    },

    // 서비스 유형 초기화
    initServiceTypes: function() {
      // 서버 데이터 배열에서 서비스 타입 추출
      if (window.serverDataArray) {
        const uniqueTypes = new Set();
        serverDataArray.forEach(server => {
          uniqueTypes.add(server.type);
        });

        // 각 고유 서비스 타입에 대해 시계열 데이터 초기화
        uniqueTypes.forEach(serviceType => {
          if (!this.serviceData[serviceType]) {
            this.serviceData[serviceType] = {
              timestamps: [],
              success: [],
              fail: [],
              timeout: [],
              syserror: []
            };
          }
        });
      } else {
        // 기본 서비스 타입 (기본값)
        const defaultTypes = ['EAI', 'FEP', 'MCI', 'MCU', 'BAP'];
        defaultTypes.forEach(serviceType => {
          this.serviceData[serviceType] = {
            timestamps: [],
            success: [],
            fail: [],
            timeout: [],
            syserror: []
          };
        });
      }

      // 합계 데이터를 위한 TOTAL 서비스 추가
      this.serviceData['TOTAL'] = {
        timestamps: [],
        success: [],
        fail: [],
        timeout: [],
        syserror: []
      };
    },

    // 타임스탬프를 Date 객체로 변환
    ensureDateObject: function(timestamp) {
      if (timestamp instanceof Date) {
        return timestamp;
      } else if (typeof timestamp === 'number') {
        return new Date(timestamp);
      } else if (typeof timestamp === 'string') {
        return new Date(timestamp);
      }
      return new Date(); // 기본값으로 현재 시간 반환
    },

    // 모의 데이터 생성 (테스트용)
    generateMockData: function() {
      const mockData = [];
      for (const serviceType in this.serviceData) {
        mockData.push({
          type: serviceType,
          success: 0,
          fail: 0,
          timeout: 0,
          syserror: 0
        });
      }
      return mockData;
    },

    // 트랜잭션 데이터 업데이트
    updateData: function(transactions) {
      if (!transactions || !transactions.length) return;

      const timestamp = new Date();

      // 각 서비스별 데이터 업데이트
      transactions.forEach(transaction => {
        const serviceType = transaction.type;

        // 해당 서비스의 시계열 데이터가 없으면 초기화
        if (!this.serviceData[serviceType]) {
          this.serviceData[serviceType] = {
            timestamps: [],
            success: [],
            fail: [],
            timeout: [],
            syserror: []
          };
        }

        const data = this.serviceData[serviceType];

        // 타임스탬프 추가
        data.timestamps.push(timestamp);

        // 데이터 추가
        data.success.push(transaction.success || 0);
        data.fail.push(transaction.fail || 0);
        data.timeout.push(transaction.timeout || 0);
        data.syserror.push(transaction.syserror || 0);

        // 최대 데이터 포인트 수 제한
        if (data.timestamps.length > this.maxDataPoints) {
          data.timestamps.shift();
          data.success.shift();
          data.fail.shift();
          data.timeout.shift();
          data.syserror.shift();
        }
      });
    },

    // 오래된 데이터 정리 (60분 이상 경과된 데이터)
    cleanupData: function() {
      const cutoffTime = new Date(new Date() - 60 * 60 * 1000); // 60분 전

      for (const serviceType in this.serviceData) {
        const data = this.serviceData[serviceType];

        // 각 데이터 시리즈에서 60분 이전 데이터 제거
        let i = 0;
        while (i < data.timestamps.length && this.ensureDateObject(data.timestamps[i]) < cutoffTime) {
          i++;
        }

        if (i > 0) {
          data.timestamps = data.timestamps.slice(i);
          data.success = data.success.slice(i);
          data.fail = data.fail.slice(i);
          data.timeout = data.timeout.slice(i);
          data.syserror = data.syserror.slice(i);
        }
      }
    },

    // 특정 서비스의 시계열 데이터 가져오기
    getServiceData: function(serviceType) {
      return this.serviceData[serviceType] || {
        timestamps: [],
        success: [],
        fail: [],
        timeout: [],
        syserror: []
      };
    },
  };

  // 트랜잭션 차트 관리 객체
  const TransactionChart = {
    chart: null,
    chartType: 'line', // 기본값: 영역 차트
    timeRange: '10m',  // 기본값: 5분

    // 초기화
    init: function(containerId) {
      // ApexCharts 로드 확인
      if (typeof ApexCharts === 'undefined') {
        console.error('ApexCharts 라이브러리가 로드되지 않았습니다.');
        return;
      }

      const container = document.getElementById(containerId);
      if (!container) {
        console.error('차트 컨테이너를 찾을 수 없습니다: ' + containerId);
        return;
      }

      // 기존 차트 제거
      if (this.chart) {
        this.chart.destroy();
      }

      // 새 차트 인스턴스 생성
      const options = this.getChartOptions();
      this.chart = new ApexCharts(container, options);
      this.chart.render();

      // 브라우저 창 크기 변경 시 차트 크기 조정
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.updateOptions({
            chart: {
              width: '100%'
            }
          });
        }
      });
    },

    // 차트 옵션 가져오기
    getChartOptions: function() {
      return {
        chart: {
          type: this.chartType,
          height: 180,
          toolbar: {
            show: false
          },
          animations: {
            enabled: true,
            easing: 'easeinout',
            speed: 800,
            animateGradually: {
              enabled: true,
              delay: 150
            },
            dynamicAnimation: {
              enabled: true,
              speed: 350
            }
          },
          fontFamily: 'Noto Sans KR, sans-serif',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth',
          width: 2
        },
        series: [],
        colors: ['#4CAF50', '#F44336', '#2196F3', '#FF5722', '#9C27B0', '#FF9800'],
        fill: {
          type: this.chartType === 'area' ? 'gradient' : 'solid',
          gradient: {
            shade: 'light',
            type: 'vertical',
            shadeIntensity: 0.3,
            opacityFrom: 0.7,
            opacityTo: 0.2,
            stops: [0, 90, 100]
          }
        },
        grid: {
          borderColor: '#e0e0e0',
          strokeDashArray: 3,
          xaxis: {
            lines: {
              show: false
            }
          }
        },
        tooltip: {
          shared: true,
          intersect: false,
          y: {
            formatter: function(value) {
              return value.toLocaleString() + ' 건';
            }
          },
          x: {
            formatter: function(value) {
              const date = new Date(value);
              return date.toLocaleTimeString();
            }
          }
        },
        xaxis: {
          type: 'datetime',
          labels: {
            datetimeUTC: false,
            format: 'HH:mm'
          },
          tooltip: {
            enabled: false
          },
          tickAmount: 6
        },
        yaxis: {
          title: {
            text: '처리 건수',
            style: {
              fontWeight: 600
            }
          },
          labels: {
            formatter: function(value) {
              return value.toLocaleString();
            }
          },
          forceNiceScale: true,
          min: undefined,
          max: undefined
        },
        legend: {
          position: 'top',
          horizontalAlign: 'right',
          floating: true,
          offsetY: -25,
          offsetX: -5,
          showForSingleSeries: true,
          onItemClick: {
            toggleDataSeries: true
          },
          onItemHover: {
            highlightDataSeries: true
          },
          markers: {
            width: 12,
            height: 12,
            strokeWidth: 0,
            radius: 12,
            offsetX: -5
          },
          itemMargin: {
            horizontal: 10,
            vertical: 5
          }
        },
        states: {
          hover: {
            filter: {
              type: 'lighten',
              value: 0.05
            }
          },
          active: {
            filter: {
              type: 'darken',
              value: 0.1
            }
          }
        },
        responsive: [
          {
            breakpoint: 768,
            options: {
              legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                floating: false,
                offsetY: 0,
                offsetX: 0
              }
            }
          }
        ]
      };
    },

    // 서비스 타입에 따른 색상 맵
    colorMap: {
      'EAI': { success: '#4CAF50', error: '#F44336' },
      'FEP': { success: '#2196F3', error: '#FF5722' },
      'MCI': { success: '#9C27B0', error: '#FF9800' },
      'MCU': { success: '#3F51B5', error: '#FFC107' },
      'BAP': { success: '#00BCD4', error: '#795548' },
      'TOTAL': { success: '#607D8B', error: '#9E9E9E' }
    },

    // 서비스 및 데이터 타입에 따른 색상 반환
    getServiceColor: function(serviceType, dataType) {
      if (this.colorMap[serviceType] && this.colorMap[serviceType][dataType]) {
        return this.colorMap[serviceType][dataType];
      }

      // 기본 색상
      return dataType === 'success' ? '#66BB6A' : '#EF5350';
    },

    // 차트 타입 설정
    setChartType: function(type) {
      this.chartType = type;
      this.updateChart();
    },

    // 시간 범위 설정
    setTimeRange: function(range) {
      this.timeRange = range;
      this.updateChart();
    },

    // 차트 업데이트
    updateChart: function() {
      if (!this.chart) return;

      const series = [];

      // 각 서비스에 대한 시리즈 생성 (TOTAL 제외)
      for (const serviceType in TransactionTimeSeriesData.serviceData) {
        if (serviceType === 'TOTAL') continue;

        const serviceData = TransactionTimeSeriesData.serviceData[serviceType];
        if (!serviceData.timestamps.length) continue;

        // 성공 시리즈
        series.push({
          name: serviceType + ' 성공',
          type: this.chartType,
          data: serviceData.timestamps.map((time, index) => ({
            x: TransactionTimeSeriesData.ensureDateObject(time).getTime(),
            y: serviceData.success[index]
          })),
          color: this.getServiceColor(serviceType, 'success')
        });

        // 에러 시리즈 (실패 + 타임아웃 + 시스템 에러)
        series.push({
          name: serviceType + ' 에러',
          type: this.chartType,
          data: serviceData.timestamps.map((time, index) => ({
            x: TransactionTimeSeriesData.ensureDateObject(time).getTime(),
            y: serviceData.fail[index] + serviceData.timeout[index] + serviceData.syserror[index]
          })),
          color: this.getServiceColor(serviceType, 'error')
        });
      }

      // 시간 범위에 따른 X축 범위 설정
      const rangeMinutes = {
        '5m': 5,
        '10m': 10,
        '30m': 30,
        '1h': 60
      }[this.timeRange] || 10;

      const startTime = new Date(new Date() - rangeMinutes * 60 * 1000);
      const endTime = new Date();

      // 차트 옵션 업데이트 - 전체 다시 그리기 방지
      this.chart.updateOptions({
        chart: {
          type: this.chartType
        },
        fill: {
          type: this.chartType === 'area' ? 'gradient' : 'solid'
        },
        xaxis: {
          min: startTime.getTime(),
          max: endTime.getTime() + 1000
        }
      }, false, false); // 차트 다시 그리지 않고 업데이트

      // 시리즈 데이터만 업데이트
      this.chart.updateSeries(series, false);
    },

    // 모의 데이터로 차트 업데이트 (테스트용)
    updateWithMockData: function() {
      const mockData = TransactionTimeSeriesData.generateMockData();
      TransactionTimeSeriesData.updateData(mockData);
      this.updateChart();
    }
  };

  // 문서 로드 완료 시 초기화
  $(document).ready(function() {
    // 시계열 데이터 관리 객체 초기화
    TransactionTimeSeriesData.init();

    // 차트 초기화
    TransactionChart.init('transaction-chart');

    // 차트 컨트롤 이벤트 설정
    setupChartControls();

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

    // 10초마다 오래된 데이터 정리
    setInterval(() => TransactionTimeSeriesData.cleanupData(), 10000);

    // DashboardEventManager를 사용하여 새로고침 이벤트 구독
    if (window.DashboardEventManager) {
      window.DashboardEventManager.on('refresh', function() {
        // 트랜잭션 데이터 추가 로드
        loadSummaryTransactionData();
      });
    }

  });

  // 차트 컨트롤 이벤트 설정
  function setupChartControls() {
    // 차트 타입 변경
    $('.btn-chart-type').click(function() {
      // 기존 활성화 버튼 비활성화
      $('.btn-chart-type').removeClass('active');

      // 클릭한 버튼 활성화
      $(this).addClass('active');

      // 차트 타입 변경
      const chartType = $(this).data('type');
      TransactionChart.setChartType(chartType);
    });

    // 시간 범위 변경
    $('.btn-time-range').click(function() {
      // 기존 활성화 버튼 비활성화
      $('.btn-time-range').removeClass('active');

      // 클릭한 버튼 활성화
      $(this).addClass('active');

      // 시간 범위 변경
      const timeRange = $(this).data('range');
      TransactionChart.setTimeRange(timeRange);
    });
  }

  // 초기 차트 데이터 로드
  function loadInitialChartData() {
    // 시계열 데이터 API 호출
    ModernDashboardApi.getTransactionTimeSeries(null, 10, function(data) {
      if (data && data.timeSeriesData) {
        // 각 서비스별 시계열 데이터 처리
        for (var serviceType in data.timeSeriesData) {
          var serviceData = data.timeSeriesData[serviceType];
          if (!serviceData.timestamps || serviceData.timestamps.length === 0) continue;

          // 기존 데이터 초기화
          TransactionTimeSeriesData.serviceData[serviceType] = {
            timestamps: [],
            success: [],
            fail: [],
            timeout: [],
            syserror: []
          };

          // API 응답 데이터 복사 및 타임스탬프 변환
          TransactionTimeSeriesData.serviceData[serviceType].timestamps = serviceData.timestamps.map(time =>
                  TransactionTimeSeriesData.ensureDateObject(time)
          );
          TransactionTimeSeriesData.serviceData[serviceType].success = serviceData.success.slice();
          TransactionTimeSeriesData.serviceData[serviceType].fail = serviceData.fail.slice();
          TransactionTimeSeriesData.serviceData[serviceType].timeout = serviceData.timeout.slice();
          TransactionTimeSeriesData.serviceData[serviceType].syserror = serviceData.syserror.slice();
        }

        // 차트 업데이트
        TransactionChart.updateChart();
      } else {
        // API 응답이 없는 경우 모의 데이터로 테스트
        TransactionChart.updateWithMockData();
      }
    });
  }

  // 트랜잭션 데이터 로드 및 차트 업데이트 (함수명 변경)
  function loadSummaryTransactionData() {

    // 현재 선택된 시간 범위 가져오기
    var activeRange = $('.btn-time-range.active').data('range') || '10m';
    var minutes = {
      '5m': 5,
      '10m': 10,
      '30m': 30,
      '1h': 60
    }[activeRange] || 10;

    ModernDashboardApi.getTransactionTimeSeries(null, minutes, function(data) {
      if (data && data.timeSeriesData) {
        // 각 서비스별 시계열 데이터 처리
        for (var serviceType in data.timeSeriesData) {
          var serviceData = data.timeSeriesData[serviceType];
          if (!serviceData.timestamps || serviceData.timestamps.length === 0) continue;

          // 기존 데이터 초기화
          TransactionTimeSeriesData.serviceData[serviceType] = {
            timestamps: [],
            success: [],
            fail: [],
            timeout: [],
            syserror: []
          };

          // API 응답 데이터 복사 및 타임스탬프 변환
          TransactionTimeSeriesData.serviceData[serviceType].timestamps = serviceData.timestamps.map(time =>
                  TransactionTimeSeriesData.ensureDateObject(time)
          );
          TransactionTimeSeriesData.serviceData[serviceType].success = serviceData.success.slice();
          TransactionTimeSeriesData.serviceData[serviceType].fail = serviceData.fail.slice();
          TransactionTimeSeriesData.serviceData[serviceType].timeout = serviceData.timeout.slice();
          TransactionTimeSeriesData.serviceData[serviceType].syserror = serviceData.syserror.slice();
        }

        // 차트 업데이트 - 부드러운 업데이트
        TransactionChart.updateChart();
      }
    });
  }
</script>

<!-- 추가 CSS 스타일 -->
<style>
  .chart-controls {
    display: flex;
    justify-content: flex-end;
  }

  .chart-controls .btn-group {
    display: flex;
  }

  .chart-controls .btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    color: #666;
    transition: all 0.2s ease;
  }

  .chart-controls .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .chart-controls .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .chart-controls .btn.active {
    background-color: #2196F3;
    color: white;
    border-color: #2196F3;
  }

  .chart-controls .ml-2 {
    margin-left: 0.5rem;
  }

  .chart-content {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-gray-400);
  }

  .card {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 16px;
    margin-bottom: 0px;
  }

  /* 범례 스타일 개선 */
  .apexcharts-legend-series {
    margin: 3px 8px !important;
    cursor: pointer !important;
  }

  .apexcharts-legend-text {
    font-size: 0.85rem !important;
    color: #333 !important;
    font-weight: 500 !important;
  }

  .apexcharts-legend-marker {
    margin-right: 5px !important;
  }

  .apexcharts-legend-series.apexcharts-inactive-legend {
    opacity: 0.5 !important;
  }
</style>