import { useEffect, useId, useMemo, useRef } from 'react';
import type { KeyboardEvent as ReactKeyboardEvent } from 'react';

import {
  DEFAULT_VIEWER_SHORTCUTS,
  formatShortcutChord,
  groupViewerShortcuts,
} from '../../utils/viewerKeyboardShortcuts';
import type {
  ShortcutPlatform,
  ViewerShortcutDefinition,
} from '../../utils/viewerKeyboardShortcuts';

export interface ViewerKeyboardHelpDialogProps {
  readonly open: boolean;
  readonly onClose: () => void;
  readonly shortcuts?: readonly ViewerShortcutDefinition[];
  readonly title?: string;
  readonly description?: string;
  readonly platform?: ShortcutPlatform;
}

const FOCUSABLE_SELECTOR = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',
  'select:not([disabled])',
  'textarea:not([disabled])',
  '[tabindex]:not([tabindex="-1"])',
].join(',');

export function ViewerKeyboardHelpDialog({
  open,
  onClose,
  shortcuts = DEFAULT_VIEWER_SHORTCUTS,
  title = 'Keyboard shortcuts',
  description = 'Use these commands when the 3D viewer has focus. Form fields and toolbar buttons keep their native keyboard behavior.',
  platform,
}: ViewerKeyboardHelpDialogProps) {
  const titleId = useId();
  const descriptionId = useId();
  const dialogRef = useRef<HTMLElement | null>(null);
  const closeButtonRef = useRef<HTMLButtonElement | null>(null);

  const groups = useMemo(() => groupViewerShortcuts(shortcuts), [shortcuts]);

  useEffect(() => {
    if (!open || typeof window === 'undefined') {
      return undefined;
    }

    const previouslyFocusedElement = document.activeElement;
    const focusTimer = window.setTimeout(() => {
      closeButtonRef.current?.focus();
    }, 0);

    return () => {
      window.clearTimeout(focusTimer);

      if (
        previouslyFocusedElement instanceof HTMLElement &&
        document.contains(previouslyFocusedElement)
      ) {
        previouslyFocusedElement.focus();
      }
    };
  }, [open]);

  if (!open) {
    return null;
  }

  const handleDialogKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
    if (event.key === 'Escape') {
      event.preventDefault();
      event.stopPropagation();
      onClose();
      return;
    }

    if (event.key !== 'Tab') {
      return;
    }

    const dialog = dialogRef.current;
    if (!dialog) {
      return;
    }

    const focusableElements = getFocusableElements(dialog);
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];

    if (!firstFocusableElement || !lastFocusableElement) {
      event.preventDefault();
      return;
    }

    if (event.shiftKey && document.activeElement === firstFocusableElement) {
      event.preventDefault();
      lastFocusableElement.focus();
      return;
    }

    if (!event.shiftKey && document.activeElement === lastFocusableElement) {
      event.preventDefault();
      firstFocusableElement.focus();
    }
  };

  return (
    <div
      className="fixed inset-0 z-[80] flex items-center justify-center bg-slate-950/75 p-4 text-slate-100 backdrop-blur-sm"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
      role="presentation"
    >
      <section
        ref={dialogRef}
        aria-describedby={descriptionId}
        aria-labelledby={titleId}
        aria-modal="true"
        className="max-h-[min(42rem,calc(100vh-2rem))] w-full max-w-2xl overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl shadow-black/50"
        onKeyDown={handleDialogKeyDown}
        role="dialog"
      >
        <header className="flex items-start justify-between gap-4 border-b border-white/10 px-5 py-4">
          <div>
            <h2 className="text-lg font-semibold tracking-tight text-white" id={titleId}>
              {title}
            </h2>
            <p className="mt-1 max-w-xl text-sm leading-6 text-slate-300" id={descriptionId}>
              {description}
            </p>
          </div>

          <button
            ref={closeButtonRef}
            aria-label="Close keyboard shortcuts"
            className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-slate-100 transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-cyan-300"
            onClick={onClose}
            type="button"
          >
            Close
          </button>
        </header>

        <div className="max-h-[calc(100vh-12rem)] overflow-y-auto px-5 py-4">
          {groups.length === 0 ? (
            <p className="rounded-xl border border-dashed border-white/15 bg-white/[0.03] p-4 text-sm text-slate-300">
              No keyboard shortcuts are registered for this viewer state.
            </p>
          ) : (
            <div className="space-y-5">
              {groups.map((group) => (
                <section key={group.id}>
                  <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-200">
                    {group.label}
                  </h3>

                  <dl className="mt-3 divide-y divide-white/10 overflow-hidden rounded-xl border border-white/10 bg-white/[0.03]">
                    {group.shortcuts.map((shortcut) => (
                      <div
                        className="grid gap-3 px-4 py-3 sm:grid-cols-[1fr_auto] sm:items-center"
                        key={shortcut.command}
                      >
                        <div>
                          <dt className="text-sm font-medium text-white">{shortcut.label}</dt>
                          {shortcut.description ? (
                            <dd className="mt-1 text-xs leading-5 text-slate-400">
                              {shortcut.description}
                            </dd>
                          ) : null}
                        </div>

                        <dd className="flex flex-wrap gap-2 sm:justify-end">
                          {shortcut.chords.map((chord, chordIndex) => (
                            <kbd
                              className="rounded-md border border-white/15 bg-slate-900 px-2 py-1 font-mono text-xs font-semibold text-cyan-100 shadow-inner shadow-white/5"
                              key={`${shortcut.command}-${chordIndex}`}
                            >
                              {formatShortcutChord(chord, platform)}
                            </kbd>
                          ))}
                        </dd>
                      </div>
                    ))}
                  </dl>
                </section>
              ))}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function getFocusableElements(container: HTMLElement): HTMLElement[] {
  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
    (element) => {
      if (element.getAttribute('aria-hidden') === 'true') {
        return false;
      }

      if (typeof window === 'undefined') {
        return true;
      }

      const style = window.getComputedStyle(element);
      return style.visibility !== 'hidden' && style.display !== 'none';
    },
  );
}