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

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

  // In preview mode the viewer has its own context, so the grid hints
  // would just be confusing. Hide them.
  if (viewMode === 'preview') return null

  const hints = selectedCount > 0
    ? [
        { key: '1-5', action: 'Rate' },
        { key: 'P', action: 'Pick' },
        { key: 'X', action: 'Discard' },
        { key: 'E / Space', action: 'Preview' },
        { key: 'Esc', action: 'Deselect' },
      ]
    : [
        { key: '↑↓←→', action: 'Navigate' },
        { key: 'Click', action: 'Select' },
        { key: 'Shift+Click', action: 'Range' },
        { key: 'E / Space', action: 'Preview' },
        { key: '\\', action: 'Filters' },
        { key: '/', action: 'Search' },
      ]

  return (
    <div className="flex justify-center border-b border-border bg-surface/60 px-4 py-1.5">
      <div className="flex items-center gap-3">
        {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-[11px] 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>
  )
}