import React, { useState } from 'react';
import { Keyboard } from 'lucide-react';
import { cn } from '@/utils';

export function CanvasShortcuts() {
    const [isOpen, setIsOpen] = useState(false);

    const shortcuts = [
        { key: '⌘/Ctrl + S', desc: '保存' },
        { key: '⌘/Ctrl + Z', desc: '撤销' },
        { key: '⌘/Ctrl + ⇧ + Z', desc: '重做' },
        { key: '⌘/Ctrl + A', desc: '全选' },
        { key: '⌘/Ctrl + D', desc: '复制选中' },
        { key: '⌘/Ctrl + G', desc: '创建分组' },
        { key: '⌘/Ctrl + Q', desc: '生成队列' },
        { key: '⌘/Ctrl + B', desc: '批量生成' },
        { key: '⌘/Ctrl + T', desc: '提示词模板库' },
        { key: '⌘/Ctrl + C', desc: '复制' },
        { key: '⌘/Ctrl + V', desc: '粘贴' },
        { key: 'Del / Backspace', desc: '删除' },
        { key: 'Esc', desc: '取消选择' },
        { key: 'Alt + ← / →', desc: '切换画布' },
        { key: '⌘/Ctrl + 0', desc: '适应视图' },
        { key: '⌘/Ctrl + +/-', desc: '缩放' },
        { key: 'F11', desc: '全屏' },
        { key: 'Space + 拖拽', desc: '平移画布' },
        { key: 'Scroll', desc: '缩放画布' },
    ];

    return (
        <div className="absolute bottom-6 right-6 z-50 flex flex-col items-end gap-2">
            <div 
                className={cn(
                    "origin-bottom-right transition-all duration-300 ease-spring",
                    isOpen 
                        ? "opacity-100 scale-100 translate-y-0 mb-2" 
                        : "opacity-0 scale-90 translate-y-2 pointer-events-none absolute bottom-full right-0 mb-0"
                )}
            >
                <div className="w-64 p-4 bg-black/40 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl">
                    <div className="flex items-center justify-between mb-3 pb-2 border-b border-white/10">
                        <span className="text-xs font-medium text-white/90">快捷键列表</span>
                        <span className="text-[10px] text-muted-foreground">Keyboard Shortcuts</span>
                    </div>
                    <div className="space-y-2">
                        {shortcuts.map((item, index) => (
                            <div key={index} className="flex items-center justify-between text-xs group">
                                <span className="text-muted-foreground group-hover:text-white/80 transition-colors">{item.desc}</span>
                                <kbd className="px-1.5 py-0.5 bg-white/5 group-hover:bg-white/10 rounded border border-white/5 text-white/90 font-mono text-[10px] min-w-[20px] text-center transition-colors">
                                    {item.key}
                                </kbd>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            <button
                onClick={() => setIsOpen(!isOpen)}
                className={cn(
                    "group relative p-2 rounded-full shadow-xl transition-all duration-300 hover:scale-105 active:scale-95",
                    isOpen 
                        ? "bg-white text-black border-transparent" 
                        : "bg-black/40 hover:bg-black/60 backdrop-blur-md border border-white/10 text-muted-foreground hover:text-white"
                )}
            >
                <Keyboard size={18} strokeWidth={2} />
                
                {/* Tooltip */}
                {!isOpen && (
                    <div className="absolute right-full mr-3 top-1/2 -translate-y-1/2 px-2 py-1 bg-black/90 backdrop-blur-md rounded-md border border-white/10 text-[10px] text-white font-medium whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                        快捷键
                    </div>
                )}
            </button>
        </div>
    );
}
