vyndr/web/src/components/vyndr/PlayerAvatar.tsx

'use client';

import { useState } from 'react';
import { getHeadshotUrl, type HeadshotSport } from '@/lib/playerHeadshot';
import { accentColor } from '@/lib/teamMeta';

/**
 * PlayerAvatar (DS0) — real headshot; fallback = TEAM-COLORED MONOGRAM, never
 * the gray silhouette (DESIGN-SPEC Part 2). A player always renders with
 * identity. When the CDN 404s (roster gaps) we draw the player's initials on
 * a disc tinted with their team color — branded, legible, never a gray blob.
 */
function initials(name: string): string {
  const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return '?';
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

export default function PlayerAvatar({
  name,
  sport = 'mlb',
  playerId,
  team,
  size = 36,
}: {
  name: string;
  sport?: HeadshotSport;
  playerId?: string | number | null;
  team?: string | null;
  size?: number;
}) {
  const [broken, setBroken] = useState(false);
  const url = playerId != null ? getHeadshotUrl({ sport, playerId }) : null;
  const accent = (team && accentColor(team, String(sport))) || '#4A9EFF';
  const showImg = url && url !== '/images/player-silhouette.svg' && !broken;

  const Monogram = (
    <span
      title={name}
      className="mono"
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: size, height: size, borderRadius: '50%', flexShrink: 0,
        background: `color-mix(in srgb, ${accent} 22%, #0E0E16)`,
        border: `1px solid color-mix(in srgb, ${accent} 50%, transparent)`,
        color: accent, fontWeight: 800, fontSize: Math.max(9, size * 0.34), letterSpacing: '0.01em',
      }}
    >
      {initials(name)}
    </span>
  );

  if (!showImg) return Monogram;

  return (
    <span
      style={{
        display: 'inline-flex', width: size, height: size, borderRadius: '50%',
        overflow: 'hidden', flexShrink: 0, background: '#0E0E16',
        border: `1px solid color-mix(in srgb, ${accent} 40%, transparent)`,
      }}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={url as string}
        alt={name}
        width={size}
        height={size}
        loading="lazy"
        onError={() => setBroken(true)}
        style={{ width: size, height: size, objectFit: 'cover', objectPosition: 'top center' }}
      />
    </span>
  );
}