import React, { useState, useEffect, useCallback } from 'react';
import { SendOutlined } from '@ant-design/icons';
import { Input, Space, Button, message } from 'antd';
import md5 from 'js-md5';
import dayjs from 'dayjs';
import { sleep } from '@/utils/common';

import './index.less';
import { useSelector, useDispatch } from 'react-redux';
import { setEditorAi } from '@/store/modules/editor';
import normalAvatar from '@/assets/images/icon-normal-avatar.png';

const UUID = 'f3846153ba784b6d86bdcd5533259c88';
const auth_key = 'f3846153ba784b6d86bdcd5533259c88';
const auth_secret = 'HO4IyLEwEOHpeOXBxaLQUOqWslJRGs1M';

const AIDrawerComponent = (props) => {

  const { selectText } = props;
  const dispatch = useDispatch();
  const { userInfo } = useSelector((state) => state.user); // 用户状态信息
  const { editorAi } = useSelector((state) => state.editor); // ai信息设置

  const [value, setValue] = useState(selectText); // 输入值
  const [loading, setLoading] = useState(false); // loading
  const [chatId, setChatId] = useState(null); // 对话的id
  const [chatContentList, setChatContentList] = useState([]); // 对话数据
  const element = document.querySelector("#chat-content");
  let str = '';

  useEffect(() => {
    if (editorAi && Object.entries(editorAi).length > 0) {
      let tempJSON = JSON.parse(JSON.stringify(chatContentList));
      let conversationId = editorAi.conversationId;
      const item = tempJSON.filter(item => item.conversationId === conversationId);
      if (item && item.length > 0) {
        tempJSON[tempJSON.length - 1] = editorAi;
      } else {
        tempJSON.push(editorAi);
      }
      setChatId(editorAi.chatId);
      setChatContentList(tempJSON);
      element.scrollTo(0, 999999);
    } else {
      setLoading(false);
    }
  }, [editorAi])

  useEffect(() => {
    if (selectText) {
      targetChat();
    }

    return () => {
      setValue('');
      setChatContentList([]);
      setChatId(null);
    }
  }, []);

  let cData = [];
  let buffer = '';

  const readBuffer = (reader, decoder) => {
    return reader.read().then(async ({ done, value }) => {
      if (done) {
        // 处理最后的缓冲数据
        setLoading(false);
        setValue('');
        dispatch(setEditorAi({}));
        str = '';
        processBuffer(buffer);
        return;
      }
      await sleep(80)
      buffer += decoder.decode(value, { stream: true });
      // 检查缓冲区中是否有完整的消息
      const messages = buffer.split('\n\n'); // 假设每个消息以换行符结束
      messages.forEach((message, index) => {
        if (index < messages.length - 1) {
          processBuffer(message);
        }
      });
      buffer = messages[messages.length - 1]; // 更新缓冲区
      readBuffer(reader, decoder);
    });
  }

  const processBuffer = (text) => {
    let aiContent = {};
    try {
      const content = text.replace(/\n+/g, '').split('data:');
      if (content instanceof Array) {
        const itemContent = JSON.parse(content[1]);
        if (!(itemContent.finish && itemContent.finish === true)) {
          str += itemContent.content;
          aiContent = {
            type: 'ai',
            content: str,
            chatId: itemContent.chatId,
            avatar: itemContent.role.avatar,
            conversationId: itemContent.conversationId,
          }
          dispatch(setEditorAi(aiContent));
        }
      }
    } catch {

    }
  }
  
  // 提交对话
  const targetChat = async () => {
    if (value) {
      setLoading(true);
      const timestamp = Date.now();

      fetch('/openapi/agent/chat/stream/v1', {
          method: 'POST',
          responseType: 'stream', // 设置响应类型为 'stream'
          headers: {
            'Content-Type': 'application/json',
            authKey: auth_key,
            timestamp: timestamp,
            sign: md5(`${auth_key}${auth_secret}${timestamp}`),
            'Content-Type': 'application/json',
            "stream": true //  or change to "false" 不处理流式返回内容
          },
          body: JSON.stringify({
            agentId: UUID,
            chatId: chatId,
            userChatInput: value,
          }),
          mode: 'cors',
        }).then(response => {
          // response.body 是一个 ReadableStream 对象
          const stream = response.body;
          // 使用流式数据
          const reader = stream.getReader();
          const decoder = new TextDecoder(); // 用于解码二进制数据流

          let userContent = { 
            type: 'user', content: value, time: Date.now()
          };
          let tempJSON = JSON.parse(JSON.stringify(chatContentList));
          tempJSON.push(userContent)
          setChatContentList(tempJSON);
          // 开始读取流数据
          readBuffer(reader, decoder);

        }).catch(error => {
          // 处理请求错误
          console.error('Request failed:', error);
        });
    } else {
      message.error('请输入对话内容！');
    }
  };
  

  return (
    <div className='ai-drawer-content'>
      <div className='ai-chat-container'>
        <div className='chat-content' id="chat-content">
          <div className='chat-content-padd'>
            {chatContentList &&
              chatContentList.length > 0 &&
              chatContentList.map((item, index) => {
                return (
                  <div className={`chat-content-item`} key={index}>
                    {item.type === 'user' && (
                      <div className='time'>{dayjs(item.time).format('YYYY-MM-DD HH:mm')}</div>
                    )}
                    {item.type === 'ai' && (
                      <div className='inside'>
                        <div className='ai-in-content'>
                          <div className='img'>
                            <img src={item.avatar} alt="" />
                          </div>
                          <div className='ask-content'>{item.content}</div>
                        </div>
                      </div>
                    )}
                    {item.type === 'user' && (
                      <div className='inside inside-user'>
                        <div className='user-in-content'>
                          <div className='ask-content'>{item.content}</div>
                          <div className='img'>
                            <img src={userInfo.pic ? userInfo.pic : normalAvatar} alt='用户头像' />
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
          </div>
        </div>
      </div>
      <div className='ai-chat-ask'>
        <div className='text'>
          <Input.TextArea
            value={value}
            defaultValue={value}
            allowClear
            disabled={loading}
            onChange={(e) => setValue(e.target.value)}
            palceholder='请输入内容'
            style={{ height: '80px', resize: 'none' }}
          ></Input.TextArea>
        </div>
        <div className='button'>
          <Button
            type='primary'
            icon={<SendOutlined />}
            loading={loading}
            size='large'
            onClick={targetChat}
          ></Button>
        </div>
      </div>
    </div>
  );
};

export default AIDrawerComponent;
