import { motion } from 'framer-motion';

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    maxVisiblePages?: number;
    className?: string;
}

export const Pagination = ({
    currentPage,
    totalPages,
    onPageChange,
    maxVisiblePages = 7,
    className = '',
}: PaginationProps) => {
    const getVisiblePages = () => {
        if (totalPages <= maxVisiblePages) {
            return Array.from({ length: totalPages }, (_, i) => i + 1);
        }

        const leftSiblingIndex = Math.max(currentPage - 1, 1);
        const rightSiblingIndex = Math.min(currentPage + 1, totalPages);

        const shouldShowLeftDots = leftSiblingIndex > 2;
        const shouldShowRightDots = rightSiblingIndex < totalPages - 1;

        if (!shouldShowLeftDots && shouldShowRightDots) {
            const leftRange = Array.from({ length: maxVisiblePages - 1 }, (_, i) => i + 1);
            return [...leftRange, '...', totalPages];
        }

        if (shouldShowLeftDots && !shouldShowRightDots) {
            const rightRange = Array.from(
                { length: maxVisiblePages - 1 },
                (_, i) => totalPages - (maxVisiblePages - 2) + i
            );
            return [1, '...', ...rightRange];
        }

        if (shouldShowLeftDots && shouldShowRightDots) {
            const middleRange = Array.from(
                { length: maxVisiblePages - 4 },
                (_, i) => leftSiblingIndex + i
            );
            return [1, '...', ...middleRange, '...', totalPages];
        }

        return Array.from({ length: totalPages }, (_, i) => i + 1);
    };

    const visiblePages = getVisiblePages();

    return (
        <motion.div
            className={`flex items-center justify-center gap-2 mt-6 ${className}`}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
        >
            <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => onPageChange(currentPage - 1)}
                disabled={currentPage <= 1}
                className="px-4 py-2 rounded-md bg-white border border-gray-200 hover:bg-gray-50 
                   disabled:opacity-50 disabled:cursor-not-allowed transition-colors
                   shadow-sm text-gray-700 font-medium"
            >
                上一页
            </motion.button>

            <div className="flex gap-2">
                {visiblePages.map((page, index) => (
                    <motion.button
                        key={index}
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => typeof page === 'number' && onPageChange(page)}
                        className={`px-4 py-2 rounded-md font-medium transition-colors ${currentPage === page
                            ? 'bg-blue-500 text-white shadow-md'
                            : page === '...'
                                ? 'cursor-default'
                                : 'bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 shadow-sm'
                            }`}
                    >
                        {page}
                    </motion.button>
                ))}
            </div>

            <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => onPageChange(currentPage + 1)}
                disabled={currentPage >= totalPages}
                className="px-4 py-2 rounded-md bg-white border border-gray-200 hover:bg-gray-50 
                   disabled:opacity-50 disabled:cursor-not-allowed transition-colors
                   shadow-sm text-gray-700 font-medium"
            >
                下一页
            </motion.button>
        </motion.div>
    );
};