'use client';

import React from 'react';
import Button from './Button';
import { Skeleton } from './LoadingState';

const Pagination = ({
    currentPage = 1,
    totalPages = 1,
    onPageChange,
    onLimitChange,
    limit = 20,
    total = 0,
    loading = false,
    showPerPage = true,
    showStats = true,
    className = '',
    ...props
}) => {
    // Generate page numbers with ellipsis
    const getPageNumbers = () => {
        const pages = [];
        const delta = 2;

        if (totalPages > 0) pages.push(1);
        if (currentPage - delta > 2) pages.push('...');

        for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
            pages.push(i);
        }

        if (currentPage + delta < totalPages - 1) pages.push('...');
        if (totalPages > 1) pages.push(totalPages);

        return pages;
    };

    const PaginationButton = ({ onClick, disabled, children, isActive = false }) => (
        <button
            onClick={onClick}
            disabled={disabled || loading}
            className={`px-2 py-1 text-xs font-medium rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                isActive
                    ? 'bg-neutral-900 text-white border border-neutral-900 dark:bg-white dark:text-black dark:border-white'
                    : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700/30 hover:text-neutral-900 dark:hover:text-white'
            }`}
        >
            {children}
        </button>
    );

    if (totalPages <= 1 && !showPerPage && !loading) return null;

    const from = total > 0 ? (currentPage - 1) * limit + 1 : 0;
    const to = Math.min(currentPage * limit, total);

    return (
        <div className={`px-6 py-3 border-t border-neutral-200 dark:border-neutral-700/30 ${className}`} {...props}>
            <div className="flex items-center justify-between gap-4">

                {/* Per Page Selector */}
                {showPerPage ? (
                    <div className="flex items-center gap-2 shrink-0">
                        {loading ? (
                            <Skeleton height="h-7" width="90px" />
                        ) : (
                            <>
                                <span className="text-xs text-neutral-500 dark:text-neutral-400">Afficher</span>
                                <select
                                    value={limit}
                                    onChange={(e) => onLimitChange?.(Number(e.target.value))}
                                    disabled={loading}
                                    className="h-7 px-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700/50 rounded-md text-xs text-neutral-900 dark:text-white focus:outline-none focus:border-neutral-400 dark:focus:border-neutral-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    <option value={10}>10</option>
                                    <option value={20}>20</option>
                                    <option value={50}>50</option>
                                    <option value={100}>100</option>
                                </select>
                            </>
                        )}
                    </div>
                ) : <div />}

                {/* Pagination Controls */}
                <div className="flex items-center gap-1">
                    {loading ? (
                        <>
                            <Skeleton height="h-7" width="64px" />
                            <div className="hidden sm:flex items-center gap-1">
                                {Array.from({ length: 3 }).map((_, i) => (
                                    <Skeleton key={i} height="h-7" width="28px" />
                                ))}
                            </div>
                            <Skeleton height="h-7" width="56px" />
                        </>
                    ) : (
                        <>
                            {totalPages > 1 && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => onPageChange(currentPage - 1)}
                                    disabled={currentPage === 1}
                                >
                                    Précédent
                                </Button>
                            )}

                            {totalPages > 1 && (
                                <div className="hidden sm:flex items-center gap-1">
                                    {getPageNumbers().map((page, index) => (
                                        <React.Fragment key={index}>
                                            {page === '...' ? (
                                                <span className="px-2 text-xs text-neutral-400 dark:text-neutral-500">…</span>
                                            ) : (
                                                <PaginationButton
                                                    onClick={() => onPageChange(page)}
                                                    isActive={currentPage === page}
                                                >
                                                    {page}
                                                </PaginationButton>
                                            )}
                                        </React.Fragment>
                                    ))}
                                </div>
                            )}

                            {totalPages > 1 && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => onPageChange(currentPage + 1)}
                                    disabled={currentPage === totalPages}
                                >
                                    Suivant
                                </Button>
                            )}
                        </>
                    )}
                </div>

                {/* Stats */}
                {showStats ? (
                    <div className="text-xs text-neutral-400 dark:text-neutral-500 shrink-0 text-right">
                        {loading ? (
                            <Skeleton height="h-4" width="100px" />
                        ) : (
                            `${from}–${to} sur ${total}`
                        )}
                    </div>
                ) : <div />}
            </div>
        </div>
    );
};

export default Pagination; 