// src/components/ui/Pagination.tsx
'use client';

import { useMemo } from 'react';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  totalItems: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  showItemsInfo?: boolean;
  className?: string;
}

export default function Pagination({
  currentPage,
  totalPages,
  totalItems,
  itemsPerPage,
  onPageChange,
  showItemsInfo = true,
  className = ''
}: PaginationProps) {
  const paginationButtons = useMemo(() => {
    const buttons = [];
    const maxVisible = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
    const endPage = Math.min(totalPages, startPage + maxVisible - 1);
    
    if (endPage - startPage + 1 < maxVisible) {
      startPage = Math.max(1, endPage - maxVisible + 1);
    }
    
    // First page button
    if (startPage > 1) {
      buttons.push(
        <button
          key="first"
          onClick={() => onPageChange(1)}
          className="px-3 py-1 rounded-md text-sm transition-all hover:bg-surface-alt"
          style={{ color: 'var(--color-text)' }}
        >
          «
        </button>
      );
      if (startPage > 2) {
        buttons.push(
          <span key="ellipsis1" className="px-2" style={{ color: 'var(--color-text-tertiary)' }}>
            ...
          </span>
        );
      }
    }
    
    // Page buttons
    for (let i = startPage; i <= endPage; i++) {
      buttons.push(
        <button
          key={i}
          onClick={() => onPageChange(i)}
          className={`px-3 py-1 rounded-md text-sm transition-all ${
            currentPage === i
              ? 'bg-cta text-white'
              : 'hover:bg-surface-alt'
          }`}
          style={{ color: currentPage === i ? 'white' : 'var(--color-text)' }}
        >
          {i}
        </button>
      );
    }
    
    // Last page button
    if (endPage < totalPages) {
      if (endPage < totalPages - 1) {
        buttons.push(
          <span key="ellipsis2" className="px-2" style={{ color: 'var(--color-text-tertiary)' }}>
            ...
          </span>
        );
      }
      buttons.push(
        <button
          key="last"
          onClick={() => onPageChange(totalPages)}
          className="px-3 py-1 rounded-md text-sm transition-all hover:bg-surface-alt"
          style={{ color: 'var(--color-text)' }}
        >
          »
        </button>
      );
    }
    
    return buttons;
  }, [currentPage, totalPages, onPageChange]);
  
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
  
  return (
    <div className={`flex flex-col sm:flex-row sm:justify-between items-center gap-3 ${className}`}>
      {showItemsInfo && (
        <div className="text-sm text-center sm:text-left" style={{ color: 'var(--color-text-tertiary)' }}>
          Showing {startItem} to {endItem} of {totalItems} entries
        </div>
      )}
      
      <div className="flex flex-wrap justify-center gap-1.5 sm:gap-2 max-w-full">
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="px-3 py-1 rounded-md text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-alt"
          style={{ color: 'var(--color-text)' }}
        >
          Previous
        </button>
        
        {paginationButtons}
        
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="px-3 py-1 rounded-md text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-alt"
          style={{ color: 'var(--color-text)' }}
        >
          Next
        </button>
      </div>
    </div>
  );
}