import {
  useEffect,
  useId,
  useRef,
  useState,
  type ChangeEvent,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { cn } from "../../lib/cn";
import { TextField, type TextFieldProps } from "../text-field";
import { FloatingPortal } from "./floating-portal";
import { SearchGlyph } from "./shared";

export type SearchDropAreaResult = {
  description?: string;
  disabled?: boolean;
  id: string;
  keywords?: string[];
  label: string;
  leading?: ReactNode;
  onSelect?: () => void;
  trailing?: ReactNode;
};

export type SearchDropAreaRenderContext = {
  close: () => void;
  query: string;
};

export type SearchInputProps = Omit<TextFieldProps, "type" | "prefixIcon"> & {
  emptyMessage?: ReactNode;
  onSearchResultSelect?: (result: SearchDropAreaResult) => void;
  prefixIcon?: ReactNode;
  searchDropArea?:
    | SearchDropAreaResult[]
    | ReactNode
    | ((context: SearchDropAreaRenderContext) => ReactNode);
  searchDropAreaAlign?: "center" | "left" | "right";
  searchDropAreaClassName?: string;
};

function isResultList(value: SearchInputProps["searchDropArea"]): value is SearchDropAreaResult[] {
  return Array.isArray(value) && value.every((item) => (
    typeof item === "object"
      && item !== null
      && "id" in item
      && "label" in item
  ));
}

export function SearchInput({
  defaultValue,
  emptyMessage = "No results found.",
  id,
  onBlur,
  onChange,
  onFocus,
  onKeyDown,
  onSearchResultSelect,
  prefixIcon,
  searchDropArea,
  searchDropAreaAlign = "left",
  searchDropAreaClassName,
  value,
  ...props
}: SearchInputProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const listboxId = `${fieldId}-search-results`;
  const anchorRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const [internalQuery, setInternalQuery] = useState(
    typeof defaultValue === "string" || typeof defaultValue === "number"
      ? String(defaultValue)
      : "",
  );
  const query = typeof value === "string" || typeof value === "number"
    ? String(value)
    : internalQuery;
  const resultList = isResultList(searchDropArea) ? searchDropArea : undefined;
  const normalizedQuery = query.trim().toLowerCase();
  const filteredResults = resultList?.filter((result) => {
    if (!normalizedQuery) return true;
    return [result.label, result.description, ...(result.keywords ?? [])]
      .filter(Boolean)
      .join(" ")
      .toLowerCase()
      .includes(normalizedQuery);
  }) ?? [];
  const hasDropArea = searchDropArea !== undefined;

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

  useEffect(() => {
    if (!open) return;

    function handlePointerDown(event: PointerEvent) {
      if (!anchorRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function handleEscape(event: globalThis.KeyboardEvent) {
      if (event.key === "Escape") setOpen(false);
    }

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

  function selectResult(result: SearchDropAreaResult) {
    if (result.disabled) return;
    result.onSelect?.();
    onSearchResultSelect?.(result);
    setOpen(false);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    if (value === undefined) setInternalQuery(event.target.value);
    if (hasDropArea) setOpen(true);
    onChange?.(event);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (resultList && open && filteredResults.length) {
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        event.preventDefault();
        const direction = event.key === "ArrowDown" ? 1 : -1;
        setActiveIndex((current) => (
          (current + direction + filteredResults.length) % filteredResults.length
        ));
        return;
      }

      if (event.key === "Enter") {
        event.preventDefault();
        selectResult(filteredResults[activeIndex] ?? filteredResults[0]);
        return;
      }
    }

    if (event.key === "Escape") setOpen(false);
    onKeyDown?.(event);
  }

  let customContent: ReactNode = null;
  if (!resultList) {
    customContent = typeof searchDropArea === "function"
      ? searchDropArea({ close: () => setOpen(false), query })
      : searchDropArea as ReactNode;
  }

  return (
    <div className="min-w-0 w-full" ref={anchorRef}>
      <TextField
        {...props}
        aria-activedescendant={
          open && filteredResults[activeIndex]
            ? `${listboxId}-${filteredResults[activeIndex].id}`
            : undefined
        }
        aria-autocomplete={resultList ? "list" : undefined}
        aria-controls={hasDropArea ? listboxId : undefined}
        aria-expanded={hasDropArea ? open : undefined}
        aria-haspopup={hasDropArea ? "listbox" : undefined}
        defaultValue={defaultValue}
        id={fieldId}
        onBlur={onBlur}
        onChange={handleChange}
        onFocus={(event) => {
          if (hasDropArea) setOpen(true);
          onFocus?.(event);
        }}
        onKeyDown={handleKeyDown}
        prefixIcon={prefixIcon ?? <SearchGlyph />}
        role={hasDropArea ? "combobox" : props.role}
        type="search"
        value={value}
      />

      <FloatingPortal
        align={searchDropAreaAlign}
        anchorRef={anchorRef}
        open={open && hasDropArea}
        width={anchorRef.current?.getBoundingClientRect().width}
      >
        <div
          className={cn(
            "max-h-80 min-w-0 w-full max-w-full overflow-x-hidden overflow-y-auto overscroll-contain rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1.5 shadow-[var(--uhuru-shadow-md)]",
            searchDropAreaClassName,
          )}
          id={listboxId}
          role={resultList ? "listbox" : "region"}
        >
          {resultList ? (
            filteredResults.length ? (
              <div className="grid min-w-0 max-w-full gap-1">
                {filteredResults.map((result, index) => (
                  <button
                    aria-disabled={result.disabled}
                    aria-selected={index === activeIndex}
                    className={cn(
                      "flex min-w-0 w-full max-w-full items-center gap-2.5 overflow-hidden rounded-[var(--uhuru-radius-control)] px-3 py-2 text-left transition",
                      index === activeIndex
                        ? "bg-[var(--uhuru-surface-muted)]"
                        : "hover:bg-[var(--uhuru-surface-muted)]",
                      result.disabled ? "cursor-not-allowed opacity-50" : "",
                    )}
                    disabled={result.disabled}
                    id={`${listboxId}-${result.id}`}
                    key={result.id}
                    onClick={() => selectResult(result)}
                    onMouseEnter={() => setActiveIndex(index)}
                    role="option"
                    type="button"
                  >
                    {result.leading ? (
                      <span className="grid h-5 w-5 shrink-0 place-items-center text-[var(--uhuru-text-secondary)] [&_svg]:h-4 [&_svg]:w-4">
                        {result.leading}
                      </span>
                    ) : null}
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm font-medium text-[var(--uhuru-text-primary)]">
                        {result.label}
                      </span>
                      {result.description ? (
                        <span className="block truncate text-xs text-[var(--uhuru-text-secondary)]">
                          {result.description}
                        </span>
                      ) : null}
                    </span>
                    {result.trailing ? (
                      <span className="min-w-0 max-w-[35%] shrink truncate text-right text-xs text-[var(--uhuru-text-tertiary)]">
                        {result.trailing}
                      </span>
                    ) : null}
                  </button>
                ))}
              </div>
            ) : (
              <div className="px-3 py-5 text-center text-sm text-[var(--uhuru-text-secondary)]">
                {emptyMessage}
              </div>
            )
          ) : customContent}
        </div>
      </FloatingPortal>
    </div>
  );
}