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

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

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

  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((op, i) => (
          <OperationAccordion key={op.payment?.id ?? op.withdrawal?.id ?? i} op={op} />
        ))}
      </div>

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