import * as hi from "jsr:@preact-icons/hi2";

export function PaginationControl({
  paginatedData,
  currentUrl,
  authorId,
}: {
  paginatedData: PaginatedPosts;
  currentUrl: URL;
  authorId: number;
}) {
  const buildUrl = (page: number, limit?: number) => {
    const params = new URLSearchParams(currentUrl.searchParams);
    params.set("page", page.toString());
    if (limit) params.set("limit", limit.toString());
    return `${currentUrl.pathname}?${params.toString()}`;
  };

  if (paginatedData.totalPages <= 1) return null;

  return (
    <div class="mt-8 space-y-4">
      {/* Pagination info and controls */}
      <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
        <div class="flex items-center gap-2">
          {paginatedData.hasPrevPage && (
            <a
              href={buildUrl(paginatedData.currentPage - 1)}
              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
            >
              <div class="flex items-center gap-2">
                <hi.HiChevronDoubleLeft />
                Previous
              </div>
            </a>
          )}

          {/* Page numbers */}
          <div class="flex gap-1">
            {Array.from(
              { length: Math.min(paginatedData.totalPages, 7) },
              (_, i) => {
                let pageNum;
                if (paginatedData.totalPages <= 7) {
                  pageNum = i + 1;
                } else {
                  const start = Math.max(1, paginatedData.currentPage - 3);
                  const end = Math.min(paginatedData.totalPages, start + 6);
                  pageNum = start + i;
                  if (pageNum > end) return null;
                }

                const isCurrentPage = pageNum === paginatedData.currentPage;

                return (
                  <a
                    key={pageNum}
                    href={buildUrl(pageNum)}
                    class={`px-3 py-1 rounded text-sm shadow-sm ${
                      isCurrentPage
                        ? "bg-[#6A6B7A] text-[#cdd6f4]"
                        : "bg-[#45475a] text-[#cdd6f4] hover:bg-[#6A6B7A]"
                    }`}
                  >
                    {pageNum}
                  </a>
                );
              },
            )}
          </div>

          {paginatedData.hasNextPage && (
            <a
              href={buildUrl(paginatedData.currentPage + 1)}
              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
            >
              <div class="flex items-center gap-2">
                Next
                <hi.HiChevronDoubleRight />
              </div>
            </a>
          )}
        </div>

        {/* Quick jump to page */}
      </div>
    </div>
  );
}