const imageCache = reactive<Record<string, { thumb_url: string; image_url: string; photographer: string; photographer_url: string } | null>>({})
const pending = new Set<string>()

export function useDestinationImages() {
  async function fetchImage(cityName: string) {
    const key = cityName.trim().toLowerCase()
    if (key in imageCache || pending.has(key)) return
    pending.add(key)

    try {
      const data = await $fetch<{ thumb_url: string; image_url: string; photographer: string; photographer_url: string } | null>('/api/destination-image', {
        query: { city: cityName },
      })
      imageCache[key] = data
    } catch {
      imageCache[key] = null
    } finally {
      pending.delete(key)
    }
  }

  function getImage(cityName: string) {
    const key = cityName.trim().toLowerCase()
    return imageCache[key] ?? null
  }

  function prefetch(cityNames: string[]) {
    cityNames.forEach(name => fetchImage(name))
  }

  return { fetchImage, getImage, prefetch, imageCache }
}