import { useState } from 'react';
import type React from 'react';
import { ConversationType, MessageStatus } from 'tuikit-atomicx-react/chat';
import { useUIContext } from 'tuikit-atomicx-react/chat';
import { IconToastWarning, IconLoading, IconCheck, IconRead, IconReadPartial } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { ReadReceiptInfo as ReadReceiptInfoComponent } from '../../ReadReceiptInfo';
import classes from './MessageMeta.module.scss';
import type { ReadReceiptInfo } from '../../../../types/message';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

const statusIconMap = {
  fail: <IconToastWarning className={classes['message-meta__status-icon--failed']} size="20px" />,
  sending: <IconLoading className={classes['message-meta__status-icon--unSend']} size="20px" />,
  success: <IconCheck size="20px" />,
  delivered: <IconReadPartial className={classes['message-meta__status-icon--delivered']} size="20px" />,
  allRead: <IconRead size="20px" />,
};

interface MessageStatusIconProps {
  message: MessageInfo;
  needReadReceipt: boolean;
  readReceiptInfo: ReadReceiptInfo | undefined;
}

/**
 * Message status icon rendering logic:
 * 1. Priority handling of basic states such as send failure, unsent, etc.
 * 2. When read receipt is not enabled, only display basic states without showing read/unread status
 * 3. After enabling read receipt, handle single chat and group chat separately
 */
export function MessageStatusIcon(props: MessageStatusIconProps) {
  const { message, needReadReceipt, readReceiptInfo } = props;

  const { activeConversation } = useUIContext();
  const [showReadReceiptInfo, setShowReadReceiptInfo] = useState(false);

  const isGroup = activeConversation?.type === ConversationType.Group;

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setShowReadReceiptInfo(true);
  };

  const handleCloseReadReceiptInfo = () => {
    setShowReadReceiptInfo(false);
  };

  const { status } = message;

  if (status === MessageStatus.SendFail) {
    return statusIconMap.fail;
  }
  if (status === MessageStatus.Sending) {
    return statusIconMap.sending;
  }

  if (!needReadReceipt) {
    if (status === MessageStatus.SendSuccess) {
      return statusIconMap.success;
    }
    return null;
  }

  if (isGroup) {
    const unreadCount = readReceiptInfo?.unreadCount;
    const readCount = readReceiptInfo?.readCount;

    const InteractiveDelivered = (
      <>
        <div
          className={cs(classes['message-meta__status-icon--clickable'])}
          onClick={handleIconClick}
        >
          {statusIconMap.delivered}
        </div>
        <ReadReceiptInfoComponent
          open={showReadReceiptInfo}
          message={message}
          readCount={readReceiptInfo?.readCount ?? 0}
          unreadCount={readReceiptInfo?.unreadCount ?? 0}
          onClose={handleCloseReadReceiptInfo}
        />
      </>
    );
    if (typeof unreadCount === 'undefined' || typeof readCount === 'undefined') {
      return InteractiveDelivered;
    }
    // Only show allRead when unreadCount is 0 AND readCount > 0
    // When both are 0, it means the receipt info hasn't been fetched yet
    if (unreadCount === 0 && readCount > 0) {
      return statusIconMap.allRead;
    }
    return InteractiveDelivered;
  }

  if (!isGroup) {
    const isPeerRead = readReceiptInfo?.isPeerRead;
    if (isPeerRead) {
      return statusIconMap.allRead;
    }
    return statusIconMap.delivered;
  }
}