"use client";

import { useNewsFilter } from "@/lib/hooks";
import { ChevronLeft, ChevronRight } from "lucide-react";

interface NewsPaginationProps {
    currentPage: number;
    totalPages: number;
    from: number;
    to: number;
    total: number;
}

export default function NewsPagination({ currentPage, totalPages, from, to, total }: NewsPaginationProps) {
    const { setPage } = useNewsFilter();

    if (totalPages <= 1) return null;

    const getPageNumbers = (): number[] => {
        const maxVisible = 5;
        if (totalPages <= maxVisible) {
            return Array.from({ length: totalPages }, (_, i) => i + 1);
        }
        let start = Math.max(1, currentPage - 2);
        const end = Math.min(totalPages, start + maxVisible - 1);
        if (end - start + 1 < maxVisible) start = end - maxVisible + 1;
        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
    };

    const pageNumbers = getPageNumbers();

    return (
        <div className="flex flex-col sm:flex-row items-center justify-between gap-6 bg-white rounded-2xl shadow-lg p-6">
            <div className="text-gray-700">
                Menampilkan{" "}
                <span className="font-bold text-brand">{from}–{to}</span> dari{" "}
                <span className="font-bold text-brand">{total}</span> berita
            </div>

            <div className="flex items-center gap-2">
                <button
                    onClick={() => setPage(currentPage - 1)}
                    disabled={currentPage === 1}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-300 ${currentPage === 1
                            ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                            : "bg-gray-100 text-gray-700 hover:bg-brand/10 cursor-pointer"
                        }`}
                >
                    <ChevronLeft className="w-4 h-4" />
                    <span className="hidden sm:inline">Sebelumnya</span>
                </button>

                <div className="flex items-center gap-1">
                    {pageNumbers[0] > 1 && (
                        <>
                            <button onClick={() => setPage(1)} className="w-10 h-10 rounded-lg font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 cursor-pointer">
                                1
                            </button>
                            {pageNumbers[0] > 2 && <span className="px-2 text-gray-500">...</span>}
                        </>
                    )}

                    {pageNumbers.map((p) => (
                        <button
                            key={p}
                            onClick={() => setPage(p)}
                            className={`w-10 h-10 rounded-lg font-medium transition-all duration-300 ${currentPage === p
                                    ? "bg-brand text-white shadow-md"
                                    : "bg-gray-100 text-gray-700 hover:bg-gray-200 cursor-pointer"
                                }`}
                        >
                            {p}
                        </button>
                    ))}

                    {pageNumbers[pageNumbers.length - 1] < totalPages && (
                        <>
                            {pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (
                                <span className="px-2 text-gray-500">...</span>
                            )}
                            <button onClick={() => setPage(totalPages)} className="w-10 h-10 rounded-lg font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 cursor-pointer">
                                {totalPages}
                            </button>
                        </>
                    )}
                </div>

                <button
                    onClick={() => setPage(currentPage + 1)}
                    disabled={currentPage === totalPages}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-300 ${currentPage === totalPages
                            ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                            : "bg-gray-100 text-gray-700 hover:bg-brand/10 cursor-pointer"
                        }`}
                >
                    <span className="hidden sm:inline">Selanjutnya</span>
                    <ChevronRight className="w-4 h-4" />
                </button>
            </div>
        </div>
    );
}