import { useRef, useEffect, useContext } from "react";
import { RealtimeClientContext } from "../Provider/RealtimeClientProvider";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import { RoleType } from "@coze/api";
import { Loader } from 'lucide-react';

export default function RoomConversation() {
  const { messageList } = useContext(RealtimeClientContext);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到最新消息
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messageList]);

  return (
    <div className="flex-1 flex flex-col overflow-y-auto">
      <div className="w-full min-h-[120px] h-[120px]">
        <div className="relative h-full">
          <img
            src="/icons/hello.gif"
            alt=""
            className="absolute top-0  h-[97px] left-[50%] translate-x-[-50%] object-contain"
          />
          <div className="text-black text-[14px] absolute bottom-[25px] left-[50%] translate-x-[-50%] z-[10] pt-[3px]">
            <img
              src="/icons/conversation-bg.png"
              alt="background"
              className="w-[252px] h-[59px] object-contain absolute top-[-50%] z-[-1] left-[50%] translate-x-[-50%] max-w-[unset]"
            />
            Hey，我是您的六纬AI填报师
          </div>
        </div>
      </div>
      <div className="p-4 space-y-4">
        {messageList.map((message: any, index: number) => (
          <div
            key={index}
            className={`flex ${
              message.role === RoleType.Assistant
                ? "justify-start"
                : "justify-end"
            }`}
          >
            <div
              className={`max-w-3/4 p-3 rounded-lg ${
                message.role === RoleType.Assistant
                  ? "bg-white text-black rounded-tl-none"
                  : "bg-blue-500 text-white rounded-tr-none"
              }`}
            >
              {typeof message.fileParseStatus === "undefined" && typeof message.fileInfo === 'undefined' ? (
                <ReactMarkdown remarkPlugins={[gfm]}>
                  {message.content}
                </ReactMarkdown>
              ) : (
                <div className="flex items-center justify-center px-[4px] py-[2px]">
                  <img
                    src="/icons/wish-list-icon.png"
                    alt="icon"
                    className="w-[48px] h-[48px] object-contain"
                  />
                  <div className="flex flex-col items-start ml-[10px]">
                    <div className="flex items-center">
                      <span className="text-[15px] text-[#303030] mr-[8px] leading-[1]">
                        {message?.fileInfo?.tableName}
                      </span>
                      <div className="bg-[#F4F6FA] rounded-[4px] w-[48px] h-[16px] px-[4px] py-[2px] text-[10px]">
                        {message?.fileInfo?.type}
                      </div>
                    </div>
                    <div className="text-[12px] text-[#303030] mt-[6px] flex items-center">
                      <span className="mr-[10px]">
                        {message?.fileInfo?.provinceName}·{message?.fileInfo?.score}
                      </span>
                      <span>
                        {message?.fileInfo?.subjectClaim?.split(",").join("/")}
                      </span>
                      {
                        message.fileParseStatus < 2 && (
                          <Loader className="w-[12px] h-[12px] animate-spin ml-[6px]" />
                        )
                      }
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      <div className="text-[12px] text-[#999] font-[400] text-center mt-auto mb-[7px]">AI也会犯错，请考虑核实重要信息。</div>
      {/* <div className="mx-[8px] rounded-full bg-[#ffeede] py-[7px] pl-[18px] pr-[3px] flex items-center justify-between">
        <span className="text-[#FA8E23] text-[12px]">您的剩余时间不足3分钟，请续费畅聊生涯~</span>
        <button className="rounded-full bg-[#FA8E23] py-[6px] px-[13px] text-[13px] text-white font-[500]">立即续费</button>
      </div> */}
    </div>
  );
}