import * as React from 'react';

import {
  DEFAULT_ANIMATION_SHORTCUTS,
  buildAriaKeyShortcuts,
  buildShortcutHelpRows,
  createAnimationShortcutHandler,
  createAnimationStatusAnnouncement,
  type AnimationAccessibilityCommand,
  type AnimationShortcutActions,
  type AnimationShortcutHandlerOptions,
  type AnimationStatusAnnouncementInput,
  type KeyboardShortcutEventLike,
  type ShortcutDefinition,
  type ShortcutDisplayPlatform,
} from '../../animations/animationAccessibility';

export interface AnimationShortcutHelpPanelProps {
  shortcuts?: readonly ShortcutDefinition[] | undefined;
  open?: boolean | undefined;
  id?: string | undefined;
  title?: string | undefined;
  description?: string | undefined;
  platform?: ShortcutDisplayPlatform | undefined;
  className?: string | undefined;
}

export interface AnimationLiveRegionProps {
  announcement: string;
  politeness?: 'polite' | 'assertive' | 'off' | undefined;
  atomic?: boolean | undefined;
  visuallyHidden?: boolean | undefined;
  className?: string | undefined;
}

export interface AnimationStatusLiveRegionProps
  extends Omit<AnimationLiveRegionProps, 'announcement'> {
  state: AnimationStatusAnnouncementInput;
}

export interface AnimationKeyboardScopeProps {
  actions: AnimationShortcutActions;
  shortcuts?: readonly ShortcutDefinition[] | undefined;
  enabled?: AnimationShortcutHandlerOptions['enabled'];
  allowInEditable?: boolean | undefined;
  stopPropagation?: boolean | undefined;
  onCommand?: AnimationShortcutHandlerOptions['onCommand'];
  children?: React.ReactNode;
  className?: string | undefined;
  ariaLabel?: string | undefined;
  describedBy?: string | undefined;
  tabIndex?: number | undefined;
}

const DEFAULT_HELP_DESCRIPTION =
  'Keyboard shortcuts operate only while the animation controls or viewer region have focus, and never override text fields or sliders.';

export function AnimationShortcutHelpPanel({
  shortcuts = DEFAULT_ANIMATION_SHORTCUTS,
  open = true,
  id = 'animation-shortcut-help',
  title = 'Animation keyboard shortcuts',
  description = DEFAULT_HELP_DESCRIPTION,
  platform = 'generic',
  className,
}: AnimationShortcutHelpPanelProps): JSX.Element | null {
  const rows = React.useMemo(
    () => buildShortcutHelpRows(shortcuts, platform),
    [platform, shortcuts],
  );

  if (!open) {
    return null;
  }

  return (
    <section
      id={id}
      aria-labelledby={`${id}-title`}
      className={cx(
        'rounded-2xl border border-slate-700/70 bg-slate-950/95 p-4 text-slate-100 shadow-2xl shadow-black/30 backdrop-blur',
        className,
      )}
      data-animation-shortcut-help=""
    >
      <div className="space-y-1">
        <h2 id={`${id}-title`} className="text-sm font-semibold tracking-wide text-white">
          {title}
        </h2>
        {description ? <p className="text-xs leading-5 text-slate-300">{description}</p> : null}
      </div>

      <dl className="mt-4 grid gap-2 sm:grid-cols-2">
        {rows.map((row) => (
          <div
            key={row.id}
            className="grid grid-cols-[minmax(4.5rem,auto)_1fr] items-center gap-3 rounded-xl border border-slate-800 bg-slate-900/70 px-3 py-2"
          >
            <dt>
              <kbd
                aria-label={row.ariaLabel}
                className="inline-flex min-w-12 justify-center rounded-md border border-slate-600 bg-slate-950 px-2 py-1 font-mono text-xs font-semibold text-cyan-200 shadow-inner"
              >
                {row.chord}
              </kbd>
            </dt>
            <dd className="min-w-0">
              <span className="block text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-slate-500">
                {groupLabel(row.group)}
              </span>
              <span className="block text-xs leading-5 text-slate-200">{row.description}</span>
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

export function AnimationLiveRegion({
  announcement,
  politeness = 'polite',
  atomic = true,
  visuallyHidden = true,
  className,
}: AnimationLiveRegionProps): JSX.Element {
  const role = politeness === 'assertive' ? 'alert' : politeness === 'polite' ? 'status' : undefined;

  return (
    <div
      role={role}
      aria-live={politeness}
      aria-atomic={atomic}
      className={cx(visuallyHidden && 'sr-only', className)}
      data-animation-live-region=""
    >
      {announcement}
    </div>
  );
}

export function AnimationStatusLiveRegion({
  state,
  ...liveRegionProps
}: AnimationStatusLiveRegionProps): JSX.Element {
  const announcement = React.useMemo(() => createAnimationStatusAnnouncement(state), [state]);

  return <AnimationLiveRegion announcement={announcement} {...liveRegionProps} />;
}

export function useAnimationShortcutHandler(
  actions: AnimationShortcutActions,
  options?: AnimationShortcutHandlerOptions,
): (
  event: KeyboardShortcutEventLike | React.KeyboardEvent<HTMLElement>,
) => AnimationAccessibilityCommand | undefined {
  const actionsRef = React.useRef(actions);
  const optionsRef = React.useRef(options);

  React.useEffect(() => {
    actionsRef.current = actions;
  }, [actions]);

  React.useEffect(() => {
    optionsRef.current = options;
  }, [options]);

  return React.useCallback(
    (event: KeyboardShortcutEventLike | React.KeyboardEvent<HTMLElement>) =>
      createAnimationShortcutHandler(actionsRef.current, optionsRef.current)(
        event as KeyboardShortcutEventLike,
      ),
    [],
  );
}

export function AnimationKeyboardScope({
  actions,
  shortcuts = DEFAULT_ANIMATION_SHORTCUTS,
  enabled,
  allowInEditable,
  stopPropagation,
  onCommand,
  children,
  className,
  ariaLabel = 'Interactive animation controls',
  describedBy,
  tabIndex = 0,
}: AnimationKeyboardScopeProps): JSX.Element {
  const options = React.useMemo<AnimationShortcutHandlerOptions>(
    () => ({
      shortcuts,
      enabled,
      allowInEditable,
      stopPropagation,
      onCommand,
    }),
    [allowInEditable, enabled, onCommand, shortcuts, stopPropagation],
  );

  const handleShortcut = useAnimationShortcutHandler(actions, options);
  const ariaKeyShortcuts = React.useMemo(() => buildAriaKeyShortcuts(shortcuts), [shortcuts]);

  return (
    <div
      role="group"
      tabIndex={tabIndex}
      aria-label={ariaLabel}
      aria-describedby={describedBy}
      aria-keyshortcuts={ariaKeyShortcuts}
      className={className}
      onKeyDown={(event) => {
        handleShortcut(event);
      }}
      data-animation-keyboard-scope=""
    >
      {children}
    </div>
  );
}

function groupLabel(group: ShortcutDefinition['group']): string {
  switch (group) {
    case 'playback':
      return 'Playback';
    case 'stepping':
      return 'Step / seek';
    case 'speed':
      return 'Speed';
    case 'tour':
      return 'Guided tour';
    case 'view':
      return 'View';
    case 'help':
      return 'Help';
  }
}

function cx(...tokens: Array<string | false | null | undefined>): string {
  return tokens.filter(Boolean).join(' ');
}