import { useState } from "react";

// Avatar image with a graceful fallback.
//
// Uses referrerPolicy="no-referrer" because Google's avatar CDNs
// (yt3.ggpht.com / lh3.googleusercontent.com) rate-limit bursts of
// referrer-bearing requests — when a feed page fires dozens of avatar loads at
// once, a random subset gets throttled (HTTP 429) and the browser shows its
// broken-image icon. Dropping the referrer makes those CDNs serve the images.
// If a load still fails we render a neutral placeholder (optionally an initial)
// instead of the broken-image icon.
export default function Avatar({
  src,
  alt = "",
  fallback,
  className = "",
}: {
  src?: string | null;
  alt?: string;
  fallback?: string; // a name/title; its first letter is shown when there's no image
  className?: string;
}) {
  // The failure is remembered BY URL, not as a boolean that an effect resets when `src` changes.
  // That distinction is visible: this component is recycled across items in the virtualized feed, so
  // one avatar's 429 used to paint the fallback initial over the NEXT item's perfectly good image
  // for a frame — React committed the render with the new `src` and the stale `failed`, and only the
  // post-paint effect cleared it. Derived state cannot be stale, so there is nothing to reset.
  //
  // Forgetting the URL once `src` has moved off it is the other half, and it is what keeps the 429
  // TRANSIENT: without it the memory outlives the reason for it, and a mounted instance whose `src`
  // swaps — the player's channel avatar stepping through a queue, the Messages thread header — would
  // show the initial for a throttled channel forever, never re-requesting even after the CDN
  // relented. Written in render because it is convergent (the write falsifies its own condition) and
  // because an effect would leave one committed frame in which the memory is stale, which is the
  // frame this whole component is about.
  const [failedSrc, setFailedSrc] = useState<string | null>(null);
  if (failedSrc !== null && failedSrc !== src) setFailedSrc(null);
  const failed = !!src && failedSrc === src;

  if (src && !failed) {
    return (
      <img
        src={src}
        alt={alt}
        loading="lazy"
        referrerPolicy="no-referrer"
        onError={() => setFailedSrc(src)}
        className={className}
      />
    );
  }

  const initial = fallback?.trim()?.[0]?.toUpperCase() ?? "";
  return (
    <div
      className={`bg-card grid place-items-center font-semibold text-muted select-none ${className}`}
      aria-hidden
    >
      {initial}
    </div>
  );
}