import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { defineCustomElements } from 'hxy-stencil-ai-chat/loader';

// 确保自定义元素已定义
defineCustomElements();

export interface AiChatProps {
  messages?: any[];
  showInput?: boolean;
  inputPlaceholder?: string;
  inputDisabled?: boolean;
  maxInputLength?: number;
  multilineInput?: boolean;
  showAiAvatar?: boolean;
  showUserAvatar?: boolean;
  showTimestamp?: boolean;
  aiAvatar?: string;
  userAvatar?: string;
  customRenderers?: { [key: string]: string };
  onMessageClick?: (message: any) => void;
  onMessageLongPress?: (message: any) => void;
  onMessageSend?: (event: CustomEvent<{ content: string; timestamp: number }>) => void;
}

export const AiChat = forwardRef<HTMLAiChatElement, AiChatProps>((props, ref) => {
  const aiChatRef = useRef<HTMLAiChatElement>(null);

  useImperativeHandle(ref, () => aiChatRef.current!);

  // 设置属性
  useEffect(() => {
    if (aiChatRef.current) {
      // 设置非事件属性
      if (props.messages) aiChatRef.current.messages = props.messages;
      if (props.showInput !== undefined) aiChatRef.current.showInput = props.showInput;
      if (props.inputPlaceholder) aiChatRef.current.inputPlaceholder = props.inputPlaceholder;
      if (props.inputDisabled !== undefined) aiChatRef.current.inputDisabled = props.inputDisabled;
      if (props.maxInputLength !== undefined) aiChatRef.current.maxInputLength = props.maxInputLength;
      if (props.multilineInput !== undefined) aiChatRef.current.multilineInput = props.multilineInput;
      if (props.showAiAvatar !== undefined) aiChatRef.current.showAiAvatar = props.showAiAvatar;
      if (props.showUserAvatar !== undefined) aiChatRef.current.showUserAvatar = props.showUserAvatar;
      if (props.showTimestamp !== undefined) aiChatRef.current.showTimestamp = props.showTimestamp;
      if (props.aiAvatar) aiChatRef.current.aiAvatar = props.aiAvatar;
      if (props.userAvatar) aiChatRef.current.userAvatar = props.userAvatar;
      if (props.customRenderers) aiChatRef.current.customRenderers = props.customRenderers;
    }
  }, [props.messages, props.showInput, props.inputPlaceholder, props.inputDisabled, 
      props.maxInputLength, props.multilineInput, props.showAiAvatar, props.showUserAvatar, 
      props.showTimestamp, props.aiAvatar, props.userAvatar, props.customRenderers]);

  // 设置事件监听器
  useEffect(() => {
    if (aiChatRef.current) {
      const handleMessageClick = (e: CustomEvent) => {
        props.onMessageClick?.(e.detail);
      };
      
      const handleMessageLongPress = (e: CustomEvent) => {
        props.onMessageLongPress?.(e.detail);
      };
      
      const handleMessageSend = (e: CustomEvent) => {
        props.onMessageSend?.(e);
      };

      aiChatRef.current.addEventListener('messageClick', handleMessageClick);
      aiChatRef.current.addEventListener('messageLongPress', handleMessageLongPress);
      aiChatRef.current.addEventListener('messageSend', handleMessageSend);

      return () => {
        if (aiChatRef.current) {
          aiChatRef.current.removeEventListener('messageClick', handleMessageClick);
          aiChatRef.current.removeEventListener('messageLongPress', handleMessageLongPress);
          aiChatRef.current.removeEventListener('messageSend', handleMessageSend);
        }
      };
    }
  }, [props.onMessageClick, props.onMessageLongPress, props.onMessageSend]);

  return <ai-chat ref={aiChatRef} />;
});

AiChat.displayName = 'AiChat';

export default AiChat;
