import { onActivated, onBeforeUnmount, onDeactivated, onMounted, watch, type Ref } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

interface AdminListStateOptions<TFilters extends object> {
  key: string
  filters: TFilters
  currentPage: Ref<number>
  pageSize: Ref<number>
  scrollSelector?: string
}

interface StoredAdminListState<TFilters> {
  filters?: TFilters
  currentPage?: number
  pageSize?: number
  scrollTop?: number
}

/**
 * 在同一后台标签页内保留列表筛选、分页与滚动位置。
 * 数据列表本身仍由页面按当前筛选重新请求，避免展示过期数据。
 */
export function useAdminListState<TFilters extends object>(
  options: AdminListStateOptions<TFilters>
) {
  const storageKey = `hfb.admin.list-state.${options.key}`
  const scrollSelector = options.scrollSelector || '.admin-main'
  let stateSaveTimer: number | undefined
  let scrollSaveTimer: number | undefined

  function readState() {
    if (typeof window === 'undefined') return null
    try {
      const raw = window.sessionStorage.getItem(storageKey)
      if (!raw) return null
      const state = JSON.parse(raw) as StoredAdminListState<TFilters>
      return state && typeof state === 'object' ? state : null
    } catch {
      return null
    }
  }

  function scrollContainer() {
    return document.querySelector<HTMLElement>(scrollSelector)
  }

  function saveState() {
    if (typeof window === 'undefined') return
    try {
      const state: StoredAdminListState<TFilters> = {
        filters: { ...options.filters },
        currentPage: options.currentPage.value,
        pageSize: options.pageSize.value,
        scrollTop: scrollContainer()?.scrollTop || 0,
      }
      window.sessionStorage.setItem(storageKey, JSON.stringify(state))
    } catch {
      // sessionStorage 不可用时仅不恢复状态，不影响列表使用。
    }
  }

  function restoreState() {
    const state = readState()
    if (!state) return
    if (state.filters && typeof state.filters === 'object') {
      Object.assign(options.filters, state.filters)
    }
    if (typeof state.currentPage === 'number' && state.currentPage > 0) {
      options.currentPage.value = state.currentPage
    }
    if (typeof state.pageSize === 'number' && state.pageSize > 0) {
      options.pageSize.value = state.pageSize
    }
  }

  function restoreScroll() {
    const scrollTop = Number(readState()?.scrollTop || 0)
    if (!Number.isFinite(scrollTop) || scrollTop <= 0) return
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const container = scrollContainer()
        if (container) container.scrollTop = scrollTop
      })
    })
  }

  function scheduleSave() {
    if (stateSaveTimer !== undefined) window.clearTimeout(stateSaveTimer)
    stateSaveTimer = window.setTimeout(saveState, 200)
  }

  function handleScroll() {
    if (scrollSaveTimer !== undefined) window.clearTimeout(scrollSaveTimer)
    scrollSaveTimer = window.setTimeout(saveState, 300)
  }

  // 在页面首次请求前恢复筛选和分页。
  restoreState()

  watch([options.filters, options.currentPage, options.pageSize], scheduleSave, { deep: true })

  onMounted(() => {
    scrollContainer()?.addEventListener('scroll', handleScroll, { passive: true })
  })

  onActivated(() => {
    scrollContainer()?.addEventListener('scroll', handleScroll, { passive: true })
  })

  onDeactivated(() => {
    saveState()
    scrollContainer()?.removeEventListener('scroll', handleScroll)
  })

  onBeforeRouteLeave(() => {
    saveState()
  })

  onBeforeUnmount(() => {
    saveState()
    scrollContainer()?.removeEventListener('scroll', handleScroll)
    if (stateSaveTimer !== undefined) window.clearTimeout(stateSaveTimer)
    if (scrollSaveTimer !== undefined) window.clearTimeout(scrollSaveTimer)
  })

  return { restoreScroll, saveState }
}