import { useState, useEffect } from 'react'
import { usersApi } from '@/api'
import { User } from 'lucide-react'
import clsx from 'clsx'
import type { ShopItemPublic } from '@/types'

// Глобальный кэш для blob URL аватарок
const avatarCache = new Map<number, string>()
// Пользователи, для которых нужно сбросить HTTP-кэш при следующем запросе
const needsCacheBust = new Set<number>()

interface UserAvatarProps {
  userId: number
  hasAvatar: boolean  // Есть ли у пользователя avatar_url
  nickname: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  className?: string
  version?: number  // Для принудительного обновления при смене аватара
  frame?: ShopItemPublic | null  // Equipped frame cosmetic
  telegramAvatarUrl?: string | null  // Fallback to telegram avatar
}

const sizeClasses = {
  xs: 'w-6 h-6 text-[8px]',
  sm: 'w-8 h-8 text-xs',
  md: 'w-12 h-12 text-sm',
  lg: 'w-16 h-16 text-base',
  xl: 'w-24 h-24 text-xl',
}

const framePadding = {
  xs: 2,
  sm: 2,
  md: 3,
  lg: 4,
  xl: 5,
}

// Get frame styles from asset_data
function getFrameStyles(frame: ShopItemPublic | null | undefined): React.CSSProperties {
  if (!frame?.asset_data) return {}

  const data = frame.asset_data as {
    border_color?: string
    gradient?: string[]
    glow_color?: string
  }

  const styles: React.CSSProperties = {}

  if (data.gradient && data.gradient.length > 0) {
    styles.background = `linear-gradient(45deg, ${data.gradient.join(', ')})`
    styles.backgroundSize = '400% 400%'
  } else if (data.border_color) {
    styles.background = data.border_color
  }

  if (data.glow_color) {
    styles.boxShadow = `0 0 12px ${data.glow_color}, 0 0 24px ${data.glow_color}40`
  }

  return styles
}

// Get frame animation class
function getFrameAnimation(frame: ShopItemPublic | null | undefined): string {
  if (!frame?.asset_data) return ''

  const data = frame.asset_data as { animation?: string }

  if (data.animation === 'fire-pulse') return 'animate-fire-pulse'
  if (data.animation === 'rainbow-rotate') return 'animate-rainbow-rotate'

  return ''
}

export function UserAvatar({
  userId,
  hasAvatar,
  nickname,
  size = 'md',
  className = '',
  version = 0,
  frame,
  telegramAvatarUrl
}: UserAvatarProps) {
  const [blobUrl, setBlobUrl] = useState<string | null>(null)
  const [failed, setFailed] = useState(false)

  useEffect(() => {
    if (!hasAvatar) {
      setBlobUrl(null)
      return
    }

    // Если version > 0, значит аватар обновился - сбрасываем кэш
    const shouldBustCache = version > 0 || needsCacheBust.has(userId)

    // Проверяем кэш только если не нужен bust
    if (!shouldBustCache) {
      const cached = avatarCache.get(userId)
      if (cached) {
        setBlobUrl(cached)
        return
      }
    }

    // Очищаем старый кэш если bust
    if (shouldBustCache) {
      const cached = avatarCache.get(userId)
      if (cached) {
        URL.revokeObjectURL(cached)
        avatarCache.delete(userId)
      }
      needsCacheBust.delete(userId)
    }

    // Загружаем аватарку
    let cancelled = false
    usersApi.getAvatarUrl(userId, shouldBustCache)
      .then(url => {
        if (!cancelled) {
          avatarCache.set(userId, url)
          setBlobUrl(url)
        }
      })
      .catch(() => {
        if (!cancelled) {
          setFailed(true)
        }
      })

    return () => {
      cancelled = true
    }
  }, [userId, hasAvatar, version])

  const sizeClass = sizeClasses[size]
  const displayUrl = (blobUrl && !failed) ? blobUrl : telegramAvatarUrl

  // Avatar content
  const avatarContent = displayUrl ? (
    <img
      src={displayUrl}
      alt={nickname}
      className="w-full h-full rounded-full object-cover"
    />
  ) : (
    <div className="w-full h-full rounded-full bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center">
      <span className="text-gray-400 font-medium">
        {nickname.charAt(0).toUpperCase()}
      </span>
    </div>
  )

  // If no frame, return simple avatar
  if (!frame) {
    return (
      <div className={clsx('rounded-full overflow-hidden bg-dark-700', sizeClass, className)}>
        {avatarContent}
      </div>
    )
  }

  // With frame - wrap avatar in frame container
  const padding = framePadding[size]

  return (
    <div
      className={clsx(
        'rounded-full flex items-center justify-center',
        getFrameAnimation(frame),
        className
      )}
      style={{
        ...getFrameStyles(frame),
        padding: `${padding}px`,
        width: 'fit-content',
        height: 'fit-content',
      }}
    >
      <div className={clsx('rounded-full overflow-hidden bg-dark-700', sizeClass)}>
        {avatarContent}
      </div>
    </div>
  )
}

// Функция для очистки кэша конкретного пользователя (после загрузки нового аватара)
export function clearAvatarCache(userId: number) {
  const cached = avatarCache.get(userId)
  if (cached) {
    URL.revokeObjectURL(cached)
    avatarCache.delete(userId)
  }
  // Помечаем, что при следующем запросе нужно сбросить HTTP-кэш браузера
  needsCacheBust.add(userId)
}

// FramePreview component for shop - shows frame without avatar
interface FramePreviewProps {
  frame: ShopItemPublic | null
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  className?: string
}

const previewSizes = {
  xs: 'w-8 h-8',
  sm: 'w-10 h-10',
  md: 'w-14 h-14',
  lg: 'w-20 h-20',
  xl: 'w-28 h-28',
}

export function FramePreview({ frame, size = 'md', className }: FramePreviewProps) {
  if (!frame?.asset_data) {
    return (
      <div className={clsx(
        previewSizes[size],
        'rounded-lg border-4 border-gray-600 flex items-center justify-center bg-dark-800',
        className
      )}>
        <User className="w-1/2 h-1/2 text-gray-500" />
      </div>
    )
  }

  const padding = framePadding[size]

  return (
    <div
      className={clsx(
        'rounded-lg flex items-center justify-center',
        getFrameAnimation(frame),
        className
      )}
      style={{
        ...getFrameStyles(frame),
        padding: `${padding}px`,
      }}
    >
      <div className={clsx(
        previewSizes[size],
        'rounded-md bg-dark-800/90 flex items-center justify-center'
      )}>
        <User className="w-1/2 h-1/2 text-gray-400" />
      </div>
    </div>
  )
}
