import { useEffect, useMemo, useRef, useState } from "react";
import { Search, CornerDownLeft, type LucideIcon } from "lucide-react";
import { cn } from "../ui";

export interface Command {
  id: string;
  label: string;
  icon: LucideIcon;
  group?: string;
  keywords?: string;
  run: () => void;
}

function match(c: Command, q: string): boolean {
  if (!q.trim()) return true;
  const hay = (c.label + " " + (c.keywords ?? "") + " " + (c.group ?? "")).toLowerCase();
  return q
    .toLowerCase()
    .split(/\s+/)
    .every((t) => hay.includes(t));
}

// CommandPalette 全局命令面板（⌘K）：搜索 + 键盘上下选择 + Enter 执行 + Esc 关闭。
// 纯前端、两种运行模式通用，是"键盘优先工作站"的入口。
export function CommandPalette({ open, onClose, commands }: { open: boolean; onClose: () => void; commands: Command[] }) {
  const [q, setQ] = useState("");
  const [sel, setSel] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);

  const filtered = useMemo(() => commands.filter((c) => match(c, q)), [commands, q]);

  useEffect(() => {
    if (open) {
      setQ("");
      setSel(0);
      const t = setTimeout(() => inputRef.current?.focus(), 0);
      return () => clearTimeout(t);
    }
  }, [open]);
  useEffect(() => setSel(0), [q]);
  useEffect(() => {
    listRef.current?.querySelector('[data-sel="1"]')?.scrollIntoView({ block: "nearest" });
  }, [sel]);

  if (!open) return null;

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setSel((s) => Math.min(s + 1, filtered.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setSel((s) => Math.max(s - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const c = filtered[sel];
      if (c) {
        c.run();
        onClose();
      }
    } else if (e.key === "Escape") {
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex justify-center bg-black/55 pt-[12vh]" onClick={onClose}>
      <div className="h-fit w-[560px] overflow-hidden rounded-lg border border-line bg-ink-900 shadow-card" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center gap-2 border-b border-line px-3">
          <Search className="h-4 w-4 shrink-0 text-slate-500" />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={onKey}
            placeholder="跳转 · 搜索 · 执行动作…"
            className="h-11 w-full bg-transparent text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none"
          />
          <kbd className="rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-slate-500">esc</kbd>
        </div>
        <ul ref={listRef} className="max-h-80 overflow-auto p-1.5">
          {filtered.length === 0 && <li className="px-3 py-6 text-center text-xs text-slate-600">无匹配命令</li>}
          {filtered.map((c, i) => {
            const Icon = c.icon;
            const on = i === sel;
            return (
              <li
                key={c.id}
                data-sel={on ? "1" : "0"}
                onMouseEnter={() => setSel(i)}
                onClick={() => {
                  c.run();
                  onClose();
                }}
                className={cn("flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-sm", on ? "bg-brand/15 text-brand-400" : "text-slate-300 hover:bg-ink-800")}
              >
                <Icon className={cn("h-4 w-4 shrink-0", on ? "text-brand-400" : "text-slate-500")} />
                <span>{c.label}</span>
                {c.group && <span className={cn("ml-auto text-[10px]", on ? "text-brand-400/70" : "text-slate-600")}>{c.group}</span>}
                {on && <CornerDownLeft className="h-3.5 w-3.5 text-slate-500" />}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}