import { useContext } from "react";
import { CategoryCatalogContext } from "@/context/CategoryCatalogContext";
import { useState, type ReactNode } from "react";
import { Check, ChevronDown, LayoutGrid } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { CATEGORIES } from "@/lib/categories";
import { cn } from "@/lib/utils";
import { CategoryIcon } from "./CategoryIcon";

export const ALL_CATEGORIES = "all";

interface Props {
  value: string;
  onChange: (category: string) => void;
  categories?: readonly string[];
  /** Adds an "all" row (value `"all"`) above the categories, for filters. */
  allLabel?: string;
  placeholder?: string;
  /** Replaces the default select-style trigger, e.g. a bulk-action button. */
  trigger?: ReactNode;
  triggerClassName?: string;
  align?: "start" | "center" | "end";
  disabled?: boolean;
  "aria-label"?: string;
}

/**
 * Searchable category picker. Twenty categories is past what a plain select
 * list scans comfortably, so typing narrows the list; each row carries the
 * category's icon and colour so the choice is recognisable before it is read.
 *
 * The default trigger matches the app's select trigger, so it drops into any
 * form or filter row in place of a <Select>.
 */
export function CategoryPicker({
  value,
  onChange,
  categories: suppliedCategories,
  allLabel,
  placeholder = "Category",
  trigger,
  triggerClassName,
  align = "start",
  disabled,
  "aria-label": ariaLabel = "Category",
}: Props) {
  const custom = useContext(CategoryCatalogContext);
  const categories = suppliedCategories ?? [...CATEGORIES, ...custom];
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const pick = (c: string) => {
    onChange(c);
    setOpen(false);
  };
  // Plain substring match in the list's own order. cmdk's fuzzy scorer
  // re-ranks rows while typing, which floated "All" into the middle and put
  // "Pets" above "Shopping" for an "s".
  const q = query.trim().toLowerCase();
  const shown = q ? categories.filter((c) => c.toLowerCase().includes(q)) : categories;
  const isAll = !!allLabel && value === ALL_CATEGORIES;
  const hasValue = isAll || categories.includes(value);

  return (
    // Modal, so the list scrolls when the picker sits inside a Dialog or Sheet
    // (their scroll lock otherwise swallows wheel events on the portal).
    <Popover
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) setQuery("");
      }}
      modal
    >
      <PopoverTrigger asChild disabled={disabled}>
        {trigger ?? (
          <button
            type="button"
            role="combobox"
            aria-expanded={open}
            aria-label={ariaLabel}
            className={cn(
              "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
              triggerClassName
            )}
          >
            <span className="flex items-center gap-2 min-w-0">
              {hasValue && !isAll && <CategoryIcon category={value} size="xs" />}
              <span className={cn("truncate", !hasValue && "text-muted-foreground")}>
                {isAll ? allLabel : hasValue ? value : placeholder}
              </span>
            </span>
            <ChevronDown className="h-4 w-4 opacity-50 shrink-0" />
          </button>
        )}
      </PopoverTrigger>
      <PopoverContent align={align} className="w-[240px] p-0">
        <Command shouldFilter={false}>
          <CommandInput placeholder="Search categories…" className="h-9" value={query} onValueChange={setQuery} />
          <CommandList className="max-h-[300px]">
            <CommandEmpty>No category found.</CommandEmpty>
            <CommandGroup>
              {allLabel && !q && (
                <CommandItem value={allLabel} onSelect={() => pick(ALL_CATEGORIES)} className="gap-2">
                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted text-muted-foreground">
                    <LayoutGrid size={11} strokeWidth={1.75} />
                  </span>
                  <span className="flex-1">{allLabel}</span>
                  {isAll && <Check className="h-4 w-4 text-primary" />}
                </CommandItem>
              )}
              {shown.map((c) => (
                <CommandItem key={c} value={c} onSelect={() => pick(c)} className="gap-2">
                  <CategoryIcon category={c} size="xs" />
                  <span className="flex-1 truncate">{c}</span>
                  {value === c && <Check className="h-4 w-4 text-primary" />}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}