import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { KEYBOARD_SHORTCUTS } from '@/lib/keyboard-shortcuts';

function KeyboardShortcutsDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const isMac =
    typeof navigator !== 'undefined' &&
    navigator.platform.toLowerCase().includes('mac');

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Keyboard Shortcuts</DialogTitle>
        </DialogHeader>
        <div className="-mx-4 -mb-4 max-h-[70vh] overflow-y-auto overscroll-contain px-4 pb-4">
          <div className="space-y-6">
            {KEYBOARD_SHORTCUTS.map((group) => (
              <div key={group.category}>
                <h4 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  {group.category}
                </h4>
                <div className="space-y-2">
                  {group.shortcuts.map((shortcut, i) => (
                    <div
                      key={i}
                      className="flex items-center justify-between gap-4"
                    >
                      <span className="text-sm">{shortcut.description}</span>
                      <span className="flex shrink-0 items-center gap-1">
                        {shortcut.keys.map((key, ki) => (
                          <span key={ki} className="flex items-center gap-0.5">
                            {ki > 0 && (
                              <span className="text-muted-foreground/50">+</span>
                            )}
                            <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
                              {key === 'Ctrl' ? (isMac ? '⌘' : 'Ctrl') : key}
                            </kbd>
                          </span>
                        ))}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

export { KeyboardShortcutsDialog };
