'use client'

import { Tag } from '@/components/ui/tag'
import { useState, useRef, useEffect } from 'react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
// import CrushLevelAvatar from './CrushLevelAvatar'

export const CharacterAvatorAndName = () => {
  const { introduction, characterName, tagName } = {
    introduction: 'introduction introduction introduction introduction introduction',
    characterName: 'characterName',
    tagName: 'tagName',
  }
  return (
    <div className="flex flex-col items-center gap-6">
      <Avatar className="h-20 w-20">
        <AvatarImage src="https://picsum.photos/200/300" />
        <AvatarFallback>{characterName?.slice(0, 1)}</AvatarFallback>
      </Avatar>
      <div className="txt-headline-s text-center text-white">Honey Snow</div>
    </div>
  )
}

const ChatMessageUserHeader = () => {
  const [isFullIntroduction, setIsFullIntroduction] = useState(false)
  const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false)
  const textRef = useRef<HTMLDivElement>(null)
  const { introduction, characterName, tagName } = {
    introduction: 'introduction introduction introduction introduction introduction',
    characterName: 'characterName',
    tagName: 'tagName',
  }

  // 检测文本是否超过三行
  useEffect(() => {
    if (textRef.current && introduction) {
      // 直接比较滚动高度和可见高度
      // 如果内容的实际高度大于容器的可见高度，说明内容被截断了
      const isOverflowing = textRef.current.scrollHeight > textRef.current.clientHeight
      setShouldShowExpandButton(isOverflowing)
    }
  }, [introduction])

  return (
    <div className="flex flex-col items-center gap-6">
      <CharacterAvatorAndName />

      <div className="bg-surface-element-normal border-outline-normal flex w-full flex-col gap-2 rounded-lg border border-solid p-4 backdrop-blur-2xl">
        <div
          ref={textRef}
          className={cn(
            'txt-label-m text-txt-primary-normal line-clamp-3',
            isFullIntroduction && 'line-clamp-none'
          )}
          style={{
            wordBreak: 'break-word',
          }}
        >
          {introduction.repeat(10)}
        </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 && !isFullIntroduction && (
            <div
              className="flex h-6 w-6 cursor-pointer items-center justify-center"
              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
