"use client";

import { Suspense, useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import {
  CalendarClock,
  CarFront,
  CreditCard,
  Eye,
  Filter,
  Loader2,
  PackageCheck,
  Search,
  X,
} from "lucide-react";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { adminRequest } from "@/lib/admin-api";
import type { AdminOrder } from "./types";
import {
  formatCurrency,
  formatDateTime,
  formatText,
  getAllowedOrderStatusOptions,
  getAllowedPaymentStatusOptions,
  paymentStatuses,
  vehicleName,
} from "./utils";

type OrdersPagination = {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
  hasNextPage: boolean;
  hasPreviousPage: boolean;
};

type OrdersSummary = {
  all: number;
  placed: number;
  completed: number;
  revenue: number;
};

export default function AdminOrdersPage() {
  return (
    <Suspense fallback={<AdminOrdersFallback />}>
      <AdminOrdersContent />
    </Suspense>
  );
}

function AdminOrdersContent() {
  const searchParams = useSearchParams();
  const statusParam = searchParams.get("status") ?? "";
  const [orders, setOrders] = useState<AdminOrder[]>([]);
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState(statusParam);
  const [paymentStatus, setPaymentStatus] = useState("");
  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [minPrice, setMinPrice] = useState("");
  const [maxPrice, setMaxPrice] = useState("");
  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);
  const [pagination, setPagination] = useState<OrdersPagination>({
    page: 1,
    limit: 25,
    total: 0,
    totalPages: 1,
    hasNextPage: false,
    hasPreviousPage: false,
  });
  const [summary, setSummary] = useState<OrdersSummary>({
    all: 0,
    placed: 0,
    completed: 0,
    revenue: 0,
  });
  const [isLoading, setIsLoading] = useState(true);
  const [updatingOrderIds, setUpdatingOrderIds] = useState<Record<number, boolean>>({});
  const [errorMessage, setErrorMessage] = useState("");

  const loadOrders = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage("");

    try {
      const params = new URLSearchParams();
      if (search.trim()) params.set("search", search.trim());
      if (status) params.set("status", status);
      if (paymentStatus) params.set("paymentStatus", paymentStatus);
      if (dateFrom) params.set("dateFrom", dateFrom);
      if (dateTo) params.set("dateTo", dateTo);
      if (minPrice.trim()) params.set("minPrice", minPrice.trim());
      if (maxPrice.trim()) params.set("maxPrice", maxPrice.trim());
      params.set("page", String(page));
      params.set("limit", String(pageSize));
      const data = await adminRequest<{
        orders: AdminOrder[];
        pagination: OrdersPagination;
        summary: OrdersSummary;
      }>(`/api/admin/orders${params.toString() ? `?${params.toString()}` : ""}`);
      setOrders(data.orders);
      setPagination(data.pagination);
      setSummary(data.summary);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load orders");
    } finally {
      setIsLoading(false);
    }
  }, [dateFrom, dateTo, maxPrice, minPrice, page, pageSize, paymentStatus, search, status]);

  useEffect(() => {
    const timer = window.setTimeout(loadOrders, 250);
    return () => window.clearTimeout(timer);
  }, [loadOrders]);

  useEffect(() => {
    setPage(1);
  }, [dateFrom, dateTo, maxPrice, minPrice, pageSize, paymentStatus, search, status]);

  useEffect(() => {
    setStatus(statusParam);
  }, [statusParam]);

  async function updateOrder(orderId: number, next: { status?: string; paymentStatus?: string }) {
    setUpdatingOrderIds((current) => ({ ...current, [orderId]: true }));
    setErrorMessage("");

    try {
      const data = await adminRequest<{ order: AdminOrder }>(`/api/admin/orders/${orderId}`, {
        method: "PATCH",
        body: JSON.stringify(next),
      });
      setOrders((current) => current.map((order) => (order.id === orderId ? data.order : order)));
      await loadOrders();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not update order");
    } finally {
      setUpdatingOrderIds((current) => {
        const nextState = { ...current };
        delete nextState[orderId];
        return nextState;
      });
    }
  }

  const activeFilterCount = [
    status,
    paymentStatus,
    dateFrom,
    dateTo,
    minPrice.trim(),
    maxPrice.trim(),
  ].filter(Boolean).length;

  function clearFilters() {
    setStatus("");
    setPaymentStatus("");
    setDateFrom("");
    setDateTo("");
    setMinPrice("");
    setMaxPrice("");
  }

  return (
    <AdminGuard>
      <AdminShell
        title="Order management"
        lead="Track service orders, customer details, payment status, and fulfillment state."
      >
        <section className="space-y-5">
          <div className="grid gap-3 md:grid-cols-4">
            <StatCard label="Orders" value={summary.all} icon={PackageCheck} />
            <StatCard label="Placed" value={summary.placed} icon={CalendarClock} />
            <StatCard label="Completed" value={summary.completed} icon={PackageCheck} />
            <StatCard label="Value" value={formatCurrency(summary.revenue)} icon={CreditCard} />
          </div>

          <div className="grid gap-3 rounded-lg border border-border bg-white p-4 shadow-sm lg:grid-cols-[minmax(0,1fr)_auto_190px] lg:items-end">
            <div className="relative">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <input
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                placeholder="Search order, package, user, mobile, vehicle"
                className="h-11 w-full rounded-md border border-border bg-white pl-10 pr-11 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
              />
              {search ? (
                <button
                  type="button"
                  onClick={() => setSearch("")}
                  className="absolute right-2 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-slate-100 hover:text-foreground"
                  aria-label="Clear search"
                >
                  <X className="h-4 w-4" />
                </button>
              ) : null}
            </div>
            <button
              type="button"
              onClick={() => setIsFilterModalOpen(true)}
              className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-border bg-white px-4 text-sm font-black text-foreground transition hover:bg-slate-100"
            >
              <Filter className="h-4 w-4" />
              Filters
              {activeFilterCount > 0 ? (
                <span className="grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1.5 text-[10px] text-primary-foreground">
                  {activeFilterCount}
                </span>
              ) : null}
            </button>
            <label className="grid gap-1">
              <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
                Show results
              </span>
              <select
                value={pageSize}
                onChange={(event) => setPageSize(Number(event.target.value))}
                className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
              >
                {[10, 25, 50, 100].map((value) => (
                  <option key={value} value={value}>
                    Show {value} orders
                  </option>
                ))}
              </select>
            </label>
          </div>

          <OrderFilterModal
            dateFrom={dateFrom}
            dateTo={dateTo}
            isOpen={isFilterModalOpen}
            maxPrice={maxPrice}
            minPrice={minPrice}
            paymentStatus={paymentStatus}
            status={status}
            onClear={clearFilters}
            onClose={() => setIsFilterModalOpen(false)}
            onDateFromChange={setDateFrom}
            onDateToChange={setDateTo}
            onMaxPriceChange={setMaxPrice}
            onMinPriceChange={setMinPrice}
            onPaymentStatusChange={setPaymentStatus}
            onStatusChange={setStatus}
          />

          {errorMessage ? (
            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-bold text-destructive">
              {errorMessage}
            </p>
          ) : null}

          <section className="overflow-hidden rounded-lg border border-border bg-white shadow-sm">
            <div className="flex items-center justify-between border-b border-border bg-white px-4 py-3">
              <div>
                <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Orders
                </p>
                <p className="mt-1 text-xs font-bold text-muted-foreground">
                  Showing {orders.length} of {pagination.total} orders
                </p>
              </div>
              <div className="flex items-center gap-2">
                {isLoading ? <Loader2 className="h-4 w-4 animate-spin text-primary" /> : null}
                <PaginationControls
                  page={pagination.page}
                  totalPages={pagination.totalPages}
                  hasNextPage={pagination.hasNextPage}
                  hasPreviousPage={pagination.hasPreviousPage}
                  onPageChange={setPage}
                />
              </div>
            </div>
            <div className="max-h-[calc(100vh-330px)] min-h-[360px] overflow-auto">
              {isLoading ? (
                <div className="grid gap-3 p-4">
                  {Array.from({ length: 6 }).map((_, index) => (
                    <div key={index} className="h-14 rounded-md bg-slate-100" />
                  ))}
                </div>
              ) : null}
              {!isLoading && orders.length === 0 ? (
                <p className="m-4 rounded-md border border-dashed border-border px-4 py-10 text-center text-sm font-bold text-muted-foreground">
                  No orders found.
                </p>
              ) : null}
              {!isLoading && orders.length > 0 ? (
                <table className="w-full min-w-[1180px] border-separate border-spacing-0 text-left">
                  <thead className="sticky top-0 z-20 bg-slate-50 text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground shadow-[0_1px_0_0_hsl(var(--border))]">
                    <tr>
                      <th className="bg-slate-50 px-4 py-3">Order</th>
                      <th className="bg-slate-50 px-4 py-3">Customer</th>
                      <th className="bg-slate-50 px-4 py-3">Vehicle</th>
                      <th className="bg-slate-50 px-4 py-3">Amount</th>
                      <th className="bg-slate-50 px-4 py-3">Order status</th>
                      <th className="bg-slate-50 px-4 py-3">Payment</th>
                      <th className="bg-slate-50 px-4 py-3">Created</th>
                      <th className="bg-slate-50 px-4 py-3 text-right">Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {orders.map((order) => {
                      const isUpdating = Boolean(updatingOrderIds[order.id]);

                      return (
                        <tr key={order.id} className="align-middle transition hover:bg-primary/5">
                          <td className="px-4 py-3">
                            <div className="flex min-w-[260px] items-center gap-3">
                              <div className="grid h-14 w-16 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-slate-50">
                                {order.modelImage ? (
                                  <img
                                    src={order.modelImage}
                                    alt={order.modelName}
                                    className="h-full w-full object-contain p-2"
                                  />
                                ) : (
                                  <CarFront className="h-5 w-5 text-muted-foreground" />
                                )}
                              </div>
                              <div className="min-w-0">
                                <p className="text-xs font-black text-primary">
                                  {order.orderNumber}
                                </p>
                                <p className="mt-1 max-w-[230px] truncate text-sm font-black text-foreground">
                                  {order.packageName}
                                </p>
                                <p className="mt-1 text-xs font-bold text-muted-foreground">
                                  {formatText(order.packageType)}
                                </p>
                              </div>
                            </div>
                          </td>
                          <td className="px-4 py-3">
                            <p className="text-sm font-black text-foreground">
                              {order.userName || "Customer"}
                            </p>
                            <p className="mt-1 text-xs font-bold text-muted-foreground">
                              {order.userMobile}
                            </p>
                          </td>
                          <td className="px-4 py-3">
                            <p className="max-w-[220px] truncate text-sm font-black text-foreground">
                              {vehicleName(order)}
                            </p>
                            <p className="mt-1 text-xs font-bold text-muted-foreground">
                              {formatText(order.vehicleType)}
                              {order.fuelType ? ` - ${formatText(order.fuelType)}` : ""}
                            </p>
                          </td>
                          <td className="px-4 py-3">
                            <p className="text-sm font-black text-foreground">
                              {formatCurrency(order.finalPrice)}
                            </p>
                            <p className="mt-1 text-xs font-bold text-muted-foreground">
                              {formatText(order.paymentMode)}
                            </p>
                            {order.paymentMode === "online_razorpay" ? (
                              <p className="mt-1 max-w-[180px] truncate text-[11px] font-bold text-muted-foreground">
                                {order.razorpayPaymentId
                                  ? `Pay ID: ${order.razorpayPaymentId}`
                                  : order.razorpayOrderId
                                    ? `RZP order: ${order.razorpayOrderId}`
                                    : "Razorpay pending"}
                              </p>
                            ) : null}
                          </td>
                          <td className="px-4 py-3">
                            {status ? (
                              <InlineStatusActions
                                currentValue={order.status}
                                options={getAllowedOrderStatusOptions(order.status)}
                                disabled={isUpdating}
                                onChange={(value) => updateOrder(order.id, { status: value })}
                              />
                            ) : (
                              <select
                                value={order.status}
                                onChange={(event) =>
                                  updateOrder(order.id, { status: event.target.value })
                                }
                                disabled={isUpdating}
                                className="h-10 w-36 rounded-md border border-border bg-white px-3 text-xs font-black text-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:opacity-60"
                              >
                                {getAllowedOrderStatusOptions(order.status).map((item) => (
                                  <option key={item} value={item}>
                                    {formatText(item)}
                                  </option>
                                ))}
                              </select>
                            )}
                          </td>
                          <td className="px-4 py-3">
                            {status ? (
                              <InlineStatusActions
                                currentValue={order.paymentStatus}
                                options={getAllowedPaymentStatusOptions(
                                  order.status,
                                  order.paymentStatus,
                                )}
                                disabled={isUpdating}
                                onChange={(value) =>
                                  updateOrder(order.id, { paymentStatus: value })
                                }
                              />
                            ) : (
                              <select
                                value={order.paymentStatus}
                                onChange={(event) =>
                                  updateOrder(order.id, { paymentStatus: event.target.value })
                                }
                                disabled={isUpdating}
                                className="h-10 w-32 rounded-md border border-border bg-white px-3 text-xs font-black text-foreground outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:opacity-60"
                              >
                                {getAllowedPaymentStatusOptions(
                                  order.status,
                                  order.paymentStatus,
                                ).map((item) => (
                                  <option key={item} value={item}>
                                    {formatText(item)}
                                  </option>
                                ))}
                              </select>
                            )}
                            {isUpdating ? (
                              <p className="mt-1 inline-flex items-center gap-1 text-[10px] font-black uppercase tracking-[0.12em] text-primary">
                                <Loader2 className="h-3 w-3 animate-spin" />
                                Saving
                              </p>
                            ) : null}
                          </td>
                          <td className="px-4 py-3 text-xs font-bold text-muted-foreground">
                            {formatDateTime(order.createdAt)}
                          </td>
                          <td className="px-4 py-3 text-right">
                            <Link
                              href={`/admin/orders/${order.id}`}
                              className="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-primary/25 px-3 text-xs font-black text-primary transition hover:bg-primary/10"
                            >
                              <Eye className="h-4 w-4" />
                              Details
                            </Link>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              ) : null}
              {!isLoading && orders.length > 0 ? (
                <div className="sticky bottom-0 z-20 flex min-w-[1180px] items-center justify-between gap-3 border-t border-border bg-white px-4 py-3 shadow-[0_-1px_0_0_hsl(var(--border))]">
                  <p className="text-xs font-bold text-muted-foreground">
                    Page {pagination.page} of {pagination.totalPages}
                  </p>
                  <PaginationControls
                    page={pagination.page}
                    totalPages={pagination.totalPages}
                    hasNextPage={pagination.hasNextPage}
                    hasPreviousPage={pagination.hasPreviousPage}
                    onPageChange={setPage}
                  />
                </div>
              ) : null}
            </div>
          </section>
        </section>
      </AdminShell>
    </AdminGuard>
  );
}

function OrderFilterModal({
  dateFrom,
  dateTo,
  isOpen,
  maxPrice,
  minPrice,
  paymentStatus,
  status,
  onClear,
  onClose,
  onDateFromChange,
  onDateToChange,
  onMaxPriceChange,
  onMinPriceChange,
  onPaymentStatusChange,
  onStatusChange,
}: {
  dateFrom: string;
  dateTo: string;
  isOpen: boolean;
  maxPrice: string;
  minPrice: string;
  paymentStatus: string;
  status: string;
  onClear: () => void;
  onClose: () => void;
  onDateFromChange: (value: string) => void;
  onDateToChange: (value: string) => void;
  onMaxPriceChange: (value: string) => void;
  onMinPriceChange: (value: string) => void;
  onPaymentStatusChange: (value: string) => void;
  onStatusChange: (value: string) => void;
}) {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 px-4 py-6">
      <div className="w-full max-w-xl rounded-lg border border-border bg-white shadow-2xl">
        <div className="flex items-center justify-between gap-4 border-b border-border px-5 py-4">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
              Order filters
            </p>
            <h2 className="mt-1 text-xl font-black text-foreground">Filter orders</h2>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            aria-label="Close filters"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="grid gap-4 p-5 sm:grid-cols-2">
          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              Order status
            </span>
            <select
              value={status}
              onChange={(event) => onStatusChange(event.target.value)}
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            >
              <option value="">All order statuses</option>
              {["placed", "confirmed", "in_progress", "completed", "cancelled"].map((item) => (
                <option key={item} value={item}>
                  {formatText(item)}
                </option>
              ))}
            </select>
          </label>

          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              Payment status
            </span>
            <select
              value={paymentStatus}
              onChange={(event) => onPaymentStatusChange(event.target.value)}
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            >
              <option value="">All payments</option>
              {paymentStatuses.map((item) => (
                <option key={item} value={item}>
                  {formatText(item)}
                </option>
              ))}
            </select>
          </label>

          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              From date
            </span>
            <input
              type="date"
              value={dateFrom}
              onChange={(event) => onDateFromChange(event.target.value)}
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            />
          </label>

          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              To date
            </span>
            <input
              type="date"
              value={dateTo}
              min={dateFrom || undefined}
              onChange={(event) => onDateToChange(event.target.value)}
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            />
          </label>

          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              Minimum price
            </span>
            <input
              type="number"
              min="0"
              inputMode="decimal"
              value={minPrice}
              onChange={(event) => onMinPriceChange(event.target.value)}
              placeholder="0"
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            />
          </label>

          <label className="grid gap-1.5">
            <span className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
              Maximum price
            </span>
            <input
              type="number"
              min="0"
              inputMode="decimal"
              value={maxPrice}
              onChange={(event) => onMaxPriceChange(event.target.value)}
              placeholder="No limit"
              className="h-11 rounded-md border border-border bg-white px-3 text-sm font-black outline-none"
            />
          </label>
        </div>

        <div className="flex flex-col-reverse gap-2 border-t border-border px-5 py-4 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onClear}
            className="h-10 rounded-md border border-border px-4 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
          >
            Clear filters
          </button>
          <button
            type="button"
            onClick={onClose}
            className="h-10 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95"
          >
            Apply filters
          </button>
        </div>
      </div>
    </div>
  );
}

function AdminOrdersFallback() {
  return (
    <AdminGuard>
      <AdminShell
        title="Order management"
        lead="Track service orders, customer details, payment status, and fulfillment state."
      >
        <div className="grid place-items-center rounded-lg border border-border bg-white py-16 shadow-sm">
          <Loader2 className="h-6 w-6 animate-spin text-primary" />
        </div>
      </AdminShell>
    </AdminGuard>
  );
}

function StatCard({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: number | string;
}) {
  return (
    <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
            {label}
          </p>
          <p className="mt-2 text-2xl font-black text-foreground">{value}</p>
        </div>
        <div className="grid h-11 w-11 place-items-center rounded-md bg-primary/10 text-primary">
          <Icon className="h-5 w-5" />
        </div>
      </div>
    </div>
  );
}

function InlineStatusActions({
  currentValue,
  disabled,
  onChange,
  options,
}: {
  currentValue: string;
  disabled: boolean;
  onChange: (value: string) => void;
  options: string[];
}) {
  const nextOptions = options.filter((option) => option !== currentValue);

  return (
    <div className="grid min-w-[150px] gap-1.5">
      <span className="inline-flex h-7 w-fit items-center rounded-md bg-slate-100 px-2 text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {formatText(currentValue)}
      </span>
      {nextOptions.length > 0 ? (
        <div className="flex flex-wrap gap-1.5">
          {nextOptions.map((option) => (
            <button
              key={option}
              type="button"
              onClick={() => onChange(option)}
              disabled={disabled}
              className="inline-flex h-8 items-center rounded-md border border-primary/25 bg-white px-2.5 text-[11px] font-black text-primary transition hover:bg-primary/10 disabled:opacity-60"
            >
              {formatText(option)}
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}

function PaginationControls({
  page,
  totalPages,
  hasNextPage,
  hasPreviousPage,
  onPageChange,
}: {
  page: number;
  totalPages: number;
  hasNextPage: boolean;
  hasPreviousPage: boolean;
  onPageChange: (page: number) => void;
}) {
  return (
    <div className="inline-flex items-center gap-1">
      <button
        type="button"
        onClick={() => onPageChange(Math.max(1, page - 1))}
        disabled={!hasPreviousPage}
        className="h-9 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
      >
        Previous
      </button>
      <span className="grid h-9 min-w-10 place-items-center rounded-md border border-border bg-slate-50 px-2 text-xs font-black text-foreground">
        {page}
      </span>
      <button
        type="button"
        onClick={() => onPageChange(Math.min(totalPages, page + 1))}
        disabled={!hasNextPage}
        className="h-9 rounded-md border border-border bg-white px-3 text-xs font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
      >
        Next
      </button>
    </div>
  );
}