---
const { currentPage, totalPages, collection } = Astro.props;

// 生成页码数组
const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);

// 确定要显示的页码范围
const maxVisiblePages = 5;
let startPage = Math.max(currentPage - Math.floor(maxVisiblePages / 2), 1);
let endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);

if (endPage - startPage + 1 < maxVisiblePages) {
  startPage = Math.max(endPage - maxVisiblePages + 1, 1);
}

// 生成页面链接
const getPageLink = (pageNum: number): string => {
  if (pageNum === 1) {
    return `/${collection}/`;
  }
  return `/${collection}/page/${pageNum}`;
};
---

<nav aria-label="Pagination" class="flex justify-center mt-12">
  <ul class="flex items-center gap-1">
    <!-- 上一页按钮 -->
    {currentPage > 1 ? (
      <li>
        <a
          href={getPageLink(currentPage - 1)}
          class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
          aria-label="Go to previous page"
        >
          <span class="sr-only">上一页</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="m15 18-6-6 6-6"></path>
          </svg>
        </a>
      </li>
    ) : (
      <li>
        <span
          class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-400 dark:text-neutral-600 cursor-not-allowed"
          aria-disabled="true"
        >
          <span class="sr-only">上一页</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="m15 18-6-6 6-6"></path>
          </svg>
        </span>
      </li>
    )}

    <!-- 第一页 -->
    {startPage > 1 && (
      <>
        <li>
          <a
            href={getPageLink(1)}
            class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
            aria-label="Go to page 1"
          >
            1
          </a>
        </li>
        {startPage > 2 && (
          <li>
            <span class="flex items-center justify-center w-10 h-10 text-neutral-500 dark:text-neutral-400">
              ...
            </span>
          </li>
        )}
      </>
    )}

    <!-- 页码 -->
    {pageNumbers.slice(startPage - 1, endPage).map((pageNum) => (
      <li>
        <a
          href={getPageLink(pageNum)}
          class:list={[
            "flex items-center justify-center w-10 h-10 rounded-md border transition-colors",
            pageNum === currentPage
              ? "bg-primary text-white border-primary dark:bg-primary dark:border-primary"
              : "border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
          ]}
          aria-label={`Go to page ${pageNum}`}
          aria-current={pageNum === currentPage ? "page" : undefined}
        >
          {pageNum}
        </a>
      </li>
    ))}

    <!-- 最后一页 -->
    {endPage < totalPages && (
      <>
        {endPage < totalPages - 1 && (
          <li>
            <span class="flex items-center justify-center w-10 h-10 text-neutral-500 dark:text-neutral-400">
              ...
            </span>
          </li>
        )}
        <li>
          <a
            href={getPageLink(totalPages)}
            class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
            aria-label={`Go to page ${totalPages}`}
          >
            {totalPages}
          </a>
        </li>
      </>
    )}

    <!-- 下一页按钮 -->
    {currentPage < totalPages ? (
      <li>
        <a
          href={getPageLink(currentPage + 1)}
          class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
          aria-label="Go to next page"
        >
          <span class="sr-only">下一页</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </a>
      </li>
    ) : (
      <li>
        <span
          class="flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-400 dark:text-neutral-600 cursor-not-allowed"
          aria-disabled="true"
        >
          <span class="sr-only">下一页</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </span>
      </li>
    )}
  </ul>
</nav>