import React, { useState } from 'react';
import { XmovAvatar } from './XmovAvatar';

interface AvatarStageProps {
  isActive?: boolean;
  websocketUrl?: string;
  onSDKStatusChange?: (status: 'loading' | 'ready' | 'error' | 'config-missing') => void;
  onWSStatusChange?: (status: 'disconnected' | 'connecting' | 'connected') => void;
  onLogMessage?: (message: string) => void;
}

/**
 * 数字人画面组件 - 承载 xmovsdk 渲染流
 * 占据主要屏幕空间，支持 9:16 竖屏
 * 连接到 WebSocket (10002端口) 接收消息驱动数字人说话
 */
export const AvatarStage: React.FC<AvatarStageProps> = ({
  isActive = false,
  websocketUrl = 'ws://127.0.0.1:10002',
  onSDKStatusChange,
  onWSStatusChange,
  onLogMessage,
}) => {
  const [isSpeaking, setIsSpeaking] = useState(false);

  const handleSDKReady = () => {
    console.log('[AvatarStage] 数字人SDK就绪');
  };

  const handleSDKError = (error: any) => {
    console.error('[AvatarStage] 数字人SDK错误:', error);
  };

  const handleSpeaking = (speaking: boolean) => {
    setIsSpeaking(speaking);
  };

  return (
    <div className="relative w-full h-full overflow-hidden">
      <XmovAvatar
        isActive={isActive || isSpeaking}
        websocketUrl={websocketUrl}
        onSDKReady={handleSDKReady}
        onSDKError={handleSDKError}
        onSpeaking={handleSpeaking}
        onSDKStatusChange={onSDKStatusChange}
        onWSStatusChange={onWSStatusChange}
        onLogMessage={onLogMessage}
      />
    </div>
  );
};
