Avatar

"use client"

import React from "react";

export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
export type AvatarStatus = "online" | "away" | "busy" | "offline" | "none";

export interface AvatarProps {
  /** Image URL. When omitted or failing to load, initials are shown instead */
  src?: string;
  /** Alt text for the image. Falls back to `name` */
  alt?: string;
  /** Full name — used for the alt text and to derive initials */
  name?: string;
  /** Overrides the initials derived from `name` */
  fallback?: string;
  /** Visual size of the avatar */
  size?: AvatarSize;
  /** Circle or rounded square */
  shape?: "circle" | "square";
  /** Presence dot rendered at the bottom-right */
  status?: AvatarStatus;
  /** Draws a soft ring around the avatar */
  ring?: boolean;
  /** Extra classes for consumers using a utility CSS framework */
  className?: string;
  style?: React.CSSProperties;
}

const sizeStyles: Record<AvatarSize, { box: number; font: number; dot: number; radius: number }> = {
  xs: { box: 24, font: 10, dot: 7, radius: 7 },
  sm: { box: 32, font: 12, dot: 9, radius: 9 },
  md: { box: 40, font: 15, dot: 11, radius: 11 },
  lg: { box: 56, font: 20, dot: 14, radius: 15 },
  xl: { box: 80, font: 28, dot: 18, radius: 22 },
};

const statusColors: Record<Exclude<AvatarStatus, "none">, string> = {
  online: "#22c55e",
  away: "#f59e0b",
  busy: "#ef4444",
  offline: "#a1a1aa",
};

/** Deterministic pastel background per name, so the same person always
 *  gets the same colour instead of a random one on every render. */
const FALLBACK_PALETTE = [
  { bg: "#e0e7ff", fg: "#4338ca" },
  { bg: "#fce7f3", fg: "#be185d" },
  { bg: "#dcfce7", fg: "#15803d" },
  { bg: "#fef3c7", fg: "#b45309" },
  { bg: "#e0f2fe", fg: "#0369a1" },
  { bg: "#ede9fe", fg: "#6d28d9" },
];

function paletteFor(seed: string) {
  let hash = 0;
  for (let i = 0; i < seed.length; i++) {
    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
  }
  return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length];
}

function initialsFrom(name: string) {
  const parts = 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();
}

/**
 * Avatar — a profile image that degrades gracefully to coloured initials
 * when no `src` is given or the image fails to load. Renders standalone
 * with zero props.
 */
export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
  (
    {
      src,
      alt,
      name = "Mayank Tomar",
      fallback,
      size = "lg",
      shape = "circle",
      status = "none",
      ring = false,
      className = "",
      style,
    },
    ref
  ) => {
    // Remember *which* src failed rather than a boolean. That resets itself
    // when a new src arrives, without an effect that would race the img's own
    // onError and flip the fallback back off on the very first render.
    const [failedSrc, setFailedSrc] = React.useState<string | null>(null);

    // With SSR the browser starts loading the image before React hydrates, so
    // a broken URL can fire `error` while no listener is attached yet. Catch
    // that case on mount: a finished load with zero width means it failed.
    const checkAlreadyFailed = React.useCallback((node: HTMLImageElement | null) => {
      if (node?.complete && node.naturalWidth === 0) {
        setFailedSrc(node.getAttribute("src"));
      }
    }, []);

    const { box, font, dot, radius } = sizeStyles[size];
    const palette = paletteFor(fallback || name);
    const showImage = Boolean(src) && failedSrc !== src;
    const borderRadius = shape === "circle" ? "9999px" : `${radius}px`;

    return (
      <span
        ref={ref}
        className={className}
        style={{
          position: "relative",
          display: "inline-flex",
          flexShrink: 0,
          width: box,
          height: box,
          ...style,
        }}
      >
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100%",
            height: "100%",
            overflow: "hidden",
            borderRadius,
            background: showImage ? "#f4f4f5" : palette.bg,
            color: palette.fg,
            fontSize: font,
            fontWeight: 600,
            fontFamily: "inherit",
            letterSpacing: "0.01em",
            userSelect: "none",
            boxShadow: ring ? "0 0 0 2px #ffffff, 0 0 0 4px rgba(0,0,0,0.08)" : "none",
          }}
        >
          {showImage ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              ref={checkAlreadyFailed}
              src={src}
              alt={alt ?? name}
              onError={() => setFailedSrc(src ?? null)}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <span aria-hidden={false}>{fallback || initialsFrom(name)}</span>
          )}
        </span>

        {status !== "none" && (
          <span
            aria-label={status}
            style={{
              position: "absolute",
              right: 0,
              bottom: 0,
              width: dot,
              height: dot,
              borderRadius: "9999px",
              background: statusColors[status],
              border: "2px solid #ffffff",
              boxSizing: "content-box",
            }}
          />
        )}
      </span>
    );
  }
);

Avatar.displayName = "Avatar";

export interface AvatarGroupProps {
  /** People to render, left to right */
  people?: Array<{ name: string; src?: string }>;
  /** Anything beyond this count collapses into a +N chip */
  max?: number;
  size?: AvatarSize;
  /** How much each avatar overlaps the previous one, as a fraction of its
   *  width. Keep at or below ~0.25 so initials aren't clipped. */
  overlap?: number;
  className?: string;
}

/** A row of overlapping avatars with a +N overflow chip. */
export function AvatarGroup({
  people = [],
  max = 4,
  size = "md",
  overlap = 0.25,
  className = "",
}: AvatarGroupProps) {
  const visible = people.slice(0, max);
  const overflow = people.length - visible.length;
  const { box, font } = sizeStyles[size];
  const shift = -box * overlap;

  return (
    <div className={className} style={{ display: "inline-flex", alignItems: "center" }}>
      {visible.map((person, i) => (
        <span key={`${person.name}-${i}`} style={{ marginLeft: i === 0 ? 0 : shift }}>
          <Avatar name={person.name} src={person.src} size={size} ring />
        </span>
      ))}
      {overflow > 0 && (
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: box,
            height: box,
            marginLeft: shift,
            borderRadius: "9999px",
            background: "#18181b",
            color: "#ffffff",
            fontSize: font * 0.8,
            fontWeight: 600,
            fontFamily: "inherit",
            boxShadow: "0 0 0 2px #ffffff",
          }}
        >
          +{overflow}
        </span>
      )}
    </div>
  );
}

export default Avatar;