import React from 'react';
import Link from 'next/link';
import { Button } from '../buttons/Button';
import { useTranslations } from 'next-intl';

interface PaginationProps {
    totalPages: number;
    currentPage: number;
    basePath: string;
    enBasePath:string;
    locale:string;
    className?: string;
}

const Pagination = ({ totalPages, currentPage, basePath, className,enBasePath,locale }: PaginationProps) => {
     const t = useTranslations()
    if (totalPages <= 1) return null;

    const activePath = locale === "en" ? enBasePath : basePath

    const getPageUrl = (page: number) => {
        if (page === 1) {
            // For page 1, we remove the page parameter entirely
            return activePath.includes('?') 
                ? activePath.replace(/&page=\d+/, '').replace(/\?page=\d+/, '')
                : activePath;
        } else {
            // For other pages, we add or update the page parameter
            if (activePath.includes('?')) {
                return activePath.includes('page=')
                    ? activePath.replace(/page=\d+/, `page=${page}`)
                    : `${activePath}&page=${page}`;
            } else {
                return `${activePath}?page=${page}`;
            }
        }
    };

    const renderPageNumbers = () => {
        const pages = [];
        const maxVisiblePages = 5;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
            startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

            // Adjust if we're at the end
            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = endPage - maxVisiblePages + 1;
            }

            // Always show first page
            pages.push(
                <Link key={1} href={getPageUrl(1)}>
                    <Button url="" variant={1 === currentPage ? 'default' : 'ghost'} className="w-9 h-9 p-0">
                        1
                    </Button>
                </Link>
            );

            // Show ellipsis if needed
            if (startPage > 2) {
                pages.push(
                    <span key="start-ellipsis" className="flex items-end px-2">
                        ...
                    </span>
                );
            }

            // Add middle pages
            for (let i = startPage; i <= endPage; i++) {
                // Skip if already added (first or last page)
                if (i === 1 || i === totalPages) continue;

                pages.push(
                    <Link key={i} href={getPageUrl(i)}>
                        <Button url="" variant={i === currentPage ? 'default' : 'ghost'} className="w-9 h-9 p-0">
                            {i}
                        </Button>
                    </Link>
                );
            }

            // Show ellipsis if needed before last page
            if (endPage < totalPages - 1) {
                pages.push(
                    <span key="end-ellipsis" className="flex items-end px-2">
                        ...
                    </span>
                );
            }

            // Always show last page if it's not the same as first page
            if (totalPages !== 1) {
                pages.push(
                    <Link key={totalPages} href={getPageUrl(totalPages)}>
                        <Button url="" variant={totalPages === currentPage ? 'default' : 'ghost'} className="w-9 h-9 p-0">
                            {totalPages}
                        </Button>
                    </Link>
                );
            }
        } else {
            // Show all pages if less than maxVisiblePages
            for (let i = 1; i <= totalPages; i++) {
                pages.push(
                    <Link key={i} href={getPageUrl(i)}>
                        <Button url="" variant={i === currentPage ? 'default' : 'outline'} className="w-9 h-9 p-0">
                            {i}
                        </Button>
                    </Link>
                );
            }
        }

        return pages;
    };

    
    return (
        <nav 
            className={`flex items-center justify-center gap-2 ${className}`}
            aria-label="Pagination"
        >
            {/* Previous button with rel="prev" for SEO */}
            {currentPage > 1 && (
                <Link 
                    href={getPageUrl(currentPage - 1)}
                    rel="prev"
                    aria-label={t("Previous page")}
                >
                    <Button url="" variant="outline" className="w-24 h-9">
                        {t("Previous")}
                    </Button>
                </Link>
            )}

            {/* Page numbers */}
            {renderPageNumbers()}

            {/* Next button with rel="next" for SEO */}
            {currentPage < totalPages && (
                <Link 
                    href={getPageUrl(currentPage + 1)}
                    rel="next"
                    aria-label={t("Next page")}
                >
                    <Button url="" variant="outline" className="w-24 h-9">
                        {t("Next")}
                    </Button>
                </Link>
            )}
        </nav>
    );
};

export default Pagination;