"use client";

import React from "react";
import { SlidersHorizontal } from "lucide-react";

import { ADMIN_USERS_SORT } from "@/lib/frontend/admin/users/usersSorting";

import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function AdminUsersTableToolbar({
	loadedCount = 0,
	sortMode = ADMIN_USERS_SORT.DEFAULT,
	onSortModeChange,
	disabled = false,
}) {
	const safeLoadedCount = Number.isFinite(loadedCount)
		? Math.max(0, loadedCount)
		: 0;

	return (
		<div className="flex flex-wrap items-center justify-between gap-2">
			<span className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
				{safeLoadedCount} Benutzer geladen
			</span>

			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button
						variant="outline"
						size="sm"
						type="button"
						disabled={disabled}
						title="Sortierung"
					>
						<SlidersHorizontal className="h-4 w-4" />
						Sortierung
					</Button>
				</DropdownMenuTrigger>

				<DropdownMenuContent align="end" className="min-w-[16rem]">
					<DropdownMenuLabel>Sortierung</DropdownMenuLabel>
					<DropdownMenuSeparator />

					<DropdownMenuRadioGroup
						value={sortMode}
						onValueChange={(value) => onSortModeChange?.(value)}
					>
						<DropdownMenuRadioItem value={ADMIN_USERS_SORT.DEFAULT}>
							Standard
						</DropdownMenuRadioItem>

						<DropdownMenuRadioItem value={ADMIN_USERS_SORT.ROLE_RIGHTS}>
							Rolle (Rechte)
						</DropdownMenuRadioItem>

						<DropdownMenuRadioItem value={ADMIN_USERS_SORT.BRANCH_ASC}>
							Niederlassung (NL)
						</DropdownMenuRadioItem>
					</DropdownMenuRadioGroup>
				</DropdownMenuContent>
			</DropdownMenu>
		</div>
	);
}