import React, { useEffect, useState } from 'react';
import { useNavigate } from '@tanstack/react-router';

interface Shortcut {
  keys: string[];
  description: string;
}

const SHORTCUTS: Shortcut[] = [
  { keys: ['⌘', 'K'], description: 'Command Palette' },
  { keys: ['?'], description: 'Diese Hilfe anzeigen' },
  { keys: ['T'], description: 'Theme umschalten' },
  { keys: ['N'], description: 'Neuen Eintrag erstellen' },
  { keys: ['G', 'H'], description: 'Zum Dashboard' },
  { keys: ['G', 'C'], description: 'Zu Kunden' },
  { keys: ['G', 'P'], description: 'Zu Projekten' },
  { keys: ['G', 'T'], description: 'Zu Zeiteinträgen' },
  { keys: ['G', 'S'], description: 'Zu Einstellungen' },
];

export default function KeyboardHelp() {
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === '?') {
        e.preventDefault();
        setIsOpen(true);
      }
      if (e.key === 'Escape' && isOpen) {
        setIsOpen(false);
      }
    };

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

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
      onClick={() => setIsOpen(false)}
    >
      <div 
        className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
          <h2 className="text-xl font-semibold text-slate-900 dark:text-white">Tastatur-Shortcuts</h2>
          <button 
            onClick={() => setIsOpen(false)}
            className="p-1 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-md text-slate-500"
          >
            ✕
          </button>
        </div>
        
        <div className="p-6 space-y-4">
          {SHORTCUTS.map((shortcut, idx) => (
            <div key={idx} className="flex items-center justify-between group">
              <span className="text-slate-600 dark:text-slate-400 text-sm">
                {shortcut.description}
              </span>
              <div className="flex gap-1">
                {shortcut.keys.map((key, kIdx) => (
                  <kbd 
                    key={kIdx}
                    className="px-2 py-1 text-xs font-medium text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded shadow-sm"
                  >
                    {key}
                  </kbd>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="p-4 bg-slate-50 dark:bg-slate-800/50 text-center">
          <p className="text-xs text-slate-500 dark:text-slate-400">
            Drücke <kbd className="px-1 bg-slate-200 dark:bg-slate-700 rounded">Esc</kbd> zum Schließen
          </p>
        </div>
      </div>
    </div>
  );
}