import { useState } from 'react'
import useKeyboardShortcuts from '../hooks/useKeyboardShortcuts'

const GLOBAL_SHORTCUTS = [
  { keys: '?', description: 'Zobrazit klávesové zkratky' },
  { keys: 'Ctrl + N', description: 'Nový záznam' },
  { keys: 'Ctrl + S', description: 'Uložit' },
  { keys: 'Escape', description: 'Zavřít modal / zrušit' },
  { keys: '/', description: 'Hledat' },
]

export default function ShortcutsHelp() {
  const [open, setOpen] = useState(false)

  useKeyboardShortcuts([
    { key: '?', shift: true, handler: () => setOpen(prev => !prev) },
    { key: 'Escape', handler: () => setOpen(false), when: open },
  ])

  if (!open) return null

  return (
    <div className="admin-modal-overlay" onClick={() => setOpen(false)}>
      <div className="admin-modal" style={{ maxWidth: 420 }} onClick={e => e.stopPropagation()}>
        <div className="admin-modal-header">
          <h3>Klávesové zkratky</h3>
          <button className="admin-modal-close" onClick={() => setOpen(false)}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>
        <div className="admin-modal-body">
          <table className="admin-table" style={{ minWidth: 'auto' }}>
            <tbody>
              {GLOBAL_SHORTCUTS.map(s => (
                <tr key={s.keys}>
                  <td style={{ width: 120 }}>
                    <kbd className="admin-kbd">{s.keys}</kbd>
                  </td>
                  <td>{s.description}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}