/**
 * 坐标映射状态监控组件
 */

import React, { useState, useEffect } from 'react'
import { SafeCoordinateMapper } from '../../utils/SafeCoordinateMapper'

interface CoordinateMappingStatusProps {
  coordinateMapper?: SafeCoordinateMapper | null
}

const CoordinateMappingStatus: React.FC<CoordinateMappingStatusProps> = ({
  coordinateMapper
}) => {
  const [performanceReport, setPerformanceReport] = useState<string>('')

  useEffect(() => {
    if (!coordinateMapper) return

    const updateReport = () => {
      try {
        const report = coordinateMapper.getPerformanceReport()
        setPerformanceReport(report)
      } catch (error) {
        console.error('获取性能报告失败:', error)
      }
    }

    updateReport()
    const interval = setInterval(updateReport, 5000)
    
    return () => clearInterval(interval)
  }, [coordinateMapper])

  if (!coordinateMapper) {
    return (
      <div style={{
        padding: '8px 12px',
        background: '#f0f0f0',
        borderRadius: '4px',
        fontSize: '12px',
        color: '#666'
      }}>
        坐标映射器未初始化
      </div>
    )
  }

  return (
    <div style={{
      padding: '8px 12px',
      background: '#f9f9f9',
      borderRadius: '4px',
      fontSize: '12px',
      fontFamily: 'monospace'
    }}>
      <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
        📊 坐标映射状态
      </div>
      <pre style={{ margin: 0, fontSize: '11px', whiteSpace: 'pre-wrap' }}>
        {performanceReport || '正在加载...'}
      </pre>
    </div>
  )
}

export default CoordinateMappingStatus 