'use client';

import { useState, useEffect, useRef } from 'react';
import { Search, FileText, Users, Package, TrendingUp, Command } from 'lucide-react';
import { useKeyboardShortcut } from '../hooks/use-keyboard-shortcut';

interface CommandItem {
    id: string;
    label: string;
    category: string;
    icon?: React.ComponentType<{ className?: string }>;
    onSelect: () => void;
    keywords?: string[];
}

interface CommandPaletteProps {
    items?: CommandItem[];
}

export function CommandPalette({ items = [] }: CommandPaletteProps) {
    const [isOpen, setIsOpen] = useState(false);
    const [search, setSearch] = useState('');
    const [selectedIndex, setSelectedIndex] = useState(0);
    const inputRef = useRef<HTMLInputElement>(null);

    //  Default items
    const defaultItems: CommandItem[] = [
        {
            id: 'new-delivery',
            label: 'New Delivery',
            category: 'Actions',
            icon: Package,
            onSelect: () => console.log('New delivery'),
            keywords: ['create', 'add', 'record'],
        },
        {
            id: 'view-plans',
            label: 'Supply Plans',
            category: 'Navigation',
            icon: FileText,
            onSelect: () => console.log('Supply plans'),
        },
        {
            id: 'users',
            label: 'Manage Users',
            category: 'Navigation',
            icon: Users,
            onSelect: () => console.log('Users'),
        },
        {
            id: 'metrics',
            label: 'View Metrics',
            category: 'Navigation',
            icon: TrendingUp,
            onSelect: () => console.log('Metrics'),
        },
    ];

    const allItems = [...defaultItems, ...items];

    // Filter items based on search
    const filteredItems = search
        ? allItems.filter((item) => {
            const searchLower = search.toLowerCase();
            return (
                item.label.toLowerCase().includes(searchLower) ||
                item.category.toLowerCase().includes(searchLower) ||
                item.keywords?.some((k) => k.includes(searchLower))
            );
        })
        : allItems;

    // Group by category
    const groupedItems = filteredItems.reduce((acc, item) => {
        if (!acc[item.category]) acc[item.category] = [];
        acc[item.category].push(item);
        return acc;
    }, {} as Record<string, CommandItem[]>);

    // Keyboard shortcut to open
    useKeyboardShortcut([
        {
            key: 'k',
            ctrl: true,
            callback: () => setIsOpen(true),
        },
    ]);

    // Close on Escape
    useEffect(() => {
        const handleEscape = (e: KeyboardEvent) => {
            if (e.key === 'Escape') setIsOpen(false);
        };
        if (isOpen) {
            document.addEventListener('keydown', handleEscape);
            inputRef.current?.focus();
        }
        return () => document.removeEventListener('keydown', handleEscape);
    }, [isOpen]);

    // Arrow key navigation
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                setSelectedIndex((i) => Math.min(filteredItems.length - 1, i + 1));
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                setSelectedIndex((i) => Math.max(0, i - 1));
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (filteredItems[selectedIndex]) {
                    filteredItems[selectedIndex].onSelect();
                    setIsOpen(false);
                    setSearch('');
                }
            }
        };

        if (isOpen) {
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [isOpen, selectedIndex, filteredItems]);

    // Reset selection when search changes
    useEffect(() => {
        setSelectedIndex(0);
    }, [search]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[20vh] backdrop-blur-sm animate-fade-in">
            <div className="w-full max-w-2xl rounded-lg border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900 animate-slide-in-top">
                {/* Search Input */}
                <div className="flex items-center gap-3 border-b border-slate-200 px-4 py-3 dark:border-slate-700">
                    <Search className="h-5 w-5 text-slate-400" />
                    <input
                        ref={inputRef}
                        type="text"
                        placeholder="Search or type a command..."
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-white"
                    />
                    <kbd className="hidden rounded bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600 sm:block dark:bg-slate-800 dark:text-slate-400">
                        Esc
                    </kbd>
                </div>

                {/* Results */}
                <div className="max-h-96 overflow-y-auto p-2">
                    {filteredItems.length === 0 ? (
                        <div className="py-12 text-center text-sm text-slate-500">
                            No results found
                        </div>
                    ) : (
                        Object.entries(groupedItems).map(([category, categoryItems]) => (
                            <div key={category} className="mb-4 last:mb-0">
                                <div className="mb-1 px-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                                    {category}
                                </div>
                                {categoryItems.map((item, index) => {
                                    const globalIndex = filteredItems.indexOf(item);
                                    const Icon = item.icon || FileText;
                                    return (
                                        <button
                                            key={item.id}
                                            onClick={() => {
                                                item.onSelect();
                                                setIsOpen(false);
                                                setSearch('');
                                            }}
                                            className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors ${globalIndex === selectedIndex
                                                    ? 'bg-brand text-white'
                                                    : 'text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
                                                }`}
                                        >
                                            <Icon className="h-4 w-4 flex-shrink-0" />
                                            <span>{item.label}</span>
                                        </button>
                                    );
                                })}
                            </div>
                        ))
                    )}
                </div>

                {/* Footer */}
                <div className="flex items-center justify-between border-t border-slate-200 px-4 py-2 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
                    <div className="flex items-center gap-4">
                        <span className="flex items-center gap-1">
                            <kbd className="rounded bg-slate-100 px-1.5 py-0.5 font-mono dark:bg-slate-800">↑↓</kbd>
                            Navigate
                        </span>
                        <span className="flex items-center gap-1">
                            <kbd className="rounded bg-slate-100 px-1.5 py-0.5 font-mono dark:bg-slate-800">Enter</kbd>
                            Select
                        </span>
                    </div>
                    <span className="flex items-center gap-1">
                        <Command className="h-3 w-3" />
                        <span>+</span>
                        <kbd className="rounded bg-slate-100 px-1.5 py-0.5 font-mono dark:bg-slate-800">K</kbd>
                    </span>
                </div>
            </div>
        </div>
    );
}