import React from 'react';
import { PaginationConfig } from '../types';
import { generatePageNumbers } from '../utils/pagination';
import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
import { usePagination } from '../hooks/usePagination';

const LoadMoreButton: React.FC<{
  loading?: boolean;
  hasMore?: boolean;
  buttonText?: string;
  loadingText?: string;
  onLoadMore?: () => void;
}> = ({
  loading = false,
  hasMore = true,
  buttonText = 'Load More',
  loadingText = 'Loading...',
  onLoadMore
}) => (
  <button
    onClick={() => onLoadMore?.()}
    disabled={loading || !hasMore || !onLoadMore}
    className="pagination-load-more-button"
  >
    {loading ? loadingText : buttonText}
  </button>
);

export const Pagination: React.FC<PaginationConfig> = ({
  totalItems,
  currentPage,
  pageSize,
  maxPages = 5,
  displayMode = 'numbers',
  infiniteScrollOptions,
  loadMoreOptions,
  onPageChange,
  className = '',
  ariaLabel = 'Pagination'
}) => {
  const {
    currentPage: page,
    totalPages,
    hasNextPage,
    hasPreviousPage,
    setPage
  } = usePagination({
    totalItems,
    currentPage,
    pageSize,
    maxPages
  });

  const { scrollRef, isLoading, hasMore } = useInfiniteScroll({
    ...infiniteScrollOptions,
    onLoadMore: () => {
      if (hasNextPage && infiniteScrollOptions?.onLoadMore) {
        infiniteScrollOptions.onLoadMore();
      }
    }
  });

  if (displayMode === 'infinite-scroll') {
    return (
      <div
        ref={scrollRef as React.RefObject<HTMLDivElement>}
        className={`pagination-infinite-scroll ${className}`}
      >
        {/* Content will be rendered by parent component */}
        {isLoading && <div className="pagination-loading">Loading...</div>}
      </div>
    );
  }

  if (displayMode === 'load-more') {
    return (
      <div className={`pagination-load-more ${className}`}>
        {/* Content will be rendered by parent component */}
        <LoadMoreButton {...loadMoreOptions} />
      </div>
    );
  }

  const pageNumbers = generatePageNumbers(page, totalPages, maxPages);

  return (
    <nav
      className={`pagination-container ${className}`}
      aria-label={ariaLabel}
    >
      <ul className="pagination-list">
        <li>
          <button
            onClick={() => setPage(page - 1)}
            disabled={!hasPreviousPage}
            aria-label="Previous page"
            className="pagination-button"
          >
            Previous
          </button>
        </li>
        {pageNumbers.map((pageNum) => (
          <li key={pageNum}>
            <button
              onClick={() => {
                setPage(pageNum);
                if (onPageChange) onPageChange(pageNum);
              }}
              className={`pagination-button ${pageNum === page ? 'active' : ''}`}
              aria-current={pageNum === page ? 'page' : undefined}
              aria-label={`Page ${pageNum}`}
            >
              {pageNum}
            </button>
          </li>
        ))}
        <li>
          <button
            onClick={() => setPage(page + 1)}
            disabled={!hasNextPage}
            aria-label="Next page"
            className="pagination-button"
          >
            Next
          </button>
        </li>
      </ul>
    </nav>
  );
};