import * as React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  baseUrl: string;
  className?: string;
}

export function Pagination({ 
  currentPage, 
  totalPages, 
  baseUrl,
  className 
}: PaginationProps) {
  // Don't render if only 1 page
  if (totalPages <= 1) {
    return null;
  }

  // Generate page numbers to display
  const getPageNumbers = () => {
    const pages: (number | string)[] = [];
    const maxVisible = 7; // Show max 7 page buttons
    
    if (totalPages <= maxVisible) {
      // Show all pages if total is small
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // Always show first page
      pages.push(1);
      
      if (currentPage > 3) {
        pages.push('...');
      }
      
      // Show pages around current page
      const start = Math.max(2, currentPage - 1);
      const end = Math.min(totalPages - 1, currentPage + 1);
      
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      
      if (currentPage < totalPages - 2) {
        pages.push('...');
      }
      
      // Always show last page
      pages.push(totalPages);
    }
    
    return pages;
  };

  const pageNumbers = getPageNumbers();

  return (
    <div className={cn('flex items-center justify-center gap-2 mt-8', className)}>
      {/* Previous button "前へ" */}
      <Button
        variant="outline"
        size="sm"
        disabled={currentPage === 1}
        asChild={currentPage !== 1}
        className={cn(
          'border-[#2A2A33] bg-[#202026] text-white hover:border-[#E60023] hover:text-[#E60023] rounded-full',
          currentPage === 1 && 'opacity-50 cursor-not-allowed'
        )}
      >
        {currentPage === 1 ? (
          <span>前へ</span>
        ) : (
          <Link href={`${baseUrl}?page=${currentPage - 1}`}>
            前へ
          </Link>
        )}
      </Button>

      {/* Page number buttons */}
      {pageNumbers.map((page, index) => {
        if (page === '...') {
          return (
            <span 
              key={`ellipsis-${index}`} 
              className="px-2 text-[#B8B8C0]"
            >
              ...
            </span>
          );
        }

        const pageNum = page as number;
        const isActive = pageNum === currentPage;

        return (
          <Button
            key={pageNum}
            variant={isActive ? 'default' : 'outline'}
            size="sm"
            asChild={!isActive}
            className={cn(
              'rounded-full',
              isActive 
                ? 'bg-[#E60023] hover:bg-[#FF2A3D] text-white border-[#E60023]' 
                : 'border-[#2A2A33] bg-[#202026] text-white hover:border-[#E60023] hover:text-[#E60023]'
            )}
          >
            {isActive ? (
              <span>{pageNum}</span>
            ) : (
              <Link href={`${baseUrl}?page=${pageNum}`}>
                {pageNum}
              </Link>
            )}
          </Button>
        );
      })}

      {/* Next button "次へ" */}
      <Button
        variant="outline"
        size="sm"
        disabled={currentPage === totalPages}
        asChild={currentPage !== totalPages}
        className={cn(
          'border-[#2A2A33] bg-[#202026] text-white hover:border-[#E60023] hover:text-[#E60023] rounded-full',
          currentPage === totalPages && 'opacity-50 cursor-not-allowed'
        )}
      >
        {currentPage === totalPages ? (
          <span>次へ</span>
        ) : (
          <Link href={`${baseUrl}?page=${currentPage + 1}`}>
            次へ
          </Link>
        )}
      </Button>
    </div>
  );
}
