import { router } from "@inertiajs/react";
import React from "react";
import styles from "./pagination.module.scss";

interface PaginationProps {
  links: { url: string | null; label: string; active: boolean }[];
  onChange?: (url: string | null) => void; // optional callback for loading skeleton
}

const Pagination: React.FC<PaginationProps> = ({ links, onChange }) => {
  if (!links) return null;

  const pageLinks = links.filter((link) => !isNaN(Number(link.label)));
  if (pageLinks.length === 0) return null;

  const first = pageLinks[0];
  const last = pageLinks[pageLinks.length - 1];
  const current = pageLinks.find((link) => link.active) || first;

  const prevLink = links.find((link) => /previous|«/i.test(link.label));
  const nextLink = links.find((link) => /next|»/i.test(link.label));

  const handleClick = (url: string | null) => {
    if (!url) return;
    if (onChange) onChange(url);

    // Convert full URL to relative path for Inertia
    const relativeUrl =
      new URL(url, window.location.origin).pathname +
      new URL(url, window.location.origin).search;

    router.get(relativeUrl, {}, { preserveState: true, preserveScroll: true });
  };

  return (
    <div className={styles.paginationWrapper}>
      <button
        className={styles.navButton}
        onClick={() => handleClick(prevLink?.url ?? null)}
        disabled={!prevLink?.url}
      >
        &lt; Back
      </button>

      <span className={styles.currentPage}>
        Page {current.label} of {last.label}
      </span>

      <button
        className={styles.navButton}
        onClick={() => handleClick(nextLink?.url ?? null)}
        disabled={!nextLink?.url}
      >
        Next &gt;
      </button>
    </div>
  );
};

export default Pagination;