audio-ui/components/dialogs/KeyboardShortcutsDialog.tsx

'use client';

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

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

interface ShortcutCategory {
  name: string;
  shortcuts: Array<{
    keys: string[];
    description: string;
  }>;
}

const SHORTCUTS: ShortcutCategory[] = [
  {
    name: 'Playback',
    shortcuts: [
      { keys: ['Space'], description: 'Play / Pause' },
      { keys: ['Home'], description: 'Go to Start' },
      { keys: ['End'], description: 'Go to End' },
      { keys: ['←'], description: 'Seek Backward' },
      { keys: ['→'], description: 'Seek Forward' },
      { keys: ['Ctrl', '←'], description: 'Seek Backward 5s' },
      { keys: ['Ctrl', '→'], description: 'Seek Forward 5s' },
    ],
  },
  {
    name: 'Edit',
    shortcuts: [
      { keys: ['Ctrl', 'Z'], description: 'Undo' },
      { keys: ['Ctrl', 'Shift', 'Z'], description: 'Redo' },
      { keys: ['Ctrl', 'X'], description: 'Cut' },
      { keys: ['Ctrl', 'C'], description: 'Copy' },
      { keys: ['Ctrl', 'V'], description: 'Paste' },
      { keys: ['Delete'], description: 'Delete Selection' },
      { keys: ['Ctrl', 'D'], description: 'Duplicate' },
      { keys: ['Ctrl', 'A'], description: 'Select All' },
    ],
  },
  {
    name: 'View',
    shortcuts: [
      { keys: ['Ctrl', '+'], description: 'Zoom In' },
      { keys: ['Ctrl', '-'], description: 'Zoom Out' },
      { keys: ['Ctrl', '0'], description: 'Fit to View' },
    ],
  },
  {
    name: 'File',
    shortcuts: [
      { keys: ['Ctrl', 'S'], description: 'Save Project' },
      { keys: ['Ctrl', 'K'], description: 'Open Command Palette' },
    ],
  },
];

function KeyboardKey({ keyName }: { keyName: string }) {
  return (
    <kbd className="px-2 py-1 text-xs font-semibold bg-muted border border-border rounded shadow-sm min-w-[2rem] text-center inline-block">
      {keyName}
    </kbd>
  );
}

export function KeyboardShortcutsDialog({ open, onClose }: KeyboardShortcutsDialogProps) {
  if (!open) return null;

  return (
    <Modal open={open} onClose={onClose} title="">
      <div className="p-6 max-w-2xl">
        {/* Header */}
        <div className="flex items-start justify-between mb-6">
          <div className="flex items-center gap-3">
            <Keyboard className="h-6 w-6 text-primary" />
            <h2 className="text-xl font-semibold">Keyboard Shortcuts</h2>
          </div>
          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Shortcuts Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {SHORTCUTS.map((category) => (
            <div key={category.name} className="space-y-3">
              <h3 className="text-sm font-semibold text-primary border-b border-border pb-2">
                {category.name}
              </h3>
              <div className="space-y-2">
                {category.shortcuts.map((shortcut, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between gap-4 py-1.5"
                  >
                    <span className="text-sm text-foreground flex-1">
                      {shortcut.description}
                    </span>
                    <div className="flex items-center gap-1 flex-shrink-0">
                      {shortcut.keys.map((key, keyIndex) => (
                        <React.Fragment key={keyIndex}>
                          {keyIndex > 0 && (
                            <span className="text-muted-foreground text-xs mx-0.5">+</span>
                          )}
                          <KeyboardKey keyName={key} />
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div className="mt-6 pt-4 border-t border-border">
          <p className="text-xs text-muted-foreground text-center">
            Press <KeyboardKey keyName="Ctrl" /> + <KeyboardKey keyName="K" /> to open the
            command palette and search for more actions
          </p>
        </div>

        {/* Close Button */}
        <div className="mt-6 flex justify-end">
          <Button onClick={onClose} variant="default">
            Close
          </Button>
        </div>
      </div>
    </Modal>
  );
}