import * as React from "react";

import { formatShortcut, type KeyboardShortcut } from "../../hooks/useKeyboardShortcuts";

export interface KeyboardShortcutsHelpProps {
  open: boolean;
  shortcuts: readonly KeyboardShortcut[];
  onOpenChange: (open: boolean) => void;
}

export function KeyboardShortcutsHelp({
  open,
  shortcuts,
  onOpenChange,
}: KeyboardShortcutsHelpProps): JSX.Element | null {
  const closeButtonRef = React.useRef<HTMLButtonElement | null>(null);

  React.useEffect(() => {
    if (!open) {
      return undefined;
    }

    closeButtonRef.current?.focus();

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        onOpenChange(false);
      }
    };

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

  if (!open) {
    return null;
  }

  const groupedShortcuts = shortcuts.reduce<Record<string, KeyboardShortcut[]>>((groups, shortcut) => {
    const group = shortcut.group ?? "Viewer";
    groups[group] = [...(groups[group] ?? []), shortcut];
    return groups;
  }, {});

  return (
    <div
      className="fixed inset-0 z-50 grid place-items-center bg-black/70 p-4 backdrop-blur-sm"
      role="presentation"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) {
          onOpenChange(false);
        }
      }}
    >
      <section
        className="glass-panel max-h-[min(720px,88vh)] w-full max-w-3xl overflow-hidden rounded-3xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="keyboard-shortcuts-title"
      >
        <header className="flex items-start justify-between gap-4 border-b border-[var(--color-border)] p-5">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-accent)]">
              Keyboard navigation
            </p>
            <h2 id="keyboard-shortcuts-title" className="mt-2 text-2xl font-semibold text-white">
              Mechanica shortcuts
            </h2>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-[var(--color-text-muted)]">
              All controls remain reachable with Tab. Shortcuts are disabled while typing into
              inputs so search, sliders, and form controls remain predictable.
            </p>
          </div>
          <button
            ref={closeButtonRef}
            className="control-button px-3 py-2 text-sm"
            type="button"
            onClick={() => onOpenChange(false)}
          >
            Close
          </button>
        </header>

        <div className="engineering-scrollbar max-h-[calc(min(720px,88vh)-9rem)] overflow-y-auto p-5">
          <div className="grid gap-4 md:grid-cols-2">
            {Object.entries(groupedShortcuts).map(([group, groupShortcuts]) => (
              <section
                key={group}
                className="rounded-2xl border border-[var(--color-border)] bg-black/12 p-4"
              >
                <h3 className="text-sm font-semibold text-white">{group}</h3>
                <dl className="mt-3 space-y-3">
                  {groupShortcuts.map((shortcut) => (
                    <div
                      key={`${group}-${shortcut.description}-${shortcut.key}`}
                      className="flex items-start justify-between gap-4"
                    >
                      <dt className="text-sm leading-5 text-[var(--color-text-muted)]">
                        {shortcut.description}
                      </dt>
                      <dd>
                        <kbd className="rounded-lg border border-[var(--color-border-strong)] bg-white/8 px-2 py-1 text-xs font-semibold text-white shadow-inner">
                          {formatShortcut(shortcut)}
                        </kbd>
                      </dd>
                    </div>
                  ))}
                </dl>
              </section>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}