const PaginationCtl = ({
    currentPage = 1,
    setCurrentPage,
    onPageChange,
    totalPages = 1,
    totalItems = 0,
    pageSize = 20,
    setPageSize,
    onPageSizeChange,
    backRefLink = true,
    pageSizes = [10, 20, 50, 100],
    childComponent 
}) => {
    
    const { Pagination, Dropdown, DropdownButton } = ReactBootstrap;
    const paginationItems = [];
    let history = null;
    let location = null;
    try {
        if (typeof useHistory === 'function') history = useHistory();
        if (typeof useLocation === 'function') location = useLocation();
    } catch (e) {}

    const safeCurrentPage = Number(currentPage) || 1;
    const safeTotalPages = Number(totalPages) || (pageSize > 0 ? Math.ceil(totalItems / pageSize) : 1) || 1;

    const maxVisiblePages = 2; // Số trang tối đa hiển thị
    const startPage = Math.max(1, safeCurrentPage - maxVisiblePages);
    const endPage = Math.min(safeTotalPages, safeCurrentPage + maxVisiblePages);

    // Tạo các mục phân trang
    for (let number = startPage; number <= endPage; number++) {
        
        paginationItems.push(
            <Pagination.Item 
                key={number} 
                active={number === safeCurrentPage} 
                onClick={() => handlePageChange(number)}                
            >
                {number}
            </Pagination.Item>
        );
    }

    // Thêm trang đầu
    if (startPage > 1) {
        paginationItems.unshift(
            <Pagination.Item key={1} onClick={() => handlePageChange(1)}>
                <i className="fa fa-step-backward" aria-hidden="true"></i> {/* Biểu tượng Go to First */}
            </Pagination.Item>
        );
    }

    // Thêm trang cuối
    if (endPage < safeTotalPages) {
        
        paginationItems.push(
            <Pagination.Item  key={safeTotalPages} onClick={() => handlePageChange(safeTotalPages)}>
                <i className="fa fa-step-forward" aria-hidden="true"></i> {/* Biểu tượng Go to Last */}
            </Pagination.Item>
        );
        // Thêm ellipsis nếu cần
        if (totalItems > 0) {
            paginationItems.push(<Pagination.Ellipsis disabled key="end-ellipsis">{totalItems}</Pagination.Ellipsis> );
        }
    }

    const handlePageChange = (pageNumber) => {
        if (typeof setCurrentPage === 'function') {
            setCurrentPage(pageNumber);
        } else if (typeof onPageChange === 'function') {
            onPageChange(pageNumber);
        }
        
        if (backRefLink && history) {
            const data = { page: pageNumber, per_page: pageSize };
            const params = new URLSearchParams(data).toString();
            history.push(`?${params}`);
        }
    };

    const handlePageSizeChange = (size) => {
        const numericSize = Number(size);
        if (typeof setPageSize === 'function') {
            setPageSize(numericSize);
        } else if (typeof onPageSizeChange === 'function') {
            onPageSizeChange(numericSize);
        }

        if (typeof setCurrentPage === 'function') {
            setCurrentPage(1);
        } else if (typeof onPageChange === 'function') {
            onPageChange(1);
        }

        if (backRefLink && history) {
            const data = { page: 1, per_page: numericSize };
            const params = new URLSearchParams(data).toString();
            history.push(`?${params}`);
        }
    };

    return (
        <div className="d-flex justify-content-between align-items-center mb-3">
            <Dropdown className="me-2">
                <DropdownButton id="dropdown-basic-button" title={`${pageSize}`} onSelect={handlePageSizeChange}>
                    {pageSizes.map(size => (
                        <Dropdown.Item key={size} eventKey={size}>
                            {size}
                        </Dropdown.Item>
                    ))}
                </DropdownButton>
            </Dropdown>
            {childComponent}
            <Pagination style ={{margin:0, paddingLeft:5}}>{paginationItems}</Pagination>  
        </div>
    );
};


const PaginationControl = ({ total_items, page, perpage, onPageChange }) => {
    const { Pagination } = ReactBootstrap
  // 1. Tính tổng số trang
  const totalPages = Math.ceil(total_items / perpage);

  // Nếu chỉ có 1 trang hoặc không có dữ liệu thì không hiển thị
  if (totalPages <= 1) return null;

  // 2. Logic tính toán các chỉ số trang cần hiển thị
  const items = [];
  const delta = 2; // Số lượng trang hiển thị ở mỗi bên trang hiện tại

  for (let i = 1; i <= totalPages; i++) {
    // Luôn hiển thị trang đầu, trang cuối, và các trang trong khoảng delta xung quanh trang hiện tại
    if (
      i === 1 || 
      i === totalPages || 
      (i >= page - delta && i <= page + delta)
    ) {
        items.push(i);
    } else if (
      (i === page - delta - 1) || 
      (i === page + delta + 1)
    ) {
      // Thêm dấu "..." nếu có khoảng cách
      items.push('...');
    }
  }

  return (
    <Pagination className="justify-content-center">
      {/* Nút về trang đầu và trang trước */}
      <Pagination.First onClick={() => onPageChange(1)} disabled={page === 1} />
      <Pagination.Prev onClick={() => onPageChange(page - 1)} disabled={page === 1} />

      {/* Danh sách các con số */}
      {items.map((item, index) => {
        if (item === '...') {
          return <Pagination.Ellipsis key={`ellipsis-${index}`} disabled />;
        }
        return (
          <Pagination.Item
            key={item}
            active={item === page}
            onClick={() => onPageChange(item)}
          >
            {item}
          </Pagination.Item>
        );
      })}

      {/* Nút sang trang kế tiếp và trang cuối */}
      <Pagination.Next onClick={() => onPageChange(page + 1)} disabled={page === totalPages} />
      <Pagination.Last onClick={() => onPageChange(totalPages)} disabled={page === totalPages} />
    </Pagination>
  );
};