"use client";

import { useState, useEffect, useCallback } from "react";
import { X, Keyboard } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

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

interface KeyboardShortcutsHelpProps {
  shortcuts: Shortcut[];
  trigger?: React.ReactNode;
}

export function KeyboardShortcutsHelp({ shortcuts, trigger }: KeyboardShortcutsHelpProps) {
  const [isOpen, setIsOpen] = useState(false);

  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "?") {
      e.preventDefault();
      setIsOpen(true);
    }
    if (e.key === "Escape" && isOpen) {
      setIsOpen(false);
    }
  }, [isOpen]);

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleKeyDown]);

  return (
    <>
      {trigger || (
        <Button
          variant="ghost"
          size="icon"
          className="h-8 w-8"
          onClick={() => setIsOpen(true)}
          aria-label="Keyboard shortcuts"
        >
          <Keyboard className="h-4 w-4" />
        </Button>
      )}

      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setIsOpen(false)}>
          <div className="w-full max-w-md rounded-xl bg-card p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
                <Keyboard className="h-5 w-5" />
                Keyboard Shortcuts
              </h2>
              <button
                onClick={() => setIsOpen(false)}
                className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted"
                aria-label="Close"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="space-y-3 max-h-[60vh] overflow-y-auto">
              {shortcuts.map(({ keys, description }, index) => (
                <div key={index} className="flex items-center justify-between gap-4">
                  <span className="text-sm text-foreground">{description}</span>
                  <div className="flex items-center gap-1.5 flex-shrink-0">
                    {keys.map((key, i) => (
                      <kbd key={i} className={cn(
                        "inline-flex items-center justify-center px-2 py-1 text-xs font-mono font-medium text-muted-foreground",
                        "bg-muted rounded border border-border"
                      )}>
                        {key
                          .replace("ctrl", navigator.platform.toUpperCase().indexOf("MAC") >= 0 ? "⌘" : "Ctrl")
                          .replace("meta", "⌘")
                          .replace("shift", navigator.platform.toUpperCase().indexOf("MAC") >= 0 ? "⇧" : "Shift")
                          .replace("alt", navigator.platform.toUpperCase().indexOf("MAC") >= 0 ? "⌥" : "Alt")
                        }
                      </kbd>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <p className="mt-4 text-xs text-muted-foreground text-center">
              Press <kbd className="px-1.5 py-0.5 text-xs font-mono bg-muted rounded border border-border">?</kbd> to toggle this help
            </p>
          </div>
        </div>
      )}
    </>
  );
}