import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { ReactNode } from 'react';
import DocumentsGrid from '../DocumentsGrid';
import DocumentsList from '../DocumentsList';
import DesktopWorkspace from '../../desktop/DesktopWorkspace';
import { isTagTransferEvent } from '../tagTransfer';
import PreviewZoomOverlay from '../../detail/PreviewZoomOverlay';
import { isPointerModifierEvent, isPrimaryPointerEvent } from '../useEntryPointer';
import {
  WorkspaceSelectionProvider,
  useWorkspaceSelectionContext,
} from '../../app/WorkspaceSelectionContext';
import type { WorkspaceSelectionValue } from '../../app/WorkspaceSelectionContext';
import DocumentsPanelHeader, {
  DocumentsPanelHeaderConfig,
  DocumentsHeaderBreadcrumb,
} from './DocumentsPanelHeader';
import { SelectionFloatingPanel } from '../SelectionFloatingActions';
import { createDocumentsTableHeaderActions } from './DocumentsToolbar';
import { useDocumentsFilter } from '../context/DocumentsFilterContext';

const DEFAULT_GRID_ICON_SIZE = 144;

const EntryType = {
  folder: 'folder',
  document: 'document',
};

interface DocumentsPanelInnerProps {
  headerLeading?: ReactNode;
  onBreadcrumbNavigate?: (crumb: DocumentsHeaderBreadcrumb) => void;
  [key: string]: any;
}

interface DocumentsPanelProps extends DocumentsPanelInnerProps {
  selectionValue: WorkspaceSelectionValue;
}

const defaultGetDocumentAsset = (_doc?: unknown, _type?: string) => null;

export type DocumentLinkLike = { url?: string | null; mimeType?: string | null };

const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
  headerLeading = null,
  onBreadcrumbNavigate,
  currentFolderName,
  breadcrumbs,
  subfolders,
  documents,
  searchResultIds,
  onFolderSelect,
  onFolderDrop,
  onFolderDragOver,
  onFolderDragLeave,
  onFolderDragStart,
  onFolderDragEnd,
  draggedFolderId,
  onFolderRename,
  draggingDocumentIds = [],
  onDocumentDragStart,
  onDocumentDragEnd,
  onDocumentRename,
  onEntryPointer = null,
  onDocumentActivate = null,
  tagLookupById,
  activeCorrespondentIds = [],
  ensureAssetUrl = null,
  getDocumentAsset = defaultGetDocumentAsset,
  isSearchLoading = false,
  onDocumentTagDrop,
  viewMode = 'list',
  onViewModeChange,
  documentLinks,
  ensureDownloadUrl,
  deskWorkspaceProps = null,
  onRefresh = () => {},
  sortField,
  sortDirection,
  onSortFieldChange,
  onSortDirectionToggle,
  onDeleteSelection,
  documentLookup,
  tags,
  correspondents,
  onBulkTagAdd,
  onBulkTagRemove,
  onBulkCorrespondentAdd,
  onBulkCorrespondentRemove,
  onBulkReanalyze,
  folderOptions,
  onMoveDocumentsToFolder,
}): ReactNode => {
  const {
    selectedEntries,
    focusedRowKey,
    setFocusedRowKey,
    handleEntrySelection,
    clearSelection,
  } = useWorkspaceSelectionContext();
  const {
    isActive: isFilterActive,
    includeDescendants,
    toggleIncludeDescendants,
    toggleTag: toggleTagFilter,
    toggleCorrespondent: toggleCorrespondentFilter,
  } = useDocumentsFilter();
  const searchDocuments = useMemo(
    () =>
      Array.isArray(searchResultIds)
        ? searchResultIds
            .map((id) => documentLookup?.get?.(id) || null)
            .filter((doc): doc is Record<string, unknown> => Boolean(doc))
        : null,
    [searchResultIds, documentLookup],
  );
  const showingSearchResults = Array.isArray(searchResultIds);
  const rows = showingSearchResults && searchDocuments ? searchDocuments : documents;
  const documentLinkMap = documentLinks instanceof Map ? documentLinks : null;
  const searchResultCount = Array.isArray(searchResultIds) ? searchResultIds.length : 0;
  const headerTitle = showingSearchResults
    ? 'Search results'
    : currentFolderName || 'Documents';
  const headerSubtitle = showingSearchResults
    ? `${searchResultCount} matching document${searchResultCount === 1 ? '' : 's'}`
    : null;
  const headerActions = useMemo(
    () => createDocumentsTableHeaderActions({
      viewMode,
      onViewModeChange,
      onRefresh,
      sortField,
      onSortFieldChange,
      sortDirection,
      onSortDirectionToggle,
      isFilterActive,
      includeDescendants,
      onToggleIncludeDescendants: toggleIncludeDescendants,
    }),
    [
      viewMode,
      onViewModeChange,
      onRefresh,
      sortField,
      onSortFieldChange,
      sortDirection,
      onSortDirectionToggle,
      isFilterActive,
      includeDescendants,
      toggleIncludeDescendants,
    ],
  );
  const floatingActions = useMemo(() => (
    <SelectionFloatingPanel
      documentLookup={documentLookup}
      tags={tags}
      tagLookupById={tagLookupById}
      correspondents={correspondents}
      onBulkTagAdd={onBulkTagAdd}
      onBulkTagRemove={onBulkTagRemove}
      onBulkCorrespondentAdd={onBulkCorrespondentAdd}
      onBulkCorrespondentRemove={onBulkCorrespondentRemove}
      onBulkReanalyze={onBulkReanalyze}
      onDeleteSelection={onDeleteSelection}
      folderOptions={folderOptions}
      onMoveDocumentsToFolder={onMoveDocumentsToFolder}
      onClearSelection={clearSelection}
    />
  ), [
    documentLookup,
    tags,
    tagLookupById,
    correspondents,
    onBulkTagAdd,
    onBulkTagRemove,
    onBulkCorrespondentAdd,
    onBulkCorrespondentRemove,
    onBulkReanalyze,
    onDeleteSelection,
    folderOptions,
    onMoveDocumentsToFolder,
    clearSelection,
  ]);
  const headerConfig: DocumentsPanelHeaderConfig = useMemo(() => ({
    title: headerTitle,
    subtitle: headerSubtitle,
    leading: headerLeading,
    actions: headerActions,
    breadcrumbs,
    floatingActions,
  }), [
    headerTitle,
    headerSubtitle,
    headerLeading,
    headerActions,
    breadcrumbs,
    floatingActions,
  ]);

  const currentFolderId = useMemo(() => {
    if (showingSearchResults) {
      return null;
    }
    const trail = Array.isArray(breadcrumbs) ? breadcrumbs : [];
    if (trail.length === 0) {
      return 'root';
    }
    return trail[trail.length - 1]?.id || 'root';
  }, [breadcrumbs, showingSearchResults]);

  const selectionContextRef = useRef(null);
  useEffect(() => {
    const nextContext = showingSearchResults
      ? { type: 'search', marker: searchResultIds }
      : { type: 'folder', marker: currentFolderId || 'root' };
    const previous = selectionContextRef.current;
    selectionContextRef.current = nextContext;
    if (!previous) {
      return;
    }
    const changed = previous.type !== nextContext.type
      || previous.marker !== nextContext.marker;
    if (changed) {
      clearSelection();
    }
  }, [showingSearchResults, currentFolderId, searchResultIds, clearSelection]);

  const entries = useMemo(() => {
    const list = [];
    if (!showingSearchResults) {
      subfolders.forEach((folder) => {
        if (!folder || !folder.id) {
          return;
        }
        list.push({ type: EntryType.folder, id: folder.id, key: `folder:${folder.id}`, folder });
      });
    }
    rows.forEach((doc) => {
      if (!doc || !doc.id) {
        return;
      }
      list.push({ type: EntryType.document, id: doc.id, key: `document:${doc.id}`, document: doc });
    });
    return list;
  }, [showingSearchResults, subfolders, rows]);

  const draggingSet = useMemo(
    () => new Set(draggingDocumentIds || []),
    [draggingDocumentIds],
  );
  const activeCorrespondentIdSet = useMemo(
    () => new Set(activeCorrespondentIds || []),
    [activeCorrespondentIds],
  );
  const scrollRef = useRef<HTMLElement | null>(null);
  const suppressDocumentClickRef = useRef(false);
  const isGridView = viewMode === 'grid';
  const isDeskView = viewMode === 'desk';

  type Identifier = string | number;
type ZoomSource = { url: string; alt?: string | null; mimeType?: string | null };

  const [previewDocId, setPreviewDocId] = useState<Identifier | null>(null);

  const previewDoc = useMemo(() => {
    if (!previewDocId) {
      return null;
    }
    return rows.find((doc) => doc?.id === previewDocId) || null;
  }, [previewDocId, rows]);

  useEffect(() => {
    if (previewDocId && !previewDoc) {
      setPreviewDocId(null);
    }
  }, [previewDocId, previewDoc]);

  const [previewZoomSource, setPreviewZoomSource] = useState<ZoomSource | null>(null);
  const zoomDisplay = previewZoomSource;
  const overlayDocument = useMemo(() => (
    previewDoc && zoomDisplay?.url
      ? { ...previewDoc, documentLink: zoomDisplay }
      : previewDoc
  ), [previewDoc, zoomDisplay]);

  useEffect(() => {
    let cancelled = false;
    if (!previewDocId || !previewDoc) {
      setPreviewZoomSource(null);
      return () => {
        cancelled = true;
      };
    }
    const documentMimeType = previewDoc.mime_type;

    const applyEntry = (entry?: DocumentLinkLike | null) => {
      if (!entry?.url) {
        setPreviewZoomSource(null);
        return;
      }
      setPreviewZoomSource({
        url: entry.url,
        alt: previewDoc.title,
        mimeType: documentMimeType,
      });
    };

    const cachedEntry = documentLinkMap?.get(previewDocId) || null;
    if (cachedEntry?.url) {
      applyEntry(cachedEntry);
      return () => {
        cancelled = true;
      };
    }

    if (!ensureDownloadUrl) {
      setPreviewZoomSource(null);
      return () => {
        cancelled = true;
      };
    }

    ensureDownloadUrl(previewDocId)
      .then((entry) => {
        if (cancelled) {
          return;
        }
        applyEntry(entry);
      })
      .catch(() => {
        if (!cancelled) {
          setPreviewZoomSource(null);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [previewDocId, previewDoc, documentLinkMap, ensureDownloadUrl]);

  const closePreviewOverlay = useCallback(() => {
    setPreviewDocId(null);
    setPreviewZoomSource(null);
  }, []);

  const handleDocumentPreviewZoom = useCallback(
    (doc) => {
      if (!doc || !doc.id) {
        return;
      }
      if (!ensureDownloadUrl && !(documentLinkMap?.get(doc.id)?.url)) {
        return;
      }
      setPreviewDocId(doc.id);
    },
    [ensureDownloadUrl, documentLinkMap],
  );

  const handleDocumentActivate = useCallback(
    (doc, event?: React.MouseEvent | KeyboardEvent | null) => {
      if (!doc) {
        return;
      }
      if (event) {
        event.preventDefault();
        event.stopPropagation();
      }
      if (event?.altKey) {
        handleDocumentPreviewZoom(doc);
        return;
      }
      onDocumentActivate?.(doc.id);
    },
    [handleDocumentPreviewZoom, onDocumentActivate],
  );

  const navigableRows = useMemo(
    () => entries.map((entry) => ({ key: entry.key, type: entry.type, id: entry.id })),
    [entries],
  );
  const navigableRowKeys = useMemo(() => navigableRows.map((row) => row.key), [navigableRows]);

  const getEntryByKey = useCallback(
    (rowKey) => entries.find((entry) => entry.key === rowKey) || null,
    [entries],
  );

  const handlePanelFocus = useCallback(() => {
    let resolvedKey = null;

    if (focusedRowKey && navigableRowKeys.includes(focusedRowKey)) {
      resolvedKey = focusedRowKey;
    }

    if (!resolvedKey) {
      for (let index = selectedEntries.length - 1; index >= 0; index -= 1) {
        const candidate = selectedEntries[index];
        if (navigableRowKeys.includes(candidate)) {
          resolvedKey = candidate;
          break;
        }
      }
    }

    if (!resolvedKey) {
      if (!selectedEntries.length) {
        return;
      }
      if (navigableRows.length) {
        resolvedKey = navigableRows[0].key;
      }
    }

    if (!resolvedKey) {
      return;
    }

    setFocusedRowKey(resolvedKey);
  }, [
    focusedRowKey,
    navigableRowKeys,
    navigableRows,
    setFocusedRowKey,
    selectedEntries,
  ]);

  const handlePanelKeyDown = useCallback(
    (event) => {
      const { key, shiftKey } = event;
      const triggers = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ', 'Space', 'Spacebar'];
      if (!triggers.includes(key)) {
        return;
      }

      if (!navigableRows.length) {
        return;
      }

      event.preventDefault();

      let activeKey =
        focusedRowKey && navigableRowKeys.includes(focusedRowKey)
          ? focusedRowKey
          : null;

      if (!activeKey) {
        if (selectedEntries.length) {
          for (let index = selectedEntries.length - 1; index >= 0; index -= 1) {
            const candidate = selectedEntries[index];
            if (navigableRowKeys.includes(candidate)) {
              activeKey = candidate;
              break;
            }
          }
        }

        if (!activeKey) {
          activeKey = key === 'ArrowUp' ? navigableRowKeys[navigableRowKeys.length - 1] : navigableRowKeys[0];
        }
      }

      const currentIndex = navigableRowKeys.indexOf(activeKey);
      const activeRow = currentIndex === -1 ? null : navigableRows[currentIndex];

      if (key === 'Enter' || key === ' ' || key === 'Space' || key === 'Spacebar') {
        if (activeRow) {
          handleEntrySelection(activeRow.key, event);
          if (activeRow.type === EntryType.folder) {
            onFolderSelect?.(activeRow.id);
          } else {
            const entry = getEntryByKey(activeRow.key);
            if (entry?.document) {
              handleDocumentPreviewZoom(entry.document);
            }
          }
        }
        return;
      }

      let nextIndex = currentIndex;
      if (key === 'ArrowDown') {
        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, navigableRows.length - 1);
      } else if (key === 'ArrowUp') {
        nextIndex = currentIndex === -1 ? navigableRows.length - 1 : Math.max(currentIndex - 1, 0);
      } else if (key === 'Home') {
        nextIndex = 0;
      } else if (key === 'End') {
        nextIndex = navigableRows.length - 1;
      }

      if (nextIndex === -1 || nextIndex >= navigableRows.length) {
        return;
      }

      const targetRow = navigableRows[nextIndex];
      if (!targetRow) {
        return;
      }

      setFocusedRowKey(targetRow.key);
      handleEntrySelection(targetRow.key, {
        shiftKey,
        preventDefault: () => {},
      });
    },
    [
      focusedRowKey,
      getEntryByKey,
      navigableRowKeys,
      navigableRows,
      onFolderSelect,
      selectedEntries,
      handleDocumentPreviewZoom,
      handleEntrySelection,
      setFocusedRowKey,
    ],
  );

  const gridIconSize = DEFAULT_GRID_ICON_SIZE;

  const scrollToTop = useCallback(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0;
    }
  }, []);

  const searchKey = useMemo(
    () => (Array.isArray(searchResultIds) ? searchResultIds.join(':') : 'none'),
    [searchResultIds],
  );

  const breadcrumbKey = useMemo(
    () => (Array.isArray(breadcrumbs) ? breadcrumbs.map((crumb) => crumb?.id ?? '').join(':') : 'none'),
    [breadcrumbs],
  );

  useEffect(() => {
    scrollToTop();
  }, [
    scrollToTop,
    viewMode,
    showingSearchResults,
    searchKey,
    breadcrumbKey,
  ]);

  const isTagDragEvent = useCallback((event) => isTagTransferEvent(event), []);
  const ensureFocusedRowVisible = useCallback(() => {
    if (!focusedRowKey) return;
    const container = scrollRef.current;
    if (!container) return;
    let selector = null;
    if (focusedRowKey.startsWith('document:')) {
      selector = `#document-row-${focusedRowKey.slice('document:'.length)}`;
    } else if (focusedRowKey.startsWith('folder:')) {
      selector = `#folder-row-${focusedRowKey.slice('folder:'.length)}`;
    }
    if (!selector) {
      return;
    }
    const row = container.querySelector(selector);
    if (!row || !container.contains(row)) {
      return;
    }

    const header = container.querySelector('thead');
    const headerHeight = header ? header.getBoundingClientRect().height : 0;
    const rowTop = row.offsetTop;
    const rowBottom = rowTop + row.offsetHeight;
    const visibleTop = container.scrollTop + headerHeight;
    const visibleBottom = container.scrollTop + container.clientHeight;

    if (rowTop < visibleTop) {
      container.scrollTop = Math.max(rowTop - headerHeight, 0);
      return;
    }

    if (rowBottom > visibleBottom) {
      const nextScrollTop = rowBottom - container.clientHeight;
      container.scrollTop = Math.max(nextScrollTop, 0);
    }
  }, [focusedRowKey]);

  useEffect(() => {
    ensureFocusedRowVisible();
  }, [ensureFocusedRowVisible]);

  const activeDescendantId = useMemo(() => {
    if (!focusedRowKey) return undefined;
    if (focusedRowKey.startsWith('document:')) {
      return `document-row-${focusedRowKey.slice('document:'.length)}`;
    }
    if (focusedRowKey.startsWith('folder:')) {
      return `folder-row-${focusedRowKey.slice('folder:'.length)}`;
    }
    return undefined;
  }, [focusedRowKey]);

  const handleDocumentTagDragOver = useCallback(
    (event) => {
      if (!isTagDragEvent(event)) {
        return;
      }
      event.preventDefault();
      event.dataTransfer.dropEffect = 'copy';
      event.currentTarget.classList.add('tag-drop-target');
    },
    [isTagDragEvent],
  );

  const handleDocumentTagDragLeave = useCallback(
    (event) => {
      if (!isTagDragEvent(event)) {
        return;
      }
      if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
        return;
      }
      event.currentTarget.classList.remove('tag-drop-target');
    },
    [isTagDragEvent],
  );

  const handleDocumentTagDrop = useCallback(
    (event, documentId) => {
      if (!isTagDragEvent(event)) {
        return;
      }
      event.preventDefault();
      event.stopPropagation();
      event.currentTarget.classList.remove('tag-drop-target');
      const payload =
        event.dataTransfer.getData('application/x-papercrate-tag') ||
        event.dataTransfer.getData('text/papercrate-tag');
      if (!payload) {
        return;
      }
      try {
        const parsed = JSON.parse(payload);
        if (parsed?.id && onDocumentTagDrop) {
          onDocumentTagDrop(documentId, parsed);
        }
      } catch (error) {
        console.warn('[documents] Failed to parse tag drop payload', error);
      }
    },
    [isTagDragEvent, onDocumentTagDrop],
  );

  const handleDocumentClick = useCallback(
    (doc, event) => {
      if (!doc || suppressDocumentClickRef.current || !onEntryPointer) {
        return;
      }

      onEntryPointer(
        { type: EntryType.document, id: doc.id, key: `document:${doc.id}`, document: doc },
        event,
      );
    },
    [onEntryPointer],
  );

  const handleFolderClick = useCallback(
    (folder, event) => {
      if (!folder) {
        return;
      }

      if (onEntryPointer) {
        onEntryPointer(
          { type: EntryType.folder, id: folder.id, key: `folder:${folder.id}`, folder },
          event,
        );
      }

      if (
        !isPointerModifierEvent(event)
        && isPrimaryPointerEvent(event)
        && scrollRef.current
      ) {
        scrollRef.current.focus({ preventScroll: true });
        setFocusedRowKey(`folder:${folder.id}`);
      }
    },
    [onEntryPointer, setFocusedRowKey],
  );

  const handleDocumentDragStartLocal = useCallback(
    (event, doc) => {
      suppressDocumentClickRef.current = true;
      onDocumentDragStart?.(event, doc);
    },
    [onDocumentDragStart],
  );

  const handleDocumentDragEndLocal = useCallback(
    (event) => {
      onDocumentDragEnd?.(event);
      requestAnimationFrame(() => {
        suppressDocumentClickRef.current = false;
      });
    },
    [onDocumentDragEnd],
  );

  const hasDocumentEntries = useMemo(
    () => entries.some((entry) => entry.type === EntryType.document),
    [entries],
  );
  const showTableRows = entries.length > 0;
  const showDefaultEmptyState = !showingSearchResults && !isFilterActive && entries.length === 0;
  const showListSearchEmptyState = showingSearchResults && !hasDocumentEntries && !isGridView && !isSearchLoading;
  const showGridSearchEmptyState = isGridView && showingSearchResults && !hasDocumentEntries && !isSearchLoading;
  const renderBody = () => {
    if (isDeskView) {
      return deskWorkspaceProps ? (
        <DesktopWorkspace {...deskWorkspaceProps} />
      ) : (
        <div className="empty-state empty-state--global">
          Desk view is unavailable.
        </div>
      );
    }

    if (showDefaultEmptyState) {
      return (
        <div className="empty-state">
          Drop files anywhere or onto a folder to upload documents.
        </div>
      );
    }

    if (showGridSearchEmptyState) {
      return (
        <div className="empty-state empty-state--global">
          No documents match the current filters.
        </div>
      );
    }

    if (showListSearchEmptyState) {
      return (
        <div className="empty-state">No documents match the current filters.</div>
      );
    }

    if (!showTableRows) {
      return null;
    }

    if (isGridView) {
      return (
        <DocumentsGrid
          entries={entries}
          draggingDocumentIdsSet={draggingSet}
          draggedFolderId={draggedFolderId}
          onFolderClick={handleFolderClick}
          onFolderSelect={onFolderSelect}
          onFolderDragOver={onFolderDragOver}
          onFolderDragLeave={onFolderDragLeave}
          onFolderDrop={onFolderDrop}
          onFolderDragStart={onFolderDragStart}
          onFolderDragEnd={onFolderDragEnd}
          onDocumentClick={handleDocumentClick}
          onDocumentActivate={handleDocumentActivate}
          onDocumentDragStart={handleDocumentDragStartLocal}
          onDocumentDragEnd={handleDocumentDragEndLocal}
          onDocumentTagDragOver={handleDocumentTagDragOver}
          onDocumentTagDragLeave={handleDocumentTagDragLeave}
          onDocumentTagDrop={onDocumentTagDrop}
          ensureAssetUrl={ensureAssetUrl}
          getDocumentAsset={getDocumentAsset}
          gridIconSize={gridIconSize}
          tagLookupById={tagLookupById}
          onTagClick={toggleTagFilter}
          scrollRef={scrollRef}
          onCorrespondentClick={toggleCorrespondentFilter}
          activeCorrespondentIdSet={activeCorrespondentIdSet}
          onDocumentRename={onDocumentRename}
          onFolderRename={onFolderRename}
        />
      );
    }

    return (
      <DocumentsList
        entries={entries}
        focusedRowKey={focusedRowKey}
        draggingDocumentIdsSet={draggingSet}
        draggedFolderId={draggedFolderId}
        ensureAssetUrl={ensureAssetUrl}
        getDocumentAsset={getDocumentAsset}
        onFolderClick={handleFolderClick}
        onFolderSelect={onFolderSelect}
        onFolderDragOver={onFolderDragOver}
        onFolderDragLeave={onFolderDragLeave}
        onFolderDrop={onFolderDrop}
        onFolderDragStart={onFolderDragStart}
        onFolderDragEnd={onFolderDragEnd}
        onFolderRename={onFolderRename}
        onDocumentClick={handleDocumentClick}
        onDocumentActivate={handleDocumentActivate}
        onDocumentDragStart={handleDocumentDragStartLocal}
        onDocumentDragEnd={handleDocumentDragEndLocal}
        onDocumentTagDragOver={handleDocumentTagDragOver}
        onDocumentTagDragLeave={handleDocumentTagDragLeave}
        onDocumentTagDrop={handleDocumentTagDrop}
        onDocumentRename={onDocumentRename}
        tagLookupById={tagLookupById}
        onTagClick={toggleTagFilter}
        onCorrespondentClick={toggleCorrespondentFilter}
        activeCorrespondentIdSet={activeCorrespondentIdSet}
        scrollRef={scrollRef}
      />
    );
  };

  const panelVariant = isDeskView ? 'desk' : isGridView ? 'grid' : 'list';
  const shouldHandlePanelInteractions = !isDeskView && showTableRows;

  const handleSectionFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
    if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
      return;
    }
    handlePanelFocus();
  }, [shouldHandlePanelInteractions, handlePanelFocus]);

  const handleSectionKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>) => {
    if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
      return;
    }
    handlePanelKeyDown(event);
  }, [shouldHandlePanelInteractions, handlePanelKeyDown]);

  const handleSectionClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
    if (!shouldHandlePanelInteractions || event.target !== event.currentTarget) {
      return;
    }
    clearSelection();
  }, [shouldHandlePanelInteractions, clearSelection]);

  return (
    <>
      <DocumentsPanelHeader
        header={headerConfig}
        onBreadcrumbClick={onBreadcrumbNavigate}
      />
      <section
        ref={scrollRef}
        className={`documents-panel documents-panel--view-${panelVariant}`}
        tabIndex={shouldHandlePanelInteractions ? 0 : undefined}
        onFocus={handleSectionFocus}
        onKeyDown={handleSectionKeyDown}
        onClick={handleSectionClick}
        aria-activedescendant={shouldHandlePanelInteractions && !isGridView ? activeDescendantId : undefined}
      >
        {renderBody()}
      </section>
      <PreviewZoomOverlay
        open={Boolean(zoomDisplay?.url)}
        onClose={closePreviewOverlay}
        document={overlayDocument}
      />
    </>
  );
};

const DocumentsPanel: React.FC<DocumentsPanelProps> = ({ selectionValue, ...rest }) => (
  <WorkspaceSelectionProvider value={selectionValue}>
    <DocumentsPanelInner {...rest} />
  </WorkspaceSelectionProvider>
);

export default DocumentsPanel;