rhl-lieferscheine/components/search/form/SearchMultiBranchPicker.jsx

"use client";

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

import { isValidBranchParam } from "@/lib/frontend/params";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";

function normalizeTypedBranch(value) {
	if (typeof value !== "string") return null;
	const s = value.trim().toUpperCase();
	return s ? s : null;
}

export default function SearchMultiBranchPicker({
	branchesStatus,
	availableBranches,
	selectedBranches,
	onToggleBranch,
	onClearAllBranches,
	isSubmitting,
}) {
	const listReady = branchesStatus === "ready";
	const listLoading = branchesStatus === "loading";
	const listError = branchesStatus === "error";

	const branchOptions = Array.isArray(availableBranches)
		? availableBranches
		: [];

	const selected = Array.isArray(selectedBranches) ? selectedBranches : [];
	const selectedSet = React.useMemo(
		() => new Set(selected.map(String)),
		[selected]
	);

	const canClearAll =
		typeof onClearAllBranches === "function" &&
		selected.length > 0 &&
		!isSubmitting;

	// Fail-open manual add (only relevant if branch list failed)
	const [manual, setManual] = React.useState("");
	const typed = normalizeTypedBranch(manual);

	const canAddTyped =
		Boolean(typed && isValidBranchParam(typed)) && !selectedSet.has(typed);

	return (
		<div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
			<div className="space-y-3">
				<div className="flex items-start justify-between gap-4">
					<div className="space-y-1">
						<p className="text-sm font-medium">Niederlassungen auswählen</p>
						<p className="text-xs text-muted-foreground">
							Wählen Sie eine oder mehrere Niederlassungen. Die Suche wird nach
							jeder Änderung aktualisiert.
						</p>
					</div>

					<Button
						type="button"
						variant="outline"
						size="sm"
						disabled={!canClearAll}
						onClick={() => {
							if (!canClearAll) return;
							onClearAllBranches();
						}}
						title="Alle Niederlassungen abwählen"
					>
						Alle abwählen
					</Button>
				</div>

				{listLoading ? (
					<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
						{Array.from({ length: 15 }).map((_, i) => (
							<div key={i} className="flex items-center gap-2">
								<Skeleton className="h-4 w-4" />
								<Skeleton className="h-4 w-14" />
							</div>
						))}
					</div>
				) : null}

				{listError ? (
					<div className="space-y-3">
						<p className="text-xs text-muted-foreground">
							Niederlassungen konnten nicht geladen werden. Sie können NLxx
							manuell hinzufügen.
						</p>

						<div className="flex gap-2">
							<Input
								value={manual}
								onChange={(e) => setManual(e.target.value)}
								onKeyDown={(e) => {
									if (e.key !== "Enter") return;
									if (!canAddTyped) return;

									e.preventDefault();
									onToggleBranch(typed);
									setManual("");
								}}
								placeholder="z. B. NL17"
								disabled={isSubmitting}
							/>
							<Button
								type="button"
								variant="outline"
								disabled={!canAddTyped || isSubmitting}
								onClick={() => {
									if (!canAddTyped) return;
									onToggleBranch(typed);
									setManual("");
								}}
							>
								Hinzufügen
							</Button>
						</div>

						<div className="space-y-2">
							<Label>Ausgewählt ({selected.length})</Label>

							{selected.length === 0 ? (
								<p className="text-xs text-muted-foreground">
									Keine Niederlassungen ausgewählt.
								</p>
							) : (
								<div className="flex flex-wrap gap-2">
									{selected.map((b) => (
										<Badge key={b} variant="secondary" className="gap-1">
											<span>{b}</span>
											<button
												type="button"
												className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-muted/60"
												onClick={() => onToggleBranch(b)}
												disabled={isSubmitting}
												aria-label={`Entfernen: ${b}`}
												title={`Entfernen: ${b}`}
											>
												<X className="h-3 w-3" />
											</button>
										</Badge>
									))}
								</div>
							)}
						</div>
					</div>
				) : null}

				{listReady ? (
					<div className="space-y-2">
						<div className="text-xs text-muted-foreground">
							Ausgewählt: {selected.length}
						</div>

						{/* 5 per row on md+ */}
						<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
							{branchOptions.map((b) => {
								const id = String(b);
								const checked = selectedSet.has(id);

								return (
									<label
										key={id}
										className="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-muted/50"
									>
										<input
											type="checkbox"
											checked={checked}
											onChange={() => onToggleBranch(id)}
											disabled={isSubmitting}
										/>
										<span className="text-sm">{id}</span>
									</label>
								);
							})}
						</div>
					</div>
				) : null}
			</div>
		</div>
	);
}