"use client";

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

import { SEARCH_RESULTS_SORT } from "@/lib/frontend/search/resultsSorting";

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

export default function SearchResultsToolbar({
	countLoaded,
	total,
	sortMode,
	onSortModeChange,
}) {
	const hasTotal = typeof total === "number" && Number.isFinite(total);

	const label = hasTotal
		? `${countLoaded} von ${total} Treffern geladen`
		: `${countLoaded} Treffer (aktuell geladen)`;

	return (
		<div className="flex flex-wrap items-center justify-between gap-2">
			<div className="text-xs text-muted-foreground">{label}</div>

			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button variant="outline" size="sm" type="button">
						<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={SEARCH_RESULTS_SORT.RELEVANCE}>
							Relevanz
						</DropdownMenuRadioItem>

						<DropdownMenuRadioItem value={SEARCH_RESULTS_SORT.DATE_DESC}>
							Datum (neueste zuerst)
						</DropdownMenuRadioItem>

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