App.tsx

import { useEffect, useRef, useState, MouseEvent, useCallback } from 'react';
import { invoke } from '@tauri-apps/api/core';
import { listen } from '@tauri-apps/api/event';
import type { Event } from '@tauri-apps/api/event';
import Sidebar from './components/Sidebar';
import MainPanel from './components/MainPanel';
import PathBar from './components/PathBar';
import StatusBar from './components/StatusBar';
import { useAppStore } from './store/useAppStore';
import { useToastStore } from './store/useToastStore';
import { useUndoStore } from './store/useUndoStore';
import { openFolderSizeWindow } from './store/useFolderSizeStore';
import { useDirectoryStream } from './hooks/useDirectoryStream';
import { message } from '@tauri-apps/plugin-dialog';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { platform } from '@tauri-apps/plugin-os';
import { getEffectiveExtension, isArchiveFile } from './utils/fileTypes';
import { dirname } from './utils/pathUtils';
import { applyAccentVariables, DEFAULT_ACCENT, normalizeHexColor } from '@/utils/accent';
import { getSuggestedZipName } from './utils/zipNaming';
import { revealInFileBrowser } from '@/utils/fileBrowser';

import Toast from './components/Toast';
import FilterInput from './components/FilterInput';
import { FULL_DISK_ACCESS_DISMISSED_KEY } from '@/utils/fullDiskAccessPrompt';
import {
  PREFERENCES_UPDATED_EVENT,
  SMB_CONNECT_SUCCESS_EVENT,
  SFTP_CONNECT_SUCCESS_EVENT,
} from '@/utils/events';
import { usePrefersReducedMotion } from '@/hooks/usePrefersReducedMotion';
import { invalidateThumbnailsForPaths } from '@/hooks/useThumbnail';
import type {
  DirectoryChangeEventPayload,
  DirectoryListingResponse,
  FileItem,
  PersistedPreferences,
  SmbConnectSuccessPayload,
  SftpConnectSuccessPayload,
  ViewPreferences,
} from './types';

// Error codes matching backend (src-tauri/src/commands.rs)
const ErrorCodes = {
  ENOENT: 'ENOENT', // Path does not exist
  ENOTDIR: 'ENOTDIR', // Path is not a directory
  EPERM: 'EPERM', // Permission denied / Operation not permitted
} as const;

/** Parse error code from structured error message format "[CODE] message" */
function parseErrorCode(error: unknown): string | null {
  const message = error instanceof Error ? error.message : String(error);
  const match = message.match(/^\[([A-Z]+)\]/);
  return match ? match[1] : null;
}

function hasUriScheme(path: string): boolean {
  return /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(path);
}

const ACCENT_POLL_INTERVAL_MS = 5000;

// Grid zoom constants (for keyboard shortcuts - wheel handler moved to MainPanel)
import {
  GRID_SIZE_MIN,
  GRID_SIZE_MAX,
  GRID_SIZE_DEFAULT,
  GRID_SIZE_STEP,
} from '@/utils/gridConstants';

async function checkAndShowFullDiskAccessPrompt() {
  if (platform() !== 'macos') return;
  if (localStorage.getItem(FULL_DISK_ACCESS_DISMISSED_KEY) === 'true') return;

  try {
    const mod = await import('tauri-plugin-macos-permissions-api');
    const hasAccess = await mod.checkFullDiskAccessPermission();
    if (!hasAccess) {
      await invoke('open_permissions_window');
    }
  } catch {
    // Plugin not available or check failed; avoid blocking app start.
  }
}

function App() {
  // Use selectors to only subscribe to state App actually uses
  // This prevents re-renders when unrelated state (like selectedFiles) changes
  const currentPath = useAppStore((state) => state.currentPath);
  const setCurrentPath = useAppStore((state) => state.setCurrentPath);
  const navigateTo = useAppStore((state) => state.navigateTo);
  const setLoading = useAppStore((state) => state.setLoading);
  const setError = useAppStore((state) => state.setError);
  const setFiles = useAppStore((state) => state.setFiles);
  const loading = useAppStore((state) => state.loading);
  const setHomeDir = useAppStore((state) => state.setHomeDir);
  const toggleHiddenFiles = useAppStore((state) => state.toggleHiddenFiles);
  const toggleFoldersFirst = useAppStore((state) => state.toggleFoldersFirst);
  const directoryPreferences = useAppStore((state) => state.directoryPreferences);
  const globalPreferences = useAppStore((state) => state.globalPreferences);
  const loadPinnedDirectories = useAppStore((state) => state.loadPinnedDirectories);

  // Animation preference hook (reactive to system changes)
  const prefersReducedMotion = usePrefersReducedMotion();

  // Set up directory streaming event listener
  useDirectoryStream();

  const initializedRef = useRef(false);
  const [showLoadingOverlay, setShowLoadingOverlay] = useState(false);
  const openPreferences = useCallback(() => {
    invoke('open_preferences_window').catch((error) => {
      console.warn('Failed to open preferences window:', error);
    });
  }, []);
  const prefsLoadedRef = useRef(false);
  const firstLoadRef = useRef(true);
  const altTogglePendingRef = useRef(false);
  const windowRef = useRef(getCurrentWindow());
  const thumbnailPrewarmRequestedRef = useRef(false);
  const currentAccentRef = useRef<string | null>(null);
  const saveGlobalPrefsTimeoutRef = useRef<number | null>(null);
  const currentDirectoryPreference = directoryPreferences[currentPath];
  const pendingFileSelectionRef = useRef<string | null>(null);
  // Apply smart default view and sort preferences based on folder name or contents
  const applySmartViewDefaults = async (path: string, files?: FileItem[]) => {
    try {
      const { directoryPreferences, updateDirectoryPreferences } = useAppStore.getState();
      const existing = directoryPreferences[path];

      // If user already set any preferences, don't override them — but fill in missing defaults
      if (existing && Object.keys(existing).length > 0) {
        const sb = existing.sortBy;
        const so = existing.sortOrder;
        // Only fill in missing sortOrder if sortBy is set but sortOrder is not
        if (sb && !so) {
          const defaultOrder: ViewPreferences['sortOrder'] =
            sb === 'size' || sb === 'modified' ? 'desc' : 'asc';
          updateDirectoryPreferences(path, { sortOrder: defaultOrder });
          try {
            await invoke('set_dir_prefs', {
              path,
              prefs: JSON.stringify({ sortOrder: defaultOrder }),
            });
          } catch (error) {
            console.warn('Failed to persist sort order default:', error);
          }
        }
        return;
      }

      const normalized = path.replace(/\\/g, '/').replace(/\/+$/g, '') || '/';
      const base = normalized.split('/').pop()?.toLowerCase() ?? '';

      // Smart defaults based on folder name
      const folderDefaults: Record<string, Partial<ViewPreferences>> = {
        downloads: { sortBy: 'modified', sortOrder: 'desc' },
        download: { sortBy: 'modified', sortOrder: 'desc' },
        pictures: { viewMode: 'grid', sortBy: 'modified', sortOrder: 'desc' },
        photos: { viewMode: 'grid', sortBy: 'modified', sortOrder: 'desc' },
        screenshots: { viewMode: 'grid', sortBy: 'modified', sortOrder: 'desc' },
        videos: { viewMode: 'grid', sortBy: 'modified', sortOrder: 'desc' },
        movies: { viewMode: 'grid', sortBy: 'modified', sortOrder: 'desc' },
        applications: { viewMode: 'grid', sortBy: 'name', sortOrder: 'asc' },
        documents: { sortBy: 'modified', sortOrder: 'desc' },
        desktop: { sortBy: 'modified', sortOrder: 'desc' },
      };

      const folderDefault = folderDefaults[base];
      if (folderDefault) {
        updateDirectoryPreferences(path, folderDefault);
        try {
          await invoke('set_dir_prefs', { path, prefs: JSON.stringify(folderDefault) });
        } catch (error) {
          console.warn('Failed to persist folder defaults:', error);
        }
        return;
      }

      if (!files || files.length === 0) {
        return;
      }

      const mediaRelevantFiles = files.filter((file) => !file.is_directory);
      if (mediaRelevantFiles.length === 0) {
        return;
      }

      // Default to grid only when we can actually show thumbnails (locally generated, or remote-provided).
      // This avoids switching to grid for file types we can't thumbnail yet (e.g., docx).
      const thumbnailCapableExtensions = new Set([
        // Images
        'jpg',
        'jpeg',
        'png',
        'gif',
        'webp',
        'svg',
        'bmp',
        'tiff',
        'tif',
        'tga',
        'ico',
        // Videos
        'mp4',
        'mkv',
        'avi',
        'mov',
        'webm',
        'flv',
        'm4v',
        // Documents / other with generated thumbnails
        'pdf',
        'ai',
        'eps',
        'psd',
        'psb',
        'stl',
      ]);

      const hasGeneratedThumbnail = (file: FileItem) => {
        if (file.thumbnail_url) return true;
        const ext = getEffectiveExtension(file)?.toLowerCase();
        return !!ext && thumbnailCapableExtensions.has(ext);
      };

      const thumbnailFiles = mediaRelevantFiles.filter(hasGeneratedThumbnail);

      const mediaRatio = thumbnailFiles.length / mediaRelevantFiles.length;
      // If at least half the files can show thumbnails, default to grid when there's no stored preference.
      const mediaThreshold = 0.5;

      if (mediaRatio >= mediaThreshold) {
        const prefs: Partial<ViewPreferences> = {
          viewMode: 'grid',
          sortBy: 'modified',
          sortOrder: 'desc',
        };
        updateDirectoryPreferences(path, prefs);
        try {
          await invoke('set_dir_prefs', { path, prefs: JSON.stringify(prefs) });
        } catch (error) {
          console.warn('Failed to persist media folder defaults:', error);
        }
        return;
      }

      const stlFiles = mediaRelevantFiles.filter((file) => file.extension?.toLowerCase() === 'stl');
      if (stlFiles.length >= 2 && stlFiles.length / mediaRelevantFiles.length >= 0.6) {
        const prefs: Partial<ViewPreferences> = { viewMode: 'grid' };
        updateDirectoryPreferences(path, prefs);
        try {
          await invoke('set_dir_prefs', { path, prefs: JSON.stringify(prefs) });
        } catch (error) {
          console.warn('Failed to persist STL folder defaults:', error);
        }
      }
    } catch (error) {
      console.warn('Failed to apply smart view defaults:', error);
    }
  };

  // Only show the blocking loading overlay during initial app load (not folder navigation)
  // Folder navigation uses a subtle spinner in MainPanel instead
  useEffect(() => {
    let timer: number | undefined;
    // Only show full-screen overlay before app is initialized
    if (loading && !initializedRef.current) {
      timer = window.setTimeout(() => setShowLoadingOverlay(true), 500);
    } else {
      setShowLoadingOverlay(false);
    }
    return () => {
      if (timer) window.clearTimeout(timer);
    };
  }, [loading]);

  // Remove global subscriptions that write the entire file to avoid clobbering across windows

  // Use a dedicated window for Full Disk Access prompt (macOS only)
  useEffect(() => {
    void checkAndShowFullDiskAccessPrompt();
  }, []);

  // Handle SMB connect flow coming from the SMB connect window
  useEffect(() => {
    let unlisten: (() => void) | undefined;

    (async () => {
      try {
        unlisten = await listen<SmbConnectSuccessPayload>(
          SMB_CONNECT_SUCCESS_EVENT,
          async (evt) => {
            const payload = evt.payload;
            if (!payload?.hostname) return;

            const state = useAppStore.getState();
            try {
              await state.loadSmbServers();
            } catch (error) {
              console.warn('Failed to refresh SMB server list after connect:', error);
            }

            state.setPendingSmbCredentialRequest(null);
            await state.navigateTo(payload.targetPath || `smb://${payload.hostname}/`);
          }
        );
      } catch (error) {
        console.warn('Failed to listen for SMB connect success:', error);
      }
    })();

    return () => {
      if (unlisten) {
        unlisten();
      }
    };
  }, []);

  // Handle SFTP connect flow coming from the SFTP connect window
  useEffect(() => {
    let unlisten: (() => void) | undefined;

    (async () => {
      try {
        unlisten = await listen<SftpConnectSuccessPayload>(
          SFTP_CONNECT_SUCCESS_EVENT,
          async (evt) => {
            const payload = evt.payload;
            if (!payload?.hostname) return;

            const state = useAppStore.getState();
            try {
              await state.loadSftpServers();
            } catch (error) {
              console.warn('Failed to refresh SFTP server list after connect:', error);
            }

            state.setPendingSftpCredentialRequest(null);

            const portSuffix = payload.port === 22 ? '' : `:${payload.port}`;
            await state.navigateTo(
              payload.targetPath || `sftp://${payload.username}@${payload.hostname}${portSuffix}/`
            );
          }
        );
      } catch (error) {
        console.warn('Failed to listen for SFTP connect success:', error);
      }
    })();

    return () => {
      if (unlisten) {
        unlisten();
      }
    };
  }, []);

  // Sync preferences updates coming from the Preferences window.
  useEffect(() => {
    let unlisten: (() => void) | undefined;

    (async () => {
      try {
        unlisten = await listen<Partial<ViewPreferences>>(PREFERENCES_UPDATED_EVENT, (evt) => {
          const payload = evt.payload;
          if (payload && typeof payload === 'object') {
            useAppStore.getState().updateGlobalPreferences(payload);
          }
        });
      } catch (error) {
        console.warn('Failed to listen for preferences updates:', error);
      }
    })();

    return () => {
      if (unlisten) {
        unlisten();
      }
    };
  }, []);

  useEffect(() => {
    // Initialize the app by getting the home directory
    async function initializeApp() {
      try {
        setLoading(true);
        setError(undefined);

        if (!thumbnailPrewarmRequestedRef.current) {
          thumbnailPrewarmRequestedRef.current = true;
          const startedAt = performance.now();
          invoke<boolean>('initialize_thumbnail_service')
            .then((serviceReady) => {
              if (!import.meta.env.DEV) {
                return;
              }
              const elapsed = Math.round(performance.now() - startedAt);
              if (serviceReady) {
                console.info(`Thumbnail worker ready in ${elapsed}ms`);
              } else {
                console.warn(`Thumbnail worker prewarm failed after ${elapsed}ms`);
              }
            })
            .catch((error) => {
              if (import.meta.env.DEV) {
                console.warn('Thumbnail worker prewarm error:', error);
              }
            });
        }

        // Load persisted preferences first
        let lastDir: string | undefined;
        try {
          const raw = await invoke<string>('read_preferences');
          if (raw) {
            const parsed = JSON.parse(raw || '{}') as PersistedPreferences;
            if (parsed.globalPreferences) {
              useAppStore.getState().updateGlobalPreferences(parsed.globalPreferences);
            }
            if (parsed.directoryPreferences) {
              Object.entries(parsed.directoryPreferences).forEach(([dirPath, prefs]) => {
                useAppStore.getState().updateDirectoryPreferences(dirPath, prefs);
              });
            }
            if (parsed.lastDir) {
              lastDir = parsed.lastDir;
            }
          }
        } catch (error) {
          console.error('❌ Error loading preferences:', error);
        }

        // Mark preferences as loaded regardless of whether we found any
        prefsLoadedRef.current = true;

        const homeDir = await invoke<string>('get_home_directory');
        setHomeDir(homeDir);

        // Load pinned directories
        await loadPinnedDirectories();

        // Check if a path was provided via URL parameter (for new windows)
        const urlParams = new URLSearchParams(window.location.search);
        const initialPath = urlParams.get('path');
        const startPath = initialPath ? decodeURIComponent(initialPath) : lastDir || homeDir;

        // Now try to load the initial directory
        let loadSuccess = false;
        const tryLoadPath = async (path: string): Promise<boolean> => {
          try {
            setCurrentPath(path);
            // Use non-streaming refresh for remote paths since streaming isn't supported there.
            if (hasUriScheme(path)) {
              await useAppStore.getState().refreshCurrentDirectory();
            } else {
              await useAppStore.getState().refreshCurrentDirectoryStreaming();
            }

            const refreshFailure = useAppStore.getState().error;
            if (refreshFailure) {
              throw new Error(refreshFailure);
            }

            const normalizedPath = useAppStore.getState().currentPath;
            useAppStore.setState({
              pathHistory: [normalizedPath],
              historyIndex: 0,
            });
            return true;
          } catch (err) {
            console.error('Failed to load directory:', path, err);
            return false;
          }
        };

        // Try paths in order: startPath -> homeDir -> root
        loadSuccess = await tryLoadPath(startPath);
        if (!loadSuccess && startPath !== homeDir) {
          loadSuccess = await tryLoadPath(homeDir);
        }
        if (!loadSuccess) {
          loadSuccess = await tryLoadPath('/');
        }

        if (!loadSuccess) {
          await message('Unable to access any directory. Please check filesystem permissions.', {
            title: 'Fatal Error',
            okLabel: 'OK',
            kind: 'error',
          });
        }

        // Mark initialization complete only if we successfully loaded something
        if (loadSuccess) {
          setError(undefined);
          initializedRef.current = true;
          firstLoadRef.current = false;
        }
      } catch (error) {
        // Critical error (can't even get home directory)
        console.error('Critical initialization error:', error);
        await message('Failed to initialize application. Please restart.', {
          title: 'Fatal Error',
          okLabel: 'OK',
          kind: 'error',
        });
      } finally {
        setLoading(false);
      }
    }

    initializeApp();
  }, [
    setCurrentPath,
    navigateTo,
    setLoading,
    setError,
    setFiles,
    setHomeDir,
    loadPinnedDirectories,
  ]);

  // Listen for pinned directories changes from other windows
  useEffect(() => {
    let unlisten: (() => void) | undefined;
    let isActive = true;

    const setup = async () => {
      const unlistenFn = await listen('pinned-directories:changed', () => {
        // Reload pinned directories when another window adds/removes a pin
        loadPinnedDirectories();
      });
      // If component unmounted before listen resolved, clean up immediately
      if (!isActive) {
        unlistenFn();
      } else {
        unlisten = unlistenFn;
      }
    };

    setup();

    return () => {
      isActive = false;
      unlisten?.();
    };
  }, [loadPinnedDirectories]);

  // Apply accent color preference (system or custom) and keep it updated.
  useEffect(() => {
    let isActive = true;
    let intervalId: number | undefined;
    const normalizedCustom =
      normalizeHexColor(globalPreferences.accentColorCustom) ?? DEFAULT_ACCENT;
    const mode = globalPreferences.accentColorMode ?? 'system';

    const applyIfChanged = (hexColor: string) => {
      const normalized = normalizeHexColor(hexColor);
      if (!normalized) return;
      if (currentAccentRef.current === normalized) return;
      currentAccentRef.current = normalized;
      applyAccentVariables(normalized);
    };

    const updateFromSystem = async () => {
      try {
        const accent = await invoke<string>('get_system_accent_color');
        if (!isActive) return;
        const normalized = normalizeHexColor(accent) ?? DEFAULT_ACCENT;
        applyIfChanged(normalized);
      } catch (error) {
        if (import.meta.env.DEV) {
          console.warn('Could not get system accent color:', error);
        }
        applyIfChanged(DEFAULT_ACCENT);
      }
    };

    if (mode === 'system') {
      updateFromSystem();
      intervalId = window.setInterval(updateFromSystem, ACCENT_POLL_INTERVAL_MS);
    } else {
      applyIfChanged(normalizedCustom);
    }

    return () => {
      isActive = false;
      if (intervalId) {
        window.clearInterval(intervalId);
      }
    };
  }, [globalPreferences.accentColorCustom, globalPreferences.accentColorMode]);

  // Persist global preferences (debounced) to avoid clobbering on load.
  useEffect(() => {
    if (!prefsLoadedRef.current) return;

    if (saveGlobalPrefsTimeoutRef.current) {
      window.clearTimeout(saveGlobalPrefsTimeoutRef.current);
    }

    saveGlobalPrefsTimeoutRef.current = window.setTimeout(() => {
      invoke('set_global_prefs', { prefs: JSON.stringify(globalPreferences) }).catch((error) => {
        console.warn('Failed to persist global preferences:', error);
      });
    }, 250);

    return () => {
      if (saveGlobalPrefsTimeoutRef.current) {
        window.clearTimeout(saveGlobalPrefsTimeoutRef.current);
      }
    };
  }, [globalPreferences]);

  // Persist lastDir on navigation
  useEffect(() => {
    if (!prefsLoadedRef.current) {
      return;
    }
    const currentPath = useAppStore.getState().currentPath;
    (async () => {
      try {
        await invoke('set_last_dir', { path: currentPath });
      } catch (error) {
        console.error('❌ Failed to save lastDir:', error);
      }
    })();
  }, [currentPath]);

  // Note: Menu checkbox sync is now handled directly in the centralized toggleHiddenFiles function

  // Load directory preferences and files when currentPath changes
  useEffect(() => {
    // Skip if not initialized yet or if this is the first load (already handled in init)
    if (!initializedRef.current || firstLoadRef.current) return;

    async function loadDirectory() {
      try {
        setLoading(true);
        setError(undefined);

        // Load per-directory preferences first (so sort applies before rendering)
        // Skip if preferences were recently updated to prevent race conditions
        try {
          const { lastPreferenceUpdate } = useAppStore.getState();
          const timeSinceUpdate = Date.now() - lastPreferenceUpdate;
          const shouldSkipLoad = timeSinceUpdate < 2000; // Skip if updated within 2 seconds

          if (!shouldSkipLoad) {
            const raw = await invoke<string>('get_dir_prefs', { path: currentPath });
            if (raw) {
              const parsed = JSON.parse(raw || '{}') as unknown;
              if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
                const prefs = parsed as Partial<ViewPreferences>;
                useAppStore.getState().updateDirectoryPreferences(currentPath, prefs);
              }
            }
          }
        } catch (error) {
          console.warn('Failed to load directory preferences:', error);
        }

        // Try to load the directory using streaming for better performance
        // Note: Remote paths (gdrive://, smb://) don't support streaming, use non-streaming method
        const isRemotePath = currentPath.includes('://');
        if (isRemotePath) {
          await useAppStore.getState().refreshCurrentDirectory();
          // Apply smart view defaults after loading remote directory
          const { files } = useAppStore.getState();
          await applySmartViewDefaults(currentPath, files);
        } else {
          await useAppStore.getState().refreshCurrentDirectoryStreaming();
        }

        const refreshFailure = useAppStore.getState().error;
        if (refreshFailure) {
          throw new Error(refreshFailure);
        }

        setError(undefined); // Clear any previous errors on success

        // Check if we have a pending file selection (from navigating to a file path)
        // Note: With streaming, files may not be loaded yet, so we poll until found
        if (pendingFileSelectionRef.current) {
          const fileToSelect = pendingFileSelectionRef.current;
          pendingFileSelectionRef.current = null;
          // Poll for the file to appear as batches are loaded
          const intervalId = setInterval(() => {
            const { files, isStreamingComplete } = useAppStore.getState();
            const file = files.find((f: FileItem) => f.name === fileToSelect);

            if (file || isStreamingComplete) {
              clearInterval(intervalId);
              if (file) {
                useAppStore.getState().setSelectedFiles([file.path]);
              }
            }
          }, 100);
        }
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        const errorCode = parseErrorCode(error);
        console.error('Failed to load directory:', currentPath, error);

        // Handle file path: navigate to parent directory and select the file
        if (errorCode === ErrorCodes.ENOTDIR) {
          // Extract parent directory and filename
          const normalized = currentPath.replace(/\\/g, '/').replace(/\/+$/g, '');
          const lastSlash = normalized.lastIndexOf('/');
          if (lastSlash >= 0) {
            // Handle root directory case: /file.txt -> parent is "/"
            const parentDir = lastSlash === 0 ? '/' : normalized.slice(0, lastSlash);
            const fileName = normalized.slice(lastSlash + 1);
            // Set pending file selection and navigate to parent
            pendingFileSelectionRef.current = fileName;
            navigateTo(parentDir);
            return; // Exit early, don't show error dialog
          }
        }

        // Show alert for all other directory access errors
        const isPermissionError =
          errorCode === ErrorCodes.EPERM || errorMessage.includes('Operation not permitted');
        const hint = isPermissionError
          ? '\n\nAllow Marlin under System Settings → Privacy & Security → Files and Folders.'
          : '';

        // This was a failed navigation, not a render-state error.
        setLoading(false);
        setError(undefined);

        // Show native alert dialog
        await message(`Cannot access: ${currentPath}\n\n${errorMessage}${hint}`, {
          title: 'Directory Error',
          okLabel: 'OK',
          kind: 'error',
        });

        // Navigate back to previous valid location
        // Don't change files - keep showing the previous directory's content
        const { goBack, pathHistory, historyIndex } = useAppStore.getState();
        if (pathHistory.length > 1 && historyIndex > 0) {
          // Go back in history (this will restore the previous path in the address bar)
          goBack();
        } else {
          // If no history, replace the failed location with home so we don't leave a dead path around.
          const { homeDir } = useAppStore.getState();
          if (homeDir && currentPath !== homeDir) {
            setCurrentPath(homeDir);
            useAppStore.setState({
              pathHistory: [useAppStore.getState().currentPath],
              historyIndex: 0,
            });
          }
        }
      }
      // Note: Don't set loading=false here - streaming handles loading state via appendStreamingBatch
    }

    loadDirectory();
  }, [currentPath, navigateTo, setError, setLoading, setCurrentPath]);

  // File system watcher for auto-reload
  useEffect(() => {
    if (!currentPath || loading) {
      return;
    }

    let isActive = true;
    let debounceTimer: number | undefined;
    let cleanupFunction: (() => void) | undefined;

    const handleDirectoryChanged = (event: Event<DirectoryChangeEventPayload>) => {
      if (!isActive) return;

      const payload = event.payload;

      // Skip access-only changes (e.g., opening a file updates atime)
      // Only refresh for actual content changes: create, delete, rename, write, modify
      const changeType = (payload?.changeType || '').toLowerCase();
      const isContentChange =
        changeType === 'created' ||
        changeType === 'removed' ||
        changeType === 'modified' ||
        changeType === 'renamed' ||
        changeType === 'changed'; // Catch-all for other modification events

      // Normalize paths for comparison (strip trailing slashes)
      const normalizedPayloadPath = payload?.path?.replace(/\/+$/, '') || '';
      const normalizedCurrentPath = currentPath.replace(/\/+$/, '');

      if (payload && normalizedPayloadPath === normalizedCurrentPath && isContentChange) {
        // Invalidate frontend thumbnail cache for modified/removed files
        // (created files don't have cached thumbnails yet)
        if (
          (changeType === 'modified' || changeType === 'removed') &&
          payload.affectedPaths &&
          payload.affectedPaths.length > 0
        ) {
          invalidateThumbnailsForPaths(payload.affectedPaths);
        }

        // Clear any existing debounce timer
        if (debounceTimer) {
          window.clearTimeout(debounceTimer);
        }

        // Debounce the refresh to avoid excessive reloads
        debounceTimer = window.setTimeout(async () => {
          if (!isActive || loading) {
            return;
          }

          try {
            const state = useAppStore.getState();
            const { files: currentFiles, selectedFiles } = state;
            const affectedFiles = payload.affectedFiles || [];

            // For small changes, try to update locally without full refresh
            if (affectedFiles.length > 0 && affectedFiles.length <= 10) {
              // Build paths of affected files using a Set for O(1) lookups
              const affectedPaths = new Set(
                affectedFiles.map((name: string) =>
                  currentPath.endsWith('/') ? `${currentPath}${name}` : `${currentPath}/${name}`
                )
              );

              // Check which affected files exist in our current list (potential removals)
              const filesToRemove = currentFiles.filter((f) => affectedPaths.has(f.path));

              // Verify they're actually gone by checking if they exist on disk
              // We'll do this by checking if they're in the new file list after a quick refresh
              const response = await invoke<{ entries: FileItem[] }>('read_directory', {
                path: currentPath,
              }).catch(() => null);

              if (response) {
                const newFilePaths = new Set(response.entries.map((f: FileItem) => f.path));
                const confirmedRemovals = filesToRemove.filter((f) => !newFilePaths.has(f.path));

                // O(N+M) lookup for new files instead of O(N*M)
                const currentFilesByPath = new Map(currentFiles.map((cf) => [cf.path, cf]));
                const newFiles = response.entries.filter(
                  (f: FileItem) => !currentFilesByPath.has(f.path)
                );

                // Find modified files - either:
                // 1. Files in affectedPaths (we KNOW they changed from fs-watcher)
                // 2. Files with different mtime/size (fallback detection)
                const modifiedFiles = response.entries.filter((f: FileItem) => {
                  const existing = currentFilesByPath.get(f.path);
                  if (!existing) return false;

                  // If this file is in the affected list from fs-watcher, always consider it modified
                  // This handles cases where mtime precision might not detect the change
                  const isAffected = affectedPaths.has(f.path);

                  // Also detect changes via mtime/size comparison
                  const hasMetadataChange =
                    existing.modified !== f.modified || existing.size !== f.size;

                  return isAffected || hasMetadataChange;
                });

                // Handle removals with animation
                if (confirmedRemovals.length > 0 && !prefersReducedMotion) {
                  const removedPaths = confirmedRemovals.map((f) => f.path);
                  state.markFilesExiting(removedPaths);
                } else if (confirmedRemovals.length > 0) {
                  // Reduced motion: remove immediately using store action
                  const removedPathsSet = new Set(confirmedRemovals.map((r) => r.path));
                  state.removeFilesByPath(removedPathsSet);
                }

                // Handle modified files - update metadata so thumbnails refresh
                if (modifiedFiles.length > 0) {
                  state.updateFiles(modifiedFiles);
                }

                // Handle new files - just add to list, components will handle entry animation
                if (newFiles.length > 0) {
                  state.addFiles(newFiles);
                }

                // Update selection
                if (selectedFiles.length > 0) {
                  const stillExist = selectedFiles.filter((path) => newFilePaths.has(path));
                  if (stillExist.length !== selectedFiles.length) {
                    state.setSelectedFiles(stillExist);
                  }
                }

                return; // Skip full refresh
              }
            }

            // Fallback: full refresh for large changes or when quick check fails
            await useAppStore.getState().refreshCurrentDirectoryStreaming();
          } catch (error) {
            console.warn('Auto-refresh failed:', error);
            // Fallback to full refresh on error
            void useAppStore.getState().refreshCurrentDirectoryStreaming();
          }
        }, 500); // 500ms debounce
      }
    };

    const setupWatcher = async () => {
      if (!isActive) return;

      try {
        // Start watching current directory
        await invoke('start_watching_directory', { path: currentPath });

        // Listen for directory change events
        const unlisten = await listen('directory-changed', handleDirectoryChanged);

        // Store cleanup function
        cleanupFunction = () => {
          unlisten();
          invoke('stop_watching_directory', { path: currentPath }).catch(() => {
            // Ignore errors during cleanup
          });
        };
      } catch (error) {
        console.warn('Failed to setup file watcher:', error);
      }
    };

    setupWatcher();

    return () => {
      isActive = false;
      if (debounceTimer) {
        window.clearTimeout(debounceTimer);
      }
      if (cleanupFunction) {
        cleanupFunction();
      }
    };
  }, [currentPath, loading, prefersReducedMotion]);

  // Persist only current directory prefs on change to avoid global clobbering
  useEffect(() => {
    if (!initializedRef.current) return;
    const state = useAppStore.getState();
    const prefs = state.directoryPreferences[state.currentPath];
    if (!prefs) return;
    (async () => {
      try {
        await invoke('set_dir_prefs', { path: state.currentPath, prefs: JSON.stringify(prefs) });
        // Keep native context menu's sort state in sync
        if (prefs.sortBy || prefs.sortOrder) {
          const sortBy = prefs.sortBy ?? state.globalPreferences.sortBy;
          const sortOrder = prefs.sortOrder ?? state.globalPreferences.sortOrder;
          try {
            await invoke('update_sort_menu_state', { sortBy, ascending: sortOrder === 'asc' });
          } catch (error) {
            console.warn('Failed to update sort menu state:', error);
          }
        }
      } catch (error) {
        console.warn('Failed to persist directory preferences:', error);
      }
    })();
  }, [currentPath, currentDirectoryPreference]);

  // View and sort controls via system menu or keyboard
  useEffect(() => {
    let disposed = false;
    const unsubs: Array<() => void> = [];

    // Tauri menu events (if provided by backend)
    const register = async <Payload,>(
      eventName: string,
      handler: (evt?: Event<Payload>) => void | Promise<void>
    ) => {
      try {
        const unlisten = await listen<Payload>(eventName, async (evt) => {
          await handler(evt);
        });
        if (disposed) {
          unlisten();
        } else {
          unsubs.push(unlisten);
        }
      } catch (error) {
        console.warn('Failed to register menu listener:', { eventName, error });
      }
    };

    // Focused-only registration: only executes handler if this window has focus
    // This prevents menu accelerators (Cmd+C/X/V etc) from firing in ALL windows
    const registerFocused = async <Payload,>(
      eventName: string,
      handler: (evt?: Event<Payload>) => void | Promise<void>
    ) => {
      await register<Payload>(eventName, async (evt) => {
        if (!document.hasFocus()) return;
        await handler(evt);
      });
    };

    // Helpers to update preferences
    const setView = (mode: 'grid' | 'list') => {
      useAppStore
        .getState()
        .updateDirectoryPreferences(useAppStore.getState().currentPath, { viewMode: mode });
    };
    const setSortBy = (sortBy: 'name' | 'size' | 'modified' | 'type') => {
      const defaultOrder: 'asc' | 'desc' =
        sortBy === 'size' || sortBy === 'modified' ? 'desc' : 'asc';
      useAppStore.getState().updateDirectoryPreferences(useAppStore.getState().currentPath, {
        sortBy,
        sortOrder: defaultOrder,
      });
    };
    const setSortOrder = (sortOrder: 'asc' | 'desc') => {
      useAppStore
        .getState()
        .updateDirectoryPreferences(useAppStore.getState().currentPath, { sortOrder });
    };
    const toggleHidden = (value?: boolean) => {
      toggleHiddenFiles(value);
    };

    // Menu bindings - properly await async registration

    // Register all listeners asynchronously
    (async () => {
      const handleToggleHidden = async (event?: Event<boolean>) => {
        const nextValue = typeof event?.payload === 'boolean' ? event.payload : undefined;
        await toggleHidden(nextValue);
      };
      await registerFocused('menu:toggle_hidden', handleToggleHidden);
      await registerFocused('ctx:toggle_hidden', handleToggleHidden);

      await registerFocused('menu:view_list', () => setView('list'));
      await registerFocused('menu:view_grid', () => setView('grid'));
      await registerFocused('menu:sort_name', () => setSortBy('name'));
      await registerFocused('menu:sort_size', () => setSortBy('size'));
      await registerFocused('menu:sort_modified', () => setSortBy('modified'));
      await registerFocused('menu:sort_type', () => setSortBy('type'));
      await registerFocused('menu:sort_order_asc', () => setSortOrder('asc'));
      await registerFocused('menu:sort_order_desc', () => setSortOrder('desc'));
      await registerFocused('menu:preferences', () => openPreferences());

      const handleCalculateTotalSize = async () => {
        const state = useAppStore.getState();
        const selection = state.selectedFiles;
        if (!selection || selection.length === 0) return;
        const byPath = new Map(state.files.map((f) => [f.path, f]));
        const targets = selection
          .map((path) => byPath.get(path))
          .filter((file): file is FileItem => Boolean(file));
        if (targets.length === 0) return;
        if (!targets.some((file) => file.is_directory)) {
          return;
        }
        await openFolderSizeWindow(
          targets.map((file) => ({
            path: file.path,
            name: file.name,
            isDirectory: file.is_directory,
          }))
        );
      };

      await registerFocused('menu:calculate_total_size', () => handleCalculateTotalSize());

      // Copy actions from context menu
      const copyToClipboard = async (text: string) => {
        try {
          await navigator.clipboard.writeText(text);
          return;
        } catch (clipboardError) {
          console.warn('Direct clipboard write failed, trying fallback:', clipboardError);
          // Fallback: use a temporary textarea
          try {
            const ta = document.createElement('textarea');
            ta.value = text;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.focus();
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
          } catch (fallbackError) {
            console.error('Failed to copy to clipboard via fallback', fallbackError);
          }
        }
      };

      const copyNames = async (fullPath: boolean) => {
        const state = useAppStore.getState();
        const selected = state.selectedFiles;
        if (!selected || selected.length === 0) return;
        const byPath = new Map(state.files.map((f) => [f.path, f]));
        const parts: string[] = [];
        for (const p of selected) {
          const f = byPath.get(p);
          if (!f) continue;
          // fullPath => copy absolute path; else => copy file name with extension
          parts.push(fullPath ? f.path : f.name);
        }
        if (parts.length > 0) {
          await copyToClipboard(parts.join('\n'));
        }
      };

      await registerFocused('menu:copy_name', () => {
        void copyNames(false);
      });
      await registerFocused('menu:copy_full_name', () => {
        void copyNames(true);
      });
      await registerFocused('menu:rename', () => {
        useAppStore.getState().beginRenameSelected();
      });
      await registerFocused('menu:compress_to_zip', () => {
        const state = useAppStore.getState();
        const selected = state.selectedFiles;
        if (!selected || selected.length === 0) return;
        const map = new Map(state.files.map((f) => [f.path, f]));
        const selectedItems = selected
          .map((path) => map.get(path))
          .filter((file): file is FileItem => Boolean(file));
        if (selectedItems.length === 0) return;
        const prefs = {
          ...state.globalPreferences,
          ...state.directoryPreferences[state.currentPath],
        };
        const hiddenFiltered = prefs.showHidden
          ? state.files
          : state.files.filter((file) => !file.is_hidden);
        const visibleItems = state.filterText
          ? hiddenFiltered.filter((file) =>
              file.name.toLowerCase().includes(state.filterText.toLowerCase())
            )
          : hiddenFiltered;
        const suggestedName = getSuggestedZipName({
          selectedItems,
          visibleItems,
          currentPath: state.currentPath,
        });
        void state.compressSelectedToZip(suggestedName);
      });
      const handleExtractArchive = (createSubfolder: boolean) => {
        const state = useAppStore.getState();
        const selected = state.selectedFiles;
        if (!selected || selected.length !== 1) return;
        const map = new Map(state.files.map((f) => [f.path, f]));
        const target = selected
          .map((path) => map.get(path))
          .find(
            (file) =>
              file &&
              !file.is_directory &&
              isArchiveFile(file) &&
              !file.path.startsWith('archive://')
          );
        if (!target) return;
        void state.extractArchive(target, { createSubfolder });
      };
      await registerFocused('menu:extract_to_folder', () => {
        handleExtractArchive(true);
      });
      await registerFocused('menu:new_file', () => {
        void useAppStore.getState().createNewFile();
      });
      await registerFocused('menu:new_folder', () => {
        void useAppStore.getState().createNewFolder();
      });
      await registerFocused('menu:reveal_symlink', async () => {
        const state = useAppStore.getState();
        const selection = state.selectedFiles;
        if (!selection || selection.length === 0) return;
        const target = selection[0];
        try {
          const result = await invoke<{ parent: string; target: string }>(
            'resolve_symlink_parent_command',
            {
              path: target,
            }
          );
          state.setPendingRevealTarget(result.target);
          state.navigateTo(result.parent);
        } catch (error) {
          console.warn('Failed to resolve symlink parent from menu:', error);
          useToastStore.getState().addToast({
            type: 'error',
            message: 'Unable to locate the original item for this link.',
          });
        }
      });
      await registerFocused('menu:reveal_in_file_browser', () => {
        const state = useAppStore.getState();
        const selection = state.selectedFiles;
        if (!selection || selection.length === 0) return;
        const target = selection[0];
        // Only reveal local filesystem paths (not archive://, smb://, etc.)
        if (target.includes('://')) return;
        void revealInFileBrowser(target);
      });
      await registerFocused('menu:get_info', () => {
        showFileProperties();
      });
      await registerFocused('menu:new_window', () => {
        // Create new window in current directory
        const currentPath = useAppStore.getState().currentPath;
        invoke('new_window', { path: currentPath }).catch((err) => {
          console.error('Failed to create new window:', err);
        });
      });

      const handleFoldersFirst = (event?: Event<boolean>) => {
        if (typeof event?.payload === 'boolean') {
          useAppStore.getState().updateGlobalPreferences({ foldersFirst: event.payload });
        } else {
          toggleFoldersFirst();
        }
      };
      await registerFocused('menu:folders_first', handleFoldersFirst);
      await registerFocused('ctx:folders_first', handleFoldersFirst);

      await registerFocused('menu:reset_folder_defaults', async () => {
        // Clear all directory preferences and persist the change
        useAppStore.getState().resetDirectoryPreferences();
        try {
          await invoke('clear_all_dir_prefs');
        } catch (err) {
          console.error('Failed to clear directory preferences:', err);
        }
      });

      await registerFocused('menu:clear_thumbnail_cache', async () => {
        // Clear the thumbnail cache
        try {
          await invoke('clear_thumbnail_cache');
          // Optionally refresh current view to show the effect
          const { refreshCurrentDirectoryStreaming } = useAppStore.getState();
          await refreshCurrentDirectoryStreaming();
        } catch (err) {
          console.error('Failed to clear thumbnail cache:', err);
        }
      });

      // Clipboard operations are handled entirely via JS keydown events.
      // The Edit menu uses native PredefinedMenuItem (cut/copy/paste) so
      // text input fields work correctly without execCommand hacks.

      // Cross-window clipboard sync: when any window completes a cut+paste,
      // all windows must clear their clipboard state and refresh if affected.
      // The focused window already refreshed during paste, so only unfocused
      // windows need to refresh (to remove cut files from source directory).
      await register<{ movedPaths: string[] }>('clipboard:cut_complete', async (evt) => {
        // Skip entirely in focused window - it already handled everything during paste
        if (document.hasFocus()) return;
        // Clear clipboard state in unfocused windows
        useAppStore.getState().clearClipboardState();
        // Validate payload shape before processing
        const rawPaths = evt?.payload?.movedPaths;
        if (!Array.isArray(rawPaths)) return;
        const movedPaths = rawPaths.filter((p): p is string => typeof p === 'string');
        if (movedPaths.length === 0) return;
        // Refresh if current directory contained any of the moved files
        const currentDir = useAppStore.getState().currentPath;
        const affectsCurrentDir = movedPaths.some((p) => dirname(p) === currentDir);
        if (affectsCurrentDir) {
          await useAppStore.getState().refreshCurrentDirectoryStreaming();
        }
      });
    })();

    const showFileProperties = (): boolean => {
      const selection = useAppStore.getState().selectedFiles;
      if (selection.length === 0) return false;
      const localPaths = selection.filter((p) => !p.includes('://'));
      if (localPaths.length === 0) return false;
      invoke('show_file_properties', { paths: localPaths }).catch((err) => {
        console.error('Failed to show file properties:', err);
      });
      return true;
    };

    // Keyboard shortcuts as fallback (mac-like)
    const onKey = (e: KeyboardEvent) => {
      const uaUpper = navigator.userAgent.toUpperCase();
      const isMac = uaUpper.includes('MAC');
      const isLinux = uaUpper.includes('LINUX');
      const active = document.activeElement as HTMLElement | null;
      const inEditable =
        !!active &&
        (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable);

      if (
        ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) &&
        !e.altKey &&
        !e.shiftKey &&
        e.key === ','
      ) {
        e.preventDefault();
        openPreferences();
        return;
      }

      // Zoom shortcuts: Cmd/Ctrl + Plus/Minus/0 (only in grid view)
      // Note: + requires Shift on most keyboards, so we allow shiftKey for zoom-in
      if ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) {
        if (!e.altKey) {
          const state = useAppStore.getState();
          const merged = {
            ...state.globalPreferences,
            ...state.directoryPreferences[state.currentPath],
          };

          if (merged.viewMode === 'grid') {
            const current = merged.gridSize ?? GRID_SIZE_DEFAULT;

            // Zoom in: + (requires Shift on most keyboards) or = (without Shift)
            if (e.key === '+' || e.key === '=') {
              e.preventDefault();
              const newSize = Math.min(GRID_SIZE_MAX, current + GRID_SIZE_STEP);
              state.updateDirectoryPreferences(state.currentPath, { gridSize: newSize });
              return;
            }

            // Zoom out: - (no Shift needed)
            if (e.key === '-' && !e.shiftKey) {
              e.preventDefault();
              const newSize = Math.max(GRID_SIZE_MIN, current - GRID_SIZE_STEP);
              state.updateDirectoryPreferences(state.currentPath, { gridSize: newSize });
              return;
            }

            // Reset zoom: 0 (no Shift needed)
            if (e.key === '0' && !e.shiftKey) {
              e.preventDefault();
              const defaultSize = state.globalPreferences.gridSize ?? GRID_SIZE_DEFAULT;
              state.updateDirectoryPreferences(state.currentPath, { gridSize: defaultSize });
              return;
            }
          }
        }
      }

      // Cmd+I / Ctrl+I: Show file properties / Get Info
      if (
        !inEditable &&
        ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) &&
        !e.altKey &&
        !e.shiftKey &&
        e.key === 'i'
      ) {
        if (showFileProperties()) {
          e.preventDefault();
        }
        return;
      }

      // Type-to-filter: any single printable character starts/appends to filter
      // We check length === 1 to exclude special keys (Escape, Enter, etc.)
      // and exclude modifier combos to avoid capturing shortcuts
      if (!inEditable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
        e.preventDefault();
        useAppStore.getState().appendToFilter(e.key);
        return;
      }

      // Escape clears filter if active
      if (e.key === 'Escape' && useAppStore.getState().showFilterInput) {
        e.preventDefault();
        useAppStore.getState().clearFilter();
        return;
      }

      // Backspace removes last char from filter if active (keeps filter visible even when empty)
      if (e.key === 'Backspace' && !inEditable && useAppStore.getState().showFilterInput) {
        e.preventDefault();
        const current = useAppStore.getState().filterText;
        if (current.length > 0) {
          useAppStore.getState().setFilterText(current.slice(0, -1));
        }
        // When empty, do nothing - filter stays visible, only Escape dismisses
        return;
      }

      if (!isMac && isLinux) {
        if (e.key === 'Alt') {
          if (!e.repeat) {
            altTogglePendingRef.current = true;
          }
          return;
        }
        if (e.altKey) {
          altTogglePendingRef.current = false;
        }
      }

      // Arrow-key file navigation (no modifiers, not typing in inputs)
      if (!inEditable && !e.metaKey && !e.ctrlKey && !e.altKey) {
        const key = e.key;
        if (
          key === 'ArrowUp' ||
          key === 'ArrowDown' ||
          key === 'ArrowLeft' ||
          key === 'ArrowRight'
        ) {
          const state = useAppStore.getState();
          const selected = state.selectedFiles || [];

          // Determine current visible items in DOM order
          const nodes = Array.from(
            document.querySelectorAll<HTMLElement>('[data-file-item="true"][data-file-path]')
          );
          const order = nodes.map((n) => n.getAttribute('data-file-path') || '').filter(Boolean);
          if (order.length === 0) return;

          // Helper: ensure a given index is selected and scrolled into view
          const wrap = (v: number, n: number) => {
            if (n <= 0) return 0;
            let r = v % n;
            if (r < 0) r += n;
            return r;
          };
          const selectIndex = (idx: number) => {
            const index = wrap(idx, order.length);
            const path = order[index];
            state.setSelectedFiles([path]);
            state.setSelectionAnchor(path);
            state.setSelectionLead(path);
            state.setShiftBaseSelection(null);
            // Scroll into view
            const el = nodes[index];
            if (el && typeof el.scrollIntoView === 'function') {
              try {
                el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
              } catch (error) {
                console.warn('Failed to scroll selection into view:', error);
              }
            }
          };

          // Determine if we're in grid (thumb) view to support 4-way nav
          const gridEl = document.querySelector<HTMLElement>('.file-grid');
          let cols = 1;
          if (gridEl) {
            // Estimate columns by counting how many items share the first row's top
            const firstRowTop = nodes[0]?.offsetTop ?? 0;
            let count = 0;
            for (let i = 0; i < nodes.length; i++) {
              if (Math.abs((nodes[i].offsetTop ?? 0) - firstRowTop) < 1) count++;
              else break;
            }
            cols = Math.max(1, count || 1);
          }

          // Map current selection to visible indices
          const visibleSelectedIdx = selected
            .map((p) => order.indexOf(p))
            .filter((i) => i >= 0)
            .sort((a, b) => a - b);

          const noneSelectedVisible = visibleSelectedIdx.length === 0;
          const highest = noneSelectedVisible ? -1 : visibleSelectedIdx[0];
          const lowest = noneSelectedVisible
            ? -1
            : visibleSelectedIdx[visibleSelectedIdx.length - 1];

          // Compute target index based on rules
          let targetIdx: number | null = null;

          if (key === 'ArrowUp') {
            if (noneSelectedVisible) {
              // If none selected: Up selects last
              targetIdx = order.length - 1;
            } else {
              // Up from highest selection
              targetIdx = gridEl ? highest - cols : highest - 1;
            }
          } else if (key === 'ArrowDown') {
            if (noneSelectedVisible) {
              // If none selected: Down selects first
              targetIdx = 0;
            } else {
              // Down from lowest selection
              targetIdx = gridEl ? lowest + cols : lowest + 1;
            }
          } else if (key === 'ArrowLeft') {
            if (!gridEl) {
              // List view: ignore Left/Right
              return;
            }
            if (noneSelectedVisible) {
              // Start at last on Left if nothing selected
              targetIdx = order.length - 1;
            } else {
              // Left from highest selection (reading order)
              targetIdx = highest - 1;
            }
          } else if (key === 'ArrowRight') {
            if (!gridEl) {
              // List view: ignore Left/Right
              return;
            }
            if (noneSelectedVisible) {
              // Start at first on Right if nothing selected
              targetIdx = 0;
            } else {
              // Right from lowest selection (reading order)
              targetIdx = lowest + 1;
            }
          }

          if (targetIdx === null) return;

          // Grid Up/Down: rollover when not using Shift; clamp when extending selection
          if (gridEl && (key === 'ArrowUp' || key === 'ArrowDown')) {
            if (e.shiftKey) {
              // Clamp to bounds when extending a range
              if (targetIdx < 0) targetIdx = 0;
              if (targetIdx >= order.length) targetIdx = order.length - 1;
            } else {
              const refIdx =
                key === 'ArrowUp'
                  ? noneSelectedVisible
                    ? 0
                    : highest
                  : noneSelectedVisible
                    ? 0
                    : lowest;
              const col = Math.max(0, refIdx % cols);
              if (key === 'ArrowUp' && targetIdx < 0) {
                // Wrap to last row same column
                const lastRowStart = Math.floor((order.length - 1) / cols) * cols;
                let cand = lastRowStart + col;
                while (cand >= order.length && cand >= 0) cand -= cols;
                targetIdx = cand >= 0 ? cand : order.length - 1;
              } else if (key === 'ArrowDown' && targetIdx >= order.length) {
                // Wrap to first row same column (or last if fewer items)
                let cand = col;
                if (cand >= order.length) cand = order.length - 1;
                targetIdx = cand;
              }
            }
          }

          // List: rollover when not using Shift; clamp when extending selection
          if (!gridEl && (key === 'ArrowUp' || key === 'ArrowDown')) {
            if (e.shiftKey) {
              if (targetIdx < 0) targetIdx = 0;
              if (targetIdx >= order.length) targetIdx = order.length - 1;
            } else {
              if (key === 'ArrowUp' && (noneSelectedVisible || highest <= 0)) {
                targetIdx = order.length - 1;
              }
              if (key === 'ArrowDown' && (noneSelectedVisible || lowest >= order.length - 1)) {
                targetIdx = 0;
              }
            }
          }

          // Horizontal grid: rollover when not using Shift; clamp with Shift
          if (gridEl && (key === 'ArrowLeft' || key === 'ArrowRight')) {
            if (e.shiftKey) {
              if (targetIdx < 0) targetIdx = 0;
              if (targetIdx >= order.length) targetIdx = order.length - 1;
            } else {
              if (key === 'ArrowLeft' && (noneSelectedVisible || highest <= 0)) {
                targetIdx = order.length - 1;
              }
              if (key === 'ArrowRight' && (noneSelectedVisible || lowest >= order.length - 1)) {
                targetIdx = 0;
              }
            }
          }

          // Shift+Arrow: extend selection as a contiguous range from anchor (preserve pre-selection)
          if (e.shiftKey) {
            // Initialize shift session base if needed
            const base = state.shiftBaseSelection ?? state.selectedFiles;
            state.setShiftBaseSelection(base.slice());

            // Establish anchor if missing or off-screen
            const anchorPath = state.selectionAnchor;
            let anchorIdx = anchorPath ? order.indexOf(anchorPath) : -1;
            if (anchorIdx < 0) {
              // If no anchor, set to the first visible selected index or current target
              anchorIdx = noneSelectedVisible ? targetIdx : (visibleSelectedIdx[0] ?? targetIdx);
              state.setSelectionAnchor(order[anchorIdx]);
            }

            // Establish current lead (caret)
            const leadPath = state.selectionLead;
            let leadIdx = leadPath ? order.indexOf(leadPath) : -1;
            if (leadIdx < 0) {
              // Start from anchor when no existing lead
              leadIdx = anchorIdx;
            }

            // Compute step for this key
            const delta =
              key === 'ArrowUp'
                ? gridEl
                  ? -cols
                  : -1
                : key === 'ArrowDown'
                  ? gridEl
                    ? +cols
                    : +1
                  : key === 'ArrowLeft'
                    ? -1
                    : key === 'ArrowRight'
                      ? +1
                      : 0;
            let newLead = leadIdx + delta;
            // Clamp without wrap during shift
            if (newLead < 0) newLead = 0;
            if (newLead >= order.length) newLead = order.length - 1;

            const start = Math.min(anchorIdx, newLead);
            const end = Math.max(anchorIdx, newLead);
            const range = order.slice(start, end + 1);
            const merged = Array.from(new Set([...(state.shiftBaseSelection || []), ...range]));
            e.preventDefault();
            state.setSelectedFiles(merged);
            state.setSelectionLead(order[newLead]);
            const el = nodes[newLead];
            if (el && typeof el.scrollIntoView === 'function') {
              try {
                el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
              } catch (error) {
                console.warn('Failed to scroll shifted selection into view:', error);
              }
            }
            return;
          }

          e.preventDefault();
          selectIndex(targetIdx);
          return;
        }
      }

      // Back: macOS Cmd+[ , Windows/Linux Alt+Left
      if ((isMac && e.metaKey && e.key === '[') || (!isMac && e.altKey && e.key === 'ArrowLeft')) {
        e.preventDefault();
        useAppStore.getState().goBack();
        return;
      }

      // Forward: macOS Cmd+] , Windows/Linux Alt+Right
      if ((isMac && e.metaKey && e.key === ']') || (!isMac && e.altKey && e.key === 'ArrowRight')) {
        e.preventDefault();
        useAppStore.getState().goForward();
        return;
      }

      // Go Up: macOS Cmd+Up, Windows/Linux Alt+Up
      if (
        (isMac && e.metaKey && e.key === 'ArrowUp') ||
        (!isMac && e.altKey && e.key === 'ArrowUp')
      ) {
        e.preventDefault();
        useAppStore.getState().goUp();
        return;
      }

      // Refresh: F5 (all), macOS Cmd+R, Windows/Linux Ctrl+R
      const keyLower = e.key.toLowerCase();
      if (
        e.key === 'F5' ||
        (isMac && e.metaKey && keyLower === 'r') ||
        (!isMac && e.ctrlKey && keyLower === 'r')
      ) {
        e.preventDefault();
        (async () => {
          const { currentPath, setLoading, setError } = useAppStore.getState();
          try {
            setLoading(true);
            setError(undefined);
            const listing = await invoke<DirectoryListingResponse>('read_directory', {
              path: currentPath,
            });
            useAppStore.getState().setFiles(listing.entries);
            useAppStore.setState({
              currentLocationRaw: listing.location.raw,
              currentProviderCapabilities: listing.capabilities,
            });
          } catch (err) {
            const msg = err instanceof Error ? err.message : String(err);
            const hint = msg.includes('Operation not permitted')
              ? ' Grant access under System Settings → Privacy & Security → Files and Folders.'
              : '';
            await message(`Failed to refresh: ${msg}${hint}`, {
              title: 'Refresh Error',
              okLabel: 'OK',
              kind: 'error',
            });
          } finally {
            setLoading(false);
          }
        })();
        return;
      }

      // Rename: F2 everywhere; macOS Return (Enter) with no modifiers
      if (!inEditable) {
        if (e.key === 'F2') {
          e.preventDefault();
          useAppStore.getState().beginRenameSelected();
          return;
        }
        if (isMac && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey && e.key === 'Enter') {
          e.preventDefault();
          useAppStore.getState().beginRenameSelected();
          return;
        }
      }

      if (!inEditable) {
        const isDeleteKey =
          e.key === 'Delete' ||
          (isMac && !e.metaKey && !e.ctrlKey && !e.altKey && e.key === 'Backspace');

        if (isDeleteKey && useAppStore.getState().selectedFiles.length > 0) {
          e.preventDefault();
          if (e.shiftKey) {
            void useAppStore.getState().deleteSelectedPermanently();
          } else {
            void useAppStore.getState().trashSelected();
          }
          return;
        }
      }

      const meta = e.metaKey || e.ctrlKey;
      if (!meta) return;
      const isRenaming = !!useAppStore.getState().renameTargetPath;
      const hasModal = !!document.querySelector(
        '[role="dialog"], [aria-modal="true"], [data-modal="true"]'
      );

      // Undo: Cmd/Ctrl+Z
      if (meta && !inEditable && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'z') {
        e.preventDefault();
        void useUndoStore.getState().executeUndo();
        return;
      }

      // New folder: Cmd/Ctrl+Shift+N
      if (e.shiftKey && !e.altKey && (e.key === 'n' || e.key === 'N')) {
        if (!inEditable && !isRenaming && !hasModal) {
          e.preventDefault();
          void useAppStore.getState().createNewFolder();
        }
        return;
      }

      // New file: Cmd/Ctrl+Alt+N
      if (!e.shiftKey && e.altKey && (e.key === 'n' || e.key === 'N')) {
        if (!inEditable && !isRenaming && !hasModal) {
          e.preventDefault();
          void useAppStore.getState().createNewFile();
        }
        return;
      }

      // New window: Cmd/Ctrl+N
      if (!e.shiftKey && !e.altKey && (e.key === 'n' || e.key === 'N')) {
        e.preventDefault();
        const currentPath = useAppStore.getState().currentPath;
        invoke('new_window', { path: currentPath }).catch((err) => {
          console.error('Failed to create new window:', err);
        });
        return;
      }

      // Clipboard shortcuts (Cmd/Ctrl+C, X, V)
      // The Edit menu uses native PredefinedMenuItem, so when focused in a text
      // input the OS handles copy/cut/paste natively. Here we only intercept
      // when NOT in an editable field to do file operations instead.
      {
        const keyLc = e.key.toLowerCase();
        const hasClipboardModifier =
          !e.altKey && !e.shiftKey && ((isMac && e.metaKey && !e.ctrlKey) || (!isMac && e.ctrlKey));

        if (hasClipboardModifier && keyLc === 'c' && !inEditable) {
          const state = useAppStore.getState();
          if (state.selectedFiles.length > 0) {
            e.preventDefault();
            void state.copySelectedFiles();
            return;
          }
        }

        if (hasClipboardModifier && keyLc === 'x' && !inEditable) {
          const state = useAppStore.getState();
          if (state.selectedFiles.length > 0) {
            e.preventDefault();
            void state.cutSelectedFiles();
            return;
          }
        }

        if (hasClipboardModifier && keyLc === 'v' && !inEditable) {
          e.preventDefault();
          void useAppStore.getState().pasteFiles();
          return;
        }
      }

      // Select all: Cmd+A on macOS, Ctrl+A on Windows/Linux
      if (
        !inEditable &&
        ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) &&
        !e.altKey &&
        !e.shiftKey &&
        e.key.toLowerCase() === 'a'
      ) {
        e.preventDefault();
        const state = useAppStore.getState();
        const currentDirPrefs = state.directoryPreferences[state.currentPath] || {};
        const effectivePrefs = { ...state.globalPreferences, ...currentDirPrefs };
        const filteredFiles = effectivePrefs.showHidden
          ? state.files
          : state.files.filter((f) => !f.is_hidden);
        if (filteredFiles.length > 0) {
          state.setSelectedFiles(filteredFiles.map((f) => f.path));
          state.setSelectionAnchor(filteredFiles[0].path);
          state.setSelectionLead(filteredFiles[filteredFiles.length - 1].path);
        }
        return;
      }

      if (e.key === '1') {
        e.preventDefault();
        setView('grid');
      }
      if (e.key === '2') {
        e.preventDefault();
        setView('list');
      }
      // Toggle hidden: Cmd+Shift+.
      if (e.key === '.' && e.shiftKey) {
        e.preventDefault();
        toggleHidden();
      }
    };
    window.addEventListener('keydown', onKey);
    unsubs.push(() => window.removeEventListener('keydown', onKey));

    // Mouse back/forward side buttons (buttons 3/4)
    const onMouseDown = (e: globalThis.MouseEvent) => {
      const state = useAppStore.getState();
      if (e.button === 3 && state.canGoBack()) {
        e.preventDefault();
        state.goBack();
      } else if (e.button === 4 && state.canGoForward()) {
        e.preventDefault();
        state.goForward();
      }
    };
    window.addEventListener('mousedown', onMouseDown);
    unsubs.push(() => window.removeEventListener('mousedown', onMouseDown));

    const onKeyUp = (e: KeyboardEvent) => {
      if (e.key === 'Alt') {
        const uaUpper = navigator.userAgent.toUpperCase();
        const isMac = uaUpper.includes('MAC');
        const isLinux = uaUpper.includes('LINUX');
        if (!isMac && isLinux) {
          if (altTogglePendingRef.current) {
            void invoke('toggle_menu_visibility').catch((err) => {
              console.warn('Failed to toggle menu visibility:', err);
            });
          }
          altTogglePendingRef.current = false;
        }
      }
      if (e.key === 'Shift') {
        useAppStore.getState().setShiftBaseSelection(null);
      }
    };
    window.addEventListener('keyup', onKeyUp);
    unsubs.push(() => window.removeEventListener('keyup', onKeyUp));

    return () => {
      disposed = true;
      unsubs.forEach((u) => u());
    };
  }, [toggleHiddenFiles, toggleFoldersFirst, openPreferences]);

  // Sync native menu checkboxes when preferences change
  useEffect(() => {
    if (!initializedRef.current) return;

    const state = useAppStore.getState();
    const currentDirPrefs = state.directoryPreferences[state.currentPath] || {};
    const effectivePrefs = { ...state.globalPreferences, ...currentDirPrefs };

    const sync = async () => {
      try {
        await invoke('update_hidden_files_menu', {
          checked: !!effectivePrefs.showHidden,
          source: 'frontend',
        });
      } catch (e) {
        console.warn('Failed to sync hidden files menu:', e);
      }

      try {
        await invoke('update_folders_first_menu', {
          checked: !!effectivePrefs.foldersFirst,
          source: 'frontend',
        });
      } catch (e) {
        console.warn('Failed to sync folders first menu:', e);
      }

      try {
        await invoke('update_sort_menu_state', {
          sortBy: effectivePrefs.sortBy,
          ascending: effectivePrefs.sortOrder === 'asc',
        });
      } catch (e) {
        console.warn('Failed to sync sort menu:', e);
      }
    };

    // Sync after a small delay to ensure all state updates are complete
    const timeoutId = setTimeout(sync, 10);
    return () => clearTimeout(timeoutId);
  }, [
    currentPath,
    currentDirectoryPreference,
    globalPreferences.showHidden,
    globalPreferences.foldersFirst,
    globalPreferences.sortBy,
    globalPreferences.sortOrder,
  ]);

  // No verbose debug logging in production UI

  const handleSidebarFrameMouseDown = useCallback(async (event: MouseEvent<HTMLDivElement>) => {
    if (event.button !== 0) return;
    if (event.target !== event.currentTarget) return;
    try {
      await windowRef.current.startDragging();
    } catch (error) {
      console.warn('Frame drag start failed:', error);
    }
  }, []);

  if (showLoadingOverlay) {
    return (
      <div className="h-screen flex items-center justify-center bg-app-dark text-app-text">
        <div className="text-center">
          <div className="animate-spin w-8 h-8 border-2 border-app-accent border-t-transparent rounded-full mx-auto mb-4"></div>
          <div className="text-app-muted">Loading Marlin File Browser...</div>
          <div className="text-xs text-app-muted mt-2">Initializing Tauri backend...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative h-screen flex bg-app-dark text-app-text overflow-hidden">
      {/* Sidebar full-height */}
      <div className="h-full p-2" data-tauri-drag-region onMouseDown={handleSidebarFrameMouseDown}>
        <Sidebar />
      </div>

      {/* Content column with path bar + panel */}
      <div className="flex-1 flex flex-col overflow-hidden min-h-0 relative">
        <PathBar />
        <MainPanel />
        <div className="pointer-events-none absolute bottom-0 right-0 z-20">
          <StatusBar />
        </div>
      </div>

      {/* Type-to-filter input */}
      <FilterInput />

      {/* Toast notifications */}
      <Toast />
    </div>
  );
}

export default App;