'use client'

import { useEffect } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'

interface KeyboardShortcut {
  keys: string[]
  description: string
  category: string
}

interface KeyboardShortcutsProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  shortcuts: KeyboardShortcut[]
}

export function KeyboardShortcuts({ open, onOpenChange, shortcuts }: KeyboardShortcutsProps) {
  const grouped = shortcuts.reduce((acc, shortcut) => {
    if (!acc[shortcut.category]) {
      acc[shortcut.category] = []
    }
    acc[shortcut.category].push(shortcut)
    return acc
  }, {} as Record<string, KeyboardShortcut[]>)

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Keyboard Shortcuts</DialogTitle>
          <DialogDescription>Available keyboard shortcuts for this view</DialogDescription>
        </DialogHeader>
        <div className="space-y-6 mt-4">
          {Object.entries(grouped).map(([category, items]) => (
            <div key={category}>
              <h3 className="font-semibold text-studio-light mb-2">{category}</h3>
              <div className="space-y-2">
                {items.map((shortcut, idx) => (
                  <div key={idx} className="flex items-center justify-between py-2 border-b border-studio-medium">
                    <span className="text-sm text-studio-medium">{shortcut.description}</span>
                    <div className="flex gap-1">
                      {shortcut.keys.map((key, keyIdx) => (
                        <Badge key={keyIdx} variant="outline" className="font-mono text-xs">
                          {key}
                        </Badge>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  )
}

export function useKeyboardShortcuts(
  shortcuts: Array<{
    keys: string[]
    handler: () => void
    description?: string
  }>
) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const key = e.key.toLowerCase()
      const ctrl = e.ctrlKey || e.metaKey
      const shift = e.shiftKey
      const alt = e.altKey

      for (const shortcut of shortcuts) {
        const matches = shortcut.keys.every((k) => {
          const lower = k.toLowerCase()
          if (lower === 'ctrl' || lower === 'cmd') return ctrl
          if (lower === 'shift') return shift
          if (lower === 'alt') return alt
          return key === lower
        })

        if (matches) {
          e.preventDefault()
          shortcut.handler()
          break
        }
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [shortcuts])
}

