import React, { useMemo } from 'react';
import styles from './index.module.scss';

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    totalRecords?: number;
    limit?: number;
    showInfo?: boolean;
    maxVisiblePages?: number;
}

const Pagination: React.FC<PaginationProps> = ({
    currentPage,
    totalPages,
    onPageChange,
    totalRecords,
    limit = 10,
    showInfo = true,
    maxVisiblePages = 5,
}) => {
    // Calculate visible page range
    const visiblePages = useMemo(() => {
        const pages: (number | string)[] = [];
        let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

        // Adjust start page if we're near the end
        if (endPage - startPage < maxVisiblePages - 1) {
            startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }

        // Add first page and ellipsis if needed
        if (startPage > 1) {
            pages.push(1);
            if (startPage > 2) {
                pages.push('ellipsis-start');
            }
        }

        // Add visible page numbers
        for (let i = startPage; i <= endPage; i++) {
            pages.push(i);
        }

        // Add last page and ellipsis if needed
        if (endPage < totalPages) {
            if (endPage < totalPages - 1) {
                pages.push('ellipsis-end');
            }
            pages.push(totalPages);
        }

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

    const handlePageClick = (page: number) => {
        if (page >= 1 && page <= totalPages && page !== currentPage) {
            onPageChange(page);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    };

    const getInfoText = () => {
        if (!totalRecords) return null;
        const start = (currentPage - 1) * limit + 1;
        const end = Math.min(currentPage * limit, totalRecords);
        return `Showing ${start} to ${end} of ${totalRecords} articles`;
    };

    if (totalPages <= 1) return null;

    return (
        <div className={styles.paginationContainer}>
            <div className={styles.paginationWrapper}>
                <nav className={styles.pagination} aria-label="Page navigation">
                    <ul className={styles.paginationList}>
                        {/* First Button */}
                        {currentPage > 1 && (
                            <>
                                <li className={styles.paginationItem}>
                                    <button
                                        type="button"
                                        className={styles.paginationButton}
                                        onClick={() => handlePageClick(1)}
                                        aria-label="First page"
                                    >
                                        <span className={styles.icon}>««</span>
                                    </button>
                                </li>
                                <li className={styles.paginationItem}>
                                    <button
                                        type="button"
                                        className={styles.paginationButton}
                                        onClick={() => handlePageClick(currentPage - 1)}
                                        aria-label="Previous page"
                                    >
                                        <span className={styles.icon}>‹</span>
                                    </button>
                                </li>
                            </>
                        )}

                        {/* Page Numbers */}
                        {visiblePages.map((page, index) => {
                            if (page === 'ellipsis-start' || page === 'ellipsis-end') {
                                return (
                                    <li key={`ellipsis-${index}`} className={styles.paginationItem}>
                                        <span className={styles.ellipsis}>...</span>
                                    </li>
                                );
                            }

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

                            return (
                                <li key={pageNumber} className={styles.paginationItem}>
                                    <button
                                        type="button"
                                        className={`${styles.paginationButton} ${isActive ? styles.active : ''}`}
                                        onClick={() => handlePageClick(pageNumber)}
                                        aria-label={`Page ${pageNumber}`}
                                        aria-current={isActive ? 'page' : undefined}
                                    >
                                        {pageNumber}
                                    </button>
                                </li>
                            );
                        })}

                        {/* Last Button */}
                        {currentPage < totalPages && (
                            <>
                                <li className={styles.paginationItem}>
                                    <button
                                        type="button"
                                        className={styles.paginationButton}
                                        onClick={() => handlePageClick(currentPage + 1)}
                                        aria-label="Next page"
                                    >
                                        <span className={styles.icon}>›</span>
                                    </button>
                                </li>
                                <li className={styles.paginationItem}>
                                    <button
                                        type="button"
                                        className={styles.paginationButton}
                                        onClick={() => handlePageClick(totalPages)}
                                        aria-label="Last page"
                                    >
                                        <span className={styles.icon}>»»</span>
                                    </button>
                                </li>
                            </>
                        )}
                    </ul>
                </nav>

                {/* Pagination Info */}
                {showInfo && totalRecords && (
                    <div className={styles.paginationInfo}>
                        <span className={styles.paginationText}>{getInfoText()}</span>
                    </div>
                )}
            </div>
        </div>
    );
};

export default Pagination;