"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const userAvatarVariants = cva("relative inline-flex shrink-0 items-center justify-center rounded-full overflow-hidden bg-muted", {
  variants: {
    size: {
      sm: "h-8 w-8 text-xs",
      md: "h-10 w-10 text-sm",
      lg: "h-14 w-14 text-base",
    },
    variant: {
      default: "",
      "with-status": "overflow-visible",
      "with-badge": "overflow-visible",
    },
  },
  defaultVariants: {
    size: "md",
    variant: "default",
  },
});

export interface UserAvatarProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof userAvatarVariants> {
  src?: string;
  name: string;
  status?: "online" | "offline" | "away" | "busy";
  badge?: number | string;
  loading?: boolean;
  ringColor?: string;
}

/**
 * UserAvatar — an avatar that falls back to the user's initials.
 *
 * `name` is required because it drives both the alt text and that fallback.
 *
 * @example
 * <UserAvatar name="Jane Doe" src="/jane.jpg" size="lg" status="online" />
 */
export function UserAvatar({
  className,
  size,
  variant,
  src,
  name,
  status,
  badge,
  loading,
  ringColor,
  ...props
}: UserAvatarProps) {
  const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .substring(0, 2)
      .toUpperCase();
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "online": return "bg-emerald-500";
      case "offline": return "bg-muted-foreground";
      case "away": return "bg-amber-500";
      case "busy": return "bg-rose-500";
      default: return "bg-muted-foreground";
    }
  };

  const isOverflowVisible = variant === "with-status" || variant === "with-badge";

  return (
    <div 
      className={cn(
        "relative inline-flex", 
        isOverflowVisible ? "" : userAvatarVariants({ size, variant })
      )}
    >
      <div
        className={cn(
          userAvatarVariants({ size, variant: "default" }),
          "hover:scale-105 transition-transform duration-200",
          ringColor ? `ring-2 ${ringColor}` : "",
          className
        )}
        {...props}
      >
        {loading ? (
          <div className="h-full w-full bg-muted rounded-full animate-pulse" />
        ) : src ? (
          <img src={src} alt={name} className="h-full w-full object-cover" />
        ) : (
          <span className="font-medium text-muted-foreground">{getInitials(name)}</span>
        )}
      </div>

      {variant === "with-status" && status && (
        <span
          className={cn(
            "absolute bottom-0 right-0 block rounded-full ring-2 ring-background",
            getStatusColor(status),
            size === "sm" ? "h-2 w-2" : size === "md" ? "h-2.5 w-2.5" : "h-3.5 w-3.5"
          )}
        />
      )}

      {variant === "with-badge" && badge !== undefined && (
        <span
          className={cn(
            "absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground ring-2 ring-background",
            size === "sm" ? "h-3.5 min-w-[14px] px-0.5" : size === "md" ? "h-4 min-w-[16px] px-1 text-xs" : "h-5 min-w-[20px] px-1.5 text-xs"
          )}
        >
          {badge}
        </span>
      )}
    </div>
  );
}

export interface AvatarGroupProps {
  avatars: Array<{ src?: string; name: string }>;
  max?: number;
  size?: "sm" | "md" | "lg";
}

export function AvatarGroup({ avatars, max = 5, size = "md" }: AvatarGroupProps) {
  const visibleAvatars = avatars.slice(0, max);
  const excess = avatars.length - max;

  const marginMap = {
    sm: "-ml-2",
    md: "-ml-3",
    lg: "-ml-4",
  };

  return (
    <div className="flex items-center">
      {visibleAvatars.map((avatar, i) => (
        <div key={i} className={cn("relative", i > 0 && marginMap[size])}>
          <UserAvatar
            src={avatar.src}
            name={avatar.name}
            size={size}
            className="ring-2 ring-background hover:z-10"
          />
        </div>
      ))}
      {excess > 0 && (
        <div 
          className={cn(
            "relative z-0 flex items-center justify-center rounded-full bg-muted ring-2 ring-background text-muted-foreground font-medium", 
            marginMap[size], 
            size === "sm" ? "h-8 w-8 text-xs" : size === "md" ? "h-10 w-10 text-sm" : "h-14 w-14 text-base"
          )}
        >
          +{excess}
        </div>
      )}
    </div>
  );
}
User Avatar
