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";

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%]"
          />
          <img
            src="/icons/conversation-bg.png"
            alt="background"
            className="w-[222px] h-[49px] absolute bottom-0 left-[50%] translate-x-[-50%]"
          />
          <div className="text-black text-[14px] absolute bottom-[22px] left-[50%] translate-x-[-50%] z-[10]">
            Hey，我是您的六纬AI填报师
          </div>
        </div>
      </div>
      <div className="flex-1 overflow-y-auto 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"
              }`}
            >
              <ReactMarkdown remarkPlugins={[gfm]}>
                {message.content}
              </ReactMarkdown>
            </div>
          </div>
        ))}

        <div ref={messagesEndRef} />
      </div>
    </div>
  );
}
