import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { useDownloadStore, DownloadItem, MAIN_QUEUE_ID } from '../store/useDownloadStore';
import { useDownloadProgressStore } from '../store/downloadProgressStore';
import { useToast } from '../contexts/ToastContext';
import { useSettingsStore } from '../store/useSettingsStore';
import { SidebarFilter } from './Sidebar';
import {
  Play, Pause, Plus, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion,
  ArrowDownCircle, ArrowUp, ArrowDown, Command, ChevronRight, ChevronUp, ChevronDown, MoreHorizontal,
  AlignLeft, AlignCenter, AlignRight, GripVertical
} from 'lucide-react';
import { DownloadItem as DownloadItemComponent } from './DownloadItem';
import { invokeCommand as invoke } from '../ipc';
import {
  resolveCategoryDestination,
  resolveDownloadFilePath
} from '../utils/downloadLocations';
import {
  canPauseDownload,
  canRedownload,
  canStartDownload
} from '../utils/downloadActions';
import { isActiveDownloadStatus, isTransferActiveStatus } from '../utils/downloads';
import { summarizeDownloads, type DownloadSummary } from '../utils/downloadSummary';
import { readClipboardDownloadUrls } from '../utils/clipboard';
import { useTranslation } from 'react-i18next';
import {
  sortDownloads,
  type DownloadSortColumn,
  type DownloadSortConfig
} from '../utils/downloadTableSorting';
import {
  COLUMN_ALIGNMENTS_STORAGE_KEY,
  COLUMN_ALIGNMENT_JUSTIFY,
  COLUMN_MINIMUMS,
  COLUMN_ORDER_STORAGE_KEY,
  COLUMN_WIDTHS_STORAGE_KEY,
  DEFAULT_COLUMN_ALIGNMENTS,
  DEFAULT_COLUMN_ORDER,
  DEFAULT_COLUMN_WIDTHS,
  buildColumnGridTemplate,
  columnIndex,
  getColumnGridColumn,
  normalizeColumnAlignments,
  normalizeColumnOrder,
  normalizeColumnWidths,
  type DownloadColumnAlignment,
  type DownloadTableColumnKey
} from '../utils/downloadTableColumns';
import {
  moveSelectedBlockToIndex
} from '../utils/queueOrdering';

export interface DownloadTableStatusSummary {
  summary: DownloadSummary;
}

interface DownloadTableProps {
  filter: SidebarFilter;
  onSummaryChange?: (summary: DownloadTableStatusSummary | null) => void;
}

const persistColumnWidths = (widths: number[]): void => {
  try {
    window.localStorage.setItem(COLUMN_WIDTHS_STORAGE_KEY, JSON.stringify(widths));
  } catch {
    // Local storage can be unavailable in restricted WebView contexts.
  }
};

const persistColumnOrder = (order: DownloadTableColumnKey[]): void => {
  try {
    window.localStorage.setItem(COLUMN_ORDER_STORAGE_KEY, JSON.stringify(order));
  } catch {
    // Local storage can be unavailable in restricted WebView contexts.
  }
};

const persistColumnAlignments = (alignments: Record<DownloadTableColumnKey, DownloadColumnAlignment>): void => {
  try {
    window.localStorage.setItem(COLUMN_ALIGNMENTS_STORAGE_KEY, JSON.stringify(alignments));
  } catch {
    // Local storage can be unavailable in restricted WebView contexts.
  }
};

const QUEUE_ROW_REORDER_DURATION = 180;
const QUEUE_ROW_REORDER_EASING = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
const COLUMN_REORDER_DURATION = QUEUE_ROW_REORDER_DURATION;
const COLUMN_REORDER_EASING = QUEUE_ROW_REORDER_EASING;

interface ColumnDragState {
  key: DownloadTableColumnKey;
  startX: number;
  pointerX: number;
  offsetX: number;
  top: number;
  width: number;
  dropIndex: number;
  markerX: number;
}

interface ColumnMenuState {
  key: DownloadTableColumnKey;
  x: number;
  y: number;
}

interface ColumnLayoutBounds {
  left: number;
  right: number;
}

interface QueueDragState {
  pointerId: number;
  sourceId: string;
  queueId: string;
  ids: string[];
  startX: number;
  startY: number;
  pointerY: number;
  pointerOffsetY: number;
  active: boolean;
  targetIndex: number;
  markerTop: number;
}

interface QueueDragRowGeometry {
  top: number;
  height: number;
  space: number;
}

interface QueueDragGeometry {
  listTop: number;
  scrollTop: number;
  rows: Map<string, QueueDragRowGeometry>;
}

interface ColumnMotionLayout {
  element: HTMLElement;
  left: number;
}

export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryChange }) => {
  const { t } = useTranslation();
  const {
    downloads,
    queues,
    assignToQueue,
    openDeleteModal,
    redownload,
    moveInQueue,
    moveManyInQueueToPosition
  } = useDownloadStore();
  const progressMap = useDownloadProgressStore(state => state.progressMap);
  const { addToast } = useToast();
  const isMac = navigator.userAgent.includes('Mac');
  const [isReadingClipboard, setIsReadingClipboard] = useState(false);
  const clipboardReadInFlightRef = useRef(false);
  const isMountedRef = useRef(true);

  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
  const [sortConfig, setSortConfig] = useState<DownloadSortConfig>({ column: 'Date Added', direction: 'desc' });
  const [queueSortConfig, setQueueSortConfig] = useState<DownloadSortConfig | null>(null);
  const resizeCleanupRef = useRef<(() => void) | null>(null);
  const dragGestureRef = useRef<{
    key: DownloadTableColumnKey;
    pointerId: number;
    startX: number;
    startY: number;
    active: boolean;
  } | null>(null);
  const headerElementsRef = useRef(new Map<DownloadTableColumnKey, HTMLDivElement>());
  const headerContainerRef = useRef<HTMLDivElement>(null);
  const headerRef = useCallback((element: HTMLDivElement | null) => {
    headerContainerRef.current = element;
  }, []);
  const columnDragStateRef = useRef<ColumnDragState | null>(null);
  const columnDragOrderRef = useRef<DownloadTableColumnKey[] | null>(null);
  const columnDragLayoutRef = useRef<Map<DownloadTableColumnKey, ColumnLayoutBounds> | null>(null);
  const columnDragTargetRef = useRef<HTMLDivElement | null>(null);
  const columnDragCaptureTargetRef = useRef<HTMLDivElement | null>(null);
  const columnDragCapturePointerIdRef = useRef<number | null>(null);
  const columnDragCleanupRef = useRef<(() => void) | null>(null);
  const columnDropFlashTimerRef = useRef<number | null>(null);
  const columnMotionFirstRef = useRef<ColumnMotionLayout[] | null>(null);
  const columnMotionElementsRef = useRef(new Set<HTMLElement>());
  const columnMotionFrameRef = useRef<number | null>(null);
  const columnMotionTimerRef = useRef<number | null>(null);
  const columnMotionGenerationRef = useRef(0);
  const suppressHeaderClickRef = useRef(false);
  const selectedIdsRef = useRef(selectedIds);
  const lastSelectedIdRef = useRef(lastSelectedId);
  const sortedDownloadsRef = useRef<DownloadItem[]>([]);
  const queueListElementRef = useRef<HTMLDivElement | null>(null);
  const queueRowsContainerElementRef = useRef<HTMLDivElement | null>(null);
  const queueReorderableDownloadsRef = useRef<DownloadItem[]>([]);
  const queueDragItemsRef = useRef<DownloadItem[]>([]);
  const queueDragBaseItemsRef = useRef<DownloadItem[]>([]);
  const queueDragStateRef = useRef<QueueDragState | null>(null);
  const queueDragCleanupRef = useRef<(() => void) | null>(null);
  const queueDragCaptureTargetRef = useRef<HTMLElement | null>(null);
  const queueDragCapturePointerIdRef = useRef<number | null>(null);
  const queueDragPreviewOrderRef = useRef<string[] | null>(null);
  const queueDragGeometryRef = useRef<QueueDragGeometry | null>(null);
  const queueDragPreviewElementRef = useRef<HTMLDivElement | null>(null);
  const queueRowTopsRef = useRef(new Map<string, number>());
  const queueRowHeightsRef = useRef(new Map<string, number>());
  const queueRowAnimationFrameRef = useRef<number | null>(null);
  const queueRowAnimationTimerRef = useRef<number | null>(null);
  const queueRowAnimationActiveRef = useRef(false);
  const queueRowAnimationGenerationRef = useRef(0);
  const queueReorderPendingCountRef = useRef(0);
  const suppressQueueClickRef = useRef(false);
  const [queueDragState, setQueueDragState] = useState<QueueDragState | null>(null);
  const [queueDragPreviewOrder, setQueueDragPreviewOrder] = useState<string[] | null>(null);

  useEffect(() => {
    const className = 'is-queue-dragging';
    if (queueDragState?.active) {
      document.body.classList.add(className);
    } else {
      document.body.classList.remove(className);
    }
    return () => document.body.classList.remove(className);
  }, [queueDragState?.active]);

  selectedIdsRef.current = selectedIds;
  lastSelectedIdRef.current = lastSelectedId;
  const [columnWidths, setColumnWidths] = useState(() => {
    try {
      const stored = JSON.parse(window.localStorage.getItem(COLUMN_WIDTHS_STORAGE_KEY) || 'null');
      return normalizeColumnWidths(stored);
    } catch {
      return [...DEFAULT_COLUMN_WIDTHS];
    }
  });
  const [columnOrder, setColumnOrder] = useState<DownloadTableColumnKey[]>(() => {
    try {
      return normalizeColumnOrder(JSON.parse(window.localStorage.getItem(COLUMN_ORDER_STORAGE_KEY) || 'null'));
    } catch {
      return [...DEFAULT_COLUMN_ORDER];
    }
  });
  const [columnAlignments, setColumnAlignments] = useState(() => {
    try {
      return normalizeColumnAlignments(JSON.parse(window.localStorage.getItem(COLUMN_ALIGNMENTS_STORAGE_KEY) || 'null'));
    } catch {
      return { ...DEFAULT_COLUMN_ALIGNMENTS };
    }
  });
  const [columnDragState, setColumnDragState] = useState<ColumnDragState | null>(null);
  const [columnDragOrder, setColumnDragOrder] = useState<DownloadTableColumnKey[] | null>(null);
  const [columnMenu, setColumnMenu] = useState<ColumnMenuState | null>(null);
  const [columnDropFlashKey, setColumnDropFlashKey] = useState<DownloadTableColumnKey | null>(null);
  const [, setMenuViewportVersion] = useState(0);
  const columnWidthsRef = useRef(columnWidths);
  const columnOrderRef = useRef(columnOrder);
  const normalizedColumnWidths = columnWidthsRef.current.map((width, index) =>
    Math.max(COLUMN_MINIMUMS[index], width)
  );
  const orderedColumns = columnDragOrderRef.current ?? columnDragOrder ?? columnOrder;
  const columnMotionOrderKey = orderedColumns.join('\u0001');
  const tableGridTemplate = buildColumnGridTemplate(orderedColumns, normalizedColumnWidths);
  const tableMinWidth = normalizedColumnWidths.reduce(
    (total, width) => total + width,
    0
  );
  const tableMinWidthWithPadding = 'calc(' + tableMinWidth + 'px + var(--download-row-padding-x) + var(--download-row-padding-x))';
  const downloadsViewRef = useRef<HTMLDivElement>(null);
  const queueListRef = useCallback((element: HTMLDivElement | null) => {
    queueListElementRef.current = element;
  }, []);
  const queueRowsContainerRef = useCallback((element: HTMLDivElement | null) => {
    queueRowsContainerElementRef.current = element;
  }, []);

  const captureColumnMotionLayout = (): ColumnMotionLayout[] => {
    const header = headerContainerRef.current;
    const body = queueRowsContainerElementRef.current;
    const verticalViewport = queueListElementRef.current?.getBoundingClientRect();
    const headerElements = header
      ? Array.from(header.children).filter(
          (element): element is HTMLElement => element instanceof HTMLElement && Boolean(element.dataset.columnKey)
        )
      : [];
    const bodyElements: HTMLElement[] = [];
    if (body) {
      for (const row of Array.from(body.children)) {
        if (!(row instanceof HTMLElement) || !row.dataset.downloadId) continue;
        if (verticalViewport) {
          const rowRect = row.getBoundingClientRect();
          if (rowRect.bottom < verticalViewport.top || rowRect.top > verticalViewport.bottom) continue;
        }
        const motionElement = row.querySelector<HTMLElement>('.download-row-motion');
        if (!motionElement) continue;
        bodyElements.push(...Array.from(motionElement.children).filter(
          (element): element is HTMLElement => element instanceof HTMLElement && Boolean(element.dataset.columnKey)
        ));
      }
    }

    return [...headerElements, ...bodyElements].map(element => ({
      element,
      left: element.getBoundingClientRect().left,
    }));
  };

  const clearColumnMotionStyles = () => {
    columnMotionGenerationRef.current += 1;
    if (columnMotionFrameRef.current !== null) {
      window.cancelAnimationFrame(columnMotionFrameRef.current);
      columnMotionFrameRef.current = null;
    }
    if (columnMotionTimerRef.current !== null) {
      window.clearTimeout(columnMotionTimerRef.current);
      columnMotionTimerRef.current = null;
    }
    for (const element of columnMotionElementsRef.current) {
      element.style.removeProperty('transition');
      element.style.removeProperty('transform');
      element.style.removeProperty('will-change');
    }
    columnMotionElementsRef.current.clear();
  };

  const prepareColumnMotion = () => {
    const prefersReducedMotion = typeof window.matchMedia === 'function' &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) {
      clearColumnMotionStyles();
      columnMotionFirstRef.current = null;
      return;
    }

    // Capture the visual position before cancelling an in-flight transition.
    // The next FLIP pass can then continue from what the user actually sees
    // instead of snapping back to the previous logical grid position.
    const first = captureColumnMotionLayout();
    clearColumnMotionStyles();
    columnMotionFirstRef.current = first;
  };

  useLayoutEffect(() => {
    const first = columnMotionFirstRef.current;
    columnMotionFirstRef.current = null;
    if (!first || first.length === 0) return;

    const prefersReducedMotion = typeof window.matchMedia === 'function' &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) return;

    const moved = first.flatMap(({ element, left }) => {
      if (!element.isConnected) return [];
      const deltaX = left - element.getBoundingClientRect().left;
      return Math.abs(deltaX) > 0.5 ? [{ element, deltaX }] : [];
    });
    if (moved.length === 0) return;

    const generation = ++columnMotionGenerationRef.current;
    for (const { element, deltaX } of moved) {
      columnMotionElementsRef.current.add(element);
      element.style.willChange = 'transform';
      element.style.transition = 'none';
      element.style.transform = `translate3d(${deltaX}px, 0, 0)`;
    }
    // Commit the inverse transforms before releasing them on the next frame so
    // React's grid reflow becomes a smooth physical-LTR motion for headers and
    // every visible row cell alike.
    void headerContainerRef.current?.offsetHeight;
    void queueRowsContainerElementRef.current?.offsetHeight;

    columnMotionFrameRef.current = window.requestAnimationFrame(() => {
      columnMotionFrameRef.current = null;
      if (columnMotionGenerationRef.current !== generation) return;
      for (const { element } of moved) {
        element.style.transition = `transform ${COLUMN_REORDER_DURATION}ms ${COLUMN_REORDER_EASING}`;
        element.style.transform = 'translate3d(0, 0, 0)';
      }
    });
    columnMotionTimerRef.current = window.setTimeout(() => {
      columnMotionTimerRef.current = null;
      if (columnMotionGenerationRef.current !== generation) return;
      for (const { element } of moved) {
        element.style.removeProperty('transition');
        element.style.removeProperty('transform');
        element.style.removeProperty('will-change');
        columnMotionElementsRef.current.delete(element);
      }
    }, COLUMN_REORDER_DURATION + 60);
  }, [columnMotionOrderKey]);

  const updateColumnDragState = (next: ColumnDragState | null) => {
    columnDragStateRef.current = next;
    setColumnDragState(next);
  };

  const reorderColumn = (
    order: DownloadTableColumnKey[],
    key: DownloadTableColumnKey,
    dropIndex: number
  ): DownloadTableColumnKey[] => {
    const remainingColumns = order.filter(columnKey => columnKey !== key);
    remainingColumns.splice(dropIndex, 0, key);
    return remainingColumns;
  };

  const getColumnLayoutBounds = (element: HTMLDivElement) => {
    // CSS FLIP transforms affect the visual box; offsetLeft/offsetWidth retain
    // the stable grid geometry needed for hit-testing during a live reorder.
    const container = headerContainerRef.current;
    if (!container) {
      const rect = element.getBoundingClientRect();
      return { left: rect.left, right: rect.right };
    }

    const containerRect = container.getBoundingClientRect();
    return {
      left: containerRect.left + element.offsetLeft,
      right: containerRect.left + element.offsetLeft + element.offsetWidth,
    };
  };

  const captureColumnLayout = (order: DownloadTableColumnKey[]) => {
    const layout = new Map<DownloadTableColumnKey, ColumnLayoutBounds>();
    for (const key of order) {
      const element = headerElementsRef.current.get(key);
      if (element) layout.set(key, getColumnLayoutBounds(element));
    }
    return layout;
  };

  const getColumnDropPosition = (
    key: DownloadTableColumnKey,
    pointerX: number,
    order: DownloadTableColumnKey[] = columnDragOrderRef.current ?? columnOrderRef.current
  ) => {
    const remainingColumns = order.filter(columnKey => columnKey !== key);
    const targetIndex = remainingColumns.findIndex(columnKey => {
      const element = headerElementsRef.current.get(columnKey);
      if (!element) return false;
      const bounds = columnDragLayoutRef.current?.get(columnKey) ?? getColumnLayoutBounds(element);
      return pointerX < bounds.left + (bounds.right - bounds.left) / 2;
    });
    const dropIndex = targetIndex === -1 ? remainingColumns.length : targetIndex;
    const markerElement = dropIndex < remainingColumns.length
      ? headerElementsRef.current.get(remainingColumns[dropIndex])
      : headerElementsRef.current.get(remainingColumns[remainingColumns.length - 1]);
    const markerBounds = markerElement ? getColumnLayoutBounds(markerElement) : null;
    const markerX = markerBounds
      ? dropIndex < remainingColumns.length ? markerBounds.left : markerBounds.right
      : pointerX;
    return { dropIndex, markerX };
  };

  const finishColumnDrag = (key: DownloadTableColumnKey, pointerId: number, cancelled = false) => {
    const gesture = dragGestureRef.current;
    if (!gesture || gesture.key !== key || gesture.pointerId !== pointerId) return;

    const current = columnDragStateRef.current;
    const nextOrder = columnDragOrderRef.current ?? columnOrderRef.current;
    const captureTarget = columnDragCaptureTargetRef.current;
    const shouldAnimateCancel = cancelled && gesture.active && Boolean(current);
    if (shouldAnimateCancel) {
      prepareColumnMotion();
    }
    dragGestureRef.current = null;
    columnDragTargetRef.current = null;
    columnDragCaptureTargetRef.current = null;
    columnDragCapturePointerIdRef.current = null;
    columnDragOrderRef.current = null;
    columnDragLayoutRef.current = null;
    columnDragCleanupRef.current?.();
    columnDragCleanupRef.current = null;
    updateColumnDragState(null);
    setColumnDragOrder(null);
    if (captureTarget?.hasPointerCapture(pointerId)) {
      captureTarget.releasePointerCapture(pointerId);
    }
    if (cancelled || !gesture.active || !current) {
      suppressHeaderClickRef.current = false;
      return;
    }
    window.setTimeout(() => {
      suppressHeaderClickRef.current = false;
    }, 0);

    if (nextOrder.join('|') === columnOrderRef.current.join('|')) return;

    columnOrderRef.current = nextOrder;
    setColumnOrder(nextOrder);
    persistColumnOrder(nextOrder);
    if (columnDropFlashTimerRef.current !== null) {
      window.clearTimeout(columnDropFlashTimerRef.current);
    }
    setColumnDropFlashKey(key);
    columnDropFlashTimerRef.current = window.setTimeout(() => {
      setColumnDropFlashKey(null);
      columnDropFlashTimerRef.current = null;
    }, 260);
  };

  const handleColumnPointerMove = (
    key: DownloadTableColumnKey,
    pointerId: number,
    clientX: number,
    clientY: number,
    preventDefault?: () => void
  ) => {
    const gesture = dragGestureRef.current;
    if (!gesture || gesture.key !== key || gesture.pointerId !== pointerId) return;

    const distance = Math.hypot(clientX - gesture.startX, clientY - gesture.startY);
    if (!gesture.active) {
      if (distance < 5) return;
      gesture.active = true;
      suppressHeaderClickRef.current = true;
      const captureTarget = columnDragCaptureTargetRef.current;
      if (captureTarget) {
        try {
          // Delay capture until the gesture is a real drag. A click on the
          // sortable header button must retain its original target so the
          // browser can dispatch the button click normally.
          captureTarget.setPointerCapture(pointerId);
        } catch {
          // Window listeners below still handle browsers that reject capture
          // after the pointer has already been cancelled.
        }
      }
      const target = columnDragTargetRef.current;
      const rect = target?.getBoundingClientRect();
      if (!rect) return;
      // The header children are reordered in the live grid while dragging.
      // The custom FLIP pass animates the visual boxes while offset geometry
      // remains stable for pointer hit-testing.
      const currentOrder = columnOrderRef.current;
      columnDragLayoutRef.current = captureColumnLayout(currentOrder);
      columnDragOrderRef.current = [...currentOrder];
      setColumnDragOrder([...currentOrder]);
      const { dropIndex, markerX } = getColumnDropPosition(key, clientX, currentOrder);
      updateColumnDragState({
        key,
        startX: gesture.startX,
        pointerX: clientX,
        offsetX: clientX - rect.left,
        top: rect.top,
        width: rect.width,
        dropIndex,
        markerX,
      });
    } else {
      const current = columnDragStateRef.current;
      if (!current) return;
      const currentOrder = columnDragOrderRef.current ?? columnOrderRef.current;
      const { dropIndex, markerX } = getColumnDropPosition(key, clientX, currentOrder);
      const nextOrder = reorderColumn(currentOrder, key, dropIndex);
      const orderChanged = nextOrder.some((columnKey, index) => columnKey !== currentOrder[index]);
      if (orderChanged) {
        prepareColumnMotion();
        columnDragOrderRef.current = nextOrder;
        setColumnDragOrder(nextOrder);
      }
      updateColumnDragState({
        ...current,
        pointerX: clientX,
        dropIndex: nextOrder.indexOf(key),
        markerX,
      });
    }

    preventDefault?.();
  };

  const handleColumnPointerDown = (key: DownloadTableColumnKey, event: React.PointerEvent<HTMLDivElement>) => {
    if (event.button !== 0) return;
    if (event.target instanceof Element && event.target.closest('.column-resize-handle, .download-column-options')) return;

    const existingGesture = dragGestureRef.current;
    if (existingGesture) {
      finishColumnDrag(existingGesture.key, existingGesture.pointerId, true);
    }
    const target = event.currentTarget;
    const pointerId = event.pointerId;
    const captureTarget = headerContainerRef.current;
    columnDragTargetRef.current = target;
    columnDragCaptureTargetRef.current = captureTarget;
    columnDragCapturePointerIdRef.current = pointerId;
    columnDragLayoutRef.current = null;
    dragGestureRef.current = {
      key,
      pointerId,
      startX: event.clientX,
      startY: event.clientY,
      active: false,
    };
    const pointerMove = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId !== pointerId) return;
      handleColumnPointerMove(
        key,
        pointerEvent.pointerId,
        pointerEvent.clientX,
        pointerEvent.clientY,
        () => pointerEvent.preventDefault()
      );
    };
    const pointerUp = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId === pointerId) {
        finishColumnDrag(key, pointerEvent.pointerId);
      }
    };
    const pointerCancel = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId === pointerId) {
        finishColumnDrag(key, pointerEvent.pointerId, true);
      }
    };
    const lostPointerCapture = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId === pointerId) {
        finishColumnDrag(key, pointerEvent.pointerId, true);
      }
    };
    window.addEventListener('pointermove', pointerMove);
    window.addEventListener('pointerup', pointerUp);
    window.addEventListener('pointercancel', pointerCancel);
    captureTarget?.addEventListener('lostpointercapture', lostPointerCapture);
    columnDragCleanupRef.current = () => {
      window.removeEventListener('pointermove', pointerMove);
      window.removeEventListener('pointerup', pointerUp);
      window.removeEventListener('pointercancel', pointerCancel);
      captureTarget?.removeEventListener('lostpointercapture', lostPointerCapture);
    };
  };

  const startColumnResize = (key: DownloadTableColumnKey, event: React.PointerEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();
    resizeCleanupRef.current?.();
    const index = columnIndex(key);
    const startX = event.clientX;
    const startWidth = columnWidthsRef.current[index];

    const handlePointerMove = (moveEvent: PointerEvent) => {
      const nextWidth = Math.max(COLUMN_MINIMUMS[index], startWidth + moveEvent.clientX - startX);
      const nextWidths = columnWidthsRef.current.map((width, columnIndex) =>
        columnIndex === index ? nextWidth : width
      );
      columnWidthsRef.current = nextWidths;
      setColumnWidths(nextWidths);
    };

    const handlePointerUp = () => {
      window.removeEventListener('pointermove', handlePointerMove);
      window.removeEventListener('pointerup', handlePointerUp);
      window.removeEventListener('pointercancel', handlePointerUp);
      window.removeEventListener('blur', handlePointerUp);
      document.removeEventListener('visibilitychange', handlePointerUp);
      persistColumnWidths(columnWidthsRef.current);
      document.body.classList.remove('is-column-resizing');
      resizeCleanupRef.current = null;
    };

    resizeCleanupRef.current = handlePointerUp;
    document.body.classList.add('is-column-resizing');
    window.addEventListener('pointermove', handlePointerMove);
    window.addEventListener('pointerup', handlePointerUp);
    window.addEventListener('pointercancel', handlePointerUp);
    window.addEventListener('blur', handlePointerUp);
    document.addEventListener('visibilitychange', handlePointerUp);
  };

  const clampMenuPosition = useCallback((x: number, y: number, menuWidth: number, menuHeight: number) => {
    const workspaceRect = downloadsViewRef.current?.getBoundingClientRect();
    const minX = Math.max(8, (workspaceRect?.left ?? 0) + 8);
    const minY = Math.max(8, (workspaceRect?.top ?? 0) + 8);
    const maxX = Math.max(minX, Math.min(
      window.innerWidth - menuWidth - 8,
      (workspaceRect?.right ?? window.innerWidth) - menuWidth - 8
    ));
    const maxY = Math.max(minY, Math.min(
      window.innerHeight - menuHeight - 8,
      (workspaceRect?.bottom ?? window.innerHeight) - menuHeight - 8
    ));
    return {
      x: Math.min(Math.max(minX, x), maxX),
      y: Math.min(Math.max(minY, y), maxY),
    };
  }, []);

  const openColumnMenu = (key: DownloadTableColumnKey, x: number, y: number) => {
    const position = clampMenuPosition(x, y, 188, 220);
    setContextMenu(null);
    setColumnMenu({
      key,
      ...position,
    });
  };

  const setColumnAlignment = (alignment: DownloadColumnAlignment) => {
    if (!columnMenu) return;
    const key = columnMenu.key;
    setColumnAlignments(current => {
      const next = { ...current, [key]: alignment };
      persistColumnAlignments(next);
      return next;
    });
    setColumnMenu(null);
  };

  const resetColumnLayout = () => {
    const widths = [...DEFAULT_COLUMN_WIDTHS];
    const order = [...DEFAULT_COLUMN_ORDER];
    const alignments = { ...DEFAULT_COLUMN_ALIGNMENTS };
    if (order.join('|') !== columnOrderRef.current.join('|')) {
      prepareColumnMotion();
    }
    setColumnWidths(widths);
    columnWidthsRef.current = widths;
    columnOrderRef.current = order;
    setColumnOrder(order);
    setColumnAlignments(alignments);
    persistColumnWidths(widths);
    persistColumnOrder(order);
    persistColumnAlignments(alignments);
    setColumnMenu(null);
  };

  useEffect(() => {
    const handleCloseMenu = () => {
      setContextMenu(null);
      setColumnMenu(null);
    };
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setContextMenu(null);
        setColumnMenu(null);
      }
    };
    window.addEventListener('click', handleCloseMenu);
    window.addEventListener('keydown', handleEscape);
    return () => {
      window.removeEventListener('click', handleCloseMenu);
      window.removeEventListener('keydown', handleEscape);
    };
  }, []);

  useEffect(() => () => {
    resizeCleanupRef.current?.();
    columnDragCleanupRef.current?.();
    columnMotionFirstRef.current = null;
    clearColumnMotionStyles();
    try {
      queueDragCleanupRef.current?.();
    } catch (error) {
      console.error('Failed to clean up queue drag listeners during unmount:', error);
    }
    columnDragCleanupRef.current = null;
    queueDragCleanupRef.current = null;
    queueDragStateRef.current = null;
    const queueCaptureTarget = queueDragCaptureTargetRef.current;
    const queueCapturePointerId = queueDragCapturePointerIdRef.current;
    queueDragCaptureTargetRef.current = null;
    queueDragCapturePointerIdRef.current = null;
    try {
      if (queueCaptureTarget && queueCapturePointerId !== null && queueCaptureTarget.hasPointerCapture(queueCapturePointerId)) {
        queueCaptureTarget.releasePointerCapture(queueCapturePointerId);
      }
    } catch (error) {
      console.warn('Failed to release queue pointer capture during unmount:', error);
    }
    const captureTarget = columnDragCaptureTargetRef.current;
    const capturePointerId = columnDragCapturePointerIdRef.current;
    columnDragTargetRef.current = null;
    columnDragCaptureTargetRef.current = null;
    columnDragCapturePointerIdRef.current = null;
    if (captureTarget && capturePointerId !== null && captureTarget.hasPointerCapture(capturePointerId)) {
      captureTarget.releasePointerCapture(capturePointerId);
    }
    if (columnDropFlashTimerRef.current !== null) {
      window.clearTimeout(columnDropFlashTimerRef.current);
    }
  }, []);

  useEffect(() => {
    const cancelColumnDrag = () => {
      const gesture = dragGestureRef.current;
      if (!gesture) return;
      if (gesture.active && columnDragStateRef.current) {
        prepareColumnMotion();
      }
      columnDragCleanupRef.current?.();
      columnDragCleanupRef.current = null;
      const captureTarget = columnDragCaptureTargetRef.current;
      const capturePointerId = columnDragCapturePointerIdRef.current;
      columnDragTargetRef.current = null;
      columnDragCaptureTargetRef.current = null;
      columnDragCapturePointerIdRef.current = null;
      if (captureTarget && capturePointerId !== null && captureTarget.hasPointerCapture(capturePointerId)) {
        captureTarget.releasePointerCapture(capturePointerId);
      }
      dragGestureRef.current = null;
      columnDragStateRef.current = null;
      columnDragOrderRef.current = null;
      columnDragLayoutRef.current = null;
      setColumnDragState(null);
      setColumnDragOrder(null);
      suppressHeaderClickRef.current = false;
    };

    window.addEventListener('blur', cancelColumnDrag);
    window.addEventListener('resize', cancelColumnDrag);
    document.addEventListener('visibilitychange', cancelColumnDrag);
    return () => {
      window.removeEventListener('blur', cancelColumnDrag);
      window.removeEventListener('resize', cancelColumnDrag);
      document.removeEventListener('visibilitychange', cancelColumnDrag);
    };
  }, []);

  useEffect(() => {
    if (!columnMenu && !contextMenu) return;
    const updateMenuViewport = () => setMenuViewportVersion(version => version + 1);
    window.addEventListener('resize', updateMenuViewport);
    return () => window.removeEventListener('resize', updateMenuViewport);
  }, [columnMenu, contextMenu]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (document.querySelector('.app-modal-backdrop') || document.querySelector('.app-modal')) return;
      const activeEl = document.activeElement as HTMLElement | null;
      const isInput = activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.isContentEditable);
      
      if (!isInput) {
        if ((e.key === 'a' || e.key === 'A') && (e.metaKey || e.ctrlKey)) {
          e.preventDefault();
          const allIds = sortedDownloadsRef.current.map(d => d.id);
          setSelectedIds(new Set(allIds));
          return;
        }
        
        if (e.key === 'Delete' || e.key === 'Backspace') {
          if (!activeEl || !activeEl.closest('.sidebar-inner')) {
            if (selectedIdsRef.current.size > 0) {
              handleDelete(Array.from(selectedIdsRef.current));
            }
          }
        }
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);


  const showInteractionError = useCallback((message: string, error: unknown) => {
    const detail = error instanceof Error ? error.message : String(error);
    addToast({ message: `${message}: ${detail}`, variant: 'error', isActionable: true });
  }, [addToast]);

  const queueRowsById = (list: HTMLDivElement): Map<string, HTMLElement> => {
    const rows = new Map<string, HTMLElement>();
    const rowsContainer = queueRowsContainerElementRef.current;
    if (!rowsContainer || !list.contains(rowsContainer)) return rows;
    for (const element of Array.from(rowsContainer.children)) {
      if (!(element instanceof HTMLElement)) continue;
      const id = element.dataset.downloadId;
      if (id) rows.set(id, element);
    }
    return rows;
  };

  const queueRowForId = (id: string): HTMLElement | null => {
    const list = queueListElementRef.current;
    if (!list) return null;
    return queueRowsById(list).get(id) || null;
  };

  const captureQueueDragGeometry = (items: DownloadItem[]): QueueDragGeometry | null => {
    const list = queueListElementRef.current;
    if (!list) return null;

    const listRect = list.getBoundingClientRect();
    const rowsById = queueRowsById(list);
    const rows = new Map<string, QueueDragRowGeometry>();
    for (const item of items) {
      const row = rowsById.get(item.id);
      if (!row) continue;

      const rect = row.getBoundingClientRect();
      const styles = window.getComputedStyle(row);
      const marginTop = Number.parseFloat(styles.marginTop) || 0;
      const marginBottom = Number.parseFloat(styles.marginBottom) || 0;
      rows.set(item.id, {
        top: rect.top,
        height: rect.height,
        space: rect.height + marginTop + marginBottom,
      });
    }

    return {
      listTop: listRect.top,
      scrollTop: list.scrollTop,
      rows,
    };
  };

  const queueDropPosition = (
    clientY: number,
    items: DownloadItem[],
    selectedIds: ReadonlySet<string>
  ): { targetIndex: number; markerTop: number } => {
    const list = queueListElementRef.current;
    if (!list || items.length === 0) return { targetIndex: 0, markerTop: 0 };
    const geometry = queueDragGeometryRef.current;
    if (!geometry) return { targetIndex: 0, markerTop: 0 };

    // Hit-test against the geometry captured before the preview starts. The
    // Rendered rows may be in the middle of a FLIP transition; their
    // transformed client rects are visual output, not stable drop slots.
    // Keeping the logical slots immutable prevents marker jitter and makes
    // upward and downward drops use the same coordinate system. The pointer
    // is compared with the original row centers so a drag started in a row
    // does not immediately jump past that row when its space is removed.
    const scrollDelta = list.scrollTop - geometry.scrollTop;
    let selectedSpaceBefore = 0;
    let remainingIndex = 0;
    let markerTop = 0;
    for (const item of items) {
      const row = geometry.rows.get(item.id);
      if (!row) continue;
      const markerSlotTop = row.top - geometry.listTop + geometry.scrollTop - selectedSpaceBefore;
      const rowTop = row.top - scrollDelta;
      if (clientY < rowTop + row.height / 2) {
        markerTop = markerSlotTop;
        break;
      }

      if (selectedIds.has(item.id)) {
        // Before and after a selected row are the same logical insertion slot
        // once that row is removed from the list.
        markerTop = markerSlotTop;
        selectedSpaceBefore += row.space;
      } else {
        markerTop = markerSlotTop + row.height;
        remainingIndex += 1;
      }
    }
    return {
      targetIndex: remainingIndex,
      markerTop: Math.max(0, markerTop)
    };
  };

  const queueDragPreviewTopForPointer = (pointerY: number): number => {
    const list = queueListElementRef.current;
    const geometry = queueDragGeometryRef.current;
    const drag = queueDragStateRef.current;
    if (!list || !geometry || !drag) return 0;
    return Math.max(
      0,
      pointerY - geometry.listTop + list.scrollTop - drag.pointerOffsetY
    );
  };

  const updateQueueDragPreviewPosition = (pointerY: number) => {
    const preview = queueDragPreviewElementRef.current;
    if (!preview) return;
    preview.style.top = `${queueDragPreviewTopForPointer(pointerY)}px`;
  };

  const clearQueueDragPreview = () => {
    queueDragPreviewOrderRef.current = null;
    queueDragGeometryRef.current = null;
    queueDragBaseItemsRef.current = [];
    queueDragItemsRef.current = queueReorderableDownloadsRef.current;
    if (isMountedRef.current) {
      setQueueDragPreviewOrder(null);
    }
  };

  const releaseQueuePointerCapture = () => {
    const captureTarget = queueDragCaptureTargetRef.current;
    const capturePointerId = queueDragCapturePointerIdRef.current;
    queueDragCaptureTargetRef.current = null;
    queueDragCapturePointerIdRef.current = null;
    if (!captureTarget || capturePointerId === null) return;
    try {
      if (captureTarget.hasPointerCapture(capturePointerId)) {
        captureTarget.releasePointerCapture(capturePointerId);
      }
    } catch (error) {
      // A row can be removed or its WebView can lose the pointer between the
      // terminal event and cleanup. Listener/state cleanup must still finish.
      console.warn('Failed to release queue pointer capture:', error);
    }
  };

  const trackQueueReorderOperation = (operation: () => Promise<void>): Promise<void> => {
    queueReorderPendingCountRef.current += 1;
    return Promise.resolve()
      .then(operation)
      .finally(() => {
        queueReorderPendingCountRef.current = Math.max(0, queueReorderPendingCountRef.current - 1);
      });
  };

  const queueDragBeforeId = (
    previewOrder: string[] | null,
    selectedIds: ReadonlySet<string>
  ): string | null => {
    if (!previewOrder) return null;
    let lastSelectedIndex = -1;
    previewOrder.forEach((id, index) => {
      if (selectedIds.has(id)) lastSelectedIndex = index;
    });
    if (lastSelectedIndex === -1) return null;
    return previewOrder.slice(lastSelectedIndex + 1).find(id => !selectedIds.has(id)) ?? null;
  };

  const finishQueueDrag = (cancelled = false) => {
    const current = queueDragStateRef.current;
    if (!current) return;
    const cleanup = queueDragCleanupRef.current;
    queueDragCleanupRef.current = null;
    queueDragStateRef.current = null;
    if (isMountedRef.current) {
      setQueueDragState(null);
    }
    try {
      cleanup?.();
    } catch (error) {
      console.error('Failed to clean up queue drag listeners:', error);
    } finally {
      releaseQueuePointerCapture();
    }
    if (current.active) {
      suppressQueueClickRef.current = true;
      window.setTimeout(() => {
        suppressQueueClickRef.current = false;
      }, 0);
    }

    if (!cancelled && current.active) {
      const committedPreviewOrder = queueDragPreviewOrderRef.current;
      const targetBeforeId = queueDragBeforeId(
        committedPreviewOrder,
        new Set(current.ids)
      );
      const reorderOperation = trackQueueReorderOperation(
        () => moveManyInQueueToPosition(
          current.ids,
          current.queueId,
          current.targetIndex,
          targetBeforeId
        )
      );
      void reorderOperation
        .catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error))
        .finally(() => {
          // Keep the optimistic order visible until the store has accepted or
          // rolled back the atomic backend move. A second drag must own its
          // own preview and cannot be cleared by this completion callback.
          if (queueDragPreviewOrderRef.current === committedPreviewOrder) {
            clearQueueDragPreview();
          }
        });
    } else {
      clearQueueDragPreview();
    }

    window.requestAnimationFrame(() => {
      if (!isMountedRef.current) return;
      queueRowForId(current.sourceId)?.focus({ preventScroll: true });
    });
  };

  const handleQueueDragStart = (
    id: string,
    event: React.PointerEvent<HTMLDivElement>
  ) => {
    // Keep pointer capture on the persistent list instead of the row being
    // reordered. React moves row nodes during the live preview; a row-owned
    // capture can be lost when that node changes position in the DOM.
    const captureTarget = queueListElementRef.current ?? event.currentTarget;
    const pointerId = event.pointerId;
    if (
      !queueReorderingEnabled ||
      event.button !== 0 ||
      event.shiftKey ||
      event.metaKey ||
      event.ctrlKey ||
      event.altKey ||
      queueDragStateRef.current ||
      queueDragPreviewOrderRef.current ||
      queueReorderPendingCountRef.current > 0
    ) return;
    if (
      event.target instanceof Element &&
      event.target.closest('button, a, input, textarea, select, [role="menu"], .download-row-actions')
    ) {
      return;
    }
    const currentDownloads = useDownloadStore.getState().downloads;
    const source = currentDownloads.find(download => download.id === id);
    if (!source) return;

    const reorderableById = new Map(
      queueReorderableDownloadsRef.current.map(download => [download.id, download])
    );
    if (!reorderableById.has(id)) return;

    const currentSelectedIds = selectedIdsRef.current;
    const ids = (currentSelectedIds.has(id) ? Array.from(currentSelectedIds) : [id])
      .filter(selectedId => {
        const selected = reorderableById.get(selectedId);
        return selected && (selected.queueId || MAIN_QUEUE_ID) === (source.queueId || MAIN_QUEUE_ID);
      });
    if (!ids.includes(id)) return;

    if (!currentSelectedIds.has(id)) {
      setSelectedIds(new Set([id]));
      setLastSelectedId(id);
    }

    queueDragCleanupRef.current?.();
    clearQueueDragPreview();
    const queueId = source.queueId || MAIN_QUEUE_ID;
    const selectedIdSet = new Set(ids);
    const sourceRect = event.currentTarget.getBoundingClientRect();
    const initialItems = queueDragItemsRef.current
      .filter(download => (download.queueId || MAIN_QUEUE_ID) === queueId);
    queueDragBaseItemsRef.current = initialItems;
    queueDragGeometryRef.current = captureQueueDragGeometry(initialItems);
    const initialPosition = queueDropPosition(event.clientY, initialItems, selectedIdSet);
    const initialState: QueueDragState = {
      pointerId: event.pointerId,
      sourceId: id,
      queueId,
      ids,
      startX: event.clientX,
      startY: event.clientY,
      pointerY: event.clientY,
      pointerOffsetY: event.clientY - sourceRect.top,
      active: false,
      ...initialPosition
    };
    queueDragStateRef.current = initialState;
    setQueueDragState(initialState);
    queueDragCaptureTargetRef.current = captureTarget;
    queueDragCapturePointerIdRef.current = pointerId;
    try {
      captureTarget.setPointerCapture(pointerId);
    } catch {
      // The pointer may have been cancelled between pointerdown and capture.
      // Window-level listeners remain the best-effort cleanup fallback.
    }

    let pointerMoveFrame: number | null = null;
    let pendingPointerPosition: { clientX: number; clientY: number } | null = null;

    const applyPointerMove = (clientX: number, clientY: number) => {
      const drag = queueDragStateRef.current;
      if (!drag) return;
      const distance = Math.hypot(
        clientX - drag.startX,
        clientY - drag.startY
      );
      if (!drag.active && distance < 5) return;

      const baseItems = queueDragBaseItemsRef.current;
      const selectedIdSet = new Set(drag.ids);
      queueDragStateRef.current = { ...drag, pointerY: clientY };
      const nextPosition = queueDropPosition(clientY, baseItems, selectedIdSet);
      const previewItems = moveSelectedBlockToIndex(
        baseItems,
        selectedIdSet,
        nextPosition.targetIndex
      );
      const nextPreviewOrder = previewItems.map(item => item.id);
      const currentPreviewOrder = queueDragPreviewOrderRef.current;
      const previewChanged = currentPreviewOrder === null ||
        currentPreviewOrder.length !== nextPreviewOrder.length ||
        currentPreviewOrder.some((itemId, index) => itemId !== nextPreviewOrder[index]);
      if (previewChanged) {
        queueDragItemsRef.current = previewItems;
        queueDragPreviewOrderRef.current = nextPreviewOrder;
        setQueueDragPreviewOrder(nextPreviewOrder);
      }
      suppressQueueClickRef.current = true;
      updateQueueDragPreviewPosition(clientY);
      if (
        !drag.active ||
        previewChanged ||
        nextPosition.markerTop !== drag.markerTop
      ) {
        const nextState = { ...queueDragStateRef.current, ...nextPosition, active: true };
        nextState.pointerY = clientY;
        queueDragStateRef.current = nextState;
        setQueueDragState(nextState);
      }
    };

    const flushPointerMove = () => {
      if (pointerMoveFrame !== null) {
        window.cancelAnimationFrame(pointerMoveFrame);
        pointerMoveFrame = null;
      }
      const pending = pendingPointerPosition;
      pendingPointerPosition = null;
      if (pending) applyPointerMove(pending.clientX, pending.clientY);
    };

    const pointerMove = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId !== pointerId) return;
      pendingPointerPosition = {
        clientX: pointerEvent.clientX,
        clientY: pointerEvent.clientY,
      };
      pointerEvent.preventDefault();
      if (pointerMoveFrame === null) {
        pointerMoveFrame = window.requestAnimationFrame(() => {
          pointerMoveFrame = null;
          const pending = pendingPointerPosition;
          pendingPointerPosition = null;
          if (pending) applyPointerMove(pending.clientX, pending.clientY);
        });
      }
    };
    const pointerUp = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId === pointerId) {
        flushPointerMove();
        finishQueueDrag();
      }
    };
    const pointerCancel = (pointerEvent: PointerEvent) => {
      if (pointerEvent.pointerId === pointerId) {
        pendingPointerPosition = null;
        if (pointerMoveFrame !== null) {
          window.cancelAnimationFrame(pointerMoveFrame);
          pointerMoveFrame = null;
        }
        finishQueueDrag(true);
      }
    };
    const lostPointerCapture = () => finishQueueDrag(true);
    const cancel = () => finishQueueDrag(true);
    window.addEventListener('pointermove', pointerMove);
    window.addEventListener('pointerup', pointerUp);
    window.addEventListener('pointercancel', pointerCancel);
    window.addEventListener('blur', cancel);
    document.addEventListener('visibilitychange', cancel);
    captureTarget.addEventListener('lostpointercapture', lostPointerCapture);
    queueDragCleanupRef.current = () => {
      pendingPointerPosition = null;
      if (pointerMoveFrame !== null) {
        window.cancelAnimationFrame(pointerMoveFrame);
        pointerMoveFrame = null;
      }
      window.removeEventListener('pointermove', pointerMove);
      window.removeEventListener('pointerup', pointerUp);
      window.removeEventListener('pointercancel', pointerCancel);
      window.removeEventListener('blur', cancel);
      document.removeEventListener('visibilitychange', cancel);
      captureTarget.removeEventListener('lostpointercapture', lostPointerCapture);
    };
  };

  // The implementation closes over the current drag helpers, while rows need
  // a stable prop so React.memo can keep the entire queue from rerendering on
  // every pointer frame.
  const queueDragStartHandlerRef = useRef(handleQueueDragStart);
  queueDragStartHandlerRef.current = handleQueueDragStart;
  const stableHandleQueueDragStart = useCallback((id: string, event: React.PointerEvent<HTMLDivElement>) => {
    queueDragStartHandlerRef.current(id, event);
  }, []);

  const getDownloadPath = useCallback(async (item: DownloadItem) => {
    const fileName = item.fileName?.trim();
    if (!fileName) return null;
    const settings = useSettingsStore.getState();
    const destination = item.destination ||
      await resolveCategoryDestination(settings, item.category);
    return resolveDownloadFilePath(destination, fileName);
  }, []);

  const openProperties = useCallback((id: string) => {
    useDownloadStore.getState().setSelectedPropertiesDownloadId(id);
  }, []);

  const openDownloadFile = useCallback(async (item: DownloadItem) => {
    if (item.status !== 'completed') {
      openProperties(item.id);
      return;
    }

    const fullPath = await getDownloadPath(item);
    if (!fullPath) {
      openProperties(item.id);
      return;
    }

    try {
      await invoke('open_downloaded_file', { path: fullPath });
    } catch (error) {
      console.error("Failed to open file:", error);
      showInteractionError(t($ => $.downloadTable.openFileFailed), error);
    }
  }, [getDownloadPath, openProperties, showInteractionError]);

  const revealDownloadFile = async (item: DownloadItem) => {
    const pathToReveal = await getDownloadPath(item);

    if (!pathToReveal) {
      openProperties(item.id);
      return;
    }

    try {
      await invoke('reveal_in_file_manager', { path: pathToReveal });
    } catch (error) {
      console.error("Failed to show in Finder:", error);
      showInteractionError(t($ => $.downloadTable.revealFileFailed), error);
    }
  };

  const handleDownloadDoubleClick = useCallback((item: DownloadItem) => {
    if (item.status === 'completed') {
      void openDownloadFile(item);
      return;
    }

    openProperties(item.id);
  }, [openDownloadFile, openProperties]);

  const isQueueFilter = filter.startsWith('queue:');
  const filteredDownloads = useMemo(() => downloads.filter((d: DownloadItem) => {
    if (isQueueFilter) {
      return d.queueId === filter.replace('queue:', '') && d.status !== 'completed';
    }
    switch (filter) {
      case 'all': return true;
      case 'active': return isTransferActiveStatus(d.status);
      case 'completed': return d.status === 'completed';
      case 'unfinished': return d.status !== 'completed';
      default: return d.category === filter;
    }
  }), [downloads, filter, isQueueFilter]);

  // Queue views use the persisted queue order until the user explicitly sorts
  // a column. This keeps move-up/down controls truthful while still making
  // every header a working sort target.
  const sortedDownloads = useMemo(() => isQueueFilter && !queueSortConfig
    ? [...filteredDownloads].sort((left, right) => {
        const leftActive = isActiveDownloadStatus(left.status) && left.status !== 'queued';
        const rightActive = isActiveDownloadStatus(right.status) && right.status !== 'queued';
        
        if (leftActive && !rightActive) return -1;
        if (!leftActive && rightActive) return 1;
        
        const positionComparison = (left.queuePosition ?? Number.MAX_SAFE_INTEGER) -
          (right.queuePosition ?? Number.MAX_SAFE_INTEGER);
        return positionComparison || left.id.localeCompare(right.id);
      })
    : sortDownloads(filteredDownloads, isQueueFilter ? queueSortConfig! : sortConfig),
    [filteredDownloads, isQueueFilter, queueSortConfig, sortConfig]);

  const queueReorderingEnabled = isQueueFilter && !queueSortConfig;
  const queueReorderableDownloads = useMemo(
    () => queueReorderingEnabled
      ? sortedDownloads.filter(download =>
          download.status !== 'completed' &&
          !(isActiveDownloadStatus(download.status) && download.status !== 'queued')
        )
      : [],
    [queueReorderingEnabled, sortedDownloads]
  );
  const queueReorderableIds = useMemo(
    () => new Set(queueReorderableDownloads.map(download => download.id)),
    [queueReorderableDownloads]
  );
  queueReorderableDownloadsRef.current = queueReorderableDownloads;

  const renderedDownloads = useMemo(() => {
    if (!queueDragPreviewOrder || !queueReorderingEnabled) return sortedDownloads;

    const previewRank = new Map(queueDragPreviewOrder.map((id, index) => [id, index]));
    const previewItems = [...queueReorderableDownloads].sort((left, right) =>
      (previewRank.get(left.id) ?? Number.MAX_SAFE_INTEGER) -
      (previewRank.get(right.id) ?? Number.MAX_SAFE_INTEGER)
    );
    let previewIndex = 0;
    return sortedDownloads.map(download => queueReorderableIds.has(download.id)
      ? previewItems[previewIndex++] ?? download
      : download
    );
  }, [queueDragPreviewOrder, queueReorderableDownloads, queueReorderableIds, queueReorderingEnabled, sortedDownloads]);
  queueDragItemsRef.current = renderedDownloads.filter(download => queueReorderableIds.has(download.id));

  const queueRowOrderKey = useMemo(
    () => renderedDownloads.map(download => download.id).join('\u0001'),
    [renderedDownloads]
  );

  useLayoutEffect(() => {
    const container = queueRowsContainerElementRef.current;
    const scrollContainer = queueListElementRef.current;
    if (!container || !scrollContainer) return;

    const measureRows = () => {
      const rows = new Map<string, { element: HTMLElement; motionElement: HTMLElement; top: number; height: number }>();
      const scrollContainerTop = scrollContainer.getBoundingClientRect().top;
      const scrollTop = scrollContainer.scrollTop;
      for (const child of Array.from(container.children)) {
        if (!(child instanceof HTMLElement)) continue;
        const id = child.dataset.downloadId;
        const motionElement = Array.from(child.children).find(element =>
          element instanceof HTMLElement && element.classList.contains('download-row-motion')
        );
        if (!id || !(motionElement instanceof HTMLElement)) continue;
        const rowRect = child.getBoundingClientRect();
        const motionRect = motionElement.getBoundingClientRect();
        rows.set(id, {
          element: child,
          motionElement,
          top: motionRect.top - scrollContainerTop + scrollTop,
          height: rowRect.height,
        });
      }
      return rows;
    };

    const currentRows = measureRows();
    const previousTops = queueRowTopsRef.current;
    const previousHeights = queueRowHeightsRef.current;
    const wasAnimating = queueRowAnimationActiveRef.current;
    const layoutChanged = Array.from(currentRows).some(([id, row]) => {
      const previousHeight = previousHeights.get(id);
      return previousHeight !== undefined && Math.abs(previousHeight - row.height) > 0.5;
    });
    const generation = ++queueRowAnimationGenerationRef.current;

    if (queueRowAnimationFrameRef.current !== null) {
      window.cancelAnimationFrame(queueRowAnimationFrameRef.current);
      queueRowAnimationFrameRef.current = null;
    }
    if (queueRowAnimationTimerRef.current !== null) {
      window.clearTimeout(queueRowAnimationTimerRef.current);
      queueRowAnimationTimerRef.current = null;
    }

    const startTops = new Map<string, number>();
    for (const [id, row] of currentRows) {
      startTops.set(
        id,
        wasAnimating || layoutChanged ? row.top : previousTops.get(id) ?? row.top
      );
      row.motionElement.style.transition = 'none';
      row.motionElement.style.transform = '';
    }

    const finalRows = measureRows();
    queueRowTopsRef.current = new Map(
      Array.from(finalRows, ([id, row]) => [id, row.top])
    );
    queueRowHeightsRef.current = new Map(
      Array.from(finalRows, ([id, row]) => [id, row.height])
    );
    queueRowAnimationActiveRef.current = false;

    const movedRows = Array.from(finalRows).flatMap(([id, row]) => {
      const deltaY = (startTops.get(id) ?? row.top) - row.top;
      return Math.abs(deltaY) > 0.5 ? [{ element: row.motionElement, deltaY }] : [];
    });
    if (movedRows.length === 0) return;

    const prefersReducedMotion = typeof window.matchMedia === 'function' &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReducedMotion) return;

    for (const { element, deltaY } of movedRows) {
      element.style.willChange = 'transform';
      element.style.transform = `translate3d(0, ${deltaY}px, 0)`;
    }
    // Force the inverse transforms to be committed before releasing them on
    // the next frame. This keeps the FLIP animation independent of React's
    // render timing and avoids a layout read during pointer movement.
    void container.offsetHeight;

    queueRowAnimationActiveRef.current = true;
    queueRowAnimationFrameRef.current = window.requestAnimationFrame(() => {
      queueRowAnimationFrameRef.current = null;
      if (queueRowAnimationGenerationRef.current !== generation) return;
      for (const { element } of movedRows) {
        element.style.transition = `transform ${QUEUE_ROW_REORDER_DURATION}ms ${QUEUE_ROW_REORDER_EASING}`;
        element.style.transform = 'translate3d(0, 0, 0)';
      }
    });
    queueRowAnimationTimerRef.current = window.setTimeout(() => {
      queueRowAnimationTimerRef.current = null;
      if (queueRowAnimationGenerationRef.current !== generation) return;
      queueRowAnimationActiveRef.current = false;
      for (const { element } of movedRows) {
        element.style.removeProperty('transition');
        element.style.removeProperty('transform');
        element.style.removeProperty('will-change');
      }
    }, QUEUE_ROW_REORDER_DURATION + 60);
  }, [queueRowOrderKey]);

  useLayoutEffect(() => {
    if (!queueDragState?.active) return;
    // The preview follows the pointer imperatively so high-frequency pointer
    // movement does not rerender every row. Keep React renders caused by
    // progress or other download updates from overwriting that live position
    // with an older pointerY value.
    updateQueueDragPreviewPosition(queueDragState.pointerY);
  }, [queueDragState?.active]);

  useEffect(() => () => {
    queueRowAnimationGenerationRef.current += 1;
    if (queueRowAnimationFrameRef.current !== null) {
      window.cancelAnimationFrame(queueRowAnimationFrameRef.current);
    }
    if (queueRowAnimationTimerRef.current !== null) {
      window.clearTimeout(queueRowAnimationTimerRef.current);
    }
    const container = queueRowsContainerElementRef.current;
    if (container) {
      for (const child of Array.from(container.children)) {
        if (!(child instanceof HTMLElement) || !child.dataset.downloadId) continue;
        const motionElement = Array.from(child.children).find(element =>
          element instanceof HTMLElement && element.classList.contains('download-row-motion')
        );
        if (!(motionElement instanceof HTMLElement)) continue;
        motionElement.style.removeProperty('transition');
        motionElement.style.removeProperty('transform');
        motionElement.style.removeProperty('will-change');
      }
    }
    queueRowAnimationActiveRef.current = false;
    queueRowTopsRef.current.clear();
    queueRowHeightsRef.current.clear();
  }, []);

  useEffect(() => {
    const current = queueDragStateRef.current;
    if (!current) return;
    const currentQueueIds = new Set(
      queueReorderableDownloads
        .filter(download => (download.queueId || MAIN_QUEUE_ID) === current.queueId)
        .map(download => download.id)
    );
    if (
      !queueReorderingEnabled ||
      current.ids.some(id => !currentQueueIds.has(id))
    ) {
      finishQueueDrag(true);
    }
  }, [queueReorderableDownloads, queueReorderingEnabled]);

  const selectedDownloads = useMemo(
    () => filteredDownloads.filter(download => selectedIds.has(download.id)),
    [filteredDownloads, selectedIds]
  );
  const summaryDownloads = selectedDownloads.length > 0 ? selectedDownloads : filteredDownloads;
  const downloadSummary = useMemo(
    () => summarizeDownloads(summaryDownloads, progressMap),
    [summaryDownloads, progressMap]
  );
  const selectedQueueItems = useMemo(
    () => queueReorderableDownloads.filter(download => selectedIds.has(download.id)),
    [queueReorderableDownloads, selectedIds]
  );
  const selectedQueueIndices = selectedQueueItems
    .map(item => queueReorderableDownloads.findIndex(candidate => candidate.id === item.id));
  const canMoveSelectedUp = selectedQueueIndices.length > 0 && Math.min(...selectedQueueIndices) > 0;
  const canMoveSelectedDown = selectedQueueIndices.length > 0 &&
    Math.max(...selectedQueueIndices) < queueReorderableDownloads.length - 1;
  const queueReorderPending = queueDragState !== null ||
    queueDragPreviewOrder !== null;

  useEffect(() => {
    onSummaryChange?.({
      summary: downloadSummary,
    });
  }, [downloadSummary, onSummaryChange]);

  useEffect(() => () => onSummaryChange?.(null), [onSummaryChange]);

  // Each row used to derive this by filtering and sorting the complete store
  // independently. That made a 1000-entry playlist perform O(n^2 log n) work
  // on every download update. Compute the same queue membership once and pass
  // the resulting position to rows instead.
  const queuePositionsByDownloadId = useMemo(() => {
    const grouped = new Map<string, DownloadItem[]>();
    for (const download of downloads) {
      if (
        download.status === 'completed'
        || (isActiveDownloadStatus(download.status) && download.status !== 'queued')
      ) {
        continue;
      }
      const queueId = download.queueId || MAIN_QUEUE_ID;
      const queueItems = grouped.get(queueId) || [];
      queueItems.push(download);
      grouped.set(queueId, queueItems);
    }

    const positions = new Map<string, { index: number; length: number }>();
    for (const queueItems of grouped.values()) {
      queueItems.sort((left, right) =>
        (left.queuePosition ?? Number.MAX_SAFE_INTEGER) -
        (right.queuePosition ?? Number.MAX_SAFE_INTEGER) ||
        left.id.localeCompare(right.id)
      );
      queueItems.forEach((download, index) => {
        positions.set(download.id, { index, length: queueItems.length });
      });
    }
    if (queueDragPreviewOrder && queueReorderingEnabled && !queueDragState?.active) {
      queueDragPreviewOrder.forEach((id, index) => {
        positions.set(id, { index, length: queueDragPreviewOrder.length });
      });
    }
    return positions;
  }, [downloads, queueDragPreviewOrder, queueDragState?.active, queueReorderingEnabled]);
  sortedDownloadsRef.current = sortedDownloads;

  useEffect(() => {
    const visibleIds = new Set(sortedDownloads.map(download => download.id));
    setSelectedIds(current => {
      const next = new Set(Array.from(current).filter(id => visibleIds.has(id)));
      return next.size === current.size ? current : next;
    });
    setLastSelectedId(current => current && visibleIds.has(current) ? current : null);
  }, [sortedDownloads]);

  useEffect(() => {
    setQueueSortConfig(null);
  }, [filter, isQueueFilter]);
  const handleItemClick = useCallback((e: React.MouseEvent, item: DownloadItem) => {
    if (suppressQueueClickRef.current) {
      suppressQueueClickRef.current = false;
      return;
    }
    if (e.detail === 2) {
      handleDownloadDoubleClick(item);
      return;
    }
    const currentSortedDownloads = sortedDownloadsRef.current;
    const currentSelectedIds = selectedIdsRef.current;
    const currentLastSelectedId = lastSelectedIdRef.current;
    if (e.shiftKey && currentLastSelectedId) {
      const currentIndex = currentSortedDownloads.findIndex(d => d.id === item.id);
      const lastIndex = currentSortedDownloads.findIndex(d => d.id === currentLastSelectedId);
      
      if (currentIndex !== -1 && lastIndex !== -1) {
        const start = Math.min(currentIndex, lastIndex);
        const end = Math.max(currentIndex, lastIndex);
        
        const newSelected = (e.metaKey || e.ctrlKey) ? new Set(currentSelectedIds) : new Set<string>();
        for (let i = start; i <= end; i++) {
          newSelected.add(currentSortedDownloads[i].id);
        }
        setSelectedIds(newSelected);
      }
    } else if (e.metaKey || e.ctrlKey) {
      const newSelected = new Set(currentSelectedIds);
      if (newSelected.has(item.id)) {
        newSelected.delete(item.id);
      } else {
        newSelected.add(item.id);
      }
      setSelectedIds(newSelected);
      setLastSelectedId(item.id);
    } else {
      setSelectedIds(new Set([item.id]));
      setLastSelectedId(item.id);
    }
  }, [handleDownloadDoubleClick]);

  const handleContextMenu = useCallback((menu: { x: number; y: number; id: string }) => {
    if (!selectedIdsRef.current.has(menu.id)) {
      setSelectedIds(new Set([menu.id]));
      setLastSelectedId(menu.id);
    }
    setColumnMenu(null);
    setContextMenu({
      ...menu,
      ...clampMenuPosition(menu.x, menu.y, 200, 300),
    });
  }, [clampMenuPosition]);

  const handleMoveInQueue = useCallback((id: string, direction: 'up' | 'down') => {
    if (
      queueDragStateRef.current ||
      queueDragPreviewOrderRef.current
    ) return;
    const currentQueueItems = queueReorderableDownloadsRef.current;
    const source = currentQueueItems.find(item => item.id === id);
    if (!source) return;
    const sourceQueueId = source.queueId || MAIN_QUEUE_ID;
    const currentQueueIds = new Set(
      currentQueueItems
        .filter(item => (item.queueId || MAIN_QUEUE_ID) === sourceQueueId)
        .map(item => item.id)
    );
    const ids = selectedIdsRef.current.has(id)
      ? Array.from(selectedIdsRef.current).filter(selectedId => currentQueueIds.has(selectedId))
      : [id];
    if (ids.length === 0) return;
    void trackQueueReorderOperation(() => moveInQueue(ids, direction))
      .catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error));
  }, [moveInQueue, showInteractionError, t]);

  const moveSelectedQueueItems = useCallback((ids: string[], direction: 'up' | 'down') => {
    if (
      queueDragStateRef.current ||
      queueDragPreviewOrderRef.current
    ) return;
    void trackQueueReorderOperation(() => moveInQueue(ids, direction))
      .catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error));
  }, [moveInQueue, showInteractionError, t]);

  const handleSort = (column: DownloadSortColumn) => {
    const update = (current: DownloadSortConfig | null): DownloadSortConfig =>
      current?.column === column
        ? { column, direction: current.direction === 'asc' ? 'desc' : 'asc' }
        : { column, direction: 'asc' };

    if (isQueueFilter) {
      setQueueSortConfig(update);
    } else {
      setSortConfig(current => update(current));
    }
  };


  const getFilterTitle = () => {
    if (filter.startsWith('queue:')) {
      const qid = filter.replace('queue:', '');
      const queue = useDownloadStore.getState().queues.find(q => q.id === qid);
      return queue ? queue.name : t($ => $.downloadTable.unknownQueue);
    }
    switch (filter) {
      case 'all': return t($ => $.downloadTable.allDownloads);
      case 'active': return t($ => $.downloadTable.active);
      case 'completed': return t($ => $.downloadTable.completed);
      case 'unfinished': return t($ => $.downloadTable.unfinished);
      case 'Musics': return t($ => $.navigation.categories.musics);
      case 'Movies': return t($ => $.navigation.categories.movies);
      case 'Compressed': return t($ => $.navigation.categories.compressed);
      case 'Documents': return t($ => $.navigation.categories.documents);
      case 'Pictures': return t($ => $.navigation.categories.pictures);
      case 'Applications': return t($ => $.navigation.categories.applications);
      case 'Other': return t($ => $.navigation.categories.other);
      default: return filter;
    }
  };

  const handlePause = useCallback(async (id: string, skipConfirm = false) => {
    const download = useDownloadStore.getState().downloads.find(d => d.id === id);
    if (!skipConfirm && download && download.resumable === false) {
      const confirmPause = window.confirm(t($ => $.downloadTable.nonResumableOne));
      if (!confirmPause) {
        return;
      }
    }

    try {
      await useDownloadStore.getState().pauseDownload(id);
    } catch (e) {
      console.error("Failed to pause:", e);
      showInteractionError(t($ => $.downloadTable.pauseFailed), e);
    }
  }, [showInteractionError]);

  const handleResume = useCallback(async (item: DownloadItem) => {
    try {
      const resumed = await useDownloadStore.getState().resumeDownload(item.id);
      if (!resumed) {
        throw new Error(t($ => $.downloadTable.backendRejectedStart));
      }
    } catch (error) {
      console.error("Failed to resume:", error);
        showInteractionError(t($ => $.downloadTable.resumeFailed, { fileName: item.fileName }), error);
    }
  }, [showInteractionError]);

  const resumeItemsSequentially = async (items: DownloadItem[]) => {
    for (const item of items) {
      const current = useDownloadStore.getState().downloads.find(download => download.id === item.id);
      if (current && canStartDownload(current.status)) {
        await handleResume(current);
      }
    }
  };

  const handleDelete = (ids: string | string[]) => {
    openDeleteModal(ids);
  };

  const contextItem = contextMenu ? downloads.find(d => d.id === contextMenu.id) : null;

  const handleAddDownload = async () => {
    if (clipboardReadInFlightRef.current) return;

    clipboardReadInFlightRef.current = true;
    setIsReadingClipboard(true);
    const store = useDownloadStore.getState();
    const initialModalState = {
      isOpen: store.isAddModalOpen,
      requestVersion: store.pendingAddRequestVersion,
    };

    try {
      const urls = await readClipboardDownloadUrls();
      if (!isMountedRef.current) return;
      const currentStore = useDownloadStore.getState();

      // Do not append a late clipboard result to a newer extension, deep-link,
      // paste, or modal request that arrived while the OS clipboard was read.
      if (
        currentStore.isAddModalOpen !== initialModalState.isOpen ||
        currentStore.pendingAddRequestVersion !== initialModalState.requestVersion
      ) {
        return;
      }

      if (urls.length > 0) {
        currentStore.openAddModalWithUrls(urls.join('\n'));
      } else {
        currentStore.toggleAddModal(true);
      }
    } catch (error) {
      console.warn('Could not read clipboard for Add Download:', error);
      if (!isMountedRef.current) return;
      const currentStore = useDownloadStore.getState();
      if (
        currentStore.isAddModalOpen === initialModalState.isOpen &&
        currentStore.pendingAddRequestVersion === initialModalState.requestVersion
      ) {
        currentStore.toggleAddModal(true);
      }
    } finally {
      clipboardReadInFlightRef.current = false;
      if (isMountedRef.current) setIsReadingClipboard(false);
    }
  };


  const getCategoryIcon = useCallback((category: string) => {
    switch(category) {
      case 'Musics': return <Music size={16} className="text-pink-400" />;
      case 'Movies': return <Film size={16} className="text-red-400" />;
      case 'Documents': return <FileText size={16} className="text-blue-400" />;
      case 'Applications': return <Box size={16} className="text-indigo-400" />;
      case 'Pictures': return <ImageIcon size={16} className="text-purple-400" />;
      case 'Compressed': return <Archive size={16} className="text-amber-600" />;
      case 'Other': return <FileQuestion size={16} className="text-gray-400" />;
      default: return <FileQuestion size={16} className="text-gray-400" />;
    }
  }, []);

  const columnDefinitions: Array<{ key: DownloadTableColumnKey; label: string }> = [
    { key: 'File Name', label: t($ => $.downloadTable.headers.fileName) },
    { key: 'Size', label: t($ => $.downloadTable.headers.size) },
    { key: 'Status', label: t($ => $.downloadTable.headers.status) },
    { key: 'Speed', label: t($ => $.downloadTable.headers.speed) },
    { key: 'ETA', label: t($ => $.downloadTable.headers.eta) },
    { key: 'Date Added', label: t($ => $.downloadTable.headers.dateAdded) },
  ];
  const columnLabels = new Map(columnDefinitions.map(column => [column.key, column.label]));
  const columnAlignmentStyle = (key: DownloadTableColumnKey): React.CSSProperties => ({
    '--column-justify': COLUMN_ALIGNMENT_JUSTIFY[columnAlignments[key]],
  } as React.CSSProperties);
  const columnMenuPosition = columnMenu
    ? clampMenuPosition(columnMenu.x, columnMenu.y, 188, 220)
    : null;
  const contextMenuPosition = contextMenu
    ? clampMenuPosition(contextMenu.x, contextMenu.y, 200, 300)
    : null;
  const queueDragPreviewItem = queueDragState?.active
    ? queueDragState.ids
      .map(id => queueReorderableDownloads.find(download => download.id === id))
      .find((download): download is DownloadItem => Boolean(download))
    : null;
  return (
    <div ref={downloadsViewRef} className="downloads-view flex-1 flex flex-col h-full min-w-0">
      <div
        className="main-titlebar"
        data-tauri-drag-region
      >
        <div className="main-titlebar-title cursor-default" data-tauri-drag-region>Firelink</div>

        <div className="main-control-group">
          <button
            className="main-control-button primary"
            onClick={() => void handleAddDownload()}
            disabled={isReadingClipboard}
            aria-busy={isReadingClipboard}
            title={t($ => $.downloadTable.addDownload)}
          >
            <Plus size={16} />
          </button>

          <button 
            className="main-control-button" 
            disabled={sortedDownloads.length === 0}
            onClick={() => {
              void resumeItemsSequentially(sortedDownloads.filter(d => canStartDownload(d.status)));
            }}
            title={t($ => $.downloadTable.resumeAll)}
          >
            <Play size={15} fill="currentColor" />
          </button>

          <button 
            className="main-control-button" 
            disabled={sortedDownloads.length === 0}
            onClick={() => {
              const toPause = sortedDownloads.filter(d => canPauseDownload(d.status));
              const nonResumableCount = toPause.filter(d => d.resumable === false).length;
              if (nonResumableCount > 0) {
                const confirmPause = window.confirm(
                  nonResumableCount === 1
                    ? t($ => $.downloadTable.nonResumableOne)
                    : t($ => $.downloadTable.nonResumableMany, { count: nonResumableCount })
                );
                if (!confirmPause) {
                  return;
                }
              }
              // Skip the individual check by passing a flag to handlePause, or just invoking directly.
              toPause.forEach(d => handlePause(d.id, true));
            }}
            title={t($ => $.downloadTable.pauseAll)}
          >
            <Pause size={15} fill="currentColor" />
          </button>
        </div>
      </div>

      <div className="downloads-content-header">
        <div className="downloads-title">
          {getFilterTitle()}
          <span className="downloads-count">{sortedDownloads.length}</span>
          {queueReorderingEnabled && queueReorderableDownloads.length > 0 ? (
            <span className="downloads-queue-reorder-hint" title={t($ => $.downloadTable.queueReorderShortcut, { key: isMac ? 'Option' : 'Alt' })}>
              <span>{t($ => $.downloadTable.queueReorderHint)}</span>
              <span
                className="downloads-queue-reorder-shortcut"
                aria-label={t($ => $.downloadTable.queueReorderShortcut, { key: isMac ? 'Option' : 'Alt' })}
              >
                <kbd>{isMac ? 'Option' : 'Alt'}</kbd>
                <span aria-hidden="true">+</span>
                <kbd>↑</kbd>
                <span aria-hidden="true">/</span>
                <kbd>↓</kbd>
              </span>
            </span>
          ) : null}
        </div>
        <div className="downloads-header-actions">
          {selectedDownloads.length > 0 ? (
            <span className="downloads-selection-status">
              {t($ => $.downloadTable.summary.selected, { count: selectedDownloads.length })}
            </span>
          ) : null}
          {queueReorderingEnabled && queueReorderableDownloads.length > 0 ? (
            <div
              className="main-control-group downloads-queue-priority-controls"
              role="group"
              aria-label={t($ => $.downloadTable.queuePriorityControls)}
            >
              <button
                type="button"
                className="main-control-button"
                disabled={queueReorderPending || !canMoveSelectedUp}
                aria-label={t($ => $.downloads.actions.moveUp)}
                title={t($ => $.downloads.actions.moveUp)}
                onClick={() => moveSelectedQueueItems(selectedQueueItems.map(item => item.id), 'up')}
              >
                <ArrowUp size={14} aria-hidden="true" />
              </button>
              <button
                type="button"
                className="main-control-button"
                disabled={queueReorderPending || !canMoveSelectedDown}
                aria-label={t($ => $.downloads.actions.moveDown)}
                title={t($ => $.downloads.actions.moveDown)}
                onClick={() => moveSelectedQueueItems(selectedQueueItems.map(item => item.id), 'down')}
              >
                <ArrowDown size={14} aria-hidden="true" />
              </button>
            </div>
          ) : null}
        </div>
      </div>

      <div className="downloads-table flex-1 flex flex-col">
        <div className="download-table-scroll">
          <div
            ref={headerRef}
            className={`download-table-header ${columnDragState ? 'is-column-dragging' : ''}`}
            style={{ gridTemplateColumns: tableGridTemplate, minWidth: tableMinWidthWithPadding }}
          >
            {orderedColumns.map(key => {
              const label = columnLabels.get(key) ?? key;
              const activeSort = isQueueFilter ? queueSortConfig : sortConfig;
              const isDragging = columnDragState?.key === key;
              const isDropFlashing = columnDropFlashKey === key;
              return (
                <div
                  key={key}
                  ref={element => {
                    if (element) headerElementsRef.current.set(key, element);
                    else headerElementsRef.current.delete(key);
                  }}
                  data-column-key={key}
                  role="columnheader"
                  aria-sort={activeSort?.column === key
                    ? activeSort.direction === 'asc' ? 'ascending' : 'descending'
                    : 'none'}
                  className={`download-column-header group ${isDragging ? 'is-dragging' : ''} ${isDropFlashing ? 'is-drop-flashing' : ''}`}
                  style={{
                    ...columnAlignmentStyle(key),
                    gridColumn: getColumnGridColumn(key, orderedColumns),
                  }}
                  onContextMenu={event => {
                    event.preventDefault();
                    event.stopPropagation();
                    openColumnMenu(key, event.clientX, event.clientY);
                  }}
                  onPointerDown={event => handleColumnPointerDown(key, event)}
                >
                  <button
                    type="button"
                    className="download-column-header-content"
                    onClick={event => {
                      event.stopPropagation();
                      if (suppressHeaderClickRef.current) {
                        suppressHeaderClickRef.current = false;
                        return;
                      }
                      handleSort(key);
                    }}
                    title={t($ => $.downloadTable.columnOptions.dragToReorder)}
                  >
                    <span>{label}</span>
                    {activeSort?.column === key && (
                      activeSort.direction === 'asc'
                        ? <ChevronUp size={14} aria-hidden="true" />
                        : <ChevronDown size={14} aria-hidden="true" />
                    )}
                  </button>
                  <button
                    type="button"
                    className="download-column-options"
                    aria-label={t($ => $.downloadTable.columnOptions.open, { column: label })}
                    title={t($ => $.downloadTable.columnOptions.open, { column: label })}
                    onPointerDown={event => event.stopPropagation()}
                    onClick={event => {
                      event.preventDefault();
                      event.stopPropagation();
                      const rect = event.currentTarget.getBoundingClientRect();
                      openColumnMenu(key, rect.left, rect.bottom + 6);
                    }}
                  >
                    <MoreHorizontal size={14} aria-hidden="true" />
                  </button>
                  <div
                    className="column-resize-handle"
                    aria-hidden="true"
                    onPointerDown={event => {
                      event.stopPropagation();
                      startColumnResize(key, event);
                    }}
                  />
                </div>
              );
            })}
          </div>

          {columnDragState && (
            <>
              <div
                className="download-column-drop-marker"
                style={{ top: columnDragState.top, left: columnDragState.markerX }}
                aria-hidden="true"
              />
              <div
                className="download-column-drag-preview"
                style={{
                  top: columnDragState.top,
                  left: columnDragState.pointerX - columnDragState.offsetX,
                  width: columnDragState.width,
                }}
                aria-hidden="true"
              >
                <GripVertical size={14} />
                <span>{columnLabels.get(columnDragState.key) ?? columnDragState.key}</span>
              </div>
            </>
          )}

          <div className="download-table-body" style={{ minWidth: tableMinWidthWithPadding }}>
            <div className="download-table-list" ref={queueListRef}>
              <div className="download-table-list-content" ref={queueRowsContainerRef}>
                {sortedDownloads.length === 0 ? (
                  <div className="downloads-empty-state">
                    <ArrowDownCircle aria-hidden="true" />
                    <div className="downloads-empty-title">
                      {isQueueFilter ? t($ => $.downloadTable.queueEmpty) : filter === 'completed' ? t($ => $.downloadTable.noCompletedDownloads) : t($ => $.downloadTable.noDownloads)}
                    </div>
                    <div className="downloads-empty-description flex items-center justify-center mt-2.5 text-[13px] text-text-muted">
                      {isQueueFilter ? (
                        t($ => $.downloadTable.queueEmptyDescription)
                      ) : filter === 'completed' ? (
                        t($ => $.downloadTable.completedDescription)
                      ) : (
                        <>
                          {t($ => $.downloadTable.clickToAdd)} <Plus size={15} className="text-accent stroke-[3] mx-1.5" /> {t($ => $.downloadTable.addButtonOr)}
                          <span className="flex items-center mx-1.5">
                            <span className="flex items-center justify-center px-1.5 py-0.5 bg-item-hover rounded border border-border-color shadow-sm min-w-[22px] min-h-[22px]">
                              {isMac ? <Command size={12} strokeWidth={2.5} className="text-text-primary" /> : <span className="text-[10px] font-bold text-text-primary">Ctrl</span>}
                            </span>
                            <span className="text-accent font-bold mx-1.5 text-[14px]">+</span>
                            <span className="flex items-center justify-center px-1.5 py-0.5 bg-item-hover rounded border border-border-color shadow-sm min-w-[22px] min-h-[22px]">
                              <span className="text-[11px] font-bold text-text-primary">V</span>
                            </span>
                          </span>
                          {t($ => $.downloadTable.toAddDownloads)}
                        </>
                      )}
                    </div>
                  </div>
                ) : (
                  <>
                    {renderedDownloads.map(d => (
                      <DownloadItemComponent
                        key={d.id}
                        download={d}
                        queueIndex={queuePositionsByDownloadId.get(d.id)?.index ?? -1}
                        columnOrder={orderedColumns}
                        columnAlignments={columnAlignments}
                        tableGridTemplate={tableGridTemplate}
                        tableMinWidth={tableMinWidthWithPadding}
                        setContextMenu={handleContextMenu}
                        handlePause={handlePause}
                        handleResume={handleResume}
                        getCategoryIcon={getCategoryIcon}
                        isSelected={selectedIds.has(d.id)}
                        isQueueReorderable={queueReorderableIds.has(d.id)}
                        isQueueDragSource={Boolean(queueDragState?.active && queueDragState.ids.includes(d.id))}
                        onMoveInQueue={handleMoveInQueue}
                        onQueueDragStart={stableHandleQueueDragStart}
                        onClick={handleItemClick}
                      />
                    ))}
                    <div className="flex-1 min-h-0 bg-transparent pointer-events-none" />
                  </>
                )}
              </div>
              {queueDragState?.active && queueDragPreviewItem ? (
                <div
                  ref={queueDragPreviewElementRef}
                  className="download-queue-drag-preview"
                  aria-hidden="true"
                >
                  <span className="download-queue-drag-preview-icon">
                    {getCategoryIcon(queueDragPreviewItem.category)}
                  </span>
                  <span className="download-queue-drag-preview-name">
                    {queueDragPreviewItem.fileName}
                  </span>
                  {queueDragState.ids.length > 1 ? (
                    <span className="download-queue-drag-preview-count">
                      +{queueDragState.ids.length - 1}
                    </span>
                  ) : null}
                </div>
              ) : null}
              {queueDragState?.active ? (
                <div
                  className="download-queue-drop-marker"
                  style={{ top: `${queueDragState.markerTop}px` }}
                  aria-hidden="true"
                />
              ) : null}
            </div>
          </div>
        </div>
      </div>

      {columnMenu && (
        <div
          role="menu"
          className="download-column-menu app-modal fixed z-50 min-w-[188px] overflow-hidden py-1.5 text-[12px] font-medium text-text-primary"
          style={{ top: columnMenuPosition?.y, left: columnMenuPosition?.x }}
          onClick={event => event.stopPropagation()}
        >
          <div className="download-column-menu-title px-3 py-1.5 text-text-muted">
            {columnLabels.get(columnMenu.key) ?? columnMenu.key}
          </div>
          <div className="download-column-menu-label px-3 pb-1 text-[10px] uppercase tracking-[0.12em] text-text-muted">
            {t($ => $.downloadTable.columnOptions.alignContent)}
          </div>
          {([
            ['left', AlignLeft],
            ['center', AlignCenter],
            ['right', AlignRight],
          ] as const).map(([alignment, Icon]) => (
            <button
              key={alignment}
              type="button"
              role="menuitemradio"
              aria-checked={columnAlignments[columnMenu.key] === alignment}
              className="download-column-menu-item flex w-full items-center gap-2 px-3 py-1.5 text-start hover:bg-item-hover"
              onClick={() => setColumnAlignment(alignment)}
            >
              <Icon size={14} aria-hidden="true" />
              <span>{t($ => $.downloadTable.columnOptions[alignment])}</span>
            </button>
          ))}
          <div className="my-1 h-px bg-border-color" />
          <button
            type="button"
            className="download-column-menu-item flex w-full items-center gap-2 px-3 py-1.5 text-start hover:bg-item-hover"
            onClick={resetColumnLayout}
          >
            <GripVertical size={14} aria-hidden="true" />
            <span>{t($ => $.downloadTable.columnOptions.resetLayout)}</span>
          </button>
        </div>
      )}

      {/* Floating Context Menu */}
      {contextMenu && contextItem && (
        <div
          role="menu"
          className="app-modal fixed z-50 min-w-[180px] overflow-visible py-1.5 text-[12px] font-medium text-text-primary"
          style={{
             top: contextMenuPosition?.y,
             left: contextMenuPosition?.x,
          }}
          onClick={(e) => e.stopPropagation()}
        >
          {selectedIds.size > 1 ? (() => {
            const selectedDownloads = Array.from(selectedIds)
              .map(id => downloads.find(d => d.id === id))
              .filter((item): item is DownloadItem => !!item);
            
            const itemsToResume = selectedDownloads.filter(d => canStartDownload(d.status));
            const itemsToPause = selectedDownloads.filter(d => canPauseDownload(d.status));
            const itemsToQueue = selectedDownloads.filter(d => d.status !== 'completed');

            return (
            <>
              {/* Multi-Select Context Menu */}
              {itemsToResume.length > 0 && (
              <button
              onClick={() => {
                setContextMenu(null);
                void resumeItemsSequentially(itemsToResume);
              }}
                className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
              >
                {t($ => $.downloadTable.startResume)}
              </button>
              )}

              {itemsToPause.length > 0 && (
                <button
                  onClick={() => {
                    setContextMenu(null);
                    const nonResumableCount = itemsToPause.filter(d => d.resumable === false).length;
                    if (nonResumableCount > 0) {
                      const confirmPause = window.confirm(
                        nonResumableCount === 1
                          ? t($ => $.downloadTable.nonResumableOne)
                          : t($ => $.downloadTable.nonResumableMany, { count: nonResumableCount })
                      );
                      if (!confirmPause) {
                        return;
                      }
                    }
                    itemsToPause.forEach(d => handlePause(d.id, true));
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {t($ => $.downloadTable.pause)}
                </button>
              )}

              {(itemsToResume.length > 0 || itemsToPause.length > 0) && (
                <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>
              )}

              {itemsToQueue.length > 0 && (
                <div className="group relative">
                  <button
                    type="button"
                    aria-haspopup="menu"
                    className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center"
                  >
                    {t($ => $.downloadTable.addToQueue)}
                    <ChevronRight size={14} className="download-context-menu-chevron" />
                  </button>
                  <div className="download-context-submenu absolute top-0 min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50" role="menu">
                    {queues.map(q => (
                      <button key={q.id} role="menuitem" onClick={() => {
                        setContextMenu(null);
                        void assignToQueue(itemsToQueue.map(item => item.id), q.id).catch(error => {
                          showInteractionError(t($ => $.downloadTable.moveManyFailed), error);
                        });
                      }} className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors text-[12px]">
                        {q.name}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              <button
                onClick={() => {
                  setContextMenu(null);
                  const urls = Array.from(selectedIds)
                    .map(id => downloads.find(d => d.id === id)?.url)
                    .filter(Boolean)
                    .join('\n');
                  navigator.clipboard.writeText(urls).catch(error => {
                    showInteractionError(t($ => $.downloadTable.copyAddressesFailed), error);
                  });
                }}
                className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
              >
                {t($ => $.downloadTable.copyAddress)}
              </button>

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              <button
                onClick={() => {
                  setContextMenu(null);
                  handleDelete(Array.from(selectedIds));
                }}
                className="w-full text-left px-3 py-2 text-red-400 hover:bg-red-500/10 transition-colors"
              >
                {t($ => $.downloadTable.remove)}
              </button>
            </>
            );
          })() : (
            <>
              {/* Single-Select Context Menu */}
              {contextItem.status === 'completed' && (
                <button
                  onClick={async () => {
                    setContextMenu(null);
                    await openDownloadFile(contextItem);
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {t($ => $.downloadTable.open)}
                </button>
              )}

              <button
                onClick={async () => {
                  setContextMenu(null);
                  await revealDownloadFile(contextItem);
                }}
                className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
              >
              {t($ => $.downloadTable.showInFolder)}
              </button>

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              {canPauseDownload(contextItem.status) && (
                <button
                  onClick={() => {
                    setContextMenu(null);
                    handlePause(contextItem.id);
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {t($ => $.downloadTable.pause)}
                </button>
              )}

              {canStartDownload(contextItem.status) && (
                <button
                  onClick={() => {
                    setContextMenu(null);
                    handleResume(contextItem);
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {contextItem.status === 'paused' ? t($ => $.downloadTable.resume) : t($ => $.downloadTable.start)}
                </button>
              )}

              {canRedownload(contextItem.status) && (
                <button
                  onClick={async () => {
                    setContextMenu(null);
                    try {
                      await redownload(contextItem.id);
                    } catch (error) {
                      showInteractionError(t($ => $.downloadTable.redownloadFailed), error);
                    }
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {t($ => $.downloadTable.redownload)}
                </button>
              )}

              {contextItem.status !== 'completed' && (
                <div className="group relative">
                  <button
                    type="button"
                    aria-haspopup="menu"
                    className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center"
                  >
                    {t($ => $.downloadTable.addToQueue)}
                    <ChevronRight size={14} className="download-context-menu-chevron" />
                  </button>
                  <div className="download-context-submenu absolute top-0 min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50" role="menu">
                    {queues.map(q => (
                      <button key={q.id} role="menuitem" onClick={() => {
                        setContextMenu(null);
                        void assignToQueue([contextItem.id], q.id).catch(error => {
                          showInteractionError(t($ => $.downloadTable.moveOneFailed), error);
                        });
                      }} className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors text-[12px]">
                        {q.name}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              <button
                onClick={() => {
                  setContextMenu(null);
                  navigator.clipboard.writeText(contextItem.url).catch(error => {
                    showInteractionError(t($ => $.downloadTable.copyAddressFailed), error);
                  });
                }}
                className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
              >
                {t($ => $.downloadTable.copyAddress)}
              </button>

              {contextItem.status === 'completed' && (
                <button
                  onClick={async () => {
                    setContextMenu(null);
                    const fullPath = await getDownloadPath(contextItem);
                    if (!fullPath) {
                      showInteractionError(t($ => $.downloadTable.copyPathFailed), t($ => $.downloadTable.missingFileName));
                      return;
                    }
                    try {
                      await navigator.clipboard.writeText(fullPath);
                    } catch (error) {
                      showInteractionError(t($ => $.downloadTable.copyPathFailed), error);
                    }
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
                >
                  {t($ => $.downloadTable.copyFilePath)}
                </button>
              )}

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              <button
                onClick={() => {
                  setContextMenu(null);
                  handleDelete(contextItem.id);
                }}
                className="w-full text-left px-3 py-2 text-red-400 hover:bg-red-500/10 transition-colors"
              >
                {t($ => $.downloadTable.remove)}
              </button>

              <div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>

              <button
                onClick={() => {
                  setContextMenu(null);
                  openProperties(contextItem.id);
                }}
                className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
              >
                {t($ => $.downloadTable.properties)}
              </button>
            </>
          )}
        </div>
      )}

    </div>
  );
};