/**
 * 金幣貓頭鷹 — RPG 立繪框（八方旅人風 NPC 頭像）
 */

type Variant = "fab" | "chat" | "idle";

const OWL_SRC = "/mascot/guide-owl.jpg";

export default function PixelMascot({
  size = 56,
  blink,
  variant = "fab",
}: {
  size?: number;
  blink?: boolean;
  variant?: Variant;
}) {
  const frame = size + (variant === "fab" ? 10 : 6);

  return (
    <div
      className={["guide-portrait", `guide-portrait--${variant}`, blink ? "blink" : ""].filter(Boolean).join(" ")}
      style={{ width: frame, height: frame }}
      aria-hidden
    >
      <svg className="guide-portrait-frame" viewBox="0 0 72 72" width={frame} height={frame}>
        <defs>
          <radialGradient id="portraitGlow" cx="50%" cy="35%" r="58%">
            <stop offset="0%" stopColor="rgba(248,230,168,.45)" />
            <stop offset="100%" stopColor="rgba(10,13,24,0)" />
          </radialGradient>
          <clipPath id="portraitClip">
            <rect x="10" y="8" width="52" height="52" rx="6" />
          </clipPath>
        </defs>
        <circle cx="36" cy="34" r="30" fill="url(#portraitGlow)" />
        {/* 外框 */}
        <rect x="4" y="4" width="64" height="64" rx="8" fill="#0e1224" stroke="#e7c66b" strokeWidth="3" />
        <rect x="8" y="7" width="56" height="56" rx="6" fill="#12172e" stroke="rgba(231,198,107,.35)" strokeWidth="2" />
        {/* 角飾 */}
        <path d="M8 14 L14 8 M64 14 L58 8 M8 58 L14 64 M64 58 L58 64" stroke="#f3dd96" strokeWidth="2" strokeLinecap="square" />
        <image
          href={OWL_SRC}
          x="10"
          y="8"
          width="52"
          height="52"
          clipPath="url(#portraitClip)"
          preserveAspectRatio="xMidYMid slice"
          className="guide-portrait-img"
        />
        {/* 金幣角標 */}
        <circle cx="58" cy="56" r="9" fill="#1a1228" stroke="#e7c66b" strokeWidth="2" />
        <circle cx="58" cy="56" r="6" fill="#c9a227" stroke="#f8e6a8" strokeWidth="1" />
        <text x="58" y="59" textAnchor="middle" fill="#1a1228" fontSize="8" fontWeight="bold" fontFamily="Pixelify Sans, monospace">
          G
        </text>
        {variant === "fab" && (
          <>
            <circle className="guide-sparkle guide-sparkle-a" cx="14" cy="18" r="2" fill="#f8e6a8" />
            <circle className="guide-sparkle guide-sparkle-b" cx="62" cy="22" r="1.5" fill="#6fe0d0" />
          </>
        )}
      </svg>
    </div>
  );
}