import { useState } from "react";
import { Check, ChevronDown, Plus, Tag as TagIcon } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Button } from "@/components/ui/button";
import type { TagDto } from "@/lib/api";
import { tagColorValue } from "@/lib/tagColors";
import { cn } from "@/lib/utils";

function TagDot({ tag }: { tag: TagDto }) {
  return <span aria-hidden className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: tagColorValue(tag.color) }} />;
}

interface Props {
  tags: TagDto[];
  /** How many records this would apply to, for the button's confirm label. */
  count: number;
  onApply: (tagIds: string[]) => void;
  /** Creates a new tag (with the default colour) and returns its id, so it
   * can be picked immediately without a second round trip. */
  onCreate?: (name: string) => Promise<string>;
  disabled?: boolean;
}

/**
 * Multi-select tag picker for the bulk-selection floating bar: unlike
 * TagPicker (one transaction, shows and toggles its current tags), this has
 * no "current" state to show - the selection is a mix of transactions with
 * different tags already on them - so it only ever adds. Picks build up
 * locally and apply together in one call when "Apply" is pressed, rather
 * than firing a request per tag.
 */
export function BulkTagPicker({ tags, count, onApply, onCreate, disabled }: Props) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [picked, setPicked] = useState<string[]>([]);
  const [creating, setCreating] = useState(false);

  const q = query.trim().toLowerCase();
  const shown = q ? tags.filter((t) => t.name.toLowerCase().includes(q)) : tags;
  const exactMatch = tags.some((t) => t.name.toLowerCase() === q);

  const toggle = (id: string) => {
    setPicked((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  };

  const reset = () => {
    setPicked([]);
    setQuery("");
  };

  const createAndPick = async () => {
    if (!onCreate || !query.trim() || creating) return;
    setCreating(true);
    try {
      const id = await onCreate(query.trim());
      setPicked((prev) => [...prev, id]);
      setQuery("");
    } finally {
      setCreating(false);
    }
  };

  const apply = () => {
    if (picked.length === 0) return;
    onApply(picked);
    setOpen(false);
    reset();
  };

  return (
    <Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) reset(); }} modal>
      <PopoverTrigger asChild disabled={disabled}>
        <Button variant="outline" size="sm" className="h-8 text-xs gap-1.5 bg-background font-normal">
          <TagIcon size={12} strokeWidth={1.5} />
          Tag
          <ChevronDown className="h-3.5 w-3.5 opacity-50 ml-0.5" />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="center" className="w-[220px] p-0">
        <Command shouldFilter={false}>
          <CommandInput placeholder="Search or create…" className="h-9" value={query} onValueChange={setQuery} />
          <CommandList className="max-h-[260px]">
            {shown.length === 0 && (
              <CommandEmpty>
                {onCreate && query.trim() ? (
                  <button
                    type="button"
                    onClick={() => void createAndPick()}
                    disabled={creating}
                    className={cn("flex w-full items-center gap-2 px-2 py-1.5 text-sm text-left rounded-sm hover:bg-accent", creating && "opacity-50")}
                  >
                    <Plus size={14} strokeWidth={1.75} />
                    Create "{query.trim()}"
                  </button>
                ) : (
                  "No tags found."
                )}
              </CommandEmpty>
            )}
            <CommandGroup>
              {shown.map((t) => (
                <CommandItem key={t.id} value={t.name} onSelect={() => toggle(t.id)} className="gap-2">
                  <TagDot tag={t} />
                  <span className="flex-1 truncate">{t.name}</span>
                  {picked.includes(t.id) && <Check className="h-4 w-4 text-primary" />}
                </CommandItem>
              ))}
              {onCreate && query.trim() && !exactMatch && shown.length > 0 && (
                <CommandItem value={`__create__${query}`} onSelect={() => void createAndPick()} className="gap-2 text-primary">
                  <Plus size={14} strokeWidth={1.75} />
                  Create "{query.trim()}"
                </CommandItem>
              )}
            </CommandGroup>
          </CommandList>
        </Command>
        {picked.length > 0 && (
          <div className="border-t border-border p-2">
            <Button size="sm" className="w-full h-8 text-xs" onClick={apply}>
              Apply {picked.length} tag{picked.length === 1 ? "" : "s"} to {count} transaction{count === 1 ? "" : "s"}
            </Button>
          </div>
        )}
      </PopoverContent>
    </Popover>
  );
}