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

const SHORTCUTS = [
  ['1', 'Points mode'], ['2', 'Solid mode'], ['3', 'Wireframe mode'], ['4', 'Flat mode'],
  ['B', 'Toggle bounding box'], ['G', 'Toggle grid'],
  ['Q', 'Rect select tool'], ['W', 'Brush select tool'], ['E', 'Component select'],
  ['R', 'Measure distance'], ['T', 'Measure angle'],
  ['Escape', 'Navigate mode'],
  ['Delete', 'Delete selected faces'],
  ['Ctrl+Z', 'Undo'], ['Ctrl+Shift+Z', 'Redo'],
  ['Ctrl+A', 'Select all'], ['Ctrl+D', 'Deselect all'],
  ['Ctrl+I', 'Import mesh'], ['Ctrl+E', 'Export mesh'],
  ['Ctrl+F', 'Filter search'],
  ['Ctrl+L', 'Toggle layer dialog'],
  ['Home', 'Fit to view'],
  ['Alt+Enter', 'Toggle fullscreen'],
  ['Numpad 1', 'Front view'], ['Numpad 3', 'Right view'], ['Numpad 7', 'Top view'],
];

export function KeyboardShortcutsDialog({ onClose }: Props) {
  return (
    <div data-testid="shortcuts-dialog" style={{
      position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(0,0,0,0.4)', zIndex: 9999,
    }}>
      <div style={{ background: '#f0f0f0', border: '1px solid #888', borderRadius: 4, padding: 16, minWidth: 400, maxHeight: '70vh', overflow: 'auto' }}>
        <h3 style={{ margin: '0 0 12px', fontSize: 14 }}>Keyboard Shortcuts</h3>
        <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
          <tbody>
            {SHORTCUTS.map(([key, desc], i) => (
              <tr key={i} data-testid="shortcut-row" style={{ borderBottom: '1px solid #ddd' }}>
                <td style={{ padding: '3px 8px', fontWeight: 'bold', fontFamily: 'monospace', width: 120 }}>{key}</td>
                <td style={{ padding: '3px 8px' }}>{desc}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ marginTop: 12, textAlign: 'right' }}>
          <button onClick={onClose} style={{ padding: '4px 16px', fontSize: 12 }}>Close</button>
        </div>
      </div>
    </div>
  );
}
