'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 { useCharacter } from '@/hooks/services/character';
import { useParams } from 'next/navigation';
import React from 'react';
import Link from 'next/link';

export const CharacterAvatorAndName = ({
  name,
  avator,
  id,
}: {
  name: string;
  avator: string;
  id?: string;
}) => {
  return (
    <div className="flex flex-col items-center gap-6">
      <Link href={`/character/${id}`}>
        <Avatar className="h-20 w-20">
          <AvatarImage src={avator} />
          <AvatarFallback>{name?.slice(0, 1)}</AvatarFallback>
        </Avatar>
      </Link>
      <div className="txt-headline-s text-center text-white">{name}</div>
    </div>
  );
};

const ChatMessageUserHeader = React.memo(() => {
  const [isFullIntroduction, setIsFullIntroduction] = useState(false);
  const [shouldShowExpandButton, setShouldShowExpandButton] = useState(false);
  const textRef = useRef<HTMLDivElement>(null);
  const { id } = useParams<{ id: string }>();
  const characterId = id.split('-')[2];
  const { data: character = {} } = useCharacter(characterId);

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

  return (
    <div className="flex flex-col mt-4 items-center gap-6">
      <CharacterAvatorAndName
        id={characterId}
        name={character?.name || '-'}
        avator={character?.headPortrait || ''}
      />
      <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',
          }}
        >
          {character?.description}
        </div>

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {character?.tags?.slice(0, 2)?.map((tag: any, index: number) => (
              <Tag key={tag.tagId} variant={index ? 'purple' : 'magenta'} size="small">
                {tag.name}
              </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;
