/**
 * ShortcutsHelpOverlay — Phase 7 keyboard-shortcut reference modal.
 *
 * Opened by `?` from anywhere inside /pilot (the global useKeyboardShortcuts
 * hook skips keypresses inside inputs, so `?` is safe from composer collisions).
 */
import { X } from 'lucide-react'

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

interface Row {
  keys: string[]
  label: string
}

const ROWS: Row[] = [
  { keys: ['⌘', 'K'], label: 'Open command palette' },
  { keys: ['⌘', '↵'], label: 'Send the current message' },
  { keys: ['⌘', 'G'], label: 'Toggle Script Generator for the active fix' },
  { keys: ['?'], label: 'Show this shortcut reference' },
  { keys: ['Esc'], label: 'Close modal / cancel edit' },
]

export function ShortcutsHelpOverlay({ open, onClose }: ShortcutsHelpOverlayProps) {
  if (!open) return null
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label="Keyboard shortcuts"
    >
      <div
        className="relative w-full max-w-md rounded-xl border border-default bg-bg-page shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-4 py-3 border-b border-default">
          <h2 className="font-heading text-sm font-semibold text-heading">
            Keyboard shortcuts
          </h2>
          <button
            onClick={onClose}
            className="p-1 rounded text-muted-foreground hover:text-heading hover:bg-elevated/40 transition-colors"
            aria-label="Close shortcuts"
          >
            <X size={14} />
          </button>
        </div>
        <div className="px-4 py-3 space-y-2">
          {ROWS.map((row) => (
            <div
              key={row.label}
              className="flex items-center justify-between gap-3 text-[0.8125rem]"
            >
              <span className="text-muted-foreground">{row.label}</span>
              <span className="flex items-center gap-1">
                {row.keys.map((k, i) => (
                  <kbd
                    key={i}
                    className="inline-flex items-center justify-center rounded border border-white/[0.06] bg-white/[0.08] px-1.5 py-0.5 text-[0.6875rem] font-mono text-heading min-w-[20px]"
                  >
                    {k}
                  </kbd>
                ))}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default ShortcutsHelpOverlay