'use client';

import React, { useMemo } from 'react';
import { formatNumberToKMB } from '@/lib/utils';
import { Tag } from '@/components/ui/tag';
import { Avatar, AvatarImage } from '@/components/ui/avatar';
import Link from 'next/link';
import { CharacterType } from '@/services/editor/type';

interface AIStandardCardProps {
  character: CharacterType;
  disableHover?: boolean;
}

// 常量提取
const MAX_DESCRIPTION_LINES = 7;
const MAX_VISIBLE_TAGS = 2;

// 提取点赞数组件
const LikeCount: React.FC<{ count: number }> = ({ count }) => (
  <div className="flex items-center gap-1 rounded-xs px-1 py-0.5">
    <i className="iconfont icon-Like-fill" />
    <span className="txt-label-s text-txt-primary-specialmap-normal">
      {formatNumberToKMB(count)}
    </span>
  </div>
);

// 提取渐变遮罩层样式
const gradientOverlayStyle = {
  background:
    'var(--color-overlay-background, linear-gradient(180deg, rgba(33, 26, 43, 0.00) 0%, var(--sys-color-background-default, #211A2B) 100%))',
  maskImage: 'linear-gradient(180deg, rgba(33, 26, 43, 0.00) 0%, #211A2B 100%)',
};

const AIStandardCard: React.FC<AIStandardCardProps> = React.memo(
  ({ character, disableHover = false }) => {
    const { id, name, description, coverImage, headPortrait, tags, likeCount = 0 } = character;

    // 获取显示的背景图片
    const displayImage = coverImage;

    // 可见标签
    const visibleTags = useMemo(() => tags?.slice(0, MAX_VISIBLE_TAGS) || [], [tags]);

    // 容器类名
    const containerClassName = `relative flex shrink-0 grow basis-0 cursor-pointer flex-col content-stretch items-start justify-start gap-3 ${disableHover ? '' : 'group'}`;

    return (
      <Link href={`/character/${id}`} className="h-full w-full" prefetch={false}>
        <div className={containerClassName}>
          <div
            className="relative aspect-[3/4] w-full shrink-0 overflow-hidden rounded-2xl bg-cover bg-top bg-no-repeat transition-transform"
            style={{ backgroundImage: displayImage ? `url('${displayImage}')` : undefined }}
          >
            <div className="relative box-border flex aspect-[3/4] size-full flex-col content-stretch items-end justify-end overflow-clip p-3">
              {/* 默认渐变遮罩层 */}
              <div
                className={`absolute right-0 bottom-[-0.33px] left-0 flex flex-col items-start justify-start gap-2 px-3 pt-6 pb-3 transition-opacity duration-300 ${
                  disableHover ? '' : 'group-hover:opacity-0'
                }`}
              >
                <div className="absolute inset-0 backdrop-blur-3xl" style={gradientOverlayStyle} />
                <div className="relative">
                  {/* 角色信息区域 */}
                  <div className="relative flex w-full shrink-0 flex-col content-stretch items-start justify-start gap-2">
                    {/* 名称 */}
                    <div
                      className="txt-headline-s text-txt-primary-normal"
                      style={{ wordBreak: 'break-word' }}
                    >
                      {name}
                    </div>

                    {/* 标签 */}
                    {visibleTags.length > 0 && (
                      <div className="flex flex-wrap gap-1">
                        <div className="relative flex shrink-0 flex-wrap content-start items-start justify-start gap-1">
                          {visibleTags.map((tag, index) => (
                            <Tag key={tag.id || index} size="small" className="backdrop-blur-[8px]">
                              {tag.name}
                            </Tag>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  {/* 点赞数 */}
                  <LikeCount count={likeCount} />
                </div>
              </div>

              {/* Hover 时显示的简介覆盖层 */}
              {!disableHover && (
                <div className="absolute inset-0 flex flex-col items-start justify-end gap-2 bg-black/65 px-3 pt-6 pb-3 opacity-0 backdrop-blur-[8px] transition-opacity duration-300 group-hover:opacity-100">
                  {/* 头像和名称 */}
                  <div className="flex w-full items-center gap-2">
                    <Avatar className="size-12">
                      <AvatarImage src={headPortrait} alt={name} />
                    </Avatar>
                    <div className="txt-title-s min-w-0 flex-1 truncate">{name}</div>
                  </div>

                  {/* 简介文本 */}
                  <div className="flex min-h-0 w-full flex-1 items-start justify-start gap-1">
                    <div
                      className="txt-body-m text-txt-secondary-normal w-full overflow-hidden"
                      style={{
                        display: '-webkit-box',
                        WebkitLineClamp: MAX_DESCRIPTION_LINES,
                        WebkitBoxOrient: 'vertical',
                      }}
                    >
                      <p className="leading-[20px]">{description || 'No description'}</p>
                    </div>
                  </div>

                  {/* 点赞数 */}
                  <LikeCount count={likeCount} />
                </div>
              )}
            </div>

            {/* 边框 */}
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0 rounded-2xl border border-solid border-[rgba(251,222,255,0.2)]"
            />
          </div>
        </div>
      </Link>
    );
  }
);

export default AIStandardCard;
