import { profileAvatarUrl } from "@/shared/profile-appearance";
import { profileCosmeticIds } from "@/shared/profile-cosmetic-ids";

export function PixelTrophy({ className = "" }: { className?: string }) {
  return (
    <svg
      className={`pixel-trophy ${className}`}
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      shapeRendering="crispEdges"
    >
      <path
        fill="#735523"
        d="M2 5h4V3h12v2h4v7h-2v2h-4v2h-2v3h4v3H6v-3h4v-3H8v-2H4v-2H2z"
      />
      <path
        fill="#d6b665"
        d="M6 3h12v9h-2v2h-2v2h-4v-2H8v-2H6zM10 16h4v3h-4zM6 19h12v2H6zM2 5h4v2H4v4h2v2H4v-2H2zM18 5h4v6h-2v2h-2v-2h2V7h-2z"
      />
      <path fill="#f0d891" d="M6 3h12v2H8v6H6zM6 19h12v1H6z" />
      <path fill="#a1803c" d="M16 5h2v7h-2zM14 12h2v2h-2zM12 16h2v3h-2z" />
    </svg>
  );
}

// Generated markers, not player skins. No third-party avatar requests.
export function PlayerAvatar({
  id,
  avatarPath,
  effect,
  className = "",
}: {
  id: string;
  avatarPath?: string | null;
  effect?: string | null;
  className?: string;
}) {
  const avatarUrl = profileAvatarUrl(avatarPath);
  const activeEffect = profileCosmeticIds.find((value) => value === effect);
  if (avatarUrl)
    return (
      <span className="profile-avatar-shell" data-effect={activeEffect}>
        <img
          className={`player-avatar ${className}`.trim()}
          src={avatarUrl}
          alt=""
          aria-hidden="true"
          loading="lazy"
          decoding="async"
        />
      </span>
    );
  const seed = [...id].reduce(
    (value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
    0,
  );
  const hair = ["#654b39", "#333e44", "#95723e", "#694f59"][seed % 4];
  const skin = ["#c99a77", "#a67b60", "#dab28d", "#875f4d"][(seed >>> 3) % 4];
  const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
  return (
    <span className="profile-avatar-shell" data-effect={activeEffect}>
      <svg
        className={`player-avatar ${className}`.trim()}
        viewBox="0 0 8 8"
        aria-hidden="true"
        shapeRendering="crispEdges"
      >
        <path fill={shirt} d="M0 0h8v8H0z" />
        <path fill={skin} d="M1 1h6v6H1z" />
        <path
          fill={hair}
          d={
            seed % 2
              ? "M1 0h6v2H3v1H1zM6 2h1v2H6z"
              : "M1 0h6v2H1zM1 2h1v2H1zM6 2h1v2H6z"
          }
        />
        <path fill="#e6ded0" d="M2 3h1v1H2zM5 3h1v1H5z" />
        <path fill="#3b4140" d="M3 3h1v1H3zM4 3h1v1H4z" />
        <path fill="#825b49" d="M3 5h2v1H3z" />
        <path fill={shirt} d="M0 7h8v1H0z" />
      </svg>
    </span>
  );
}