const DisplayStoreSetup = () => {
  const Sender_variant = ref('updown')
  const scrollerRef = ref(null)
  const tempList = ref([])
  const isSubGerenate = ref(false)
  const currentPage = ref(0)
  const hasMoreData = ref(true)
  const isLoading = ref(false)
  const currentResultData = ref(null)
  const dialogBoxRef = ref(null)

  const canvasVisible = ref(false)
  const canvasImage = ref('')
  const canvasReferenceImages = ref([])
  const canvasSource = ref('')

  const addGeneratingItem = (item) => {
    const newItem = {
      id: item.taskId || crypto.randomUUID(),
      status: 'generate',
      type: item.type || 'image',
      time: item.time || new Date().toLocaleString(),
      files: [],
      generateData: item.generateData || {}
    }
    tempList.value.unshift(newItem)
    return newItem
  }

  const updateItemToSuccess = (taskId, fileUrls) => {
    const index = tempList.value.findIndex((item) => item.id === taskId)
    if (index !== -1) {
      tempList.value[index].status = 'success'
      tempList.value[index].files = Array.isArray(fileUrls) ? fileUrls : [fileUrls]
    }
  }

  const initHistoryList = (historyList) => {
    tempList.value = historyList
    currentPage.value = 1
    hasMoreData.value = true
  }

  const prependHistoryList = (historyList) => {
    tempList.value = [...historyList, ...tempList.value]
  }

  const appendHistoryList = (historyList) => {
    tempList.value = [...tempList.value, ...historyList]
  }

  const resetPagination = () => {
    currentPage.value = 0
    hasMoreData.value = true
    isLoading.value = false
  }

  const deleteHistoryItem = (id) => {
    const index = tempList.value.findIndex((item) => item.id === id)
    if (index !== -1) {
      tempList.value.splice(index, 1)
    }
  }

  const scrollToBottom = async () => {
    const refValue = scrollerRef.value

    if (!refValue) {
      return
    }

    try {
      if (typeof refValue.scrollToBottom === 'function') {
        await nextTick()
        refValue.scrollToBottom()
        return
      }

      const scrollerEl = refValue.$el
      if (scrollerEl) {
        const viewport = scrollerEl.querySelector('.vue-recycle-scroller__viewport')
        if (viewport) {
          viewport.scrollTop = viewport.scrollHeight
        }
      }

      if (typeof refValue.scrollToItem === 'function' && tempList.value && tempList.value.length > 0) {
        await nextTick()
        refValue.scrollToItem(tempList.value.length - 1)
      }
    } catch (error) {
      console.error('滚动出错:', error)
    }
  }

  const setResultData = (data) => {
    currentResultData.value = data
  }

  const setDialogBoxRef = (ref) => {
    dialogBoxRef.value = ref
  }

  const triggerGenerateWithResult = async () => {
    if (dialogBoxRef.value && currentResultData.value) {
      await dialogBoxRef.value.fillParamsFromResult(currentResultData.value)
      await dialogBoxRef.value.handleStart()
    }
  }

  const fillParamsForEdit = () => {
    if (dialogBoxRef.value && currentResultData.value) {
      dialogBoxRef.value.fillParamsFromResult(currentResultData.value)
    }
  }

  const openCanvas = (data) => {
    if (typeof data === 'string') {
      canvasImage.value = data
      canvasReferenceImages.value = []
      canvasSource.value = ''
    } else {
      canvasImage.value = data.mainImage?.url || data.mainImage || ''
      canvasReferenceImages.value = data.referenceImages || []
      canvasSource.value = data.source || ''
    }
    canvasVisible.value = true
  }

  return {
    Sender_variant,
    scrollerRef,
    tempList,
    isSubGerenate,
    currentPage,
    hasMoreData,
    isLoading,
    currentResultData,
    dialogBoxRef,
    canvasVisible,
    canvasImage,
    canvasReferenceImages,
    canvasSource,
    addGeneratingItem,
    updateItemToSuccess,
    initHistoryList,
    prependHistoryList,
    appendHistoryList,
    resetPagination,
    scrollToBottom,
    deleteHistoryItem,
    setResultData,
    setDialogBoxRef,
    triggerGenerateWithResult,
    fillParamsForEdit,
    openCanvas
  }
}

// eslint-disable-next-line no-undef
export const useDisplayStore = defineStore('display', DisplayStoreSetup)