supervisor-ui/components/ui/KeyboardShortcutsHelp.tsx

'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { X, Keyboard } from 'lucide-react';

interface KeyboardShortcutsHelpProps {
  onClose: () => void;
}

interface ShortcutGroup {
  title: string;
  shortcuts: Array<{
    keys: string[];
    description: string;
  }>;
}

const SHORTCUT_GROUPS: ShortcutGroup[] = [
  {
    title: 'Navigation',
    shortcuts: [
      { keys: ['/'], description: 'Focus search field' },
      { keys: ['j'], description: 'Select next process' },
      { keys: ['k'], description: 'Select previous process' },
      { keys: ['Esc'], description: 'Clear selection / Close modals' },
    ],
  },
  {
    title: 'Actions',
    shortcuts: [
      { keys: ['r'], description: 'Refresh process list' },
      { keys: ['Space'], description: 'Toggle process selection' },
      { keys: ['a'], description: 'Select all processes' },
      { keys: ['s'], description: 'Start selected processes' },
      { keys: ['x'], description: 'Stop selected processes' },
      { keys: ['t'], description: 'Restart selected processes' },
    ],
  },
  {
    title: 'General',
    shortcuts: [
      { keys: ['?'], description: 'Show keyboard shortcuts (this dialog)' },
    ],
  },
];

export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
      <Card className="w-full max-w-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Keyboard className="h-5 w-5" />
                Keyboard Shortcuts
              </CardTitle>
              <CardDescription className="mt-1">
                Use these keyboard shortcuts to navigate and control processes
              </CardDescription>
            </div>
            <Button variant="ghost" size="icon" onClick={onClose}>
              <X className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>

        <CardContent className="space-y-6">
          {SHORTCUT_GROUPS.map((group) => (
            <div key={group.title}>
              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                {group.title}
              </h3>
              <div className="space-y-2">
                {group.shortcuts.map((shortcut, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-accent/5"
                  >
                    <span className="text-sm">{shortcut.description}</span>
                    <div className="flex gap-1">
                      {shortcut.keys.map((key, keyIndex) => (
                        <kbd
                          key={keyIndex}
                          className="px-2 py-1 text-xs font-semibold text-foreground bg-muted border border-border rounded shadow-sm min-w-[2rem] text-center"
                        >
                          {key}
                        </kbd>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          <div className="pt-4 border-t border-border">
            <p className="text-xs text-muted-foreground">
              Note: Most shortcuts are disabled when typing in input fields. Press{' '}
              <kbd className="px-1 py-0.5 text-xs font-semibold bg-muted border border-border rounded">
                Esc
              </kbd>{' '}
              to exit input fields and enable shortcuts.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}