import { Dialog } from '@/components/ui/dialog';
import { useTranslation } from '@/hooks/useTranslation';
import { KEYBOARD_SHORTCUTS } from '@/config/constants';

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

export function KeyboardShortcutsHelp({
  open,
  onClose,
}: KeyboardShortcutsHelpProps) {
  const { t } = useTranslation();

  const shortcuts = [
    {
      key: KEYBOARD_SHORTCUTS.SEARCH,
      description: t('keyboard.shortcuts.search', 'Focus search or navigate to search page'),
    },
    {
      key: KEYBOARD_SHORTCUTS.NEW_MESSAGE,
      description: t('keyboard.shortcuts.newMessage', 'Open new chat/message'),
    },
    {
      key: KEYBOARD_SHORTCUTS.PLAY_PAUSE,
      description: t('keyboard.shortcuts.playPause', 'Play or pause current track'),
    },
    {
      key: KEYBOARD_SHORTCUTS.NEXT_TRACK,
      description: t('keyboard.shortcuts.nextTrack', 'Play next track'),
    },
    {
      key: KEYBOARD_SHORTCUTS.PREVIOUS_TRACK,
      description: t('keyboard.shortcuts.previousTrack', 'Play previous track'),
    },
    {
      key: KEYBOARD_SHORTCUTS.VOLUME_UP,
      description: t('keyboard.shortcuts.volumeUp', 'Increase volume'),
    },
    {
      key: KEYBOARD_SHORTCUTS.VOLUME_DOWN,
      description: t('keyboard.shortcuts.volumeDown', 'Decrease volume'),
    },
    {
      key: KEYBOARD_SHORTCUTS.MUTE,
      description: t('keyboard.shortcuts.mute', 'Toggle mute'),
    },
    {
      key: 'Ctrl+B / Cmd+B',
      description: t('keyboard.shortcuts.toggleSidebar', 'Toggle sidebar'),
    },
    {
      key: KEYBOARD_SHORTCUTS.ESCAPE,
      description: t('keyboard.shortcuts.escape', 'Close modals or go back'),
    },
    {
      key: KEYBOARD_SHORTCUTS.HELP,
      description: t('keyboard.shortcuts.help', 'Show this help dialog'),
    },
  ];

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={t('keyboard.shortcuts.title', 'Keyboard Shortcuts')}
      size="lg"
    >
      <div className="space-y-3">
        {shortcuts.map((shortcut, index) => (
          <div
            key={index}
            className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 last:border-0"
          >
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {shortcut.description}
            </span>
            <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded">
              {shortcut.key}
            </kbd>
          </div>
        ))}
      </div>
    </Dialog>
  );
}