"use client";

import React from "react";

import { ROLE_OPTIONS_DE } from "@/components/admin/users/usersUi";

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

function RoleFilter({ value, onChange, disabled }) {
	const current =
		ROLE_OPTIONS_DE.find((x) => x.value === (value ?? ""))?.label ||
		"Alle Rollen";

	return (
		<div className="grid gap-2">
			<Label>Rolle</Label>

			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button type="button" variant="outline" disabled={disabled}>
						{current}
					</Button>
				</DropdownMenuTrigger>

				<DropdownMenuContent align="start" className="min-w-56">
					<DropdownMenuLabel>Rolle filtern</DropdownMenuLabel>
					<DropdownMenuSeparator />

					<DropdownMenuRadioGroup
						value={value ?? ""}
						onValueChange={(v) => onChange?.(v)}
					>
						{ROLE_OPTIONS_DE.map((opt) => (
							<DropdownMenuRadioItem key={opt.value || "all"} value={opt.value}>
								{opt.label}
							</DropdownMenuRadioItem>
						))}
					</DropdownMenuRadioGroup>
				</DropdownMenuContent>
			</DropdownMenu>
		</div>
	);
}

export default function AdminUsersFilters({
	draft,
	onDraftChange,
	onApply,
	onReset,
	disabled,
}) {
	const q = draft?.q ?? "";
	const role = draft?.role ?? "";
	const branchId = draft?.branchId ?? "";

	return (
		<div className="space-y-3">
			<div className="grid gap-3 md:grid-cols-3">
				<div className="grid gap-2">
					<Label htmlFor="users-q">Suche</Label>
					<Input
						id="users-q"
						value={q}
						onChange={(e) => onDraftChange?.({ q: e.target.value })}
						placeholder="Benutzername oder E-Mail"
						disabled={disabled}
					/>
				</div>

				<RoleFilter
					value={role}
					onChange={(v) => onDraftChange?.({ role: v })}
					disabled={disabled}
				/>

				<div className="grid gap-2">
					<Label htmlFor="users-branch">Niederlassung</Label>
					<Input
						id="users-branch"
						value={branchId}
						onChange={(e) => onDraftChange?.({ branchId: e.target.value })}
						placeholder="z. B. NL01"
						disabled={disabled}
					/>
				</div>
			</div>

			<div className="flex flex-wrap items-center justify-between gap-2">
				<div className="flex flex-wrap gap-2">
					<Button type="button" onClick={onApply} disabled={disabled}>
						Anwenden
					</Button>

					<Button
						type="button"
						variant="outline"
						onClick={onReset}
						disabled={disabled}
					>
						Zurücksetzen
					</Button>
				</div>
			</div>
		</div>
	);
}
