apps/matrix-frontend/src/hooks/useKeyboardShortcuts.ts

import { useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from '@/hooks/use-toast';

interface ShortcutAction {
  key: string;
  ctrlKey?: boolean;
  shiftKey?: boolean;
  altKey?: boolean;
  description: string;
  action: () => void;
}

export const useKeyboardShortcuts = () => {
  const navigate = useNavigate();

  const shortcuts: ShortcutAction[] = [
    {
      key: 'd',
      ctrlKey: true,
      description: 'Gå til Dashboard',
      action: () => navigate('/dashboard'),
    },
    {
      key: 'p',
      ctrlKey: true,
      description: 'Gå til Mine Sider',
      action: () => navigate('/pages'),
    },
    {
      key: 'g',
      ctrlKey: true,
      description: 'Gå til Widget Gallery',
      action: () => navigate('/gallery'),
    },
    {
      key: 'h',
      ctrlKey: true,
      description: 'Gå til Hjem',
      action: () => navigate('/'),
    },
    {
      key: '/',
      ctrlKey: true,
      description: 'Vis genveje',
      action: () => {
        toast({
          title: 'Keyboard Shortcuts',
          description: 'Ctrl+D: Dashboard | Ctrl+P: Sider | Ctrl+G: Gallery | Ctrl+H: Hjem | Ctrl+?: Hjælp',
        });
      },
    },
  ];

  const handleKeyDown = useCallback((event: KeyboardEvent) => {
    // Don't trigger shortcuts when typing in inputs
    const target = event.target as HTMLElement;
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
      return;
    }

    for (const shortcut of shortcuts) {
      const ctrlMatch = shortcut.ctrlKey ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey;
      const shiftMatch = shortcut.shiftKey ? event.shiftKey : !event.shiftKey;
      const altMatch = shortcut.altKey ? event.altKey : !event.altKey;
      
      if (
        event.key.toLowerCase() === shortcut.key.toLowerCase() &&
        ctrlMatch &&
        shiftMatch &&
        altMatch
      ) {
        event.preventDefault();
        shortcut.action();
        return;
      }
    }
  }, [shortcuts]);

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

  return shortcuts;
};

export const shortcutsList = [
  { keys: 'Ctrl + D', description: 'Gå til Dashboard' },
  { keys: 'Ctrl + P', description: 'Gå til Mine Sider' },
  { keys: 'Ctrl + G', description: 'Gå til Widget Gallery' },
  { keys: 'Ctrl + H', description: 'Gå til Hjem' },
  { keys: 'Ctrl + /', description: 'Vis genveje' },
];