/* eslint-disable @typescript-eslint/no-use-before-define */
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
// import { RFB } from '@novnc/novnc/core/rfb';
import RFB from '@/public/novnc/core/rfb';

import './index.less';

interface VncRemoteDesktopProps {
  vncUrl: string;
  password?: string;
  onConnected?: () => void;
  onDisconnected?: () => void;
  onError?: (error: string) => void;
  loadingText?: string;
  className?: string;
  isFullscreen?: boolean;
  viewOnly?: boolean;
  autoScale?: boolean;
  maxRetries?: number;
  retryInterval?: number;
}

/**
 * 封装的noVNC远程桌面控制组件
 * 使用项目中已安装的@novnc/novnc包
 */
const VncRemoteDesktop: React.FC<VncRemoteDesktopProps> = ({
  vncUrl,
  password,
  onConnected,
  onDisconnected,
  onError,
  loadingText = '正在连接远程桌面...',
  className = '',
  viewOnly = false,
  autoScale = true,
  maxRetries = 3,
  retryInterval = 2000,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const rfbRef = useRef<RFB | null>(null);
  const retryCountRef = useRef(0);
  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const [connectionStatus, setConnectionStatus] = useState<
    'disconnected' | 'connecting' | 'connected'
  >('disconnected');
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [visible, setVisible] = useState(false);

  //   监听浏览器窗口关闭事件
  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      event.preventDefault();
      disconnect();
      return '';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // 清除重试定时器
  const clearRetryTimeout = () => {
    if (retryTimeoutRef.current) {
      clearTimeout(retryTimeoutRef.current);
      retryTimeoutRef.current = null;
    }
  };

  // 连接到VNC服务器
  const connect = (resetRetry = false) => {
    if (!vncUrl || !canvasRef.current) {
      return;
    }

    // 清除之前的重试定时器
    clearRetryTimeout();

    // 重置重试计数（如果需要）
    if (resetRetry) {
      retryCountRef.current = 0;
    }

    // 断开已有连接
    if (rfbRef.current) {
      disconnect();
    }

    setConnectionStatus('connecting');
    setErrorMessage(null);

    try {
      // 验证URL格式
      if (!vncUrl.startsWith('ws://') && !vncUrl.startsWith('wss://')) {
        throw new Error('无效的VNC URL格式，请使用ws://或wss://开头');
      }

      console.log('WebSocket URL=========', vncUrl);

      console.log('尝试连接到VNC服务器:', vncUrl);

      // 创建RFB实例
      const rfb = new RFB(canvasRef.current, vncUrl, {
        credentials: password ? { password } : undefined,
        shared: true,
        wsProtocols: ['binary'],
        // focusOnClick: !viewOnly,
        dragViewport: true,
        scaleViewport: true,
        resizeSession: true,
        // viewOnly: viewOnly,
        // background: '#000000',
      });

      // 保存RFB实例引用，用于后续操作和事件处理
      rfbRef.current = rfb;
      console.log('rfbRef.current=====保存RFB实例引用', rfbRef.current);

      // 监听连接事件
      rfb.addEventListener('connect', () => {
        console.log('VNC连接成功');
        retryCountRef.current = 0; // 重置重试计数
        setConnectionStatus('connected');
        onConnected?.();
      });

      // 监听断开连接事件
      rfb.addEventListener('disconnect', () => {
        console.log('VNC连接断开');
        setConnectionStatus('disconnected');
        onDisconnected?.();
        console.log('rfbRef.current=====监听断开连接事件', rfbRef.current);
      });

      // 监听安全失败事件
      rfb.addEventListener('securityfailure', (e: any) => {
        console.error('VNC安全连接失败:', e.detail);
        setErrorMessage('安全连接失败: ' + e.detail);
        setConnectionStatus('disconnected');
        onError?.('安全连接失败: ' + e.detail);
        console.log('rfbRef.current=====监听安全失败事件', rfbRef.current);
        rfbRef.current = null;
      });

      // 监听凭证请求事件
      rfb.addEventListener('credentialsrequired', () => {
        console.log('需要凭证');
        if (password && rfbRef.current) {
          rfbRef.current.sendCredentials({ password });
        }
      });

      // 监听错误事件
      rfb.addEventListener('error', (e: any) => {
        const errorDetail = e.detail || {};
        const errorMsg = errorDetail.message || errorDetail || '未知错误';
        console.error('VNC错误:', errorMsg);

        // 提供更具体的错误信息
        let userFriendlyError = '';
        if (errorMsg.toString().includes('WebSocket')) {
          userFriendlyError = `WebSocket连接失败: ${errorMsg}\n可能的原因: 服务器不可达、网络问题或防火墙阻止`;
        } else if (errorMsg.toString().includes('401')) {
          userFriendlyError = '认证失败: 用户名或密码错误';
        } else if (errorMsg.toString().includes('403')) {
          userFriendlyError = '权限不足: 您没有访问该远程桌面的权限';
        } else if (errorMsg.toString().includes('timeout')) {
          userFriendlyError = '连接超时: 服务器响应超时，请检查网络连接';
        } else {
          userFriendlyError = `连接错误: ${errorMsg}`;
        }

        setErrorMessage(userFriendlyError);
        setConnectionStatus('disconnected');
        onError?.(userFriendlyError);

        // 自动重试连接（如果未达到最大重试次数）
        if (retryCountRef.current < maxRetries) {
          retryCountRef.current++;
          console.log(`尝试重新连接 (${retryCountRef.current}/${maxRetries})`);
          retryTimeoutRef.current = setTimeout(() => {
            connect();
          }, retryInterval);
        }
      });
      console.log('RFB连接配置完成');
    } catch (error) {
      console.error('创建VNC连接失败:', error);
      const errorMsg = error instanceof Error ? error.message : '创建连接失败';
      setErrorMessage(errorMsg);
      setConnectionStatus('disconnected');
      onError?.(errorMsg);
    }
  };

  // 断开连接
  const disconnect = () => {
    // 清除重试定时器
    clearRetryTimeout();

    console.log('rfbRef.current=====断开连接', rfbRef);
    console.log('rfbRef.current=====断开连接', rfbRef.current);

    if (rfbRef.current) {
      try {
        // 确保完全断开连接并释放所有资源
        rfbRef.current.disconnect();
      } catch (error) {
        console.error('Error during disconnect/cleanup:', error);
      }
    }

    // 重置重试计数
    retryCountRef.current = 0;
  };

  // 连接
  const reconnect = () => {
    setVisible(true);
    connect(true); // 重置重试计数后连接
  };

  // 当vncUrl或password变化时重新连接
  useEffect(() => {
    if (vncUrl && visible) {
      connect(true); // 重置重试计数后连接
    }

    // 组件卸载时断开连接并清理资源
    return () => {
      disconnect();
      clearRetryTimeout();
    };
  }, [visible, vncUrl, password, maxRetries, retryInterval]);

  // 当autoScale或viewOnly属性变化时更新RFB实例
  useEffect(() => {
    if (rfbRef.current) {
      rfbRef.current.viewOnly = viewOnly;
      rfbRef.current.focusOnClick = !viewOnly;
      rfbRef.current.dragViewport = !viewOnly;
      rfbRef.current.scaleViewport = autoScale;
      rfbRef.current.resizeSession = autoScale;
    }
  }, [viewOnly, autoScale]);

  const menuItems: MenuProps = {
    items: [
      {
        key: '1',
        label: <div>挂载优化工具</div>,
        //   label: (
        //     <Button
        //       onClick={() => {}}
        //       disabled={connectionStatus === 'connecting'}
        //       title="挂载优化工具"
        //     >
        //       挂载优化工具
        //     </Button>
        //   ),
      },
      {
        key: '2', // 注意 key 应该唯一
        label: <div>挂载应用软件盘</div>,
        //   label: (
        //     <Button
        //       onClick={() => {}}
        //       disabled={connectionStatus === 'connecting'}
        //       title="挂载应用软件盘"
        //     >
        //       挂载应用软件盘
        //     </Button>
        //   ),
      },
      {
        key: '3',
        label: <div>挂载应用软件盘</div>,
        //   label: (
        //     <Button
        //       onClick={() => {}}
        //       disabled={connectionStatus === 'connecting'}
        //       title="挂载应用软件盘"
        //     >
        //       挂载应用软件盘
        //     </Button>
        //   ),
      },
    ],
  };

  return (
    <div className={`vnc-remote-desktop ${className} ${connectionStatus}`}>
      {/* 控制栏 */}
      <div className="vnc-controls">
        <span className={`vnc-status-indicator ${connectionStatus}`}>
          {connectionStatus === 'connecting' && '连接中...'}
          {connectionStatus === 'connected' && '已连接'}
          {connectionStatus === 'disconnected' && '已断开'}
        </span>

        <div className="vnc-actions">
          {viewOnly && <span className="view-only-indicator">仅查看模式</span>}
          {!(connectionStatus === 'connected') ? (
            <Button
              onClick={reconnect}
              disabled={connectionStatus === 'connecting'}
              title="重新连接"
            >
              连接
            </Button>
          ) : (
            <>
              <Button
                onClick={() => {}}
                disabled={!(connectionStatus === 'connected')}
                title="关机"
              >
                关机
              </Button>
              <Button
                onClick={() => {}}
                disabled={!(connectionStatus === 'connected')}
                title="重启"
              >
                重启
              </Button>
              <Dropdown
                menu={menuItems}
                disabled={!(connectionStatus === 'connected')}
              >
                <Button
                  onClick={() => {}}
                  disabled={!(connectionStatus === 'connected')}
                  title="安装模板工具"
                >
                  安装模板工具
                </Button>
              </Dropdown>

              <Button
                onClick={disconnect}
                disabled={!(connectionStatus === 'connected')}
                title="断开连接"
                type="default"
              >
                断开连接
              </Button>
            </>
          )}
        </div>
      </div>

      {/* 远程桌面内容 */}
      <div className="vnc-content">
        {/* 加载状态 */}
        {connectionStatus === 'connecting' && (
          <div className="vnc-loading-overlay">
            <div className="loading-spinner"></div>
            <div>{loadingText}</div>
          </div>
        )}

        {/* 错误状态 */}
        {errorMessage && connectionStatus === 'disconnected' && (
          <div className="vnc-error-overlay">
            <div className="error-icon">❌</div>
            <div className="error-message">{errorMessage}</div>
            <Button className="reconnect-button" onClick={reconnect}>
              重新连接
            </Button>
          </div>
        )}

        {/* VNC画布,使用canvas远程桌面控制页面无法展示，不要使用 */}
        <div
          ref={canvasRef}
          className="vnc-canvas"
          tabIndex={viewOnly ? -1 : 0}
          style={{
            display: connectionStatus === 'connected' ? 'block' : 'none',
          }}
        />

        {/* 未连接时的占位符 */}
        {connectionStatus === 'disconnected' && !errorMessage && (
          <div className="vnc-placeholder">
            <div className="placeholder-icon">🖥️</div>
            <div>等待连接...</div>
          </div>
        )}
      </div>
    </div>
  );
};

export default VncRemoteDesktop;