figlet-ui/components/ui/KeyboardShortcutsHelp.tsx

'use client';

import * as React from 'react';
import { Card } from './Card';
import { Button } from './Button';
import { X, Keyboard } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

export interface Shortcut {
  key: string;
  description: string;
  modifier?: 'ctrl' | 'shift';
}

const shortcuts: Shortcut[] = [
  { key: '/', description: 'Focus font search' },
  { key: 'Esc', description: 'Clear search / Close dialog' },
  { key: 'D', description: 'Toggle dark/light mode', modifier: 'ctrl' },
  { key: '?', description: 'Show this help dialog', modifier: 'shift' },
];

export function KeyboardShortcutsHelp() {
  const [isOpen, setIsOpen] = React.useState(false);

  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === '?' && e.shiftKey) {
        e.preventDefault();
        setIsOpen(true);
      }
      if (e.key === 'Escape' && isOpen) {
        setIsOpen(false);
      }
    };

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

  if (!isOpen) {
    return (
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setIsOpen(true)}
        title="Keyboard shortcuts (Shift + ?)"
        className="fixed bottom-4 right-4"
      >
        <Keyboard className="h-4 w-4" />
      </Button>
    );
  }

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold flex items-center gap-2">
              <Keyboard className="h-5 w-5" />
              Keyboard Shortcuts
            </h2>
            <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
              <X className="h-4 w-4" />
            </Button>
          </div>

          <div className="space-y-3">
            <div>
              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Navigation</h3>
              {shortcuts.map((shortcut, i) => (
                <div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
                  <span className="text-sm text-muted-foreground">{shortcut.description}</span>
                  <div className="flex gap-1">
                    {shortcut.modifier && (
                      <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
                        {shortcut.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
                      </kbd>
                    )}
                    <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
                      {shortcut.key}
                    </kbd>
                  </div>
                </div>
              ))}
            </div>

            <div>
              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Tips</h3>
              <ul className="text-xs text-muted-foreground space-y-1">
                <li>• Click the Shuffle button for random fonts</li>
                <li>• Use the heart icon to favorite fonts</li>
                <li>• Filter by All, Favorites, or Recent</li>
                <li>• Text alignment and size controls in Preview</li>
              </ul>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}