import {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type InputHTMLAttributes,
  type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import { X } from "@phosphor-icons/react";
import { cn } from "../../lib/cn";
import { FloatingPortal } from "./floating-portal";
import { Tag } from "../status";
import { emitInputChange, fieldNote, type FieldMeta } from "./shared";

export type ComboboxOption = {
  description?: string;
  label: string;
  value: string;
};

export type ComboboxProps = InputHTMLAttributes<HTMLInputElement> &
  FieldMeta & {
    defaultSelectedValues?: string[];
    maxSelected?: number;
    minSelected?: number;
    multiple?: boolean;
    onSelectedValuesChange?: (values: string[]) => void;
    options: ComboboxOption[];
    selectedValues?: string[];
  };

function comboboxShellClassName({
  hasError,
  disabled,
  multiple,
}: {
  disabled?: boolean;
  hasError?: boolean;
  multiple?: boolean;
}) {
  return cn(
    multiple
      ? "flex min-h-[var(--uhuru-control-height)] w-full flex-wrap items-start gap-1.5 rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] py-1.5 text-sm text-[var(--uhuru-text-primary)] outline-none transition focus-within:border-[var(--uhuru-border-accent)] focus-within:ring-1 focus-within:ring-[var(--uhuru-border-accent)]"
      : "flex h-[var(--uhuru-control-height)] w-full items-center gap-2 rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] text-sm text-[var(--uhuru-text-primary)] outline-none transition focus-within:border-[var(--uhuru-border-accent)] focus-within:ring-1 focus-within:ring-[var(--uhuru-border-accent)]",
    hasError ? "border-[var(--uhuru-error-border)] focus-within:ring-[var(--uhuru-error-border)]" : "",
    disabled ? "cursor-not-allowed opacity-70" : "",
  );
}

export function Combobox({
  defaultValue,
  defaultSelectedValues,
  disabled,
  error,
  hint,
  id,
  label,
  name,
  maxSelected,
  minSelected = 0,
  multiple,
  onSelectedValuesChange,
  onChange,
  options,
  placeholder = "Search or choose",
  selectedValues,
  value,
}: ComboboxProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;
  const panelRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const suppressNextFocusOpenRef = useRef(false);
  const isMulti =
    multiple ||
    Array.isArray(selectedValues) ||
    Array.isArray(defaultSelectedValues) ||
    Array.isArray(value) ||
    Array.isArray(defaultValue);
  const controlledValue = !isMulti && typeof value === "string" ? value : undefined;
  const controlledSelectedValues = isMulti
    ? selectedValues ?? (Array.isArray(value) ? value.map(String) : undefined)
    : undefined;
  const [internalValue, setInternalValue] = useState(
    typeof defaultValue === "string" ? defaultValue : "",
  );
  const [internalSelectedValues, setInternalSelectedValues] = useState<string[]>(
    () =>
      defaultSelectedValues ??
      (Array.isArray(defaultValue) ? defaultValue.map(String) : []) ??
      [],
  );
  const selectedValue = controlledValue ?? internalValue;
  const selectedValuesList = isMulti
    ? controlledSelectedValues ?? internalSelectedValues
    : selectedValue
      ? [selectedValue]
      : [];
  const selectedValueSet = useMemo(() => new Set(selectedValuesList), [selectedValuesList]);
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const filteredOptions = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();

    if (!normalizedSearch) {
      return options;
    }

    return options.filter((option) => {
      const haystack = `${option.label} ${option.description ?? ""}`.toLowerCase();
      return haystack.includes(normalizedSearch);
    });
  }, [options, search]);
  const [activeIndex, setActiveIndex] = useState(0);
  const isTyping = search.trim().length > 0;
  const activeOption = filteredOptions[activeIndex];
  const selectedOption = options.find((option) => option.value === selectedValue);
  const displayValue = isMulti ? (open ? search : "") : open ? (search || selectedOption?.label || "") : (selectedOption?.label || "");
  const showClearButton = !isMulti && Boolean(selectedValue || search);
  const selectedCount = selectedValuesList.length;
  const minSelectable = Math.max(0, minSelected);
  const canRemoveSelection = selectedCount > minSelectable;
  const canAddMore = maxSelected === undefined || selectedCount < maxSelected;

  function emitSingleChange(nextValue: string) {
    if (controlledValue === undefined) {
      setInternalValue(nextValue);
    }

    emitInputChange(onChange, nextValue, name);
  }

  function emitMultiChange(nextValues: string[]) {
    if (controlledSelectedValues === undefined) {
      setInternalSelectedValues(nextValues);
    }

    onSelectedValuesChange?.(nextValues);
  }

  useEffect(() => {
    function handlePointerDown(event: PointerEvent) {
      if (!panelRef.current?.contains(event.target as Node)) {
        setOpen(false);
        setSearch("");
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        if (open && isTyping) {
          setSearch("");
          return;
        }

        if (open) {
          setOpen(false);
          return;
        }

        if (selectedOption) {
          clearSelection();
        }
      }
    }

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, [isTyping, open, selectedOption]);

  useEffect(() => {
    setActiveIndex(0);
  }, [open, search]);

  function clearSelection() {
    if (isMulti) {
      emitMultiChange([]);
      setSearch("");
      setOpen(true);
      inputRef.current?.focus();
      return;
    }

    emitSingleChange("");
    setSearch("");
    setOpen(true);
    inputRef.current?.focus();
  }

  function removeValue(valueToRemove: string) {
    if (!isMulti) {
      emitSingleChange("");
      setSearch("");
      setOpen(true);
      inputRef.current?.focus();
      return;
    }

    if (!canRemoveSelection && selectedValueSet.has(valueToRemove)) {
      return;
    }

    const nextValues = selectedValuesList.filter((current) => current !== valueToRemove);
    if (nextValues.length < minSelectable) {
      return;
    }

    emitMultiChange(nextValues);
    requestAnimationFrame(() => {
      inputRef.current?.focus();
    });
  }

  function selectOption(option: ComboboxOption) {
    if (isMulti) {
      const isSelected = selectedValueSet.has(option.value);
      if (isSelected) {
        if (!canRemoveSelection) {
          return;
        }

        removeValue(option.value);
      } else {
        if (!canAddMore) {
          return;
        }

        emitMultiChange([...selectedValuesList, option.value]);
      }

      setSearch("");
      setOpen(true);
      requestAnimationFrame(() => {
        inputRef.current?.focus();
      });
      return;
    }

    suppressNextFocusOpenRef.current = true;
    emitSingleChange(option.value);
    setSearch("");
    setOpen(false);
    requestAnimationFrame(() => {
      inputRef.current?.focus();
    });
  }

  function moveActive(step: 1 | -1) {
    if (filteredOptions.length === 0) {
      return;
    }

    setActiveIndex((current) => (current + step + filteredOptions.length) % filteredOptions.length);
  }

  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setOpen(true);
      moveActive(1);
      return;
    }

    if (event.key === "ArrowUp") {
      event.preventDefault();
      setOpen(true);
      moveActive(-1);
      return;
    }

    if (event.key === "Enter") {
      event.preventDefault();
      if (open) {
        const option = activeOption;
        if (option) {
          selectOption(option);
        }
      } else {
        setOpen(true);
      }
      return;
    }

    if (event.key === "Backspace" || event.key === "Delete") {
      if (isMulti) {
        if (!isTyping && selectedValuesList.length > 0 && canRemoveSelection) {
          event.preventDefault();
          removeValue(selectedValuesList[selectedValuesList.length - 1] ?? "");
        }
        return;
      }

      if (!isTyping && selectedOption) {
        event.preventDefault();
        clearSelection();
      }
      return;
    }

    if (event.key === "Escape") {
      if (isTyping) {
        event.preventDefault();
        setSearch("");
      }
    }
  }

  const selectedChips = isMulti
    ? selectedValuesList.map(
        (selectedValueItem) =>
          options.find((option) => option.value === selectedValueItem) ?? {
            label: selectedValueItem,
            value: selectedValueItem,
          },
      )
    : [];

  return (
    <label className="flex w-full flex-col gap-2" htmlFor={fieldId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <div className={cn("relative", open ? "z-[9998]" : "")} ref={panelRef}>
        <div
          className={comboboxShellClassName({ hasError: Boolean(error), disabled, multiple: isMulti })}
          onMouseDown={(event) => {
            if (event.target === event.currentTarget) {
              inputRef.current?.focus();
            }
          }}
        >
          {isMulti
            ? selectedChips.map((chip) => {
                const canRemoveChip = canRemoveSelection || !selectedValueSet.has(chip.value);

                return (
                  <Tag
                    className="inline-flex max-w-full items-center gap-1.5 rounded-full border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] px-2.5 py-1 text-xs font-medium text-[var(--uhuru-text-primary)]"
                    key={chip.value}
                  >
                    <span className="max-w-[12rem] truncate">{chip.label}</span>
                    <button
                      aria-label={`Remove ${chip.label}`}
                      className="grid h-4.5 w-4.5 shrink-0 place-items-center rounded-full text-[var(--uhuru-text-tertiary)] transition hover:bg-[var(--uhuru-surface-default)] hover:text-[var(--uhuru-text-primary)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--uhuru-border-accent)] disabled:cursor-not-allowed disabled:opacity-40"
                      disabled={!canRemoveChip}
                      onClick={(event) => {
                        event.preventDefault();
                        event.stopPropagation();
                        if (!canRemoveChip) {
                          return;
                        }

                        removeValue(chip.value);
                      }}
                      onMouseDown={(event) => {
                        event.preventDefault();
                        event.stopPropagation();
                      }}
                      type="button"
                    >
                      <X aria-hidden="true" size={12} weight="bold" />
                    </button>
                  </Tag>
                );
              })
            : null}

          <input
            aria-activedescendant={open && activeOption ? `${fieldId}-option-${activeIndex}` : undefined}
            aria-autocomplete="list"
            aria-controls={`${fieldId}-listbox`}
            aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined}
            aria-expanded={open}
            aria-haspopup="listbox"
            autoComplete="off"
            className={cn(
              "min-w-0 border-0 bg-transparent text-sm text-[var(--uhuru-text-primary)] outline-none placeholder:text-[var(--uhuru-text-tertiary)]",
              isMulti ? "min-w-[8rem] flex-1 px-0 py-1" : "flex-1 p-0",
            )}
            disabled={disabled}
            id={fieldId}
            onBlur={() => {
              requestAnimationFrame(() => {
                const listboxNode = document.getElementById(`${fieldId}-listbox`);
                const activeElement = document.activeElement;
                if (
                  !panelRef.current?.contains(activeElement) &&
                  !listboxNode?.contains(activeElement)
                ) {
                  setOpen(false);
                  setSearch("");
                }
              });
            }}
            onChange={(event) => {
              setOpen(true);
              setSearch(event.target.value);
            }}
            onFocus={() => {
              if (suppressNextFocusOpenRef.current) {
                suppressNextFocusOpenRef.current = false;
                return;
              }

              setOpen(true);
            }}
            onKeyDown={handleKeyDown}
            placeholder={
              isMulti
                ? selectedChips.length > 0 && !open && !search
                  ? ""
                  : placeholder
                : selectedOption && !open
                  ? ""
                  : placeholder
            }
            ref={inputRef}
            value={displayValue}
          />

          {showClearButton ? (
            <button
              aria-label="Clear selection"
              className="grid h-8 w-8 shrink-0 place-items-center rounded-full text-[var(--uhuru-text-tertiary)] transition hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--uhuru-border-accent)]"
              onClick={(event) => {
                event.preventDefault();
                clearSelection();
              }}
              onMouseDown={(event) => {
                event.preventDefault();
                event.stopPropagation();
              }}
              type="button"
            >
              <X aria-hidden="true" size={16} weight="bold" />
            </button>
          ) : null}
        </div>

        {isMulti ? (
          selectedValuesList.map((selectedItem) => (
            <input key={selectedItem} name={name} type="hidden" value={selectedItem} />
          ))
        ) : (
          <input name={name} type="hidden" value={selectedValue} />
        )}

        {open ? (
          <FloatingPortal anchorRef={panelRef} open={open} width={panelRef.current?.getBoundingClientRect().width}>
            <div
              className="relative w-full overflow-hidden rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-md)]"
              id={`${fieldId}-listbox`}
              aria-multiselectable={isMulti || undefined}
              role="listbox"
            >
              <div className="max-h-64 overflow-auto p-2">
                {filteredOptions.length > 0 ? (
                  <div className="grid gap-1">
                    {filteredOptions.map((option, index) => {
                      const isSelected = isMulti ? selectedValueSet.has(option.value) : option.value === selectedValue;
                      const isActive = index === activeIndex;
                      const isDisabledOption = isMulti
                        ? (isSelected ? !canRemoveSelection : !canAddMore)
                        : false;

                      return (
                        <button
                          aria-selected={isSelected}
                          className={cn(
                            "flex w-full items-start justify-between gap-3 rounded-[var(--uhuru-radius-control)] px-3 py-2.5 text-left text-sm transition",
                            isDisabledOption
                              ? "cursor-not-allowed opacity-40"
                              : isSelected
                                ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                                : isActive
                                  ? "bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-primary)]"
                                  : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-muted)]",
                          )}
                          disabled={isDisabledOption}
                          id={`${fieldId}-option-${index}`}
                          key={option.value}
                          onClick={() => selectOption(option)}
                          onFocus={() => setActiveIndex(index)}
                          onMouseEnter={() => setActiveIndex(index)}
                          role="option"
                          type="button"
                        >
                          <span className="grid gap-0.5">
                            <span>{option.label}</span>
                            {option.description ? (
                              <span className="text-xs opacity-75">{option.description}</span>
                            ) : null}
                          </span>
                          {isSelected ? <span className="text-xs uppercase tracking-[0.14em]">Selected</span> : null}
                        </button>
                      );
                    })}
                  </div>
                ) : (
                  <p className="m-0 px-3 py-2.5 text-sm text-[var(--uhuru-text-secondary)]">
                    No matches found.
                  </p>
                )}
              </div>
            </div>
          </FloatingPortal>
        ) : null}
      </div>
      {fieldNote(error, hint, hintId, errorId)}
    </label>
  );
}