import React, { useEffect, useRef, useState } from 'react';

/**
 * 安全的LogSender React组件
 * 避免所有可能的React渲染错误
 */
const LogSenderComponent = ({ 
  serverUrl = 'http://localhost:3001', 
  appName = 'react-app',
  enabled = true,
  debug = false
}) => {
  const logSenderRef = useRef(null);
  const isInstalledRef = useRef(false);
  const [status, setStatus] = useState('未初始化');
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!enabled) {
      setStatus('已禁用');
      return;
    }

    const initializeLogSender = async () => {
      try {
        setStatus('初始化中...');
        setError(null);

        // 动态导入LogSender以避免打包问题
        let LogSender;
        try {
          // 尝试相对路径
          LogSender = (await import('../lib/browser-index.js')).default || 
                     (await import('../lib/browser-index.js')).LogSender;
        } catch (importError) {
          // 如果相对路径失败，尝试全局变量
          if (typeof window !== 'undefined' && window.LogSender) {
            LogSender = window.LogSender;
          } else {
            throw new Error('无法加载LogSender库，请确保browser-index.js已正确加载');
          }
        }

        if (!LogSender) {
          throw new Error('LogSender类未找到');
        }

        // 创建LogSender实例
        logSenderRef.current = new LogSender(serverUrl, appName);
        
        // 标记已安装，避免React StrictMode重复安装
        if (!isInstalledRef.current) {
          logSenderRef.current.install();
          isInstalledRef.current = true;
          setStatus('已启用');
          
          if (debug) {
            console.log('[LogSender] React组件已初始化 - serverUrl:', serverUrl, 'appName:', appName, 'timestamp:', new Date().toISOString());
          }
        }

      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : String(err);
        setError(errorMessage);
        setStatus('初始化失败');
        
        if (debug) {
          console.error('[LogSender] 初始化错误:', err);
        }
      }
    };

    initializeLogSender();

    // 清理函数：组件卸载时卸载LogSender
    return () => {
      if (logSenderRef.current && isInstalledRef.current) {
        try {
          logSenderRef.current.uninstall();
          isInstalledRef.current = false;
          setStatus('已卸载');
          
          if (debug) {
            console.log('[LogSender] React组件已卸载');
          }
        } catch (cleanupError) {
          if (debug) {
            console.error('[LogSender] 卸载错误:', cleanupError);
          }
        }
      }
    };
  }, [serverUrl, appName, enabled, debug]);

  // 如果没有启用或发生错误，不渲染任何内容
  if (!enabled || error) {
    return null;
  }

  // 安全渲染：只渲染基本的调试信息，避免任何可能的React错误
  return debug ? (
    <div 
      style={{ 
        display: 'none', // 默认隐藏，只在调试时显示
        fontSize: '12px',
        color: '#666',
        position: 'fixed',
        bottom: '10px',
        right: '10px',
        background: 'rgba(0,0,0,0.8)',
        color: 'white',
        padding: '5px 10px',
        borderRadius: '3px',
        zIndex: 9999
      }}
      data-log-sender-status={status}
    >
      LogSender: {status} ({appName})
    </div>
  ) : null;
};

export default LogSenderComponent;