/**
 * Pagination component for Closed Requests
 */

import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';
import { getPageNumbers } from '../utils/paginationHelpers';
import { PaginationState } from '../types/closedRequests.types';

interface ClosedRequestsPaginationProps {
  pagination: PaginationState;
  onPageChange: (page: number) => void;
}

export function ClosedRequestsPagination({
  pagination,
  onPageChange,
}: ClosedRequestsPaginationProps) {
  const { currentPage, totalPages, totalRecords, itemsPerPage } = pagination;

  if (totalPages <= 1) {
    return null;
  }

  const pageNumbers = getPageNumbers(currentPage, totalPages);

  return (
    <Card className="shadow-md" data-testid="closed-requests-pagination">
      <CardContent className="p-4">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
          <div className="text-xs sm:text-sm text-muted-foreground">
            Showing {((currentPage - 1) * itemsPerPage) + 1} to {Math.min(currentPage * itemsPerPage, totalRecords)} of {totalRecords} closed requests
          </div>
          
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="h-8 w-8 p-0"
              data-testid="closed-requests-pagination-prev"
            >
              <ArrowRight className="h-4 w-4 rotate-180" />
            </Button>
            
            {currentPage > 3 && totalPages > 5 && (
              <>
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={() => onPageChange(1)} 
                  className="h-8 w-8 p-0"
                  data-testid="closed-requests-pagination-first"
                >
                  1
                </Button>
                <span className="text-muted-foreground">...</span>
              </>
            )}
            
            {pageNumbers.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={`closed-requests-pagination-page-${pageNum}`}
              >
                {pageNum}
              </Button>
            ))}
            
            {currentPage < totalPages - 2 && totalPages > 5 && (
              <>
                <span className="text-muted-foreground">...</span>
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={() => onPageChange(totalPages)} 
                  className="h-8 w-8 p-0"
                  data-testid="closed-requests-pagination-last"
                >
                  {totalPages}
                </Button>
              </>
            )}
            
            <Button
              variant="outline"
              size="sm"
              onClick={() => onPageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="h-8 w-8 p-0"
              data-testid="closed-requests-pagination-next"
            >
              <ArrowRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

