import {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import { cn } from "../../lib/cn";
import { Button } from "../button";
import { EmptyState } from "../feedback";
import {
  fieldClassName,
  PrefixFieldShell,
  SearchGlyph,
} from "../inputs/shared";

export type CommandPaletteCommand = {
  description?: string;
  group?: string;
  label: string;
  onSelect: () => void;
  shortcut?: string;
};

export function CommandPalette({
  commands,
  dismissable = true,
  isOpen,
  onOpenChange,
  placeholder = "Search commands",
  title = "Command palette",
}: {
  commands: CommandPaletteCommand[];
  dismissable?: boolean;
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  placeholder?: string;
  title?: string;
}) {
  const generatedId = useId();
  const panelRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const [search, setSearch] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);
  const filteredCommands = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();
    if (!normalizedSearch) {
      return commands;
    }

    return commands.filter((command) => {
      const haystack = `${command.group ?? ""} ${command.label} ${command.description ?? ""}`.toLowerCase();
      return haystack.includes(normalizedSearch);
    });
  }, [commands, search]);
  const groupedCommands = useMemo(() => {
    return filteredCommands.reduce<Array<{ commands: CommandPaletteCommand[]; group?: string }>>(
      (groups, command) => {
        const lastGroup = groups[groups.length - 1];
        if (lastGroup?.group === command.group) {
          lastGroup.commands.push(command);
          return groups;
        }

        groups.push({ group: command.group, commands: [command] });
        return groups;
      },
      [],
    );
  }, [filteredCommands]);

  useEffect(() => {
    if (isOpen) {
      inputRef.current?.focus();
      setActiveIndex(0);
      setSearch("");
    }
  }, [isOpen]);

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

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

    if (isOpen) {
      window.addEventListener("pointerdown", handlePointerDown);
      window.addEventListener("keydown", handleEscape);
    }

    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, [dismissable, isOpen, onOpenChange]);

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

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

  return (
    <div
      aria-labelledby={`${generatedId}-title`}
      aria-modal="true"
      className={cn(
        "fixed inset-0 z-50 flex items-start justify-center bg-[var(--uhuru-overlay-scrim-strong)] p-4 pt-10 sm:p-6 sm:pt-16",
        isOpen ? "" : "pointer-events-none opacity-0",
      )}
      role="dialog"
    >
      <div
        className="grid w-full max-w-2xl gap-4 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-4 shadow-[var(--uhuru-shadow-lg)] sm:p-5"
        ref={panelRef}
      >
        <div className="flex items-start justify-between gap-4">
          <div className="grid gap-1">
            <p
              className="m-0 text-[11px] uppercase tracking-[0.14em] text-[var(--uhuru-text-tertiary)]"
              id={`${generatedId}-title`}
            >
              {title}
            </p>
            <p className="m-0 text-sm text-[var(--uhuru-text-secondary)]">
              Type to search and press enter to run a command.
            </p>
          </div>
          <Button onClick={() => onOpenChange(false)} tone="secondary">
            Close
          </Button>
        </div>

        <PrefixFieldShell prefixIcon={<SearchGlyph />}>
          <input
            className={cn(fieldClassName(false), "pl-12")}
            onChange={(event) => setSearch(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "ArrowDown") {
                event.preventDefault();
                moveActive(1);
                return;
              }

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

              if (event.key === "Enter") {
                event.preventDefault();
                const command = filteredCommands[activeIndex];
                if (command) {
                  command.onSelect();
                  onOpenChange(false);
                }
              }
            }}
            placeholder={placeholder}
            ref={inputRef}
            value={search}
          />
        </PrefixFieldShell>

        <div className="max-h-[min(56vh,28rem)] overflow-auto pr-1">
          {filteredCommands.length > 0 ? (
            <div className="grid gap-4">
              {groupedCommands.map((group, groupIndex) => (
                <div className="grid gap-2" key={`${group.group ?? "commands"}-${groupIndex}`}>
                  {group.group ? (
                    <p className="m-0 px-1 text-[10px] uppercase tracking-[0.18em] text-[var(--uhuru-text-tertiary)]">
                      {group.group}
                    </p>
                  ) : null}
                  <div className="grid gap-2">
                    {group.commands.map((command) => {
                      const index = filteredCommands.findIndex((candidate) => candidate === command);
                      const isActive = index === activeIndex;

                      return (
                        <button
                          className={cn(
                            "flex w-full items-center justify-between gap-4 rounded-[var(--uhuru-radius-control)] border px-4 py-3 text-left transition",
                            isActive
                              ? "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-surface-muted)]"
                              : "border-[var(--uhuru-border-subtle)] hover:bg-[var(--uhuru-surface-muted)]",
                          )}
                          key={`${command.group ?? "command"}-${command.label}`}
                          onClick={() => {
                            command.onSelect();
                            onOpenChange(false);
                          }}
                          onMouseEnter={() => setActiveIndex(index)}
                          type="button"
                        >
                          <span className="grid gap-1">
                            <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">
                              {command.label}
                            </span>
                            {command.description ? (
                              <span className="text-sm text-[var(--uhuru-text-secondary)]">
                                {command.description}
                              </span>
                            ) : null}
                          </span>
                          <span className="grid justify-items-end gap-1">
                            {command.shortcut ? (
                              <span className="text-[11px] text-[var(--uhuru-text-secondary)]">
                                {command.shortcut}
                              </span>
                            ) : null}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="rounded-[var(--uhuru-radius-lg)] border border-dashed border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] p-4">
              <EmptyState
                description="Try a different keyword or add more commands."
                title="No commands found"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}