import React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

export interface PaginationProps {
    page: number;
    pageSize: number;
    totalRecords?: number;
    hasNext?: boolean;
    pageSizeOptions?: number[];
    onPageChange: (page: number) => void;
    onPageSizeChange: (pageSize: number) => void;
}

export const DEFAULT_PAGE_SIZE = 20;
export const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];

export function Pagination({
    page,
    pageSize,
    totalRecords,
    hasNext = false,
    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
    onPageChange,
    onPageSizeChange,
}: PaginationProps) {
    const hasKnownTotal = typeof totalRecords === 'number';
    const knownTotal = totalRecords ?? 0;
    const totalPages = hasKnownTotal ? Math.max(1, Math.ceil(knownTotal / pageSize)) : undefined;
    const start = hasKnownTotal && knownTotal === 0 ? 0 : (page - 1) * pageSize + 1;
    const end = hasKnownTotal ? Math.min(page * pageSize, knownTotal) : page * pageSize;

    const canPrev = page > 1;
    const canNext = hasKnownTotal ? page < (totalPages ?? 1) : hasNext;

    return (
        <div className="px-4 py-2.5 border-t border-gray-100 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-800/20 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
            <div className="flex items-center gap-3">
                <span>
                    {hasKnownTotal && knownTotal === 0
                        ? 'No records'
                        : hasKnownTotal
                            ? `${start}–${end} of ${knownTotal} records`
                            : `${start}–${end} records`}
                </span>
            </div>

            <div className="flex items-center gap-3">
                {/* Page size selector */}
                <div className="flex items-center gap-1.5">
                    <span>Rows:</span>
                    <select
                        value={pageSize}
                        onChange={(e) => {
                            onPageSizeChange(Number(e.target.value));
                            onPageChange(1);
                        }}
                        className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500/30"
                    >
                        {pageSizeOptions.map((opt) => (
                            <option key={opt} value={opt}>
                                {opt}
                            </option>
                        ))}
                    </select>
                </div>

                {/* Page navigation */}
                <div className="flex items-center gap-1">
                    <span>
                        {page} / {totalPages ?? '?'}
                    </span>
                    <button
                        onClick={() => canPrev && onPageChange(page - 1)}
                        disabled={!canPrev}
                        className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                        aria-label="Previous page"
                    >
                        <ChevronLeft className="w-3.5 h-3.5" />
                    </button>
                    <button
                        onClick={() => canNext && onPageChange(page + 1)}
                        disabled={!canNext}
                        className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                        aria-label="Next page"
                    >
                        <ChevronRight className="w-3.5 h-3.5" />
                    </button>
                </div>
            </div>
        </div>
    );
}