import { Tags } 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 { SORT_OPTIONS, type SortValue } from "@/features/notes/sortOptions";

type Props = {
  query: string;
  onQueryChange: (v: string) => void;
  sort: SortValue;
  onSortChange: (v: SortValue) => void;
  tagTreeCount: number;
  onOpenTagTree: () => void;
  onCreateNew: () => void;
};

export function NotesToolbar({
  query,
  onQueryChange,
  sort,
  onSortChange,
  tagTreeCount,
  onOpenTagTree,
  onCreateNew,
}: Props) {
  return (
    <header className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:gap-3">
      <div className="min-w-0 flex-1 space-y-1.5">
        <Label htmlFor="search" className="text-xs text-muted-foreground">
          Suche
        </Label>
        <Input
          id="search"
          value={query}
          onChange={e => onQueryChange(e.target.value)}
          placeholder="Freitext: Inhalt & Tags · tag:x · title:y · content:z"
          autoComplete="off"
          className="h-9"
        />
      </div>
      <div className="w-full min-w-[min(100%,220px)] space-y-1.5 sm:w-72">
        <Label htmlFor="sort" className="text-xs text-muted-foreground">
          Sortierung
        </Label>
        <Select value={sort} onValueChange={v => onSortChange(v as SortValue)}>
          <SelectTrigger id="sort" className="h-9 w-full">
            <SelectValue placeholder="Sortierung" />
          </SelectTrigger>
          <SelectContent>
            {SORT_OPTIONS.map(o => (
              <SelectItem key={o.value} value={o.value}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="flex flex-wrap gap-2 sm:shrink-0">
        <Button
          type="button"
          variant="outline"
          className="h-9 w-full gap-2 sm:w-auto"
          onClick={onOpenTagTree}
          title="Tag-Hierarchie und Anzeige-Prefixe verwalten"
        >
          <Tags className="size-4 shrink-0 opacity-70" aria-hidden />
          <span>Tag-Baum</span>
          {tagTreeCount > 0 ? (
            <span className="rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium tabular-nums text-muted-foreground">
              {tagTreeCount}
            </span>
          ) : null}
        </Button>
        <Button type="button" className="h-9 w-full sm:w-auto" onClick={onCreateNew}>
          Neu
        </Button>
      </div>
    </header>
  );
}