import { ref } from 'vue'
import { getConstByKey } from '@/api/const'

/** Module-level banner state — shared by mobile and desktop home layouts. */
const banners = ref<unknown[]>([])
const bannersLoading = ref(false)
let bannersPromise: Promise<void> | null = null
let bannersLoaded = false

async function fetchBanners(force = false) {
  if (!force && bannersLoaded) {
    return
  }

  if (!force && bannersPromise) {
    return bannersPromise
  }

  bannersPromise = (async () => {
    try {
      bannersLoading.value = true
      const response = await getConstByKey('header_banner')
      if (!response) {
        banners.value = []
        return
      }

      let list: unknown[] = []
      if (typeof response === 'string') {
        list = JSON.parse(response)
      } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
        const value = (response as { value: unknown }).value
        list = typeof value === 'string' ? JSON.parse(value) : (value as unknown[])
      } else if (Array.isArray(response) && response.length > 0) {
        const first = response[0] as { value?: unknown; icon?: unknown }
        if (first.value) {
          list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as unknown[])
        } else if (first.icon) {
          list = response
        }
      }

      banners.value = Array.isArray(list)
        ? list.filter((banner) => (banner as { show?: boolean }).show === true)
        : []
      bannersLoaded = true
    } catch (error) {
      console.error('Error loading banners:', error)
    } finally {
      bannersLoading.value = false
      bannersPromise = null
    }
  })()

  return bannersPromise
}

export function useBanners() {
  return {
    banners,
    loading: bannersLoading,
    loadBanners: fetchBanners,
  }
}

export function loadHomeBanners(force = false) {
  return fetchBanners(force)
}

export function resetHomeBanners() {
  banners.value = []
  bannersLoaded = false
  bannersPromise = null
}