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 → heap' },
        { key: 'X', action: 'Discard' },
        { key: 'Space', action: 'Preview' },
        { key: 'Esc', action: 'Deselect' },
      ]
    : [
        { key: '↑↓←→', action: 'Navigate' },
        { key: 'Click', action: 'Select' },
        { key: 'Shift+Click', action: 'Range' },
        { key: 'Space', action: 'Preview' },
        { key: '/', action: 'Search' },
      ]

  return (
    // Absolute (not fixed) so the parent's flex/position context can
    // center it relative to the timeline area, not the viewport. Mount
    // inside the main column in App.tsx so it isn't offset by the
    // sidebar widths.
    <div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
      <div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
        {hints.map((hint, i) => (
          <div key={i} className="flex items-center gap-1.5">
            <kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text">
              {hint.key}
            </kbd>
            <span className="whitespace-nowrap text-xs text-text-muted">
              {hint.action}
            </span>
            {i < hints.length - 1 && (
              <span className="ml-1 text-text-faint">•</span>
            )}
          </div>
        ))}
        {selectedCount > 0 && (
          <>
            <span className="text-text-faint">•</span>
            <span className="whitespace-nowrap text-xs font-medium text-primary">
              {selectedCount} selected
            </span>
          </>
        )}
      </div>
    </div>
  )
}
