import { useState } from "react";
import { Check, ChevronDown, Plus, Tag as TagIcon, X } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
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 {
  /** Every tag the user has defined. */
  tags: TagDto[];
  /** Ids of the tags currently on this transaction. */
  selectedIds: string[];
  onChange: (ids: string[]) => void;
  /** Creates a new tag (with the default colour) and returns its id, so it
   * can be selected immediately without a second round trip. */
  onCreate?: (name: string) => Promise<string>;
  disabled?: boolean;
}

/**
 * Multi-select tag picker: selected tags show as small removable pills, the
 * popover list toggles membership instead of replacing a single value like
 * CategoryPicker does. Typing a name with no match offers to create it.
 */
export function TagPicker({ tags, selectedIds, onChange, onCreate, disabled }: Props) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [creating, setCreating] = useState(false);

  const selected = tags.filter((t) => selectedIds.includes(t.id));
  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) => {
    onChange(selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id]);
  };

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

  return (
    <div className="space-y-2">
      {selected.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
          {selected.map((t) => (
            <span
              key={t.id}
              className="inline-flex items-center gap-1 text-[11px] pl-2 pr-1 py-0.5 rounded-full border bg-muted/60 border-border"
            >
              <TagDot tag={t} />
              {t.name}
              <button
                type="button"
                aria-label={`Remove ${t.name}`}
                disabled={disabled}
                onClick={() => toggle(t.id)}
                className="rounded-full p-0.5 hover:bg-muted-foreground/20 transition-colors"
              >
                <X size={10} strokeWidth={2} />
              </button>
            </span>
          ))}
        </div>
      )}
      <Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) setQuery(""); }} modal>
        <PopoverTrigger asChild disabled={disabled}>
          <button
            type="button"
            role="combobox"
            aria-expanded={open}
            aria-label="Add tags"
            className="flex h-8 items-center gap-1.5 rounded-md border border-dashed border-input bg-background px-2.5 text-xs text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
          >
            <TagIcon size={12} strokeWidth={1.5} />
            {selected.length > 0 ? "Add tag" : "Add tags"}
            <ChevronDown className="h-3 w-3 opacity-50" />
          </button>
        </PopoverTrigger>
        <PopoverContent align="start" 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 createAndSelect()}
                      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>
                    {selectedIds.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 createAndSelect()} className="gap-2 text-primary">
                    <Plus size={14} strokeWidth={1.75} />
                    Create "{query.trim()}"
                  </CommandItem>
                )}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  );
}