"use client";

import { useEffect, useState } from "react";

// 柔和多色头像：按用户名确定性取色，圆形软底，浅/暗主题在 globals.css 各自配色
function hash(s: string) {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
  return h;
}

export default function Avatar({
  name,
  size = 36,
  src,
  className = "",
}: {
  name: string;
  size?: number;
  src?: string | null;
  className?: string;
}) {
  const idx = hash(name || "?") % 8;
  const initial = (name || "?").trim().charAt(0).toUpperCase();
  // 图片 404（如附件已被彻底删除）时回退到字母头像，不显示裂图
  const [imgFailed, setImgFailed] = useState(false);
  // 切换到新的图片地址时重置失败状态
  useEffect(() => setImgFailed(false), [src]);
  const showImg = !!src && !imgFailed;

  return (
    <span
      className={`inline-flex items-center justify-center shrink-0 select-none font-bold rounded-full overflow-hidden av-${idx} ${className}`}
      style={{ width: size, height: size, fontSize: size * 0.42 }}
      aria-hidden="true"
    >
      {showImg ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={src}
          alt=""
          className="w-full h-full object-cover"
          onError={() => setImgFailed(true)}
        />
      ) : (
        initial
      )}
    </span>
  );
}