import { marked } from 'marked';
import clsx from 'clsx';
import AIAvatar from '../assets/ai-avatar.svg'; // 替换为您的 AI 头像路径
import UserAvatar from '../assets/user-avatar.svg'; // 替换为您的用户头像路径
import { TextArea } from '@/pages/container/components/TextArea';
import { Button } from 'antd';
import { SendOutlined } from '@ant-design/icons';
import { useState } from 'react';

export type MessageType = 'ai' | 'user';

export type Message = {
  role: string;
  content: string;
};

export const ChatMessageOne = (props: { message: Message }) => {
  const { message } = props;
  const htmlContent = marked.parse(message.content);
  const isUser = message.role === 'user';

  const containerClasses = clsx('flex mb-4 items-start', {
    'justify-start flex-row': !isUser,
    'flex-row-reverse': isUser,
  });
  const messageClasses = clsx('max-w-[76%] p-3 rounded-lg ', {
    'bg-blue-500 text-white': isUser,
    'bg-gray-200 text-gray-800': !isUser,
  });

  const avatarSrc = isUser ? UserAvatar : AIAvatar;
  const avatarAlt = isUser ? 'User Avatar' : 'AI Avatar';

  return (
    <div className={containerClasses}>
      <img src={avatarSrc} alt={avatarAlt} className='w-10 h-10 mx-2 rounded-full border border-gray-300 p-2' />
      <div className={messageClasses} dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

type ChatMessageProps = {
  messages: Message[];
  onSend?: (message: string) => void;
};

export const ChatMessage = (props: ChatMessageProps) => {
  const { messages } = props;
  const [inputValue, setInputValue] = useState('');
  const onSend = () => {
    if (!inputValue) return;
    props.onSend?.(inputValue);
    setInputValue('');
  };
  return (
    <div className='w-full h-full'>
      <div className='max-h-[80%] overflow-y-auto scrollbar bg-white p-2 mx-1 border shadow-sm pt-5 rounded-lg'>
        <div className='flex flex-col'>
          {messages.map((message, index) => (
            <ChatMessageOne key={index} message={message} />
          ))}
        </div>
      </div>
      <div className='relative'>
        <TextArea
          value={inputValue}
          onChange={(e) => {
            setInputValue(e);
          }}
          className='max-h-64'
          style={{ minHeight: 180 }}
          language='markdown'
          placeholder='Message AI'
        />
        <Button onClick={onSend} className='absolute bottom-4 right-4 cursor-pointer' type='primary' icon={<SendOutlined />}></Button>
      </div>
    </div>
  );
};
