"use client";

import { useRouter } from "next/navigation";

import { Command } from "cmdk";

import { motion, AnimatePresence } from "framer-motion";

import { NAV } from "./nav";

import { useUiStore } from "@/stores/ui";

import { springs } from "@/lib/motion";

export function CommandPalette() {

  const router = useRouter();

  const open = useUiStore((s) => s.commandOpen);

  const setOpen = useUiStore((s) => s.setCommandOpen);

  const go = (href: string) => {

    setOpen(false);

    router.push(href);

  };

  return (

    <AnimatePresence>

      {open ? (

        <div className="fixed inset-0 z-[var(--z-modal)] flex items-start justify-center p-4 pt-[14vh]">

          <motion.div

            className="absolute inset-0 bg-black/55 backdrop-blur-sm"

            initial={{ opacity: 0 }}

            animate={{ opacity: 1 }}

            exit={{ opacity: 0 }}

            onClick={() => setOpen(false)}

            aria-hidden

          />

          <motion.div

            initial={{ opacity: 0, scale: 0.97, y: -8 }}

            animate={{ opacity: 1, scale: 1, y: 0, transition: springs.sheet }}

            exit={{ opacity: 0, scale: 0.97, y: -8, transition: { duration: 0.15 } }}

            className="ring-frame relative w-full max-w-lg overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] shadow-[var(--shadow-pop)]"

          >

            <Command label="Command palette" className="w-full">

              <div className="border-b border-[var(--color-border-subtle)] px-4">

                <Command.Input

                  autoFocus

                  placeholder="Jump to a page or search…"

                  className="h-12 w-full bg-transparent text-sm text-[var(--color-fg-primary)] placeholder:text-[var(--color-fg-tertiary)] focus:outline-none"

                />

              </div>

              <Command.List className="max-h-[320px] overflow-y-auto p-2">

                <Command.Empty className="px-3 py-6 text-center text-sm text-[var(--color-fg-tertiary)]">

                  No results.

                </Command.Empty>

                <Command.Group

                  heading="Navigate"

                  className="px-1 text-[10px] font-medium uppercase tracking-wider text-[var(--color-fg-tertiary)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5"

                >

                  {NAV.filter((n) => n.ready).map((item) => (

                    <Command.Item

                      key={item.href}

                      value={item.label}

                      onSelect={() => go(item.href)}

                      className="flex cursor-pointer items-center gap-3 rounded-[var(--radius)] px-3 py-2 text-sm text-[var(--color-fg-secondary)] aria-selected:bg-[var(--color-accent-teal-soft)] aria-selected:text-[var(--color-fg-primary)]"

                    >

                      <item.icon className="h-4 w-4" aria-hidden />

                      {item.label}

                    </Command.Item>

                  ))}

                </Command.Group>

              </Command.List>

            </Command>

          </motion.div>

        </div>

      ) : null}

    </AnimatePresence>

  );

}