import { MessageType } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import { useUIContext } from 'tuikit-atomicx-react/chat';
import { useChatUIState } from '../../../../../context/useChatUIState';
import { SearchType } from '../../../../../types/search';
import { highlightText, transformTextWithEmojiKeyToName } from '../../../../../utils';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './Message.module.scss';
import type { ResultItemProps } from '../../../../../types/search';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

function renderTextContent(payload: any, keyword: string) {
  const text = payload?.text;
  if (text && Array.isArray(text)) {
    return (
      <>
        {text.map((item: any, idx: number) => {
          if (item.name === 'text') {
            return (
              <span
                key={idx}
                dangerouslySetInnerHTML={{ __html: highlightText(item.text, keyword) }}
              />
            );
          }
          if (item.name === 'img') {
            return (
              <img
                key={idx}
                src={item.src}
                alt={item.emojiKey || ''}
                className={styles['SearchMessage__emoji-img']}
                draggable={false}
                data-emoji-key={item.emojiKey || ''}
              />
            );
          }
          return null;
        })}
      </>
    );
  }
  return (
    <span
      dangerouslySetInnerHTML={{
        __html: highlightText(
          typeof text === 'string' ? transformTextWithEmojiKeyToName(text) : '',
          keyword,
        ),
      }}
    />
  );
}

export function Message({ data, keyword, onClick }: ResultItemProps<SearchType.CHAT_MESSAGE>) {
  const { t } = useUIKit();
  const message = data as unknown as MessageInfo;
  const senderName
    = message.from?.nameCard || message.from?.nickname || message.from?.userID || '';
  const senderAvatar = message.from?.avatarURL;
  const messageTime = message.timestamp;

  // --- Navigate to message via UIContext (Channel) + ChatUIState ---
  const { setActiveConversation } = useUIContext();
  const { setPendingLocateMessage } = useChatUIState();

  const renderMessageContent = (msg: MessageInfo, searchKeyword: string) => {
    switch (msg.messageType) {
      case MessageType.Text:
        return (
          <div className={styles.SearchMessage__text}>
            {renderTextContent(msg.messagePayload, searchKeyword)}
          </div>
        );
      case MessageType.Image:
        return (
          <img
            src={msg.messagePayload?.originalImageURL || msg.messagePayload?.thumbImageURL || ''}
            className={styles['SearchMessage__image-thumb']}
            alt={t('Search.Image Message')}
          />
        );
      case MessageType.Video:
        return (
          <div className={styles['SearchMessage__video-thumb']}>
            <img
              src={msg.messagePayload?.videoSnapshotURL || ''}
              alt={t('Search.Video Cover')}
            />
            <span className={styles['SearchMessage__play-icon']}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="12" fill="rgba(43,93,245,0.15)" />
                <polygon points="9,7 18,12 9,17" fill="#2B5DF5" />
              </svg>
            </span>
          </div>
        );
      case MessageType.File:
        return (
          <div className={styles['SearchMessage__file-box']}>
            <span className={styles.SearchMessage__text}>{msg.messagePayload?.fileName}</span>
            <span className={styles.SearchMessage__text}>{msg.messagePayload?.fileSize}</span>
          </div>
        );
      case MessageType.Audio:
        return (
          <div className={styles['SearchMessage__audio-box']}>
            <span className={styles['SearchMessage__audio-icon']}>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <rect x="3" y="7" width="4" height="6" rx="1" fill="#2B5DF5" />
                <rect x="8" y="5" width="4" height="10" rx="1" fill="#2B5DF5" fillOpacity="0.7" />
                <rect x="13" y="9" width="4" height="2" rx="1" fill="#2B5DF5" fillOpacity="0.4" />
              </svg>
            </span>
            <span>
              {`${msg.messagePayload?.audioDuration ?? 0}s`}
            </span>
          </div>
        );
      default:
        return <span>{t('Search.Unsupported Message')}</span>;
    }
  };

  const handleClick = async () => {
    const messageID = message.msgID || (message as any).messageID || (message as any).ID;
    const conversationID = (message as any).conversationID
      || (message.conversationType === 'c2c'
        ? `C2C${message.isSentBySelf ? (message as any).to : message.from?.userID}`
        : `GROUP${(message as any).to}`);

    if (conversationID && messageID) {
      const locateMessage = {
        ...message,
        msgID: messageID,
        sequence: message.sequence,
      };
      setPendingLocateMessage(locateMessage);
      setActiveConversation(conversationID);
    }
    onClick?.(data, SearchType.CHAT_MESSAGE);
  };

  return (
    <div className={styles.SearchMessage}>
      <div className={styles['SearchMessage__avatar-wrapper']}>
        <Avatar src={senderAvatar} alt={senderName} />
      </div>
      <div className={styles.SearchMessage__content}>
        <div className={styles.SearchMessage__header}>
          <span className={styles.SearchMessage__name}>
            {senderName}
          </span>
          {messageTime && (
            <span className={styles.SearchMessage__time}>
              {messageTime.toLocaleString()}
            </span>
          )}
        </div>
        <div className={styles.SearchMessage__container}>
          <div className={styles['SearchMessage__container-content']}>
            {renderMessageContent(message, keyword)}
          </div>
          <div
            className={styles['SearchMessage__container-action']}
            onClick={handleClick}
          >
            {t('Search.Locate to Chat')}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Message;