import Link from "next/link";
import { PaginationProps } from "@/lib/blog.types";
import { UI } from "@/lib/config";

export default function Pagination({
  currentPage,
  totalPages,
  lang,
}: PaginationProps) {
  const t = UI[lang].t;
  const dir = UI[lang].dir;

  // Generate page numbers to display
  const getPageNumbers = () => {
    const pages: (number | string)[] = [];
    const maxVisible = 7; // Maximum number of page buttons to show

    if (totalPages <= maxVisible) {
      // Show all pages if total is less than max
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // Always show first page
      pages.push(1);

      if (currentPage > 3) {
        pages.push("...");
      }

      // Show pages around current page
      const start = Math.max(2, currentPage - 1);
      const end = Math.min(totalPages - 1, currentPage + 1);

      for (let i = start; i <= end; i++) {
        pages.push(i);
      }

      if (currentPage < totalPages - 2) {
        pages.push("...");
      }

      // Always show last page
      pages.push(totalPages);
    }

    return pages;
  };

  const pageNumbers = getPageNumbers();

  return (
    <nav
      className="flex items-center justify-center gap-2"
      dir={dir}
      aria-label="Pagination"
    >
      {/* Previous Button */}
      {currentPage > 1 ? (
        <Link
          href={`/${lang}/blog${currentPage === 2 ? "" : `/page/${currentPage - 1}`}`}
          className="px-4 py-2 text-sm font-medium text-brand-ink dark:text-white bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
        >
          {t.previous}
        </Link>
      ) : (
        <span className="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md cursor-not-allowed">
          {t.previous}
        </span>
      )}

      {/* Page Numbers */}
      <div className="flex items-center gap-1">
        {pageNumbers.map((page, index) => {
          if (page === "...") {
            return (
              <span
                key={`ellipsis-${index}`}
                className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400"
              >
                ...
              </span>
            );
          }

          const pageNum = page as number;
          const isActive = pageNum === currentPage;

          return (
            <Link
              key={pageNum}
              href={`/${lang}/blog${pageNum === 1 ? "" : `/page/${pageNum}`}`}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                isActive
                  ? "bg-brand-green text-white"
                  : "text-brand-ink dark:text-white bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
              }`}
              aria-current={isActive ? "page" : undefined}
            >
              {pageNum}
            </Link>
          );
        })}
      </div>

      {/* Next Button */}
      {currentPage < totalPages ? (
        <Link
          href={`/${lang}/blog/page/${currentPage + 1}`}
          className="px-4 py-2 text-sm font-medium text-brand-ink dark:text-white bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
        >
          {t.next}
        </Link>
      ) : (
        <span className="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md cursor-not-allowed">
          {t.next}
        </span>
      )}

      {/* Page Info */}
      <span className="ltr:ml-4 rtl:mr-4 text-sm text-gray-600 dark:text-gray-400">
        {t.page} {currentPage} {t.of} {totalPages}
      </span>
    </nav>
  );
}