'use client'

interface GlobalDragOverlayProps {
  active: boolean
}

export function GlobalDragOverlay({ active }: GlobalDragOverlayProps) {
  if (!active) return null

  return (
    <div className="fixed inset-0 z-50 bg-purple-900/80 backdrop-blur-sm flex items-center justify-center pointer-events-none">
      <div className="text-center">
        <div className="text-7xl mb-4 animate-bounce">📄</div>
        <div className="text-2xl font-bold text-white">Bild hier ablegen</div>
        <div className="text-purple-200 mt-2">PNG, JPG - Handgeschriebener Text</div>
      </div>
    </div>
  )
}

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

export function KeyboardShortcutsModal({ open, onClose }: KeyboardShortcutsModalProps) {
  if (!open) return null

  return (
    <div className="fixed inset-0 z-40 bg-black/50 flex items-center justify-center" onClick={onClose}>
      <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md" onClick={e => e.stopPropagation()}>
        <h3 className="text-lg font-bold text-slate-900 mb-4">Tastenkuerzel</h3>
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-slate-600">Bild einfuegen</span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Ctrl+V</kbd>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">OCR starten</span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Ctrl+Enter</kbd>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Tab wechseln</span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Alt+1-6</kbd>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Bild entfernen</span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Escape</kbd>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Shortcuts anzeigen</span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">?</kbd>
          </div>
        </div>
        <button
          onClick={onClose}
          className="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm"
        >
          Schliessen
        </button>
      </div>
    </div>
  )
}