'use client';

import { useEffect, useCallback } from 'react';

interface KeyboardShortcut {
    key: string;
    ctrl?: boolean;
    shift?: boolean;
    alt?: boolean;
    callback: () => void;
    description?: string;
}

export function useKeyboardShortcut(shortcuts: KeyboardShortcut[]) {
    const handleKeyDown = useCallback(
        (event: KeyboardEvent) => {
            shortcuts.forEach((shortcut) => {
                const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
                const ctrlMatches = !shortcut.ctrl || (event.ctrlKey || event.metaKey);
                const shiftMatches = !shortcut.shift || event.shiftKey;
                const altMatches = !shortcut.alt || event.altKey;

                // If all conditions match
                if (keyMatches && ctrlMatches && shiftMatches && altMatches) {
                    // Only trigger if exact modifiers match (not just minimum)
                    const exactCtrl = shortcut.ctrl === (event.ctrlKey || event.metaKey);
                    const exactShift = shortcut.shift === event.shiftKey;
                    const exactAlt = shortcut.alt === event.altKey;

                    if (exactCtrl && exactShift && exactAlt) {
                        event.preventDefault();
                        shortcut.callback();
                    }
                }
            });
        },
        [shortcuts]
    );

    useEffect(() => {
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [handleKeyDown]);
}

// Global shortcuts component
export function GlobalShortcuts() {
    useKeyboardShortcut([
        {
            key: '/',
            ctrl: true,
            callback: () => {
                // Show keyboard shortcuts panel
                console.log('Show shortcuts panel');
            },
            description: 'Show keyboard shortcuts',
        },
    ]);

    return null;
}