import { type ReactElement } from "react";
import * as React from "react";
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import { cn } from "@/lib/utils";

/**
 * Avatar — shadcn/WealthX
 * Base: npx shadcn\@latest add avatar (latest)
 * Figma: Design-System---shadcn?node-id=72-2717
 *
 * WealthX:
 * - Removed overflow-hidden from Avatar root → moved to AvatarImage/AvatarFallback
 *   so AvatarBadge (absolute positioned) is not clipped by the parent.
 * - Added font-sans to AvatarFallback for consistent typography.
 */

export type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & {
  size?: "default" | "sm" | "lg";
};

function Avatar({
  className,
  size = "default",
  ...props
}: AvatarProps): ReactElement {
  return (
    <AvatarPrimitive.Root
      className={cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
        className,
      )}
      data-size={size}
      data-slot="avatar"
      {...props}
    />
  );
}

export type AvatarImageProps = React.ComponentProps<
  typeof AvatarPrimitive.Image
>;

function AvatarImage({ className, ...props }: AvatarImageProps): ReactElement {
  return (
    <AvatarPrimitive.Image
      className={cn("aspect-square size-full rounded-full", className)}
      data-slot="avatar-image"
      {...props}
    />
  );
}

export type AvatarFallbackProps = React.ComponentProps<
  typeof AvatarPrimitive.Fallback
>;

function AvatarFallback({
  className,
  ...props
}: AvatarFallbackProps): ReactElement {
  return (
    <AvatarPrimitive.Fallback
      className={cn(
        "flex size-full items-center justify-center rounded-full overflow-hidden bg-muted text-body-small font-sans text-muted-foreground group-data-[size=sm]/avatar:text-caption",
        className,
      )}
      data-slot="avatar-fallback"
      {...props}
    />
  );
}

export type AvatarBadgeProps = React.ComponentProps<"span">;

function AvatarBadge({ className, ...props }: AvatarBadgeProps): ReactElement {
  return (
    <span
      className={cn(
        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className,
      )}
      data-slot="avatar-badge"
      {...props}
    />
  );
}

export type AvatarGroupProps = React.ComponentProps<"div">;

function AvatarGroup({ className, ...props }: AvatarGroupProps): ReactElement {
  return (
    <div
      className={cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className,
      )}
      data-slot="avatar-group"
      {...props}
    />
  );
}

export type AvatarGroupCountProps = React.ComponentProps<"div">;

function AvatarGroupCount({
  className,
  ...props
}: AvatarGroupCountProps): ReactElement {
  return (
    <div
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-body-small text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className,
      )}
      data-slot="avatar-group-count"
      {...props}
    />
  );
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarBadge,
  AvatarGroup,
  AvatarGroupCount,
};