"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useTransition } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import styles from "./Pagination.module.css";
import type { PaginationMeta } from "@/lib/api/errors";

interface PaginationProps {
  meta: PaginationMeta;
}

export default function Pagination({ meta }: PaginationProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();

  const { current_page, last_page, total, from, to } = meta;

  if (last_page <= 1) return null;

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

  // Build page range: show max 5 pages centered on current
  const range: number[] = [];
  const delta = 2;
  const left = Math.max(1, current_page - delta);
  const right = Math.min(last_page, current_page + delta);
  for (let i = left; i <= right; i++) range.push(i);

  return (
    <nav className={styles.wrapper} aria-label="Navigasi halaman" aria-busy={isPending}>
      {/* Summary */}
      <p className={styles.summary} aria-live="polite">
        Menampilkan <strong>{from ?? 0}–{to ?? 0}</strong> dari <strong>{total}</strong> trip
      </p>

      <div className={styles.controls}>
        {/* Prev */}
        <button
          onClick={() => goTo(current_page - 1)}
          disabled={current_page === 1 || isPending}
          className={`${styles.pageBtn} ${styles.navBtn}`}
          aria-label="Halaman sebelumnya"
          id="pagination-prev"
        >
          <ChevronLeft size={16} aria-hidden />
        </button>

        {/* First page + ellipsis */}
        {left > 1 && (
          <>
            <button onClick={() => goTo(1)} className={styles.pageBtn} id="pagination-page-1">1</button>
            {left > 2 && <span className={styles.ellipsis}>…</span>}
          </>
        )}

        {/* Page range */}
        {range.map((p) => (
          <button
            key={p}
            onClick={() => goTo(p)}
            disabled={isPending}
            className={`${styles.pageBtn} ${p === current_page ? styles.active : ""}`}
            aria-current={p === current_page ? "page" : undefined}
            id={`pagination-page-${p}`}
          >
            {p}
          </button>
        ))}

        {/* Last page + ellipsis */}
        {right < last_page && (
          <>
            {right < last_page - 1 && <span className={styles.ellipsis}>…</span>}
            <button onClick={() => goTo(last_page)} className={styles.pageBtn} id={`pagination-page-${last_page}`}>
              {last_page}
            </button>
          </>
        )}

        {/* Next */}
        <button
          onClick={() => goTo(current_page + 1)}
          disabled={current_page === last_page || isPending}
          className={`${styles.pageBtn} ${styles.navBtn}`}
          aria-label="Halaman berikutnya"
          id="pagination-next"
        >
          <ChevronRight size={16} aria-hidden />
        </button>
      </div>
    </nav>
  );
}