"use client";
import * as Dialog from "@radix-ui/react-dialog";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Card, Input } from "@/components/ui/basic";
const items = [
  ["Dashboard", "/dashboard"],
  ["Live", "/live"],
  ["Events", "/events"],
  ["Clips", "/clips"],
  ["Cameras", "/cameras"],
  ["Settings", "/settings"],
  ["Profile", "/profile"],
];
export function CommandPalette() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const router = useRouter();
  useEffect(() => {
    const h = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    addEventListener("keydown", h);
    return () => removeEventListener("keydown", h);
  }, []);
  const filtered = items.filter((i) =>
    i[0].toLowerCase().includes(q.toLowerCase()),
  );
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/60" />
        <Dialog.Content className="fixed left-1/2 top-24 w-[92vw] max-w-xl -translate-x-1/2">
          <Card>
            <Dialog.Title>Command palette</Dialog.Title>
            <Input
              className="my-3"
              autoFocus
              placeholder="Search cameras, clips, events, routes…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
            {filtered.map(([label, href]) => (
              <button
                key={href}
                className="block w-full rounded-lg p-3 text-left hover:bg-white/10"
                onClick={() => {
                  router.push(href);
                  setOpen(false);
                }}
              >
                {label}
              </button>
            ))}
          </Card>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}