"use client";

import { useState, useCallback } from "react";

// ─── usePagination hook ───────────────────────────────────────────────────────

export function usePagination<T>(items: T[], perPage = 5) {
  const [page, setPage] = useState(1);

  // Reset to page 1 when items change length (e.g. after delete or filter)
  const totalPages = Math.max(1, Math.ceil(items.length / perPage));
  const safePage   = Math.min(page, totalPages);
  const start      = (safePage - 1) * perPage;
  const paged      = items.slice(start, start + perPage);

  const goTo       = useCallback((n: number) => setPage(n), []);
  const reset      = useCallback(() => setPage(1), []);

  return { paged, page: safePage, totalPages, goTo, reset, total: items.length };
}

// ─── TablePagination component ────────────────────────────────────────────────

interface TablePaginationProps {
  page: number;
  totalPages: number;
  total: number;
  perPage: number;
  onPage: (n: number) => void;
  label?: string; // e.g. "application" → "1–5 of 12 applications"
}

export default function TablePagination({
  page,
  totalPages,
  total,
  perPage,
  onPage,
  label = "item",
}: TablePaginationProps) {
  if (totalPages <= 1) return null;

  const start = (page - 1) * perPage + 1;
  const end   = Math.min(page * perPage, total);

  // Build page numbers with ellipsis: always show first, last, current ± 1
  function pages(): (number | "…")[] {
    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
    const set = new Set([1, totalPages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= totalPages));
    const sorted = Array.from(set).sort((a, b) => a - b);
    const result: (number | "…")[] = [];
    sorted.forEach((n, i) => {
      if (i > 0 && (n as number) - (sorted[i - 1] as number) > 1) result.push("…");
      result.push(n);
    });
    return result;
  }

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3 border-t border-mist bg-sage/30">
      <span className="text-xs text-ink-soft font-mono">
        {start}–{end} of {total} {label}{total !== 1 ? "s" : ""}
      </span>

      <div className="flex items-center gap-1">
        {/* Previous */}
        <button
          onClick={() => onPage(page - 1)}
          disabled={page === 1}
          className="w-8 h-8 flex items-center justify-center rounded-sm border border-mist bg-white text-ink-soft hover:border-forest hover:text-forest transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
          aria-label="Previous page"
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3.5 h-3.5">
            <path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>

        {/* Page numbers */}
        {pages().map((p, i) =>
          p === "…" ? (
            <span key={`ellipsis-${i}`} className="w-8 h-8 flex items-center justify-center text-xs text-ink-soft">…</span>
          ) : (
            <button
              key={p}
              onClick={() => onPage(p as number)}
              className={`w-8 h-8 flex items-center justify-center rounded-sm border text-xs font-mono font-medium transition-colors ${
                p === page
                  ? "bg-forest border-forest text-white"
                  : "border-mist bg-white text-ink-soft hover:border-forest hover:text-forest"
              }`}
              aria-label={`Page ${p}`}
              aria-current={p === page ? "page" : undefined}
            >
              {p}
            </button>
          )
        )}

        {/* Next */}
        <button
          onClick={() => onPage(page + 1)}
          disabled={page === totalPages}
          className="w-8 h-8 flex items-center justify-center rounded-sm border border-mist bg-white text-ink-soft hover:border-forest hover:text-forest transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
          aria-label="Next page"
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3.5 h-3.5">
            <path d="M9 18l6-6-6-6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
    </div>
  );
}