"use client";

import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Search,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import {
  ADMIN_LIST_PAGE_SIZES,
  type AdminListPagination,
} from "./use-admin-list-query";

export type { AdminListPagination } from "./use-admin-list-query";

type AdminListSearchInputProps = {
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  "aria-label": string;
  className?: string;
  inputClassName?: string;
};

export function AdminListSearchInput({
  value,
  onChange,
  placeholder,
  "aria-label": ariaLabel,
  className = "relative max-w-md",
  inputClassName = "pl-9",
}: AdminListSearchInputProps) {
  return (
    <div className={className}>
      <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className={inputClassName}
        aria-label={ariaLabel}
      />
    </div>
  );
}

type AdminListPaginationBarProps = {
  pagination: AdminListPagination;
  isPending: boolean;
  rangeStart: number;
  rangeEnd: number;
  noun: string;
  pageSizeId: string;
  onPush: (next: { page?: number; pageSize?: number }) => void;
};

export function AdminListPaginationBar({
  pagination,
  isPending,
  rangeStart,
  rangeEnd,
  noun,
  pageSizeId,
  onPush,
}: AdminListPaginationBarProps) {
  const plural = pagination.totalCount === 1 ? noun : `${noun}s`;

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <p className="text-sm text-muted-foreground">
        {pagination.totalCount === 0
          ? `0 ${plural}`
          : `Showing ${rangeStart}–${rangeEnd} of ${pagination.totalCount} ${plural}`}
      </p>
      <div className="flex w-full flex-wrap items-center justify-end gap-4 sm:w-auto">
        <div className="flex items-center gap-2">
          <Label htmlFor={pageSizeId} className="text-sm font-medium whitespace-nowrap">
            Rows per page
          </Label>
          <Select
            value={String(pagination.pageSize)}
            onValueChange={(value) => onPush({ page: 1, pageSize: Number(value) })}
          >
            <SelectTrigger size="sm" className="w-20" id={pageSizeId}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent side="top">
              {ADMIN_LIST_PAGE_SIZES.map((size) => (
                <SelectItem key={size} value={String(size)}>
                  {size}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="text-sm font-medium tabular-nums">
          Page {pagination.page} of {Math.max(pagination.pageCount, 1)}
        </div>
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            type="button"
            disabled={pagination.page <= 1 || isPending}
            onClick={() => onPush({ page: 1 })}
            aria-label="First page"
          >
            <ChevronsLeft className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            type="button"
            disabled={pagination.page <= 1 || isPending}
            onClick={() => onPush({ page: pagination.page - 1 })}
            aria-label="Previous page"
          >
            <ChevronLeft className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            type="button"
            disabled={pagination.page >= pagination.pageCount || isPending}
            onClick={() => onPush({ page: pagination.page + 1 })}
            aria-label="Next page"
          >
            <ChevronRight className="size-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            type="button"
            disabled={pagination.page >= pagination.pageCount || isPending}
            onClick={() => onPush({ page: pagination.pageCount })}
            aria-label="Last page"
          >
            <ChevronsRight className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}