import React, { useState } from 'react';
import { Box, Container, Typography, Button, Alert } from '@mui/material';
import RealtimeWebSocketGauges from '../components/dashboard/RealtimeWebSocketGauges';
import { Cable } from '@mui/icons-material';

/**
 * 실시간 WebSocket 게이지 테스트 페이지
 * 
 * 이 페이지는 react-gauge-component와 실제 WebSocket 연결을 사용하여
 * 실시간 게이지를 테스트합니다.
 */
const RealtimeGaugeTestPage: React.FC = () => {
  // 더미 props (실제로는 useRealtimeWebSocketMetrics Hook에서 직접 WebSocket 구독)
  const [websocketStats] = useState({
    totalConnections: 1,
    activeConnections: 1,
    serviceStats: {
      frontend: {
        serviceName: 'Frontend',
        connections: 1,
        messagesReceived: 0,
        messagesSent: 0,
        messagesPerSecond: 0,
        lastActivity: new Date().toISOString(),
      },
      backend: {
        serviceName: 'Backend',
        connections: 1,
        messagesReceived: 0,
        messagesSent: 0,
        messagesPerSecond: 0,
        lastActivity: new Date().toISOString(),
      },
      'data-service': {
        serviceName: 'Data Service',
        connections: 1,
        messagesReceived: 0,
        messagesSent: 0,
        messagesPerSecond: 0,
        lastActivity: new Date().toISOString(),
      },
    },
  });

  return (
    <Box
      sx={{
        minHeight: '100vh',
        bgcolor: 'rgba(15, 23, 42, 1)',
        py: 4,
      }}
    >
      <Container maxWidth="xl">
        <Box sx={{ mb: 4 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
            <Cable sx={{ fontSize: 40, color: '#4ade80' }} />
            <Typography variant="h4" sx={{ color: '#fff', fontWeight: 700 }}>
              실시간 WebSocket 게이지 모니터링
            </Typography>
          </Box>
          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.6)', mb: 2 }}>
            실제 WebSocket 연결을 통한 실시간 데이터 수신 현황
          </Typography>
          <Alert severity="info" sx={{ mb: 2 }}>
            <strong>실시간 모니터링 활성화</strong>
            <br />
            이 페이지는 실제 WebSocket 서버에 연결하여 메시지를 수신합니다.
            백엔드 서버가 실행 중이어야 데이터를 확인할 수 있습니다.
          </Alert>
        </Box>

        <RealtimeWebSocketGauges websocketStats={websocketStats} />

        <Box
          sx={{
            mt: 4,
            p: 3,
            bgcolor: 'rgba(30, 41, 59, 0.6)',
            borderRadius: 2,
            border: '1px solid rgba(100, 149, 237, 0.3)',
          }}
        >
          <Typography variant="h6" sx={{ color: '#fff', mb: 2 }}>
            📊 기술 스택 및 동작 방식
          </Typography>
          <ul style={{ color: 'rgba(255,255,255,0.7)', margin: 0, paddingLeft: '20px' }}>
            <li>
              <strong>react-gauge-component</strong>: 실시간 게이지 차트 라이브러리
            </li>
            <li>
              <strong>WebSocket API</strong>: 실제 WebSocket 서버 연결 (`ws://localhost:8083/ws/realtime`)
            </li>
            <li>
              <strong>Custom Hook (useRealtimeWebSocketMetrics)</strong>: WebSocket 메시지 수신 및 메트릭 계산
            </li>
            <li>
              <strong>슬라이딩 윈도우</strong>: 1초 단위로 메시지 수를 계산하여 초당 메시지 수(msg/s) 산출
            </li>
            <li>
              <strong>100ms 갱신 주기</strong>: 부드러운 애니메이션을 위한 고빈도 업데이트
            </li>
          </ul>

          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.6)', mt: 2 }}>
            💡 <strong>실시간 동작</strong>: 이 게이지는 실제 WebSocket 메시지를 수신할 때마다
            자동으로 업데이트됩니다. 백엔드에서 Upbit WebSocket 데이터를 수신하면 게이지가 즉시 반응합니다.
          </Typography>
          
          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.6)', mt: 1 }}>
            🔗 <strong>연결 상태</strong>: 상단의 연결 상태 표시를 확인하세요. WebSocket이 연결되면
            실시간 데이터가 흐르기 시작합니다.
          </Typography>
        </Box>
      </Container>
    </Box>
  );
};

export default RealtimeGaugeTestPage;
