import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ArrowRight } from 'lucide-react';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  totalRecords: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  loading?: boolean;
  itemLabel?: string; // e.g., "requests", "activities", "approvers"
  testIdPrefix?: string;
}

export function Pagination({
  currentPage,
  totalPages,
  itemsPerPage,
  totalRecords,
  onPageChange,
  loading = false,
  itemLabel = 'items',
  testIdPrefix = 'pagination'
}: PaginationProps) {
  const getPageNumbers = () => {
    const pages = [];
    const maxPagesToShow = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
    
    if (endPage - startPage < maxPagesToShow - 1) {
      startPage = Math.max(1, endPage - maxPagesToShow + 1);
    }
    
    for (let i = startPage; i <= endPage; i++) {
      pages.push(i);
    }
    
    return pages;
  };

  // Calculate display values
  const startItem = totalRecords > 0 ? ((currentPage - 1) * itemsPerPage) + 1 : 0;
  const endItem = Math.min(currentPage * itemsPerPage, totalRecords);

  // Always show the count info, even if there's only 1 page
  // If only 1 page or loading, only show the count info without pagination controls
  if (totalPages <= 1) {
    return (
      <Card className="shadow-md border-gray-200" data-testid={`${testIdPrefix}-container`}>
        <CardContent className="p-4">
          <div className="flex items-center justify-center">
            <div 
              className="text-sm sm:text-base font-medium text-gray-700"
              data-testid={`${testIdPrefix}-info`}
            >
              {loading ? (
                `Loading ${itemLabel}...`
              ) : totalRecords === 0 ? (
                `No ${itemLabel} found`
              ) : totalRecords === 1 ? (
                `Showing 1 ${itemLabel.slice(0, -1)}`
              ) : startItem === endItem ? (
                `Showing ${startItem} of ${totalRecords} ${itemLabel}`
              ) : (
                `Showing ${startItem} to ${endItem} of ${totalRecords} ${itemLabel}`
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="shadow-md border-gray-200" data-testid={`${testIdPrefix}-container`}>
      <CardContent className="p-4">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
          <div 
            className="text-sm sm:text-base font-medium text-gray-700"
            data-testid={`${testIdPrefix}-info`}
          >
            Showing {startItem} to {endItem} of {totalRecords} {itemLabel}
          </div>
          
          <div className="flex items-center gap-2" data-testid={`${testIdPrefix}-controls`}>
            {/* Previous Button */}
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="h-8 w-8 p-0"
              data-testid={`${testIdPrefix}-prev-btn`}
              aria-label="Previous page"
            >
              <ArrowRight className="h-4 w-4 rotate-180" />
            </Button>
            
            {/* First page + ellipsis */}
            {currentPage > 3 && totalPages > 5 && (
              <>
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={() => onPageChange(1)} 
                  className="h-8 w-8 p-0"
                  data-testid={`${testIdPrefix}-page-1`}
                >
                  1
                </Button>
                <span className="text-muted-foreground" data-testid={`${testIdPrefix}-ellipsis-start`}>...</span>
              </>
            )}
            
            {/* Page Numbers */}
            {getPageNumbers().map((pageNum) => (
              <Button
                key={pageNum}
                variant={pageNum === currentPage ? "default" : "outline"}
                size="sm"
                onClick={() => onPageChange(pageNum)}
                className={`h-8 w-8 p-0 ${pageNum === currentPage ? 'bg-re-green text-white hover:bg-re-green/90' : ''}`}
                data-testid={`${testIdPrefix}-page-${pageNum}`}
                aria-current={pageNum === currentPage ? 'page' : undefined}
              >
                {pageNum}
              </Button>
            ))}
            
            {/* Last page + ellipsis */}
            {currentPage < totalPages - 2 && totalPages > 5 && (
              <>
                <span className="text-muted-foreground" data-testid={`${testIdPrefix}-ellipsis-end`}>...</span>
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={() => onPageChange(totalPages)} 
                  className="h-8 w-8 p-0"
                  data-testid={`${testIdPrefix}-page-${totalPages}`}
                >
                  {totalPages}
                </Button>
              </>
            )}
            
            {/* Next Button */}
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="h-8 w-8 p-0"
              data-testid={`${testIdPrefix}-next-btn`}
              aria-label="Next page"
            >
              <ArrowRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

