import { useEffect, useState } from 'react'
import { db } from '@/lib/db'

// 全局图片缓存
const avatarCache = new Map<string, string>()

export function useAvatarCache(avatarImageId?: string) {
  const [avatarUrl, setAvatarUrl] = useState<string | undefined>(
    avatarImageId ? avatarCache.get(avatarImageId) : undefined
  )
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    if (!avatarImageId) {
      setAvatarUrl(undefined)
      return
    }

    // 如果缓存中已存在，直接使用
    const cached = avatarCache.get(avatarImageId)
    if (cached) {
      setAvatarUrl(cached)
      return
    }

    // 从数据库加载
    let isMounted = true
    setIsLoading(true)

    db.images
      .get(avatarImageId)
      .then((image) => {
        if (image && isMounted) {
          const url = URL.createObjectURL(image.blob)
          avatarCache.set(avatarImageId, url)
          setAvatarUrl(url)
        }
      })
      .catch((error) => {
        console.error('Failed to load avatar:', error)
      })
      .finally(() => {
        if (isMounted) {
          setIsLoading(false)
        }
      })

    return () => {
      isMounted = false
    }
  }, [avatarImageId])

  return { avatarUrl, isLoading }
}

// 清理缓存的工具函数（可选）
export function clearAvatarCache() {
  avatarCache.forEach((url) => URL.revokeObjectURL(url))
  avatarCache.clear()
}