import { useState, useEffect, useCallback, useRef } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Search, Command, FileText, LayoutDashboard, Package, Users, Store, Settings, ArrowRight } from 'lucide-react'

interface CommandItem {
  id: string
  label: string
  description?: string
  icon?: React.ReactNode
  href?: string
  onSelect?: () => void
  category?: string
}

interface CommandPaletteProps {
  items: CommandItem[]
  placeholder?: string
}

export function CommandPalette({ items, placeholder = 'Search...' }: CommandPaletteProps) {
  const [open, setOpen] = useState(false)
  const [query, setQuery] = useState('')
  const [selectedIndex, setSelectedIndex] = useState(0)
  const inputRef = useRef<HTMLInputElement>(null)

  const filtered = items.filter(i =>
    i.label.toLowerCase().includes(query.toLowerCase()) ||
    i.description?.toLowerCase().includes(query.toLowerCase()) ||
    i.category?.toLowerCase().includes(query.toLowerCase())
  )

  const grouped = filtered.reduce((acc, item) => {
    const cat = item.category || 'Other'
    if (!acc[cat]) acc[cat] = []
    acc[cat].push(item)
    return acc
  }, {} as Record<string, CommandItem[]>)

  const flattened = filtered

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault()
        setOpen(prev => !prev)
        setQuery('')
        setSelectedIndex(0)
      }
      if (e.key === 'Escape') setOpen(false)
    }
    document.addEventListener('keydown', handler)
    return () => document.removeEventListener('keydown', handler)
  }, [])

  useEffect(() => {
    setSelectedIndex(0)
  }, [query])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      setSelectedIndex(i => Math.min(i + 1, flattened.length - 1))
    }
    if (e.key === 'ArrowUp') {
      e.preventDefault()
      setSelectedIndex(i => Math.max(i - 1, 0))
    }
    if (e.key === 'Enter' && flattened[selectedIndex]) {
      const item = flattened[selectedIndex]
      if (item.href) window.location.href = item.href
      else item.onSelect?.()
      setOpen(false)
    }
  }

  useEffect(() => {
    if (open) inputRef.current?.focus()
  }, [open])

  return (
    <>
      {/* Trigger button */}
      <button
        onClick={() => setOpen(true)}
        className="hidden lg:flex items-center gap-2 px-3 py-1.5 text-xs text-slate-500 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 hover:text-slate-300 transition-all"
      >
        <Search className="w-3.5 h-3.5" />
        <span>Search...</span>
        <kbd className="ml-4 px-1.5 py-0.5 text-[10px] bg-white/10 rounded font-mono text-slate-400">
          <Command className="w-2.5 h-2.5 inline mr-0.5" />K
        </kbd>
      </button>

      {/* Modal */}
      <AnimatePresence>
        {open && (
          <div className="fixed inset-0 z-[200] flex items-start justify-center pt-[15vh]">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
              onClick={() => setOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: -20 }}
              transition={{ type: 'spring', damping: 25, stiffness: 300 }}
              className="relative w-full max-w-lg glass border border-white/10 rounded-2xl shadow-2xl overflow-hidden"
            >
              <div className="flex items-center gap-3 px-4 py-3 border-b border-white/5">
                <Search className="w-4 h-4 text-slate-400 shrink-0" />
                <input
                  ref={inputRef}
                  value={query}
                  onChange={e => setQuery(e.target.value)}
                  onKeyDown={handleKeyDown}
                  placeholder={placeholder}
                  className="flex-1 bg-transparent text-sm text-white placeholder:text-slate-500 outline-none"
                />
                <kbd className="text-[10px] text-slate-500 font-mono">ESC</kbd>
              </div>

              <div className="max-h-72 overflow-y-auto p-2">
                {query && flattened.length === 0 && (
                  <p className="text-center text-sm text-slate-500 py-8">No results found.</p>
                )}

                {!query && flattened.length === 0 && (
                  <p className="text-center text-sm text-slate-500 py-8">Type to search pages and actions...</p>
                )}

                {Object.entries(grouped).map(([category, items]) => (
                  <div key={category} className="mb-1">
                    <p className="px-3 py-1.5 text-[10px] font-medium text-slate-500 uppercase tracking-wider">
                      {category}
                    </p>
                    {items.map((item, i) => {
                      const globalIdx = flattened.indexOf(item)
                      return (
                        <button
                          key={item.id}
                          onClick={() => { item.onSelect?.(); if (item.href) window.location.href = item.href; setOpen(false) }}
                          className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-all ${
                            globalIdx === selectedIndex ? 'bg-white/10 text-white' : 'text-slate-300 hover:bg-white/5'
                          }`}
                        >
                          <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center shrink-0">
                            {item.icon || <FileText className="w-4 h-4 text-slate-400" />}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm">{item.label}</p>
                            {item.description && (
                              <p className="text-xs text-slate-500 truncate">{item.description}</p>
                            )}
                          </div>
                          <ArrowRight className="w-4 h-4 text-slate-600 shrink-0" />
                        </button>
                      )
                    })}
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  )
}