import { useMemo } from 'react';
import {
  Chat,
  ChatHeader,
  MessageInput,
  MessageList,
  MessageType,
  useChatContext,
  CustomMessage,
  type MessageInfo,
  type CustomMessagePayload,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

interface ProductMessageData {
  businessID: 'product';
  name: string;
  price: string;
  link: string;
}

function parseProductMessage(message: MessageInfo): ProductMessageData | null {
  try {
    const payload = message.messagePayload as CustomMessagePayload;
    const rawData = payload.customData || '{}';
    const parsed = JSON.parse(rawData) as ProductMessageData;
    return parsed.businessID === 'product' ? parsed : null;
  } catch {
    return null;
  }
}

function ProductMessage({ message }: { message: MessageInfo }) {
  const product = parseProductMessage(message);

  if (!product) {
    // 如果不是已知的自定义，建议返回默认自定义消息
    return <CustomMessage message={message} />;
  }

  return (
    <div className="custom-message-basic-demo__card">
      <div className="custom-message-basic-demo__cover">Product</div>
      <div className="custom-message-basic-demo__info">
        <strong>{product.name}</strong>
        <span>{product.price}</span>
        <a href={product.link} rel="noreferrer" target="_blank">
          Buy now
        </a>
      </div>
    </div>
  );
}

function CustomMessageBasicDemo() {
  const { sendMessage } = useChatContext();
  const messageRenderers = useMemo(() => ({
    [MessageType.Custom]: ProductMessage,
  }), []);

  const handleSendProductMessage = () => {
    sendMessage({
      type: 'customMessage',
      customData: JSON.stringify({
        businessID: 'product',
        name: 'T-Shirt',
        price: '$19.99',
        link: 'https://cloud.tencent.com/product/im',
      }),
      description: '[Product]',
    });
  };

  return (
    <div className="custom-message-basic-demo">
      <div className="custom-message-basic-demo__frame">
        <Chat className="custom-message-basic-demo__chat">
          <ChatHeader />
          <MessageList messageRenderers={messageRenderers} />
          <div className="custom-message-basic-demo__toolbar">
            <button onClick={handleSendProductMessage} type="button">
              Send Product Message
            </button>
          </div>
          <MessageInput autoFocus={false} hideSendButton={false} />
        </Chat>
      </div>
    </div>
  );
}