"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"
import { Badge } from "./badge"

/** Maps to Shadcn Studio avatar demos (shape / ring / stack). Uses theme tokens only. */
const avatarRootVariants = cva(
  "group/avatar relative flex shrink-0 overflow-hidden select-none",
  {
  variants: {
    size: {
      sm: "size-6",
      default: "size-8",
      lg: "size-10",
    },
    shape: {
      circle: "rounded-full",
      square: "rounded-none",
      "rounded-sm": "rounded-sm",
      "rounded-md": "rounded-md",
      "rounded-lg": "rounded-lg",
      "rounded-xl": "rounded-xl",
    },
    variant: {
      default: "",
      ring: "ring-2 ring-ring",
      "ring-offset": "ring-2 ring-ring ring-offset-2 ring-offset-background",
      group: "ring-2 ring-background",
    },
  },
  defaultVariants: {
    size: "default",
    shape: "circle",
    variant: "default",
  },
  }
)

const AVATAR_INSET_AFTER: Record<NonNullable<VariantProps<typeof avatarRootVariants>["shape"]>, string> = {
  circle: "after:rounded-full",
  square: "after:rounded-none",
  "rounded-sm": "after:rounded-sm",
  "rounded-md": "after:rounded-md",
  "rounded-lg": "after:rounded-lg",
  "rounded-xl": "after:rounded-xl",
}

const avatarImageShape = cn(
  "aspect-square size-full object-cover",
  "group-data-[shape=circle]/avatar:rounded-full",
  "group-data-[shape=square]/avatar:rounded-none",
  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
  "group-data-[shape=rounded-md]/avatar:rounded-md",
  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
  "group-data-[shape=rounded-xl]/avatar:rounded-xl"
)

const avatarFallbackShape = cn(
  "flex size-full items-center justify-center bg-muted text-sm text-muted-foreground",
  "group-data-[shape=circle]/avatar:rounded-full",
  "group-data-[shape=square]/avatar:rounded-none",
  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
  "group-data-[shape=rounded-md]/avatar:rounded-md",
  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
  "group-data-[shape=rounded-xl]/avatar:rounded-xl",
  "group-data-[size=sm]/avatar:text-xs"
)

type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &
  VariantProps<typeof avatarRootVariants> & {
    /**
     * Subtle inner hairline on the avatar edge (token `border-border`).
     * Default **false** — full-bleed circle for photos/logos (Shadcn Studio–style profile look).
     */
    insetBorder?: boolean
  }

function Avatar({
  className,
  size = "default",
  shape = "circle",
  variant = "default",
  insetBorder = false,
  ...props
}: AvatarProps) {
  const shapeKey = shape ?? "circle"
  const insetClass =
    insetBorder &&
    cn(
      "after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
      AVATAR_INSET_AFTER[shapeKey]
    )
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      data-shape={shape}
      className={cn(avatarRootVariants({ size, shape, variant }), insetClass, className)}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  referrerPolicy = "no-referrer",
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      referrerPolicy={referrerPolicy}
      className={cn(avatarImageShape, className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(avatarFallbackShape, className)}
      {...props}
    />
  )
}

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

/**
 * A row of avatars with an overflow counter — **never overlapping**.
 *
 * Overlapping face piles (Slack / GitHub style) have known UX problems in
 * dense product chrome: ring-on-background contrast is fragile in dark mode,
 * click targets stack, and screen readers announce ambiguous groupings.
 * `AvatarGroup` therefore renders children side-by-side with a small inline
 * gap. See `.cursor/rules/exxat-person-identity-display.mdc` (MUST NOT —
 * overlapping avatars) and the `PageHeader` collaboration variant which
 * uses the same gapped row.
 */
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "group/avatar-group flex items-center gap-1.5",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      data-compact-touch
      className={cn(
        "relative inline-flex aspect-square size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:[&>i]:text-sm group-has-data-[size=sm]/avatar-group:[&>i]:text-xs",
        className
      )}
      {...props}
    />
  )
}

// ── Shadcn Studio–style compositions (tokens + a11y checklist: sr-only status, meaningful alt on image) ──

type AvatarShape = NonNullable<VariantProps<typeof avatarRootVariants>["shape"]>
type AvatarVariant = NonNullable<VariantProps<typeof avatarRootVariants>["variant"]>
type AvatarSize = NonNullable<VariantProps<typeof avatarRootVariants>["size"]>

type AvatarInitialsProps = Omit<AvatarProps, "children"> & {
  initials: string
  /** When true, initials are hidden from accessibility tree (pair with visible name). Default true. */
  decorative?: boolean
  /** Extra classes on `AvatarFallback` (e.g. font weight). */
  fallbackClassName?: string
}

/** Initials-only chip using `--avatar-initials-bg` / `--avatar-initials-fg` (Exxat tokens). */
function AvatarInitials({
  initials,
  decorative = true,
  fallbackClassName,
  className,
  ...avatarProps
}: AvatarInitialsProps) {
  return (
    <Avatar className={className} {...avatarProps}>
      <AvatarFallback
        aria-hidden={decorative ? true : undefined}
        className={cn(
          "border-0 bg-[var(--avatar-initials-bg)] font-semibold text-[var(--avatar-initials-fg)]",
          fallbackClassName
        )}
      >
        {initials}
      </AvatarFallback>
    </Avatar>
  )
}

type AvatarStatusTone = "online" | "busy" | "away"

const avatarStatusDot: Record<AvatarStatusTone, string> = {
  online: "bg-emerald-600 dark:bg-emerald-400",
  busy: "bg-destructive",
  away: "bg-amber-600 dark:bg-amber-400",
}

/** Presence dot (Studio avatars 7–9). Wraps a single `Avatar`. */
function AvatarStatus({
  children,
  status,
  label,
  className,
  position = "bottom-end",
}: {
  children: React.ReactNode
  status: AvatarStatusTone
  /** Announced to screen readers (e.g. "Busy"). */
  label: string
  className?: string
  /** `bottom-end` matches `AvatarBadge`; `top-end` matches some Studio away demos. */
  position?: "bottom-end" | "top-end"
}) {
  const pos =
    position === "top-end"
      ? "-top-0.5 -end-0.5 bottom-auto start-auto"
      : "-end-0.5 -bottom-0.5 top-auto start-auto"
  return (
    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
      {children}
      <span
        className={cn(
          "pointer-events-none absolute z-10 size-3 rounded-full border-2 border-background",
          pos,
          avatarStatusDot[status]
        )}
        aria-hidden
      />
      <span className="sr-only">{label}</span>
    </span>
  )
}

/** Numeric badge overlay (Studio avatar 11). */
function AvatarNotificationCount({
  children,
  count,
  className,
  badgeClassName,
}: {
  children: React.ReactNode
  count: number | string
  className?: string
  badgeClassName?: string
}) {
  return (
    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
      {children}
      <Badge
        className={cn(
          "absolute -top-2.5 -end-2.5 z-10 h-5 min-w-5 justify-center px-1 tabular-nums",
          badgeClassName
        )}
      >
        {count}
      </Badge>
    </span>
  )
}

/** Verified check overlay (Studio avatar 12) — primary token fill. */
function AvatarVerified({
  children,
  label = "Verified",
  className,
}: {
  children: React.ReactNode
  label?: string
  className?: string
}) {
  return (
    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
      {children}
      <span className="pointer-events-none absolute -top-1.5 -end-1.5 z-10 inline-flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
        <i className="fa-solid fa-check text-2xs leading-none" aria-hidden="true" />
        <span className="sr-only">{label}</span>
      </span>
    </span>
  )
}

/** Leo assistant mark — centralized; same icon treatment as Ask Leo sidebar. */
function AvatarLeoAssistant({
  className,
  size = "sm",
  ...props
}: Omit<AvatarProps, "children" | "shape">) {
  return (
    <Avatar size={size} shape="circle" insetBorder={false} className={className} {...props}>
      <AvatarFallback className="bg-brand/15 p-0">
        <span className="sr-only">Leo</span>
        <i
          className="fa-duotone fa-solid fa-star-christmas text-xs text-brand"
          aria-hidden="true"
        />
      </AvatarFallback>
    </Avatar>
  )
}

/** “Add profile” affordance (Studio avatar 10). `onClick` on the button. */
function AvatarPlusAction({
  children,
  actionLabel,
  onClick,
  className,
  buttonClassName,
}: {
  children: React.ReactNode
  actionLabel: string
  onClick?: () => void
  className?: string
  buttonClassName?: string
}) {
  return (
    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
      {children}
      <button
        type="button"
        onClick={onClick}
        className={cn(
          "focus-visible:ring-ring/50 absolute -end-1 -bottom-1 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-border focus-visible:ring-[3px] focus-visible:outline-none",
          buttonClassName
        )}
      >
        <i className="fa-light fa-plus text-xs leading-none text-muted-foreground" aria-hidden="true" />
        <span className="sr-only">{actionLabel}</span>
      </button>
    </span>
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
  AvatarInitials,
  AvatarStatus,
  AvatarNotificationCount,
  AvatarVerified,
  AvatarPlusAction,
  AvatarLeoAssistant,
  avatarRootVariants,
}
export type {
  AvatarProps,
  AvatarInitialsProps,
  AvatarShape,
  AvatarVariant,
  AvatarSize,
  AvatarStatusTone,
}