"use client";

import { useRouter, useSearchParams } from "next/navigation";

interface Props {
  counts: number;
}

const Pagination: React.FC<Props> = ({ counts }) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentPage = parseInt(searchParams.get("page") || "1", 10); // Varsayılan olarak 1. sayfa

  const totalPages = Math.ceil(counts / 10); // Sayfa sayısını hesapla
  const maxPages = 8; // Gösterilecek maksimum sayfa sayısı

  // Sayfalar etrafındaki 4 sayfayı göstermek için min/max sayfa aralığını hesapla
  const range = 4; // Aktif sayfanın etrafındaki sayfa sayısı
  let startPage = Math.max(currentPage - range, 1); // 1'den küçük olmasın
  let endPage = Math.min(currentPage + range, totalPages); // Toplam sayfa sayısını geçmesin

  // Eğer sayfa aralığı 8'den azsa, bunu dengele
  if (endPage - startPage < maxPages - 1) {
    if (startPage === 1) {
      endPage = Math.min(startPage + maxPages - 1, totalPages);
    } else {
      startPage = Math.max(endPage - maxPages + 1, 1);
    }
  }

  // Sayfalar dizisini oluştur
  const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);

  const handlePageClick = (page: number) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", page.toString());
    router.push(`?${params.toString()}`);
  };

  const handleFirstPage = () => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", "1");
    router.push(`?${params.toString()}`);
  };

  const handleLastPage = () => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", totalPages.toString());
    router.push(`?${params.toString()}`);
  };

  return (
    <div className="pagination">
      {/* İlk sayfaya git */}
      <button
        className={`page-button ${currentPage === 1 ? "disabled" : ""}`}
        onClick={handleFirstPage}
        disabled={currentPage === 1}
      >
        İlk
      </button>

      {pages.map((page) => (
        <button
          key={page}
          className={`page-button ${currentPage === page ? "active" : ""}`}
          onClick={() => handlePageClick(page)}
        >
          {page}
        </button>
      ))}

      {/* Son sayfaya git */}
      <button
        className={`page-button ${currentPage === totalPages ? "disabled" : ""}`}
        onClick={handleLastPage}
        disabled={currentPage === totalPages}
      >
        Son
      </button>
    </div>
  );
};

export default Pagination;