"use client";
import { useEffect, useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import { Search, ArrowRight } from "lucide-react";

const pages = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Work", href: "/work" },
  { label: "Experience", href: "/experience" },
  { label: "Skills", href: "/skills" },
  { label: "Zyphron Cloud", href: "/zyphron" },
  { label: "Blog", href: "/blog" },
  { label: "Uses", href: "/uses" },
  { label: "Now", href: "/now" },
  { label: "Resume", href: "/resume" },
  { label: "Contact", href: "/contact" },
  { label: "Guestbook", href: "/guestbook" },
  { label: "Links", href: "/links" },
];

export default function CommandPalette() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const router = useRouter();

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

  const results = useMemo(() => {
    const s = q.toLowerCase();
    if (!s) return pages;
    return pages.filter(p => p.label.toLowerCase().includes(s) || p.href.includes(s));
  }, [q]);

  if (!open) return (
    <button onClick={() => setOpen(true)} aria-label="Open command palette" className="hidden sm:inline-flex items-center gap-2 text-[11px] tracking-widest text-white/40 border border-white/10 rounded-full px-3 py-1.5 hover:text-white hover:border-white/20">
      <Search size={12} /> ⌘K
    </button>
  );

  return (
    <div className="fixed inset-0 z-[70] flex items-start justify-center pt-[20vh] px-4">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setOpen(false)} />
      <div className="relative w-full max-w-[640px] rounded-2xl bg-[#0f1117] border border-white/10 overflow-hidden shadow-2xl">
        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/10">
          <Search size={16} className="text-white/40" />
          <input autoFocus value={q} onChange={e => setQ(e.target.value)} placeholder="Search pages, projects, articles…" className="flex-1 bg-transparent outline-none text-[14px] text-white placeholder:text-white/30" />
          <button onClick={() => setOpen(false)} className="text-[11px] tracking-widest text-white/30 px-2 py-1 border border-white/10 rounded-full">ESC</button>
        </div>
        <div className="max-h-[50vh] overflow-auto p-2">
          {results.map(r => (
            <button key={r.href} onClick={() => { setOpen(false); router.push(r.href); }} className="w-full flex items-center justify-between px-3 py-2.5 rounded-xl hover:bg-white text-white hover:text-black transition text-[13px] font-medium">
              {r.label} <ArrowRight size={14} className="opacity-50" />
            </button>
          ))}
          {results.length === 0 && <p className="text-center text-white/30 text-[13px] py-8">No results</p>}
        </div>
        <div className="px-4 py-2 border-t border-white/10 text-[11px] text-white/30">Press ↑↓ to navigate • Enter to go</div>
      </div>
    </div>
  );
}