import { StarIcon } from '@phosphor-icons/react'
import classNames from 'classnames'
import React from 'react'

import { getAvatarBgColor, getAvatarEmoji } from './getAvatarEmoji'

export interface AvatarProps {
  id: string
  name: string
  image?: string
  size?: number
  className?: string
  starred?: boolean
  shape?: 'squircle' | 'circle'
  dmAgentEnabled?: boolean
}

/**
 * Avatar component that displays a user image or colored initial fallback
 */
export const Avatar = ({
  id,
  image,
  size = 40,
  className,
  starred = false,
  shape = 'squircle',
  dmAgentEnabled = false,
}: AvatarProps) => {
  const emoji = getAvatarEmoji(id)
  const bgColor = getAvatarBgColor(id)

  // Small avatars scale the emoji with the avatar so it doesn't overpower a
  // tiny circle — a fixed floor read ~60% of a 17px avatar vs ~35% at 40px.
  // Larger avatars keep fixed sizes. 0.45 is continuous with the 14px step at
  // 32px; lower it to shrink small emoji further.
  const SMALL_EMOJI_RATIO = 0.45
  const getFontSize = () => {
    if (size < 32) return Math.round(size * SMALL_EMOJI_RATIO)
    if (size < 56) return 14
    if (size < 120) return 18
    return 36
  }

  const fontSize = getFontSize()
  // Match design treatment: 2px AI border at 40px avatar size.
  const aiBorderWidth = size >= 40 ? 2 : 1

  const borderStyle =
    shape === 'circle' ? { borderRadius: '50%' } : { borderRadius: '1rem' }

  const avatarInner = (
    <div className="h-full w-full overflow-hidden" style={borderStyle}>
      {image ? (
        <img src={image} alt="" className="h-full w-full object-cover" />
      ) : (
        <div
          aria-hidden="true"
          className={classNames(
            'avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors'
          )}
          style={{ fontSize, lineHeight: 1 }}
        >
          {emoji}
        </div>
      )}
    </div>
  )

  return (
    <div
      className={classNames('relative flex-shrink-0', className)}
      style={
        {
          '--str-chat__avatar-size': `${size}px`,
          width: `${size}px`,
          height: `${size}px`,
          backgroundColor: image ? undefined : bgColor,
          ...borderStyle,
        } as React.CSSProperties
      }
    >
      {starred && (
        <div
          aria-hidden="true"
          className="absolute -left-1.5 -top-1.5 z-10 flex size-5 items-center justify-center rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
        >
          <StarIcon className="size-3 text-yellow-600" weight="duotone" />
        </div>
      )}
      <div
        data-testid="avatar-ring"
        className={classNames('h-full w-full', 'bg-transparent')}
        style={{
          ...borderStyle,
          ...(dmAgentEnabled && {
            borderWidth: `${aiBorderWidth}px`,
            borderStyle: 'solid',
            borderColor: 'var(--AI-Gradient, #7F22FE)',
            boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
          }),
        }}
      >
        {avatarInner}
      </div>
    </div>
  )
}