import { Modal, Typography, Tag, theme, Divider } from 'antd';
import {
  getShortcutsGrouped,
  categoryNames,
  formatShortcut,
  type ShortcutCategory,
  type ShortcutDefinition,
} from '@/lib/keyboardShortcuts';

const { Title, Text } = Typography;
const { useToken } = theme;

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

/**
 * ShortcutsHelpModal - Display all keyboard shortcuts
 * Opened with Cmd+/
 */
export function ShortcutsHelpModal({ open, onClose }: ShortcutsHelpModalProps) {
  const groupedShortcuts = getShortcutsGrouped();

  // Category order for display
  const categoryOrder: ShortcutCategory[] = [
    'global',
    'navigation',
    'bogforing',
    'faktura',
    'bank',
    'kunder',
    'produkter',
  ];

  return (
    <Modal
      open={open}
      onCancel={onClose}
      footer={null}
      title="Tastaturgenveje"
      centered
      width={600}
      styles={{
        body: { maxHeight: '70vh', overflowY: 'auto' },
      }}
    >
      <Text type="secondary" style={{ display: 'block', marginBottom: 16 }}>
        Brug disse genveje til at navigere hurtigere i applikationen.
      </Text>

      {categoryOrder.map((category, index) => {
        const shortcuts = groupedShortcuts[category];
        if (!shortcuts || shortcuts.length === 0) return null;

        return (
          <div key={category}>
            {index > 0 && <Divider style={{ margin: '16px 0' }} />}
            <Title level={5} style={{ marginBottom: 12 }}>
              {categoryNames[category]}
            </Title>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {shortcuts.map((shortcut) => (
                <ShortcutRow key={shortcut.id} shortcut={shortcut} />
              ))}
            </div>
          </div>
        );
      })}

      <Divider style={{ margin: '16px 0' }} />

      <Text type="secondary" style={{ fontSize: 12 }}>
        Tip: Tryk <Tag style={{ margin: '0 4px' }}>⌘K</Tag> for at abne
        kommandopaletten og hurtigt navigere til enhver side.
      </Text>
    </Modal>
  );
}

interface ShortcutRowProps {
  shortcut: ShortcutDefinition;
}

function ShortcutRow({ shortcut }: ShortcutRowProps) {
  const { token } = useToken();
  const formattedKeys = formatShortcut(shortcut.keys);

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '8px 12px',
        backgroundColor: token.colorFillQuaternary,
        borderRadius: 6,
      }}
    >
      <div>
        <Text>{shortcut.label}</Text>
        {shortcut.description && (
          <Text
            type="secondary"
            style={{ display: 'block', fontSize: 12, marginTop: 2 }}
          >
            {shortcut.description}
          </Text>
        )}
      </div>
      <div style={{ display: 'flex', gap: 4 }}>
        {formattedKeys.split(' ').map((key, i) => (
          <Tag
            key={i}
            style={{
              margin: 0,
              padding: '2px 8px',
              fontSize: 12,
              fontFamily: 'monospace',
              fontWeight: 500,
              backgroundColor: token.colorBgContainer,
              border: `1px solid ${token.colorBorder}`,
              borderRadius: 4,
              boxShadow: `0 1px 0 ${token.colorBorderSecondary}`,
            }}
          >
            {key}
          </Tag>
        ))}
      </div>
    </div>
  );
}

export default ShortcutsHelpModal;
