"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { gravatarUrl, primaryContactEmail } from "@/lib/contact-avatar"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import { cn } from "@/lib/utils"
import type { FullContact } from "@/lib/contacts/types"

export type ContactAvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"

const SIZE_CONFIG: Record<
  ContactAvatarSize,
  { className: string; gravatar: number; text: string }
> = {
  xs: { className: "size-8", gravatar: 64, text: "text-xs" },
  sm: { className: "size-10", gravatar: 80, text: "text-sm" },
  md: { className: "size-14", gravatar: 112, text: "text-lg" },
  lg: { className: "size-20", gravatar: 160, text: "text-2xl" },
  xl: { className: "size-24", gravatar: 192, text: "text-3xl" },
  "2xl": { className: "size-28", gravatar: 224, text: "text-4xl" },
}

export interface ContactAvatarProps {
  contact?: Pick<FullContact, "avatarUrl" | "emails" | "firstName" | "lastName">
  /** Override display name for initials fallback. */
  name?: string
  /** Override email for Gravatar fallback. */
  email?: string
  /** Override stored avatar URL. */
  avatarUrl?: string
  size?: ContactAvatarSize
  className?: string
  alt?: string
}

export function contactAvatarLabel(
  contact: Pick<FullContact, "firstName" | "lastName" | "emails"> | undefined,
  nameOverride?: string,
  emailOverride?: string,
): string {
  if (nameOverride?.trim()) return nameOverride.trim()
  if (contact) {
    const fromName = `${contact.firstName ?? ""} ${contact.lastName ?? ""}`.trim()
    if (fromName) return fromName
  }
  return emailOverride?.trim() || primaryContactEmail(contact ?? {}) || "?"
}

export function ContactAvatar({
  contact,
  name: nameOverride,
  email: emailOverride,
  avatarUrl: avatarUrlOverride,
  size = "sm",
  className,
  alt,
}: ContactAvatarProps) {
  const config = SIZE_CONFIG[size]
  const name = contactAvatarLabel(contact, nameOverride, emailOverride)
  const email = emailOverride?.trim() || primaryContactEmail(contact ?? {})
  const avatarUrl = avatarUrlOverride ?? contact?.avatarUrl
  const gravatar = email ? gravatarUrl(email, config.gravatar) : undefined
  const initial = senderInitial(name)
  const color = avatarColor(name)

  return (
    <Avatar className={cn("shrink-0", config.className, className)}>
      {avatarUrl ? <AvatarImage src={avatarUrl} alt={alt ?? name} /> : null}
      {gravatar ? <AvatarImage src={gravatar} alt={alt ?? name} /> : null}
      <AvatarFallback
        className={cn("font-medium text-white", config.text)}
        style={{ backgroundColor: color }}
      >
        {initial}
      </AvatarFallback>
    </Avatar>
  )
}