/**
 * Pagination Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Pagination component.
 *
 * @param {Object}   props            Component props.
 * @param {number}   props.page       Current page.
 * @param {number}   props.totalPages Total number of pages.
 * @param {Function} props.onPageChange Page change handler.
 * @param {string}   props.className  Additional CSS classes.
 * @return {JSX.Element|null} Pagination component or null if single page.
 */
const Pagination = ( { page, totalPages, onPageChange, className = '' } ) => {
    // Don't render if only one page
    if ( totalPages <= 1 ) {
        return null;
    }

    const classes = classnames( 'aca-pagination', className );

    // Generate page numbers to display
    const getPageNumbers = () => {
        const pages = [];
        const showEllipsis = totalPages > 7;

        if ( ! showEllipsis ) {
            // Show all pages if 7 or less
            for ( let i = 1; i <= totalPages; i++ ) {
                pages.push( i );
            }
        } else {
            // Always show first page
            pages.push( 1 );

            if ( page > 3 ) {
                pages.push( 'ellipsis-start' );
            }

            // Show pages around current page
            const start = Math.max( 2, page - 1 );
            const end = Math.min( totalPages - 1, page + 1 );

            for ( let i = start; i <= end; i++ ) {
                if ( ! pages.includes( i ) ) {
                    pages.push( i );
                }
            }

            if ( page < totalPages - 2 ) {
                pages.push( 'ellipsis-end' );
            }

            // Always show last page
            if ( ! pages.includes( totalPages ) ) {
                pages.push( totalPages );
            }
        }

        return pages;
    };

    return (
        <nav className={ classes } role="navigation" aria-label={ __( 'Pagination', 'advanced-customer-account' ) }>
            <ul className="aca-pagination__list">
                { /* Previous button */ }
                <li className="aca-pagination__item">
                    <button
                        type="button"
                        className="aca-pagination__btn aca-pagination__btn--prev"
                        onClick={ () => onPageChange( page - 1 ) }
                        disabled={ page <= 1 }
                        aria-label={ __( 'Previous page', 'advanced-customer-account' ) }
                    >
                        <span className="dashicons dashicons-arrow-left-alt2" aria-hidden="true" />
                    </button>
                </li>

                { /* Page numbers */ }
                { getPageNumbers().map( ( pageNum, index ) => {
                    if ( typeof pageNum === 'string' ) {
                        return (
                            <li key={ pageNum } className="aca-pagination__item">
                                <span className="aca-pagination__ellipsis">…</span>
                            </li>
                        );
                    }

                    return (
                        <li key={ pageNum } className="aca-pagination__item">
                            <button
                                type="button"
                                className={ classnames( 'aca-pagination__btn', {
                                    'aca-pagination__btn--active': pageNum === page,
                                } ) }
                                onClick={ () => onPageChange( pageNum ) }
                                aria-label={ `${ __( 'Page', 'advanced-customer-account' ) } ${ pageNum }` }
                                aria-current={ pageNum === page ? 'page' : undefined }
                            >
                                { pageNum }
                            </button>
                        </li>
                    );
                } ) }

                { /* Next button */ }
                <li className="aca-pagination__item">
                    <button
                        type="button"
                        className="aca-pagination__btn aca-pagination__btn--next"
                        onClick={ () => onPageChange( page + 1 ) }
                        disabled={ page >= totalPages }
                        aria-label={ __( 'Next page', 'advanced-customer-account' ) }
                    >
                        <span className="dashicons dashicons-arrow-right-alt2" aria-hidden="true" />
                    </button>
                </li>
            </ul>
        </nav>
    );
};

export default Pagination;