import { usePhotoStore } from '../store/photoStore'

export function KeyboardHints() {
  const selectedCount = usePhotoStore((state) => state.selectedPhotos.length)

  const hints = selectedCount > 0 ? [
    { key: '1-5', action: 'Rate' },
    { key: 'P', action: 'Pick' },
    { key: 'X', action: 'Reject' },
    { key: 'Delete', action: 'Trash' },
    { key: 'Esc', action: 'Deselect' },
  ] : [
    { key: '↑↓←→', action: 'Navigate' },
    { key: 'Click', action: 'Select' },
    { key: 'Shift+Click', action: 'Range' },
    { key: 'Ctrl+A', action: 'Select All' },
    { key: 'Space', action: 'Preview' },
  ]

  return (
    <div className="fixed top-14 left-1/2 z-20 -translate-x-1/2">
      <div className="flex items-center gap-3 rounded-full border border-border bg-surface/90 px-4 py-2 shadow-lg backdrop-blur-sm">
        {hints.map((hint, i) => (
          <div key={i} className="flex items-center gap-1.5">
            <kbd className="rounded bg-surface-offset px-2 py-0.5 text-xs font-medium text-text">
              {hint.key}
            </kbd>
            <span className="text-xs text-text-muted">{hint.action}</span>
            {i < hints.length - 1 && (
              <span className="ml-2 text-text-faint">•</span>
            )}
          </div>
        ))}
        {selectedCount > 0 && (
          <>
            <span className="ml-2 text-text-faint">•</span>
            <span className="text-xs font-medium text-primary">
              {selectedCount} selected
            </span>
          </>
        )}
      </div>
    </div>
  )
}