import { useEffect, useState } from "react"
import { Command } from "cmdk"
import { NAV, type ViewId } from "@/nav"

export function CommandPalette({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault()
        setOpen((o) => !o)
      }
    }
    document.addEventListener("keydown", onKey)
    return () => document.removeEventListener("keydown", onKey)
  }, [])

  return (
    <Command.Dialog
      open={open}
      onOpenChange={setOpen}
      label="Befehlspalette"
      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[12vh]"
      onClick={() => setOpen(false)}
    >
      <div
        className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <Command.Input
          autoFocus
          placeholder="Springe zu… (Modelle, Routing, System …)"
          className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted-foreground"
        />
        <Command.List className="max-h-80 overflow-y-auto p-2">
          <Command.Empty className="px-3 py-6 text-center text-sm text-muted-foreground">
            Nichts gefunden.
          </Command.Empty>
          <Command.Group heading="Bereiche" className="px-1 py-1 text-xs text-muted-foreground">
            {NAV.map((item) => (
              <Command.Item
                key={item.id}
                value={`${item.label} ${item.hint}`}
                onSelect={() => {
                  onNavigate(item.id)
                  setOpen(false)
                }}
                className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground aria-selected:bg-accent aria-selected:text-accent-foreground"
              >
                <item.icon className="h-4 w-4 text-primary" />
                <span>{item.label}</span>
                <span className="ml-auto truncate text-xs text-muted-foreground">{item.hint}</span>
              </Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </div>
    </Command.Dialog>
  )
}