veza/apps/web/src/components/navigation/Pagination.tsx

import { useMemo } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';

export interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  maxVisiblePages?: number;
  showFirstLast?: boolean;
  className?: string;
  // FE-COMP-006: Additional props for item info
  totalItems?: number;
  itemsPerPage?: number;
  showItemsInfo?: boolean;
}

/**
 * FE-COMP-006: Composant Pagination pour navigation entre pages de résultats.
 * Amélioré avec informations sur les items affichés.
 */
export function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  maxVisiblePages = 5,
  showFirstLast = false,
  className,
  totalItems,
  itemsPerPage,
  showItemsInfo = false,
}: PaginationProps) {
  const visiblePages = useMemo(() => {
    if (totalPages <= maxVisiblePages) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }

    const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
    const half = Math.floor(maxVisiblePages / 2);

    let start = Math.max(1, currentPage - half);
    const end = Math.min(totalPages, start + maxVisiblePages - 1);

    // Ajuster si on est proche de la fin
    if (end === totalPages) {
      start = Math.max(1, totalPages - maxVisiblePages + 1);
    }

    // Première page
    if (showFirstLast && start > 1) {
      pages.push(1);
      if (start > 2) {
        pages.push('ellipsis-start');
      }
    } else if (start > 1) {
      pages.push(1);
      if (start > 2) {
        pages.push('ellipsis-start');
      }
    }

    // Pages visibles
    for (let i = start; i <= end; i++) {
      pages.push(i);
    }

    // Dernière page
    if (end < totalPages) {
      if (end < totalPages - 1) {
        pages.push('ellipsis-end');
      }
      pages.push(totalPages);
    }

    return pages;
  }, [currentPage, totalPages, maxVisiblePages, showFirstLast]);

  const handlePrevious = () => {
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNext = () => {
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  };

  const handleFirst = () => {
    onPageChange(1);
  };

  const handleLast = () => {
    onPageChange(totalPages);
  };

  // FE-COMP-006: Calculate item range for display
  const startItem = totalItems && itemsPerPage
    ? (currentPage - 1) * itemsPerPage + 1
    : null;
  const endItem = totalItems && itemsPerPage
    ? Math.min(currentPage * itemsPerPage, totalItems)
    : null;

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

  return (
    <div className={cn('flex flex-col gap-4', className)}>
      {/* Items info */}
      {showItemsInfo && totalItems !== undefined && startItem !== null && endItem !== null && (
        <div className="text-sm text-muted-foreground text-center">
          Affichage de {startItem} à {endItem} sur {totalItems} résultat{totalItems > 1 ? 's' : ''}
        </div>
      )}

      {/* Pagination controls */}
      {totalPages > 1 && (
        <nav
          aria-label="Navigation de pagination"
          role="navigation"
          className="flex items-center justify-center gap-1"
        >
      {showFirstLast && (
        <Button
          variant="outline"
          size="icon"
          onClick={handleFirst}
          disabled={currentPage === 1}
          aria-label="Première page"
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              handleFirst();
            }
          }}
        >
          <ChevronLeft className="h-4 w-4" aria-hidden="true" />
          <ChevronLeft className="h-4 w-4 -ml-2" aria-hidden="true" />
          <span className="sr-only">Première page</span>
        </Button>
      )}

      <Button
        variant="outline"
        size="icon"
        onClick={handlePrevious}
        disabled={currentPage === 1}
        aria-label="Page précédente"
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handlePrevious();
          }
        }}
      >
        <ChevronLeft className="h-4 w-4" aria-hidden="true" />
        <span className="sr-only">Page précédente</span>
      </Button>

      {visiblePages.map((page, index) => {
        if (page === 'ellipsis-start' || page === 'ellipsis-end') {
          return (
            <div
              key={`ellipsis-${index}`}
              className="flex h-9 w-9 items-center justify-center"
            >
              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
            </div>
          );
        }

        return (
          <Button
            key={page}
            variant={currentPage === page ? 'default' : 'outline'}
            size="icon"
            onClick={() => onPageChange(page)}
            aria-label={`Aller à la page ${page}`}
            aria-current={currentPage === page ? 'page' : undefined}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onPageChange(page);
              }
            }}
            className={cn(
              'h-9 w-9',
              currentPage === page && 'bg-primary text-primary-foreground',
            )}
          >
            {page}
          </Button>
        );
      })}

      <Button
        variant="outline"
        size="icon"
        onClick={handleNext}
        disabled={currentPage === totalPages}
        aria-label="Page suivante"
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleNext();
          }
        }}
      >
        <ChevronRight className="h-4 w-4" aria-hidden="true" />
        <span className="sr-only">Page suivante</span>
      </Button>

      {showFirstLast && (
        <Button
          variant="outline"
          size="icon"
          onClick={handleLast}
          disabled={currentPage === totalPages}
          aria-label="Dernière page"
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              handleLast();
            }
          }}
        >
          <ChevronRight className="h-4 w-4" aria-hidden="true" />
          <ChevronRight className="h-4 w-4 -ml-2" aria-hidden="true" />
          <span className="sr-only">Dernière page</span>
        </Button>
      )}
    </nav>
      )}
    </div>
  );
}