import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { useEffect, useState } from 'react'
import type { ListParams, PaginatedResponse } from '@/api/types'

/**
 * Standard list-page state: page / page_size wired to the backend's
 * Pagination envelope; changing filters snaps back to page 1.
 */
export function useListPage<T>(
  key: string,
  fetcher: (params: ListParams) => Promise<PaginatedResponse<T>>,
  filters: ListParams = {},
) {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)

  const filterKey = JSON.stringify(filters)

  useEffect(() => {
    setPage(1)
  }, [filterKey])

  const query = useQuery({
    queryKey: [key, filterKey, page, pageSize],
    queryFn: () => fetcher({ ...filters, page, page_size: pageSize }),
    placeholderData: keepPreviousData,
  })

  return {
    query,
    rows: query.data?.data ?? [],
    pagination: query.data?.pagination,
    loading: query.isPending,
    page,
    setPage,
    setPageSize: (size: number) => {
      setPageSize(size)
      setPage(1)
    },
  }
}