import Image from "next/image";
import type { Artist } from "@/types/artist";
import { cn } from "@/lib/cn";

interface ArtistPortraitProps {
  artist: Artist;
  className?: string;
  /** 圆角覆盖 */
  rounded?: string;
}

/**
 * 艺人立绘容器。
 * 有真实图时显示 Image；否则渲染统一品牌紫渐变占位（带英文首字母）。
 */
export default function ArtistPortrait({
  artist,
  className,
  rounded = "rounded-lg",
}: ArtistPortraitProps) {
  const initial =
    artist.enName?.charAt(0).toUpperCase() ||
    artist.name?.charAt(0) ||
    "?";

  if (artist.portrait) {
    return (
      <div
        className={cn("relative overflow-hidden bg-deep", rounded, className)}
      >
        <Image
          src={artist.portrait}
          alt={`${artist.name} · ${artist.enName}`}
          fill
          sizes="(max-width: 768px) 50vw, 360px"
          // 氛围图大多为全身竖向构图，用 object-cover + object-top
          // 让头部 + 上半身保留在画面里，下半身（腿/脚）自然超出底边被剪裁
          className="object-cover object-top"
        />
      </div>
    );
  }

  // 无立绘 fallback：品牌紫渐变 + 字母占位
  return (
    <div
      className={cn(
        "relative overflow-hidden flex items-center justify-center",
        "bg-[linear-gradient(155deg,rgba(139,92,246,0.20)_0%,#1a1638_60%,#0d0a24_100%)]",
        rounded,
        className,
      )}
    >
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(139,92,246,0.35)_0%,transparent_55%)]"
      />
      <span
        className="font-logo text-5xl text-white/85 glow-text-purple tracking-wider relative z-10"
        aria-hidden
      >
        {initial}
      </span>
    </div>
  );
}