import Link from "next/link";
import { ROUTES } from "@/lib/routes";

interface ArchivesPaginationProps {
  currentPage: number;
  totalPages: number;
  year: string;
}

export function ArchivesPagination({
  currentPage,
  totalPages,
  year,
}: ArchivesPaginationProps) {


  // Generate spaced page numbers matching the screenshot wire layout
  const getPageNumbers = () => {
    if (totalPages <= 12) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }

    const set = new Set<number>();
    set.add(1);
    set.add(totalPages);

    // Pages adjacent to current page
    for (
      let i = Math.max(1, currentPage - 2);
      i <= Math.min(totalPages, currentPage + 2);
      i++
    ) {
      set.add(i);
    }

    // Intermediate jump samples before
    const stepBefore = Math.floor((currentPage - 1) / 3);
    if (stepBefore >= 2) {
      set.add(1 + stepBefore);
      set.add(1 + stepBefore * 2);
    }

    // Intermediate jump samples after
    const stepAfter = Math.floor((totalPages - currentPage) / 3);
    if (stepAfter >= 2) {
      set.add(currentPage + stepAfter);
      set.add(currentPage + stepAfter * 2);
    }

    return Array.from(set).sort((a, b) => a - b);
  };

  const pages = getPageNumbers();
  const hasPrev = currentPage > 1;
  const hasNext = currentPage < totalPages;

  return (
    <nav
      aria-label="Archives pagination"
      className="mt-14 mb-4 flex flex-wrap items-center justify-start gap-2.5 sm:mt-16 sm:gap-4"
    >
      {/* Previous Page Boxed Arrow */}
      {hasPrev ? (
        <Link
          href={ROUTES.archives(year, currentPage - 1)}
          aria-label="Previous page"
          className="flex size-8 shrink-0 items-center justify-center rounded-[2px] border border-[#cbd5e1] bg-white transition-colors duration-200 hover:border-[#0088cc] sm:size-9"
        >
          <svg
            className="size-4 text-[#0088cc]"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={3}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </Link>
      ) : (
        <span
          aria-disabled="true"
          className="flex size-8 shrink-0 items-center justify-center rounded-[2px] border border-[#e2e8f0] bg-gray-50 opacity-40 cursor-not-allowed sm:size-9"
        >
          <svg
            className="size-4 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={3}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </span>
      )}

      {/* Spaced Page Numbers */}
      <div className="flex flex-wrap items-center gap-2.5 sm:gap-4 px-1">
        {pages.map((pageNum) => {
          const isCurrent = pageNum === currentPage;

          return isCurrent ? (
            <span
              key={pageNum}
              aria-current="page"
              className="flex h-7 min-w-[32px] items-center justify-center rounded-[2px] bg-[#071b2f] px-2 text-sm font-bold text-white shadow-sm sm:h-8 sm:min-w-[36px] sm:text-[15px]"
            >
              {pageNum}
            </span>
          ) : (
            <Link
              key={pageNum}
              href={ROUTES.archives(year, pageNum)}
              aria-label={`Go to page ${pageNum}`}
              className="min-w-[20px] text-center text-sm font-semibold text-[#0d2440] transition-colors duration-200 hover:text-accent sm:text-[15px]"
            >
              {pageNum}
            </Link>
          );
        })}
      </div>

      {/* Next Page Boxed Arrow */}
      {hasNext ? (
        <Link
          href={ROUTES.archives(year, currentPage + 1)}
          aria-label="Next page"
          className="flex size-8 shrink-0 items-center justify-center rounded-[2px] border border-[#cbd5e1] bg-white transition-colors duration-200 hover:border-[#0088cc] sm:size-9"
        >
          <svg
            className="size-4 text-[#0088cc]"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={3}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      ) : (
        <span
          aria-disabled="true"
          className="flex size-8 shrink-0 items-center justify-center rounded-[2px] border border-[#e2e8f0] bg-gray-50 opacity-40 cursor-not-allowed sm:size-9"
        >
          <svg
            className="size-4 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={3}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
      )}
    </nav>
  );
}