import { useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X } from '../../lib/icons'
import { SHORTCUTS, type ShortcutCategory } from '../../lib/player-shortcuts'
import { usePreferencesStore } from '../../stores/preferences-store'

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

const CATEGORY_LABELS: Record<ShortcutCategory, string> = {
  playback: 'Playback',
  audio: 'Audio',
  subtitles: 'Subtitles',
  tools: 'Tools',
  view: 'View',
  navigation: 'Navigation',
}

const CATEGORY_ORDER: ShortcutCategory[] = [
  'playback',
  'audio',
  'subtitles',
  'view',
  'tools',
  'navigation',
]

function prettyKey(binding: string): string[] {
  return binding.split('+').map(p => {
    if (p === ' ') return 'Space'
    if (p === 'ArrowLeft') return '←'
    if (p === 'ArrowRight') return '→'
    if (p === 'ArrowUp') return '↑'
    if (p === 'ArrowDown') return '↓'
    if (p === 'Escape') return 'Esc'
    return p
  })
}

export default function KeyboardHints({ open, onClose }: Props) {
  const overrides = usePreferencesStore(s => s.keyboardShortcuts)

  useEffect(() => {
    if (!open) return
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape' || e.key === '?') {
        e.preventDefault()
        onClose()
      }
    }
    window.addEventListener('keydown', onKey, true)
    return () => window.removeEventListener('keydown', onKey, true)
  }, [open, onClose])

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.18 }}
          className="absolute inset-0 z-toast grid place-items-center bg-black/70 backdrop-blur-sm"
          onClick={onClose}
        >
          <motion.div
            initial={{ y: 20, scale: 0.96 }}
            animate={{ y: 0, scale: 1 }}
            exit={{ y: 20, scale: 0.96 }}
            transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
            onClick={e => e.stopPropagation()}
            className="bg-[#0c0a08]/96 backdrop-blur-2xl border border-white/14 rounded-2xl w-[640px] max-w-[88vw] max-h-[80vh] overflow-y-auto content-scroll shadow-[0_30px_80px_-20px_rgba(0,0,0,0.85)]"
            role="dialog"
            aria-label="Keyboard shortcuts"
          >
            <header className="sticky top-0 px-6 py-4 bg-[#0c0a08]/96 backdrop-blur-2xl border-b border-white/8 flex items-center justify-between z-10">
              <h2 className="font-display text-xl font-bold text-white tracking-tight">
                Keyboard shortcuts
              </h2>
              <button
                onClick={onClose}
                className="w-8 h-8 grid place-items-center rounded-full text-white/70 hover:text-white hover:bg-white/10 transition-colors focus-ring"
                aria-label="Close"
              >
                <X size={16} />
              </button>
            </header>
            <div className="px-6 py-5 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
              {CATEGORY_ORDER.map(cat => {
                const items = SHORTCUTS.filter(s => s.category === cat)
                if (items.length === 0) return null
                return (
                  <div key={cat}>
                    <p className="text-[10px] uppercase tracking-[0.18em] font-semibold text-text-3 mb-3 leading-none">
                      {CATEGORY_LABELS[cat]}
                    </p>
                    <ul className="flex flex-col gap-2">
                      {items.map(sc => {
                        const keys = overrides[sc.id]?.length ? overrides[sc.id] : sc.keys
                        return (
                          <li key={sc.id} className="flex items-baseline gap-3">
                            <span className="text-[12.5px] text-text-2 leading-tight flex-1">
                              {sc.description}
                            </span>
                            <span className="flex items-center gap-1 shrink-0">
                              {prettyKey(keys[0]).map((k, i) => (
                                <kbd
                                  key={i}
                                  className="inline-flex items-center justify-center min-w-[22px] h-6 px-1.5 rounded text-[10.5px] font-mono font-medium text-text-1 bg-elevated border border-border tabular-nums"
                                >
                                  {k}
                                </kbd>
                              ))}
                            </span>
                          </li>
                        )
                      })}
                    </ul>
                  </div>
                )
              })}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}