import { useOrders } from '@features/payment'
import { Spinner } from '@shared/ui'
import { OrderAccordion } from './OrderAccordion'
import styles from './TransactionsList.module.css'

export function TransactionsList() {
  const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useOrders()

  const items = data?.pages.flatMap(p => p.orders) ?? []

  if (isLoading) return <Spinner fullscreen label="Загрузка" />
  if (isError) return <p className={styles.statusError}>Не удалось загрузить транзакции. Попробуйте обновить страницу.</p>
  if (items.length === 0) return <p className={styles.empty}>У вас пока нет транзакций.</p>

  return (
    <>
      <div className={styles.list}>
        {items.map(item => (
          <OrderAccordion key={item.order.id} item={item} />
        ))}
      </div>

      {hasNextPage && (
        <div className={styles.loadMore}>
          <button
            className={styles.loadMoreBtn}
            onClick={() => fetchNextPage()}
            disabled={isFetchingNextPage}
            type="button"
          >
            {isFetchingNextPage ? 'Загрузка...' : 'Загрузить ещё'}
          </button>
        </div>
      )}
    </>
  )
}
