'use client';

import { useParams } from "next/navigation";
import { useGetAIUserBaseInfo } from "@/hooks/aiUser";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tag } from "@/components/ui/tag";
import { useState, useRef, useEffect } from "react";
import { cn } from "@/lib/utils";
import CrushLevelAvatar from "./CrushLevelAvatar";

const ChatMessageUserHeader = () => {
  const [isFullIntroduction, setIsFullIntroduction] = useState(false);
  const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);
  const textRef = useRef<HTMLDivElement>(null);
  const { aiId } = useParams();
  const { data } = useGetAIUserBaseInfo({ aiId: Number(aiId) });
  const { headImg, nickname, introduction, characterName, tagName } = data || {};

  // 检测文本是否超过三行
  useEffect(() => {
    if (textRef.current && introduction) {
      // 创建一个临时元素来测量文本高度
      const tempElement = document.createElement('div');
      tempElement.style.cssText = `
        position: absolute;
        visibility: hidden;
        width: ${textRef.current.offsetWidth}px;
        font-size: 14px;
        font-family: inherit;
        line-height: 20px;
        white-space: normal;
        word-break: break-word;
      `;
      tempElement.className = textRef.current.className.replace('line-clamp-3', '').replace('line-clamp-none', '');
      tempElement.textContent = introduction;
      
      document.body.appendChild(tempElement);
      
      // 计算单行高度
      const singleLineElement = document.createElement('div');
      singleLineElement.style.cssText = tempElement.style.cssText;
      singleLineElement.className = tempElement.className;
      singleLineElement.textContent = 'A';
      document.body.appendChild(singleLineElement);
      
      const singleLineHeight = singleLineElement.offsetHeight;
      const fullTextHeight = tempElement.offsetHeight;
      
      // 清理临时元素
      document.body.removeChild(tempElement);
      document.body.removeChild(singleLineElement);
      
      // 判断是否超过三行（考虑一些容差）
      const threeLineHeight = singleLineHeight * 3;
      console.log('fullTextHeight', fullTextHeight, threeLineHeight);
      setShouldShowExpandButton(fullTextHeight > threeLineHeight + 2);
    }
  }, [introduction]);
  
  return (
    <div className="flex flex-col gap-6 items-center">
      <CrushLevelAvatar showAnimation={true} />

      <div className="bg-surface-element-normal rounded-lg border border-solid border-outline-normal backdrop-blur-2xl p-4 flex flex-col gap-2 w-full">
        <div 
          ref={textRef}
          className={cn("txt-label-m text-txt-primary-normal line-clamp-3", isFullIntroduction && "line-clamp-none")}
          style={{
            wordBreak: 'break-word',
          }}
        >
          {introduction}
        </div>

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Tag variant="purple" size="small">{characterName}</Tag>
            <Tag variant="magenta" size="small">{tagName}</Tag>
          </div>
          {shouldShowExpandButton && (
            <div className="w-6 h-6 flex items-center justify-center cursor-pointer" onClick={() => setIsFullIntroduction(!isFullIntroduction)}>
              <i className={cn("iconfont !text-[12px]", isFullIntroduction ? "icon-fold" : "icon-icon-fullImage")} />
            </div>
          )}
        </div>
      </div>

      <div className="txt-body-m text-txt-secondary-normal">
        Content generated by AI
      </div>
    </div>
  );
}
 
export default ChatMessageUserHeader;