import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogBody } from '@/components/ui/dialog';
import { Keyboard } from 'lucide-react';

interface KeyboardShortcutsPanelProps {
  open: boolean;
  onClose: () => void;
}

interface Shortcut {
  keys: string[];
  description: string;
  category: string;
}

const shortcuts: Shortcut[] = [
  // 基本操作
  { keys: ['Ctrl', 'S'], description: '保存工作流', category: '基本操作' },
  { keys: ['Ctrl', 'Z'], description: '撤销', category: '基本操作' },
  { keys: ['Ctrl', 'Y'], description: '重做', category: '基本操作' },
  { keys: ['Ctrl', 'Shift', 'Z'], description: '重做', category: '基本操作' },
  { keys: ['?'], description: '显示快捷键', category: '基本操作' },
  
  // 编辑操作
  { keys: ['Ctrl', 'C'], description: '复制选中节点', category: '编辑操作' },
  { keys: ['Ctrl', 'V'], description: '粘贴节点', category: '编辑操作' },
  { keys: ['Ctrl', 'A'], description: '全选节点', category: '编辑操作' },
  { keys: ['Delete'], description: '删除选中节点', category: '编辑操作' },
  { keys: ['Backspace'], description: '删除选中节点', category: '编辑操作' },
  
  // 视图操作
  { keys: ['Ctrl', '+'], description: '放大画布', category: '视图操作' },
  { keys: ['Ctrl', '-'], description: '缩小画布', category: '视图操作' },
  { keys: ['Ctrl', '0'], description: '适应视图', category: '视图操作' },
  { keys: ['Space', '+', '拖动'], description: '平移画布', category: '视图操作' },
  
  // 节点操作
  { keys: ['双击节点'], description: '配置节点', category: '节点操作' },
  { keys: ['双击边'], description: '配置连接条件', category: '节点操作' },
  { keys: ['Ctrl', '+', '点击'], description: '多选节点', category: '节点操作' },
];

const KeyboardShortcutsPanel: React.FC<KeyboardShortcutsPanelProps> = ({ open, onClose }) => {
  // 按分类分组快捷键
  const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
    if (!acc[shortcut.category]) {
      acc[shortcut.category] = [];
    }
    acc[shortcut.category].push(shortcut);
    return acc;
  }, {} as Record<string, Shortcut[]>);

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Keyboard className="h-5 w-5" />
            键盘快捷键
          </DialogTitle>
          <DialogDescription>
            查看所有可用的键盘快捷键，提升工作效率
          </DialogDescription>
        </DialogHeader>

        <DialogBody>
          <div className="grid grid-cols-2 gap-6">
            {Object.entries(groupedShortcuts).map(([category, items]) => (
              <div key={category}>
                <h3 className="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">
                  {category}
                </h3>
                <div className="space-y-2">
                  {items.map((shortcut, index) => (
                    <div key={index} className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">{shortcut.description}</span>
                      <div className="flex items-center gap-1">
                        {shortcut.keys.map((key, keyIndex) => (
                          <React.Fragment key={keyIndex}>
                            {keyIndex > 0 && (
                              <span className="text-gray-400 text-xs mx-0.5">+</span>
                            )}
                            <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded shadow-sm">
                              {key}
                            </kbd>
                          </React.Fragment>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="text-xs text-gray-500 text-center pt-4 mt-4 border-t">
            提示：按 <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-gray-100 border border-gray-300 rounded">?</kbd> 键可随时打开此面板
          </div>
        </DialogBody>
      </DialogContent>
    </Dialog>
  );
};

export default KeyboardShortcutsPanel;

