/* @vitest-environment jsdom */

import { act, fireEvent, render, screen } from '@testing-library/react';
import { useRef, useState } from 'react';
import { describe, expect, it, vi } from 'vitest';

import type {
  CanvasGenerationDialogState,
  CanvasTool,
  GenerateDialogState,
  QuickEditPanelState,
} from './ImageCanvasEditorTypes';
import { useImageCanvasKeyboardShortcuts } from './useImageCanvasKeyboardShortcuts';

function createPlaceholderDialog(
  mode: GenerateDialogState['mode'] = 'generate',
): GenerateDialogState {
  return {
    id: 'dialog-1',
    mode,
    prompt: '生成一张图片',
    status: 'idle',
    composerOpen: true,
    placeholder: {
      x: 10,
      y: 20,
      width: 320,
      height: 240,
      originalWidth: 320,
      originalHeight: 240,
    },
  };
}

function applyGenerateDialogUpdater(
  updater:
    | GenerateDialogState
    | null
    | ((dialog: GenerateDialogState | null) => GenerateDialogState | null),
  currentDialog: GenerateDialogState | null,
) {
  return typeof updater === 'function' ? updater(currentDialog) : updater;
}

function applyQuickEditPanelUpdater(
  updater:
    | QuickEditPanelState
    | null
    | ((panel: QuickEditPanelState | null) => QuickEditPanelState | null),
  currentPanel: QuickEditPanelState | null,
) {
  return typeof updater === 'function' ? updater(currentPanel) : updater;
}

function KeyboardShortcutsHarness({
  selectedLayerId = null,
  selectedLayerIds = selectedLayerId ? [selectedLayerId] : [],
  initialGenerateDialog = null,
  initialQuickEditPanel = null,
  initialTool = 'select',
  undoCanvasChange = vi.fn(),
  redoCanvasChange = vi.fn(),
  deleteLayerById = vi.fn(),
  deleteSelectedCanvasObjects = vi.fn(),
  selectAllCanvasObjects = vi.fn(),
  clearCanvasSelection = vi.fn(),
  copySelectedCanvasLayers = vi.fn(),
  pasteCanvasClipboard = vi.fn(),
  duplicateSelectedCanvasLayers = vi.fn(),
  moveSelectedCanvasLayers = vi.fn(),
  nudgeSelectedCanvasObjects = vi.fn(),
  requestRemoveCanvasGenerationDialog = vi.fn(),
  switchTool,
  updateScaleFromCenter = vi.fn(),
  zoomViewportBy = vi.fn(),
  fitLayers = vi.fn(),
  toggleSidebarPanel = vi.fn(),
  toggleMinimap = vi.fn(),
  startProjectRename = vi.fn(),
  exportCanvasAssets = vi.fn(),
  closeEditorChromePanels = vi.fn(),
}: {
  selectedLayerId?: string | null;
  selectedLayerIds?: string[];
  initialGenerateDialog?: GenerateDialogState | null;
  initialQuickEditPanel?: QuickEditPanelState | null;
  initialTool?: CanvasTool;
  undoCanvasChange?: () => void;
  redoCanvasChange?: () => void;
  deleteLayerById?: (layerId: string | null) => void;
  deleteSelectedCanvasObjects?: () => void;
  selectAllCanvasObjects?: () => void;
  clearCanvasSelection?: () => void;
  copySelectedCanvasLayers?: (options?: { cut?: boolean }) => void;
  pasteCanvasClipboard?: () => boolean;
  duplicateSelectedCanvasLayers?: () => void;
  moveSelectedCanvasLayers?: (mode: 'up' | 'down' | 'top' | 'bottom') => void;
  nudgeSelectedCanvasObjects?: (delta: { x: number; y: number }) => void;
  requestRemoveCanvasGenerationDialog?: (
    dialog: CanvasGenerationDialogState,
  ) => void;
  switchTool?: (tool: CanvasTool) => void;
  updateScaleFromCenter?: (nextScale: number) => void;
  zoomViewportBy?: (scaleFactor: number) => void;
  fitLayers?: () => void;
  toggleSidebarPanel?: (panel: 'assets' | 'layers') => void;
  toggleMinimap?: () => void;
  startProjectRename?: () => void;
  exportCanvasAssets?: () => void;
  closeEditorChromePanels?: () => void;
}) {
  const [activeTool, setActiveTool] = useState<CanvasTool>(initialTool);
  const [generateDialog, setGenerateDialogState] =
    useState<GenerateDialogState | null>(initialGenerateDialog);
  const [quickEditPanel, setQuickEditPanelState] =
    useState<QuickEditPanelState | null>(initialQuickEditPanel);
  const [imageContextMenuOpen, setImageContextMenuOpen] = useState(true);
  const [contextMenuOpen, setContextMenuOpen] = useState(true);
  const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(true);
  const [, setIsGenerationReferenceMenuOpen] = useState(true);
  const [isPublicationReferenceMenuOpen, setIsPublicationReferenceMenuOpen] =
    useState(true);
  const [, setIsPickingGenerationReferenceFromCanvas] = useState(true);
  const [, setIsPickingQuickEditReferenceFromCanvas] = useState(true);
  const [
    isPickingPublicationReferenceFromCanvas,
    setIsPickingPublicationReferenceFromCanvas,
  ] = useState(true);
  const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(true);
  const [isCharacterReferenceMenuOpen, setIsCharacterReferenceMenuOpen] =
    useState(true);
  const [isPickingCharacterSpecFromCanvas, setIsPickingCharacterSpecFromCanvas] =
    useState(true);
  const [
    isPickingCharacterReferenceFromCanvas,
    setIsPickingCharacterReferenceFromCanvas,
  ] = useState(true);
  const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(true);
  const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
    useState(true);
  const [, setIsUiDesignSpecMenuOpen] = useState(true);
  const [, setIsPickingUiDesignSpecFromCanvas] =
    useState(true);
  const [isSpacePanning, setIsSpacePanning] = useState(false);
  const [shiftPressed, setShiftPressed] = useState(false);
  const generateDialogRef = useRef<GenerateDialogState | null>(generateDialog);
  const selectedLayerIdRef = useRef<string | null>(selectedLayerId);
  const selectedLayerIdsRef = useRef<string[]>(selectedLayerIds);
  generateDialogRef.current = generateDialog;
  selectedLayerIdRef.current = selectedLayerId;
  selectedLayerIdsRef.current = selectedLayerIds;

  useImageCanvasKeyboardShortcuts({
    generateDialogRef,
    selectedLayerIdRef,
    selectedLayerIdsRef,
    redoCanvasChange,
    undoCanvasChange,
    deleteLayerById,
    deleteSelectedCanvasObjects,
    selectAllCanvasObjects,
    clearCanvasSelection,
    copySelectedCanvasLayers,
    pasteCanvasClipboard,
    duplicateSelectedCanvasLayers,
    moveSelectedCanvasLayers,
    nudgeSelectedCanvasObjects,
    requestRemoveCanvasGenerationDialog,
    setActiveTool: (tool) => setActiveTool(tool),
    switchTool: switchTool ?? ((tool) => setActiveTool(tool)),
    updateScaleFromCenter,
    zoomViewportBy,
    fitLayers,
    toggleSidebarPanel,
    toggleMinimap,
    startProjectRename,
    exportCanvasAssets,
    setGenerateDialog: (updater) =>
      setGenerateDialogState((currentDialog) =>
        applyGenerateDialogUpdater(updater, currentDialog),
      ),
    setImageContextMenu: () => setImageContextMenuOpen(false),
    setContextMenu: () => setContextMenuOpen(false),
    setQuickEditPanel: (updater) =>
      setQuickEditPanelState((currentPanel) =>
        applyQuickEditPanelUpdater(updater, currentPanel),
      ),
    closeEditorChromePanels,
    setIsSpecMenuOpen,
    setIsGenerationReferenceMenuOpen,
    setIsPublicationReferenceMenuOpen,
    setIsPickingGenerationReferenceFromCanvas,
    setIsPickingQuickEditReferenceFromCanvas,
    setIsPickingPublicationReferenceFromCanvas,
    setIsCharacterSpecMenuOpen,
    setIsCharacterReferenceMenuOpen,
    setIsPickingCharacterSpecFromCanvas,
    setIsPickingCharacterReferenceFromCanvas,
    setIsIconSpecMenuOpen,
    setIsPickingIconSpecFromCanvas,
    setIsUiDesignSpecMenuOpen,
    setIsPickingUiDesignSpecFromCanvas,
    setIsSpacePanning,
    setShiftPressed,
  });

  return (
    <div>
      <input aria-label="快捷键输入框" />
      <span data-testid="active-tool">{activeTool}</span>
      <span data-testid="generate-dialog">
        {generateDialog
          ? `${generateDialog.mode}:${generateDialog.status}:${String(
              generateDialog.composerOpen,
            )}`
          : 'none'}
      </span>
      <span data-testid="quick-edit">
        {quickEditPanel ? quickEditPanel.status : 'none'}
      </span>
      <span data-testid="image-context">{String(imageContextMenuOpen)}</span>
      <span data-testid="context-menu">{String(contextMenuOpen)}</span>
      <span data-testid="spec-menu">{String(isSpecMenuOpen)}</span>
      <span data-testid="publication-reference-menu">
        {String(isPublicationReferenceMenuOpen)}
      </span>
      <span data-testid="publication-reference-picking">
        {String(isPickingPublicationReferenceFromCanvas)}
      </span>
      <span data-testid="character-menu">
        {String(isCharacterSpecMenuOpen)}
      </span>
      <span data-testid="character-reference-menu">
        {String(isCharacterReferenceMenuOpen)}
      </span>
      <span data-testid="character-picking">
        {String(isPickingCharacterSpecFromCanvas)}
      </span>
      <span data-testid="character-reference-picking">
        {String(isPickingCharacterReferenceFromCanvas)}
      </span>
      <span data-testid="icon-menu">{String(isIconSpecMenuOpen)}</span>
      <span data-testid="icon-picking">
        {String(isPickingIconSpecFromCanvas)}
      </span>
      <span data-testid="space-panning">{String(isSpacePanning)}</span>
      <span data-testid="shift-pressed">{String(shiftPressed)}</span>
    </div>
  );
}

describe('useImageCanvasKeyboardShortcuts', () => {
  it('routes undo and redo shortcuts while ignoring editable inputs', () => {
    const undoCanvasChange = vi.fn();
    const redoCanvasChange = vi.fn();
    render(
      <KeyboardShortcutsHarness
        undoCanvasChange={undoCanvasChange}
        redoCanvasChange={redoCanvasChange}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'z', code: 'KeyZ', ctrlKey: true });
    });
    expect(undoCanvasChange).toHaveBeenCalledTimes(1);

    act(() => {
      fireEvent.keyDown(window, {
        key: 'Z',
        code: 'KeyZ',
        ctrlKey: true,
        shiftKey: true,
      });
    });
    expect(redoCanvasChange).toHaveBeenCalledTimes(1);

    act(() => {
      fireEvent.keyDown(screen.getByLabelText('快捷键输入框'), {
        key: 'z',
        code: 'KeyZ',
        ctrlKey: true,
      });
    });
    expect(undoCanvasChange).toHaveBeenCalledTimes(1);

    act(() => {
      fireEvent.keyDown(window, { key: 'z', code: 'KeyZ', metaKey: true });
    });
    expect(undoCanvasChange).toHaveBeenCalledTimes(1);
  });

  it('routes Windows edit shortcuts to selected layer commands and canvas paste', () => {
    const selectAllCanvasObjects = vi.fn();
    const copySelectedCanvasLayers = vi.fn();
    const pasteCanvasClipboard = vi.fn(() => true);
    const duplicateSelectedCanvasLayers = vi.fn();
    const exportCanvasAssets = vi.fn();
    render(
      <KeyboardShortcutsHarness
        selectAllCanvasObjects={selectAllCanvasObjects}
        copySelectedCanvasLayers={copySelectedCanvasLayers}
        pasteCanvasClipboard={pasteCanvasClipboard}
        duplicateSelectedCanvasLayers={duplicateSelectedCanvasLayers}
        exportCanvasAssets={exportCanvasAssets}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'a', code: 'KeyA', ctrlKey: true });
      fireEvent.keyDown(window, { key: 'c', code: 'KeyC', ctrlKey: true });
      fireEvent.keyDown(window, { key: 'v', code: 'KeyV', ctrlKey: true });
      fireEvent.keyDown(window, { key: 'x', code: 'KeyX', ctrlKey: true });
      fireEvent.keyDown(window, { key: 'd', code: 'KeyD', ctrlKey: true });
      fireEvent.keyDown(window, {
        key: 'S',
        code: 'KeyS',
        ctrlKey: true,
        shiftKey: true,
      });
    });

    expect(selectAllCanvasObjects).toHaveBeenCalledTimes(1);
    expect(copySelectedCanvasLayers).toHaveBeenNthCalledWith(1);
    expect(copySelectedCanvasLayers).toHaveBeenNthCalledWith(2, { cut: true });
    expect(pasteCanvasClipboard).toHaveBeenCalledTimes(1);
    expect(duplicateSelectedCanvasLayers).toHaveBeenCalledTimes(1);
    expect(exportCanvasAssets).toHaveBeenCalledTimes(1);
  });

  it('leaves system paste available when the canvas clipboard is empty', () => {
    const pasteCanvasClipboard = vi.fn(() => false);
    render(
      <KeyboardShortcutsHarness pasteCanvasClipboard={pasteCanvasClipboard} />,
    );

    const pasteEvent = new KeyboardEvent('keydown', {
      key: 'v',
      code: 'KeyV',
      ctrlKey: true,
      bubbles: true,
      cancelable: true,
    });
    window.dispatchEvent(pasteEvent);

    expect(pasteCanvasClipboard).toHaveBeenCalledTimes(1);
    expect(pasteEvent.defaultPrevented).toBe(false);
  });

  it('leaves native copy available when text is selected', () => {
    const copySelectedCanvasLayers = vi.fn();
    const removeAllRanges = vi.fn();
    const selectedText = vi.fn(() => '清爽游戏按钮');
    vi.spyOn(window, 'getSelection').mockReturnValue({
      toString: selectedText,
      removeAllRanges,
    } as unknown as Selection);
    render(
      <KeyboardShortcutsHarness
        copySelectedCanvasLayers={copySelectedCanvasLayers}
      />,
    );

    const copyEvent = new KeyboardEvent('keydown', {
      key: 'c',
      code: 'KeyC',
      ctrlKey: true,
      bubbles: true,
      cancelable: true,
    });
    window.dispatchEvent(copyEvent);

    expect(copySelectedCanvasLayers).not.toHaveBeenCalled();
    expect(copyEvent.defaultPrevented).toBe(false);
  });

  it('routes Windows view and layer ordering shortcuts', () => {
    const fitLayers = vi.fn();
    const updateScaleFromCenter = vi.fn();
    const zoomViewportBy = vi.fn();
    const moveSelectedCanvasLayers = vi.fn();
    render(
      <KeyboardShortcutsHarness
        fitLayers={fitLayers}
        updateScaleFromCenter={updateScaleFromCenter}
        zoomViewportBy={zoomViewportBy}
        moveSelectedCanvasLayers={moveSelectedCanvasLayers}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: '0', code: 'Digit0', ctrlKey: true });
      fireEvent.keyDown(window, { key: '1', code: 'Digit1', ctrlKey: true });
      fireEvent.keyDown(window, { key: '=', code: 'Equal', ctrlKey: true });
      fireEvent.keyDown(window, { key: '-', code: 'Minus', ctrlKey: true });
      fireEvent.keyDown(window, {
        key: ']',
        code: 'BracketRight',
        ctrlKey: true,
      });
      fireEvent.keyDown(window, {
        key: '}',
        code: 'BracketRight',
        ctrlKey: true,
        shiftKey: true,
      });
      fireEvent.keyDown(window, {
        key: '[',
        code: 'BracketLeft',
        ctrlKey: true,
      });
      fireEvent.keyDown(window, {
        key: '{',
        code: 'BracketLeft',
        ctrlKey: true,
        shiftKey: true,
      });
    });

    expect(fitLayers).toHaveBeenCalledTimes(1);
    expect(updateScaleFromCenter).toHaveBeenCalledWith(1);
    expect(zoomViewportBy).toHaveBeenCalledWith(1.16);
    expect(zoomViewportBy).toHaveBeenCalledWith(0.86);
    expect(moveSelectedCanvasLayers).toHaveBeenNthCalledWith(1, 'up');
    expect(moveSelectedCanvasLayers).toHaveBeenNthCalledWith(2, 'top');
    expect(moveSelectedCanvasLayers).toHaveBeenNthCalledWith(3, 'down');
    expect(moveSelectedCanvasLayers).toHaveBeenNthCalledWith(4, 'bottom');
  });

  it('routes tool, panel and project shortcuts', () => {
    const switchTool = vi.fn();
    const toggleSidebarPanel = vi.fn();
    const toggleMinimap = vi.fn();
    const startProjectRename = vi.fn();
    render(
      <KeyboardShortcutsHarness
        switchTool={switchTool}
        toggleSidebarPanel={toggleSidebarPanel}
        toggleMinimap={toggleMinimap}
        startProjectRename={startProjectRename}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'v', code: 'KeyV' });
      fireEvent.keyDown(window, { key: 'h', code: 'KeyH' });
      fireEvent.keyDown(window, { key: 'u', code: 'KeyU' });
      fireEvent.keyDown(window, { key: 'g', code: 'KeyG' });
      fireEvent.keyDown(window, { key: 'V', code: 'KeyV', shiftKey: true });
      fireEvent.keyDown(window, { key: 'm', code: 'KeyM' });
      fireEvent.keyDown(window, { key: '1', code: 'Digit1', altKey: true });
      fireEvent.keyDown(window, { key: '2', code: 'Digit2', altKey: true });
      fireEvent.keyDown(window, { key: 'm', code: 'KeyM', altKey: true });
      fireEvent.keyDown(window, { key: 'F2', code: 'F2' });
    });

    expect(switchTool).toHaveBeenNthCalledWith(1, 'select');
    expect(switchTool).toHaveBeenNthCalledWith(2, 'hand');
    expect(switchTool).toHaveBeenNthCalledWith(3, 'upload');
    expect(switchTool).toHaveBeenNthCalledWith(4, 'generate');
    expect(switchTool).toHaveBeenNthCalledWith(5, 'video');
    expect(switchTool).toHaveBeenNthCalledWith(6, 'music');
    expect(toggleSidebarPanel).toHaveBeenNthCalledWith(1, 'assets');
    expect(toggleSidebarPanel).toHaveBeenNthCalledWith(2, 'layers');
    expect(toggleMinimap).toHaveBeenCalledTimes(1);
    expect(startProjectRename).toHaveBeenCalledTimes(1);
  });

  it('releases held modifier interaction state when the window loses focus', () => {
    render(<KeyboardShortcutsHarness />);

    act(() => {
      fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
      fireEvent.keyDown(window, { key: ' ', code: 'Space' });
    });
    expect(screen.getByTestId('shift-pressed').textContent).toBe('true');
    expect(screen.getByTestId('space-panning').textContent).toBe('true');

    act(() => {
      fireEvent.blur(window);
    });
    expect(screen.getByTestId('shift-pressed').textContent).toBe('false');
    expect(screen.getByTestId('space-panning').textContent).toBe('false');
  });

  it('nudges selected canvas objects with arrow keys', () => {
    const nudgeSelectedCanvasObjects = vi.fn();
    render(
      <KeyboardShortcutsHarness
        nudgeSelectedCanvasObjects={nudgeSelectedCanvasObjects}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'ArrowUp', code: 'ArrowUp' });
      fireEvent.keyDown(window, {
        key: 'ArrowRight',
        code: 'ArrowRight',
        shiftKey: true,
      });
    });

    expect(nudgeSelectedCanvasObjects).toHaveBeenNthCalledWith(1, {
      x: 0,
      y: -1,
    });
    expect(nudgeSelectedCanvasObjects).toHaveBeenNthCalledWith(2, {
      x: 10,
      y: 0,
    });
  });

  it('deletes the selected layer with Backspace outside editable inputs', () => {
    const deleteLayerById = vi.fn();
    render(
      <KeyboardShortcutsHarness
        selectedLayerId="layer-selected"
        selectedLayerIds={[]}
        deleteLayerById={deleteLayerById}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
    });

    expect(deleteLayerById).toHaveBeenCalledWith('layer-selected');
  });

  it('deletes complete canvas selection before falling back to active layer', () => {
    const deleteLayerById = vi.fn();
    const deleteSelectedCanvasObjects = vi.fn();
    render(
      <KeyboardShortcutsHarness
        selectedLayerId="layer-selected"
        selectedLayerIds={['layer-selected', 'generation-dialog:dialog-1']}
        deleteLayerById={deleteLayerById}
        deleteSelectedCanvasObjects={deleteSelectedCanvasObjects}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
    });

    expect(deleteSelectedCanvasObjects).toHaveBeenCalledTimes(1);
    expect(deleteLayerById).not.toHaveBeenCalled();
  });

  it('requests deleting editable generation placeholders with Backspace', () => {
    const requestRemoveCanvasGenerationDialog = vi.fn();
    const dialog = createPlaceholderDialog('character');
    render(
      <KeyboardShortcutsHarness
        initialTool="character"
        initialGenerateDialog={dialog}
        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
    });

    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(dialog);
    expect(screen.getByTestId('generate-dialog').textContent).toBe(
      'character:idle:true',
    );
    expect(screen.getByTestId('active-tool').textContent).toBe('select');
    expect(screen.getByTestId('character-menu').textContent).toBe('false');
    expect(screen.getByTestId('character-picking').textContent).toBe('false');
    expect(screen.getByTestId('icon-menu').textContent).toBe('false');
    expect(screen.getByTestId('icon-picking').textContent).toBe('false');
  });

  it('requests deleting generating placeholders with Delete', () => {
    const requestRemoveCanvasGenerationDialog = vi.fn();
    const generatingDialog = createPlaceholderDialog('generate');
    generatingDialog.status = 'generating';
    render(
      <KeyboardShortcutsHarness
        initialTool="generate"
        initialGenerateDialog={generatingDialog}
        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
    });

    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(
      generatingDialog,
    );
    expect(screen.getByTestId('active-tool').textContent).toBe('select');
  });

  it('removes audio generation placeholders with Backspace', () => {
    const requestRemoveCanvasGenerationDialog = vi.fn();
    render(
      <KeyboardShortcutsHarness
        initialTool="music"
        initialGenerateDialog={createPlaceholderDialog('audio-sound-effect')}
        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
    });

    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(
      expect.objectContaining({ id: 'dialog-1' }),
    );
    expect(screen.getByTestId('active-tool').textContent).toBe('select');
  });

  it('removes publication generation placeholders with Backspace', () => {
    const requestRemoveCanvasGenerationDialog = vi.fn();
    const dialog = createPlaceholderDialog('publication');
    render(
      <KeyboardShortcutsHarness
        initialTool="publication"
        initialGenerateDialog={dialog}
        requestRemoveCanvasGenerationDialog={requestRemoveCanvasGenerationDialog}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' });
    });

    expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(dialog);
    expect(screen.getByTestId('active-tool').textContent).toBe('select');
    expect(screen.getByTestId('publication-reference-menu').textContent).toBe(
      'false',
    );
    expect(
      screen.getByTestId('publication-reference-picking').textContent,
    ).toBe('false');
  });

  it('closes transient editor panels with Escape and collapses idle composers', () => {
    const closeEditorChromePanels = vi.fn();
    render(
      <KeyboardShortcutsHarness
        closeEditorChromePanels={closeEditorChromePanels}
        initialGenerateDialog={createPlaceholderDialog('generate')}
        initialQuickEditPanel={{
          sourceLayerId: 'layer-source',
          prompt: '局部修改',
          size: '1024x1024',
          model: 'mock',
          status: 'idle',
        }}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
    });

    expect(closeEditorChromePanels).toHaveBeenCalledTimes(1);
    expect(screen.getByTestId('generate-dialog').textContent).toBe(
      'generate:idle:false',
    );
    expect(screen.getByTestId('quick-edit').textContent).toBe('none');
    expect(screen.getByTestId('image-context').textContent).toBe('false');
    expect(screen.getByTestId('context-menu').textContent).toBe('false');
    expect(screen.getByTestId('spec-menu').textContent).toBe('false');
    expect(screen.getByTestId('publication-reference-menu').textContent).toBe(
      'false',
    );
    expect(
      screen.getByTestId('publication-reference-picking').textContent,
    ).toBe('false');
    expect(screen.getByTestId('character-menu').textContent).toBe('false');
    expect(screen.getByTestId('icon-menu').textContent).toBe('false');
  });

  it('collapses idle publication composer with Escape', () => {
    render(
      <KeyboardShortcutsHarness
        initialGenerateDialog={createPlaceholderDialog('publication')}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
    });

    expect(screen.getByTestId('generate-dialog').textContent).toBe(
      'publication:idle:false',
    );
    expect(screen.getByTestId('publication-reference-menu').textContent).toBe(
      'false',
    );
    expect(
      screen.getByTestId('publication-reference-picking').textContent,
    ).toBe('false');
  });

  it('keeps generating panels open when Escape closes transient chrome', () => {
    const generatingDialog = createPlaceholderDialog('generate');
    generatingDialog.status = 'generating';
    render(
      <KeyboardShortcutsHarness
        initialGenerateDialog={generatingDialog}
        initialQuickEditPanel={{
          sourceLayerId: 'layer-source',
          prompt: '继续修改',
          size: '1024x1024',
          model: 'mock',
          status: 'generating',
        }}
      />,
    );

    act(() => {
      fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
    });

    expect(screen.getByTestId('generate-dialog').textContent).toBe(
      'generate:generating:true',
    );
    expect(screen.getByTestId('quick-edit').textContent).toBe('generating');
  });

  it('toggles temporary panning with Space outside editable inputs', () => {
    render(<KeyboardShortcutsHarness />);

    act(() => {
      fireEvent.keyDown(window, { key: ' ', code: 'Space' });
    });
    expect(screen.getByTestId('space-panning').textContent).toBe('true');

    act(() => {
      fireEvent.keyUp(window, { key: ' ', code: 'Space' });
    });
    expect(screen.getByTestId('space-panning').textContent).toBe('false');

    act(() => {
      fireEvent.keyDown(screen.getByLabelText('快捷键输入框'), {
        key: ' ',
        code: 'Space',
      });
    });
    expect(screen.getByTestId('space-panning').textContent).toBe('false');
  });

  it('tracks Shift key state', () => {
    render(<KeyboardShortcutsHarness />);

    act(() => {
      fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
    });
    expect(screen.getByTestId('shift-pressed').textContent).toBe('true');

    act(() => {
      fireEvent.keyUp(window, { key: 'Shift', code: 'ShiftLeft' });
    });
    expect(screen.getByTestId('shift-pressed').textContent).toBe('false');
  });
});