'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Folder, File, Search, Pin, Trash2, HardDrive, Settings,
  ChevronRight, Grid3X3, List, Plus, Upload, LogOut,
  MoreVertical, Star, Download, Pencil, Copy, Move,
  FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon
} from 'lucide-react';
import api from '@/lib/api';
import FilePreview from './FilePreview';
import SettingsPage from './SettingsPage';
import StorageDashboard from './StorageDashboard';
import TaskManager from './TaskManager';
import ShareModal from './ShareModal';

interface FileItem {
  name: string;
  path: string;
  is_dir: boolean;
  size: number;
  mime_type: string;
  is_pinned: boolean;
  is_trashed: boolean;
  mod_time: string;
  checksum?: string;
}

interface FileExplorerProps {
  onLogout: () => void;
}

type ViewMode = 'grid' | 'list';
type SidebarSection = 'files' | 'pinned' | 'trash' | 'storage' | 'settings';

interface UploadProgress {
  id: string;
  name: string;
  progress: number;
  status: 'uploading' | 'complete' | 'error';
  error?: string;
}

export default function FileExplorer({ onLogout }: FileExplorerProps) {
  const [currentPath, setCurrentPath] = useState(() => {
    if (typeof window !== 'undefined') {
      return new URLSearchParams(window.location.search).get('path') || '.';
    }
    return '.';
  });

  const navigateTo = useCallback((path: string) => {
    setCurrentPath(path);
    window.history.pushState({ path }, '', `?path=${encodeURIComponent(path)}`);
  }, []);

  useEffect(() => {
    const handlePopState = (e: PopStateEvent) => {
      if (e.state && e.state.path) setCurrentPath(e.state.path);
      else setCurrentPath(new URLSearchParams(window.location.search).get('path') || '.');
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const [files, setFiles] = useState<FileItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [viewMode, setViewMode] = useState<ViewMode>('grid');
  const [activeSection, setActiveSection] = useState<SidebarSection>('files');
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<FileItem[] | null>(null);
  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; file: FileItem } | null>(null);
  const [renaming, setRenaming] = useState<string | null>(null);
  const [newName, setNewName] = useState('');
  const [showNewFolder, setShowNewFolder] = useState(false);
  const [newFolderName, setNewFolderName] = useState('');
  const [dragOver, setDragOver] = useState(false);
  const [previewFile, setPreviewFile] = useState<FileItem | null>(null);
  const [showInfo, setShowInfo] = useState(false);
  const [sharingFile, setSharingFile] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<'name' | 'size' | 'date' | 'type'>('name');
  const [sortAsc, setSortAsc] = useState(true);
  const [draggedFile, setDraggedFile] = useState<string | null>(null);
  const [uploads, setUploads] = useState<UploadProgress[]>([]);
  const [showTrashModal, setShowTrashModal] = useState(false);
  const [showMoveModal, setShowMoveModal] = useState(false);
  const [movingFiles, setMovingFiles] = useState<string[]>([]);
  const [moveModalPath, setMoveModalPath] = useState('.');
  const [moveFolders, setMoveFolders] = useState<FileItem[]>([]);
  const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Load files on path change
  const loadFiles = useCallback(async (path?: string) => {
    const targetPath = path ?? currentPath;
    setLoading(true);
    try {
      const data = await api.listDirectory(targetPath);
      setFiles(data.files || []);
    } catch {
      setFiles([]);
    } finally {
      setLoading(false);
    }
  }, [currentPath]);

  useEffect(() => {
    if (activeSection === 'files') {
      loadFiles(currentPath);
    }
  }, [currentPath, activeSection]);

  const loadMoveFolders = useCallback(async (path: string) => {
    try {
      const data = await api.listDirectory(path);
      setMoveFolders(data.files?.filter((f: FileItem) => f.is_dir).sort((a: FileItem, b: FileItem) => a.name.localeCompare(b.name)) || []);
    } catch {
      setMoveFolders([]);
    }
  }, []);

  useEffect(() => {
    if (showMoveModal) {
      loadMoveFolders(moveModalPath);
    }
  }, [showMoveModal, moveModalPath, loadMoveFolders]);

  // Keyboard shortcuts
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      // Don't trigger shortcuts when typing in inputs
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;

      if (e.key === 'Backspace') {
        e.preventDefault();
        navigateUp();
      } else if (e.key === 'Delete') {
        deleteSelected();
      } else if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
        e.preventDefault();
        selectAll();
      } else if (e.key === 'Escape') {
        setSelectedFiles(new Set());
        setContextMenu(null);
        setRenaming(null);
      }
    }

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [files, selectedFiles]);

  // Close context menu on click outside
  useEffect(() => {
    function handleClick() {
      setContextMenu(null);
    }
    window.addEventListener('click', handleClick);
    return () => window.removeEventListener('click', handleClick);
  }, []);

  async function loadPinned() {
    setLoading(true);
    try {
      const data = await api.listPinned();
      setFiles(data.items || []);
    } catch {
      setFiles([]);
    } finally {
      setLoading(false);
    }
  }

  async function loadTrash() {
    setLoading(true);
    try {
      const data = await api.listTrash();
      setFiles(data.items?.map((item: any) => ({
        ...item,
        is_trashed: true,
      })) || []);
    } catch {
      setFiles([]);
    } finally {
      setLoading(false);
    }
  }

  function handleSectionChange(section: SidebarSection) {
    setActiveSection(section);
    setSelectedFiles(new Set());
    setSearchQuery('');
    setSearchResults(null);

    if (section === 'files') {
      navigateTo('.');
      loadFiles();
    } else if (section === 'pinned') {
      loadPinned();
    } else if (section === 'trash') {
      loadTrash();
    }
  }

  function navigateUp() {
    if (currentPath === '.' || currentPath === '') return;
    const parts = currentPath.split('/');
    parts.pop();
    navigateTo(parts.length === 0 ? '.' : parts.join('/'));
  }

  function navigateToFolder(file: FileItem) {
    if (!file.is_dir) return;
    navigateTo(file.path);
    setSelectedFiles(new Set());
  }

  function handleFileClick(file: FileItem, e: React.MouseEvent) {
    if (e.shiftKey) {
      // Multi-select with shift
      setSelectedFiles(prev => {
        const next = new Set(prev);
        if (next.has(file.path)) {
          next.delete(file.path);
        } else {
          next.add(file.path);
        }
        return next;
      });
    } else {
      // Single click to open/navigate
      if (file.is_dir) navigateToFolder(file);
      else setPreviewFile(file);
    }
  }

  function handleContextMenu(e: React.MouseEvent, file: FileItem) {
    e.preventDefault();
    setContextMenu({ x: e.clientX, y: e.clientY, file });
  }

  async function handleSearch(query: string) {
    setSearchQuery(query);
    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);

    if (!query.trim()) {
      setSearchResults(null);
      return;
    }

    searchTimeoutRef.current = setTimeout(async () => {
      try {
        const data = await api.search(query);
        setSearchResults(data.results || []);
      } catch {
        setSearchResults([]);
      }
    }, 300);
  }

  function selectAll() {
    setSelectedFiles(new Set(files.map(f => f.path)));
  }

  async function deleteSelected() {
    if (selectedFiles.size === 0) return;
    for (const path of selectedFiles) {
      await api.deleteFile(path);
    }
    setSelectedFiles(new Set());
    loadFiles();
  }

  async function handlePin(file: FileItem) {
    await api.togglePin(file.path);
    loadFiles();
  }

  async function handleRename(path: string) {
    if (!newName.trim()) return;
    await api.rename(path, newName);
    setRenaming(null);
    setNewName('');
    loadFiles();
  }

  async function handleCreateFolder() {
    if (!newFolderName.trim()) return;
    const folderPath = currentPath === '.' ? newFolderName : `${currentPath}/${newFolderName}`;
    await api.createFolder(folderPath);
    setShowNewFolder(false);
    setNewFolderName('');
    loadFiles();
  }

  async function handleRestore(file: FileItem) {
    await api.restoreFromTrash(file.path);
    loadTrash();
  }

  async function handleEmptyTrash() {
    await api.emptyTrash();
    loadTrash();
  }

  async function handleMoveExecute() {
    if (movingFiles.length === 0) return;
    try {
      await Promise.all(movingFiles.map(src => api.move(src, moveModalPath === '.' ? '.' : moveModalPath)));
      setShowMoveModal(false);
      setMovingFiles([]);
      loadFiles();
      setSelectedFiles(new Set());
    } catch (err) {
      console.error(err);
    }
  }

  // Drag and drop upload
  function handleDragOver(e: React.DragEvent) {
    if (draggedFile) return;
    if (!e.dataTransfer.types.includes('Files')) return;
    e.preventDefault();
    setDragOver(true);
  }

  function handleDragLeave() {
    setDragOver(false);
  }

  function handleItemDragStart(e: React.DragEvent, path: string) {
    e.dataTransfer.setData('text/plain', path);
    setDraggedFile(path);
  }

  function handleItemDragOver(e: React.DragEvent, file: FileItem) {
    if (!file.is_dir) return;
    if (draggedFile === file.path) return;
    e.preventDefault();
  }

  async function handleItemDrop(e: React.DragEvent, file: FileItem) {
    if (!file.is_dir) return;
    const sourcePath = e.dataTransfer.getData('text/plain');
    if (!sourcePath || sourcePath === file.path) return;
    
    e.preventDefault();
    e.stopPropagation();
    setDraggedFile(null);
    try {
      await api.move(sourcePath, file.path);
      loadFiles();
    } catch (err) {
      console.error(err);
    }
  }

  async function uploadFile(file: File) {
    const id = `${Date.now()}-${file.name}`;
    setUploads(prev => [...prev, { id, name: file.name, progress: 0, status: 'uploading' }]);
    try {
      await api.upload(file, currentPath, {
        onProgress: (percent) => {
          setUploads(prev => prev.map(u => u.id === id ? { ...u, progress: percent } : u));
        },
      });
      setUploads(prev => prev.map(u => u.id === id ? { ...u, progress: 100, status: 'complete' } : u));
      setTimeout(() => {
        setUploads(prev => prev.filter(u => u.id !== id));
      }, 3000);
    } catch (err: any) {
      setUploads(prev => prev.map(u => u.id === id ? { ...u, status: 'error', error: err.message || 'Upload failed' } : u));
    }
  }

  async function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    setDragOver(false);
    if (draggedFile) return;
    const droppedFiles = Array.from(e.dataTransfer.files);
    await Promise.all(droppedFiles.map(file => uploadFile(file)));
    loadFiles();
  }

  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const uploadFiles = e.target.files;
    if (!uploadFiles) return;
    await Promise.all(Array.from(uploadFiles).map(file => uploadFile(file)));
    e.target.value = '';
    loadFiles();
  }

  // Breadcrumb path segments
  const pathSegments = currentPath === '.' ? [] : currentPath.split('/');

  function formatSize(bytes: number): string {
    if (bytes === 0) return '—';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
  }

  function formatDate(dateStr: string): string {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  }

  function getFileIcon(file: FileItem, large = false) {
    const sizeClass = large ? "w-12 h-12" : "w-5 h-5";
    if (file.is_dir) return <Folder className={sizeClass} style={{ color: 'var(--color-accent)' }} />;

    const ext = file.name.split('.').pop()?.toLowerCase() || '';
    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext) || file.mime_type?.startsWith('image/');
    const isVideo = ['mp4', 'mkv', 'avi', 'mov', 'webm', 'ogg'].includes(ext) || file.mime_type?.startsWith('video/');
    const isMedia = isImage || isVideo;

    if (ext === 'pdf') {
      return (
        <div className={`${large ? 'w-12 h-12 rounded-lg text-lg' : 'w-6 h-6 rounded text-[8px]'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
          PDF
        </div>
      );
    }
    
    if (isImage) {
      return (
        <div className={`${large ? 'w-12 h-12 rounded-lg' : 'w-6 h-6 rounded'} flex items-center justify-center shadow-sm text-white bg-[#3b82f6]`}>
          <ImageIcon className={large ? "w-6 h-6 text-white" : "w-3.5 h-3.5 text-white"} />
        </div>
      );
    }

    if (isVideo) {
      return (
        <div className={`${large ? 'w-12 h-12 rounded-lg' : 'w-6 h-6 rounded'} flex items-center justify-center shadow-sm text-white bg-[#a855f7]`}>
          <FilmIcon className={large ? "w-6 h-6 text-white" : "w-3.5 h-3.5 text-white"} />
        </div>
      );
    }

    const fallbackIcon = (() => {
      let color = 'var(--color-text-tertiary)';
      if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) color = '#f59e0b';
      else if (['mp4', 'mkv', 'avi', 'mov', 'webm'].includes(ext)) color = '#ef4444';
      else if (['mp3', 'wav', 'flac', 'ogg', 'm4a'].includes(ext)) color = '#22c55e';
      else if (['zip', 'tar', 'gz', 'rar', '7z'].includes(ext)) color = '#8b5cf6';
      else if (['js', 'ts', 'py', 'go', 'rs', 'md', 'txt'].includes(ext)) color = '#3b82f6';
      return <File className={`${sizeClass} fallback-icon`} style={{ color }} />;
    })();

    if (isMedia && file.checksum && viewMode === 'grid') {
      return (
        <div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
          <img
            src={api.getThumbnailUrl(file.checksum)}
            alt=""
            className="w-full h-full object-cover"
            onError={(e) => {
              e.currentTarget.style.display = 'none';
              const next = e.currentTarget.nextElementSibling as HTMLElement;
              if (next) next.style.display = 'block';
            }}
          />
          <div style={{ display: 'none' }}>{fallbackIcon}</div>
        </div>
      );
    }

    return fallbackIcon;
  }

  let displayFiles = searchResults !== null ? searchResults : files;
  displayFiles = displayFiles.filter(f => f.name !== '.uploads').sort((a, b) => {
    // Directories always first regardless of sort type
    if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;

    let cmp = 0;
    if (sortBy === 'name') cmp = a.name.localeCompare(b.name);
    else if (sortBy === 'size') cmp = a.size - b.size;
    else if (sortBy === 'date') cmp = new Date(a.mod_time).getTime() - new Date(b.mod_time).getTime();
    else if (sortBy === 'type') {
      const extA = a.name.split('.').pop()?.toLowerCase() || '';
      const extB = b.name.split('.').pop()?.toLowerCase() || '';
      cmp = extA.localeCompare(extB);
    }
    return sortAsc ? cmp : -cmp;
  });

  return (
    <div className="flex h-screen" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
      {/* === SIDEBAR === */}
      <aside
        className="w-60 flex-shrink-0 flex flex-col border-r"
        style={{
          backgroundColor: 'var(--color-sidebar-bg)',
          borderColor: 'var(--color-border-subtle)',
        }}
      >
        {/* Logo */}
        <div className="flex items-center gap-3 px-5 py-5">
          <div
            className="w-9 h-9 rounded-xl flex items-center justify-center"
            style={{
              background: 'linear-gradient(135deg, var(--color-accent), #8b5cf6)',
            }}
          >
            <HardDrive className="w-4.5 h-4.5 text-white" />
          </div>
          <span className="text-base font-bold" style={{ color: 'var(--color-text-primary)' }}>
            Drive
          </span>
        </div>

        {/* Navigation */}
        <nav className="flex-1 px-3 py-2 space-y-1">
          {[
            { id: 'files' as SidebarSection, icon: Folder, label: 'All Files' },
            { id: 'pinned' as SidebarSection, icon: Pin, label: 'Pinned' },
            { id: 'trash' as SidebarSection, icon: Trash2, label: 'Trash' },
            { id: 'storage' as SidebarSection, icon: HardDrive, label: 'Storage' },
          ].map(({ id, icon: Icon, label }) => (
            <button
              key={id}
              id={`nav-${id}`}
              onClick={() => handleSectionChange(id)}
              className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150"
              style={{
                backgroundColor: activeSection === id ? 'var(--color-accent-subtle)' : 'transparent',
                color: activeSection === id ? 'var(--color-accent)' : 'var(--color-text-secondary)',
              }}
            >
              <Icon className="w-4.5 h-4.5" />
              {label}
            </button>
          ))}

          <div className="pt-4">
            <div className="h-px mx-2 mb-4" style={{ backgroundColor: 'var(--color-border-subtle)' }} />
            <button
              id="nav-settings"
              onClick={() => handleSectionChange('settings')}
              className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150"
              style={{
                backgroundColor: activeSection === 'settings' ? 'var(--color-accent-subtle)' : 'transparent',
                color: activeSection === 'settings' ? 'var(--color-accent)' : 'var(--color-text-secondary)',
              }}
            >
              <Settings className="w-4.5 h-4.5" />
              Settings
            </button>
          </div>
        </nav>

        {/* Logout */}
        <div className="px-3 py-4 border-t" style={{ borderColor: 'var(--color-border-subtle)' }}>
          <button
            id="logout-button"
            onClick={onLogout}
            className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 hover:opacity-80"
            style={{ color: 'var(--color-danger)' }}
          >
            <LogOut className="w-4.5 h-4.5" />
            Sign Out
          </button>
        </div>
      </aside>

      {/* === MAIN CONTENT === */}
      <main
        className="flex-1 flex flex-col overflow-hidden"
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
      >
        {/* Top Bar */}
        <header
          className="flex items-center gap-4 px-6 py-3.5 border-b"
          style={{
            backgroundColor: 'var(--color-bg-secondary)',
            borderColor: 'var(--color-border-subtle)',
          }}
        >
          {/* Breadcrumbs */}
          <div className="flex items-center gap-1 flex-1 min-w-0">
            <button
              onClick={() => { navigateTo('.'); setActiveSection('files'); }}
              className="text-sm font-medium hover:opacity-80 transition-opacity"
              style={{ color: 'var(--color-text-secondary)' }}
            >
              Home
            </button>
            {pathSegments.map((seg, i) => (
              <div key={i} className="flex items-center gap-1">
                <ChevronRight className="w-3.5 h-3.5" style={{ color: 'var(--color-text-tertiary)' }} />
                <button
                  onClick={() => navigateTo(pathSegments.slice(0, i + 1).join('/'))}
                  className="text-sm font-medium hover:opacity-80 transition-opacity truncate max-w-[150px]"
                  style={{
                    color: i === pathSegments.length - 1 ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
                  }}
                >
                  {seg}
                </button>
              </div>
            ))}
          </div>

          {/* Search Bar */}
          <div className="relative w-72">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
            <input
              id="search-input"
              type="text"
              value={searchQuery}
              onChange={(e) => handleSearch(e.target.value)}
              placeholder="Search files..."
              className="w-full pl-9 pr-4 py-2 rounded-lg text-sm outline-none transition-all"
              style={{
                backgroundColor: 'var(--color-bg-tertiary)',
                border: '1px solid var(--color-border)',
                color: 'var(--color-text-primary)',
              }}
            />
            {searchQuery && (
              <button
                onClick={() => { setSearchQuery(''); setSearchResults(null); }}
                className="absolute right-3 top-1/2 -translate-y-1/2"
              >
                <X className="w-3.5 h-3.5" style={{ color: 'var(--color-text-tertiary)' }} />
              </button>
            )}
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-2">
            {activeSection === 'trash' && (
              <button
                onClick={() => setShowTrashModal(true)}
                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
                style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', color: 'var(--color-danger)' }}
              >
                <Trash2 className="w-4 h-4" />
                Empty Trash
              </button>
            )}

            {(activeSection === 'files' || activeSection === 'pinned' || activeSection === 'trash') && (
              <>
                <button
                  id="info-toggle"
                  onClick={() => setShowInfo(!showInfo)}
                  className="p-2 rounded-lg transition-colors"
                  style={{
                    backgroundColor: showInfo ? 'var(--color-accent-subtle)' : 'transparent',
                    color: showInfo ? 'var(--color-accent)' : 'var(--color-text-secondary)',
                  }}
                  title="Toggle info panel"
                >
                  <Info className="w-4.5 h-4.5" />
                </button>

                <div className="w-px h-5 mx-1" style={{ backgroundColor: 'var(--color-border-subtle)' }} />

                <div className="relative group">
                  <button className="flex items-center gap-1.5 p-2 rounded-lg transition-colors text-sm font-medium" style={{ color: 'var(--color-text-secondary)' }}>
                    Sort by: <span className="capitalize">{sortBy}</span>
                    {sortAsc ? <ArrowUp className="w-3 h-3" /> : <ArrowUp className="w-3 h-3 rotate-180 transition-transform" />}
                  </button>
                  <div className="absolute right-0 top-full pt-1 w-40 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all z-50">
                    <div className="w-full rounded-xl shadow-lg border overflow-hidden" style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}>
                      {['name', 'size', 'date', 'type'].map(opt => (
                        <button key={opt} onClick={() => { if (sortBy === opt) setSortAsc(!sortAsc); else setSortBy(opt as any); }} className="w-full text-left px-4 py-2 text-sm transition-colors hover:bg-white/5 capitalize" style={{ color: sortBy === opt ? 'var(--color-accent)' : 'var(--color-text-primary)' }}>
                          {opt}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>

                <button
                  id="view-toggle"
                  onClick={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
                  className="p-2 rounded-lg transition-colors"
                  style={{ color: 'var(--color-text-secondary)' }}
                  title={viewMode === 'grid' ? 'Switch to list view' : 'Switch to grid view'}
                >
                  {viewMode === 'grid' ? <List className="w-4.5 h-4.5" /> : <Grid3X3 className="w-4.5 h-4.5" />}
                </button>

                {activeSection === 'files' && (
                  <button
                    id="new-folder-button"
                    onClick={() => setShowNewFolder(true)}
                    className="p-2 rounded-lg transition-colors"
                    style={{ color: 'var(--color-text-secondary)' }}
                    title="New folder"
                  >
                    <FolderPlus className="w-4.5 h-4.5" />
                  </button>
                )}

                {activeSection === 'files' && (
                  <>
                    <button
                      id="upload-button"
                      onClick={() => fileInputRef.current?.click()}
                      className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-all hover:opacity-90"
                      style={{
                        background: 'linear-gradient(135deg, var(--color-accent), #8b5cf6)',
                      }}
                    >
                      <Upload className="w-4 h-4" />
                      Upload
                    </button>
                    <input
                      ref={fileInputRef}
                      type="file"
                      multiple
                      className="hidden"
                      onChange={handleFileUpload}
                    />
                  </>
                )}
              </>
            )}
          </div>
        </header>

        {/* Dynamic Content Area */}
        {activeSection === 'settings' ? (
          <SettingsPage />
        ) : activeSection === 'storage' ? (
          <StorageDashboard />
        ) : (
          <div className="flex flex-1 overflow-hidden">
            {/* File Area */}
            <div className="flex-1 overflow-y-auto p-6 relative">
          {/* Drag and drop overlay */}
          <AnimatePresence>
            {dragOver && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl m-4"
                style={{
                  backgroundColor: 'var(--color-accent-subtle)',
                  border: '2px dashed var(--color-accent)',
                }}
              >
                <div className="text-center">
                  <Upload className="w-12 h-12 mx-auto mb-3" style={{ color: 'var(--color-accent)' }} />
                  <p className="text-lg font-semibold" style={{ color: 'var(--color-accent)' }}>
                    Drop files to upload
                  </p>
                  <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
                    Files will be uploaded to the current folder
                  </p>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* New Folder Input */}
          <AnimatePresence>
            {showNewFolder && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                className="mb-4"
              >
                <div
                  className="flex items-center gap-3 p-3 rounded-xl max-w-md"
                  style={{
                    backgroundColor: 'var(--color-bg-elevated)',
                    border: '1px solid var(--color-accent)',
                  }}
                >
                  <FolderPlus className="w-5 h-5" style={{ color: 'var(--color-accent)' }} />
                  <input
                    type="text"
                    value={newFolderName}
                    onChange={(e) => setNewFolderName(e.target.value)}
                    onKeyDown={(e) => { if (e.key === 'Enter') handleCreateFolder(); if (e.key === 'Escape') setShowNewFolder(false); }}
                    placeholder="Folder name"
                    autoFocus
                    className="flex-1 bg-transparent text-sm outline-none border-none ring-0"
                    style={{ color: 'var(--color-text-primary)' }}
                  />
                  <button onClick={handleCreateFolder}>
                    <Check className="w-4 h-4" style={{ color: 'var(--color-success)' }} />
                  </button>
                  <button onClick={() => setShowNewFolder(false)}>
                    <X className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
                  </button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {loading ? (
            <div className="flex items-center justify-center h-64">
              <RefreshCw className="w-6 h-6 animate-spin" style={{ color: 'var(--color-text-tertiary)' }} />
            </div>
          ) : displayFiles.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-64 gap-3">
              <Folder className="w-12 h-12" style={{ color: 'var(--color-text-tertiary)' }} />
              <p className="text-sm" style={{ color: 'var(--color-text-tertiary)' }}>
                {searchResults !== null ? 'No results found' : 'This folder is empty'}
              </p>
              {searchResults === null && (
                <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                  Drop files here or click Upload
                </p>
              )}
            </div>
          ) : viewMode === 'grid' ? (
            /* Grid View */
            <div className="space-y-8">
              {activeSection === 'files' && displayFiles.some(f => f.is_pinned) && (
                <div>
                  <h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>Pinned</h3>
                  <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
                    {displayFiles.filter(f => f.is_pinned).map((file, idx) => (
                      <motion.div
                        key={file.path}
                        draggable
                        onDragStart={(e: any) => handleItemDragStart(e, file.path)}
                        onDragOver={(e: any) => handleItemDragOver(e, file)}
                        onDrop={(e: any) => handleItemDrop(e, file)}
                        initial={{ opacity: 0, scale: 0.95 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: idx * 0.02 }}
                        onClick={(e) => handleFileClick(file, e)}
                        onContextMenu={(e) => handleContextMenu(e, file)}
                        className={`group relative p-4 rounded-xl cursor-pointer transition-all duration-150 border-2 ${draggedFile === file.path ? 'opacity-50' : ''}`}
                        style={{
                          backgroundColor: selectedFiles.has(file.path) ? 'var(--color-accent-subtle)' : 'var(--color-bg-elevated)',
                          border: `1px solid ${selectedFiles.has(file.path) ? 'var(--color-accent)' : 'var(--color-border-subtle)'}`,
                        }}
                      >
                        <div
                          className="absolute top-3 left-3 z-10 opacity-0 group-hover:opacity-100 transition-opacity"
                          style={{ opacity: selectedFiles.has(file.path) ? 1 : undefined }}
                        >
                          <input
                            type="checkbox"
                            checked={selectedFiles.has(file.path)}
                            onChange={(e) => {
                              const newSet = new Set(selectedFiles);
                              if (e.target.checked) newSet.add(file.path);
                              else newSet.delete(file.path);
                              setSelectedFiles(newSet);
                            }}
                            onClick={(e) => e.stopPropagation()}
                            className="w-4 h-4 rounded border-gray-300 cursor-pointer"
                          />
                        </div>
                        {file.is_pinned && (
                          <Pin className="absolute top-2 right-2 w-3 h-3" style={{ color: 'var(--color-warning)' }} />
                        )}
                        <div className="flex flex-col items-center gap-3">
                          <div className="w-24 h-24 flex items-center justify-center">
                            {getFileIcon(file, true)}
                          </div>
                          {renaming === file.path ? (
                            <input
                              type="text"
                              value={newName}
                              onChange={(e) => setNewName(e.target.value)}
                              onKeyDown={(e) => { if (e.key === 'Enter') handleRename(file.path); if (e.key === 'Escape') setRenaming(null); }}
                              onBlur={() => handleRename(file.path)}
                              autoFocus
                              onFocus={(e) => e.target.select()}
                              className="w-full text-xs text-center bg-transparent outline-none"
                              style={{
                                color: 'var(--color-text-primary)',
                                borderBottom: '1px solid var(--color-accent)',
                              }}
                            />
                          ) : (
                            <span
                              className="text-xs font-medium text-center w-full truncate"
                              style={{ color: 'var(--color-text-primary)' }}
                              title={file.name}
                            >
                              {file.name}
                            </span>
                          )}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              )}

              <div>
                {activeSection === 'files' && displayFiles.some(f => f.is_pinned) && (
                  <h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>All Files</h3>
                )}
                <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
                  {displayFiles.filter(f => activeSection !== 'files' || !f.is_pinned).map((file, idx) => (
                    <motion.div
                      key={file.path}
                      draggable
                      onDragStart={(e: any) => handleItemDragStart(e, file.path)}
                      onDragOver={(e: any) => handleItemDragOver(e, file)}
                      onDrop={(e: any) => handleItemDrop(e, file)}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: idx * 0.02 }}
                      onClick={(e) => handleFileClick(file, e)}
                      onContextMenu={(e) => handleContextMenu(e, file)}
                      className={`group relative p-4 rounded-xl cursor-pointer transition-all duration-150 ${draggedFile === file.path ? 'opacity-50' : ''}`}
                      style={{
                        backgroundColor: selectedFiles.has(file.path) ? 'var(--color-accent-subtle)' : 'var(--color-bg-elevated)',
                        border: `1px solid ${selectedFiles.has(file.path) ? 'var(--color-accent)' : 'var(--color-border-subtle)'}`,
                      }}
                    >
                      <div
                        className="absolute top-3 left-3 z-10 opacity-0 group-hover:opacity-100 transition-opacity"
                        style={{ opacity: selectedFiles.has(file.path) ? 1 : undefined }}
                      >
                        <input
                          type="checkbox"
                          checked={selectedFiles.has(file.path)}
                          onChange={(e) => {
                            const newSet = new Set(selectedFiles);
                            if (e.target.checked) newSet.add(file.path);
                            else newSet.delete(file.path);
                            setSelectedFiles(newSet);
                          }}
                          onClick={(e) => e.stopPropagation()}
                          className="w-4 h-4 rounded border-gray-300 cursor-pointer"
                        />
                      </div>
                      {file.is_pinned && (
                        <Pin className="absolute top-2 right-2 w-3 h-3" style={{ color: 'var(--color-warning)' }} />
                      )}
                      <div className="flex flex-col items-center gap-3">
                        <div className="w-24 h-24 flex items-center justify-center">
                          {getFileIcon(file, true)}
                        </div>
                        {renaming === file.path ? (
                          <input
                            type="text"
                            value={newName}
                            onChange={(e) => setNewName(e.target.value)}
                            onKeyDown={(e) => { if (e.key === 'Enter') handleRename(file.path); if (e.key === 'Escape') setRenaming(null); }}
                            onBlur={() => handleRename(file.path)}
                            autoFocus
                            onFocus={(e) => e.target.select()}
                            className="w-full text-xs text-center bg-transparent outline-none"
                            style={{
                              color: 'var(--color-text-primary)',
                              borderBottom: '1px solid var(--color-accent)',
                            }}
                          />
                        ) : (
                          <span
                            className="text-xs font-medium text-center w-full truncate"
                            style={{ color: 'var(--color-text-primary)' }}
                            title={file.name}
                          >
                            {file.name}
                          </span>
                        )}
                      </div>
                    </motion.div>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            /* List View */
            <div className="space-y-8">
              {activeSection === 'files' && displayFiles.some(f => f.is_pinned) && (
                <div>
                  <h3 className="text-xs font-semibold uppercase tracking-wider mb-2 px-4" style={{ color: 'var(--color-text-tertiary)' }}>Pinned</h3>
                  <div className="space-y-0.5">
                    {displayFiles.filter(f => f.is_pinned).map((file, idx) => (
                      <motion.div
                        key={file.path}
                        draggable
                        onDragStart={(e: any) => handleItemDragStart(e, file.path)}
                        onDragOver={(e: any) => handleItemDragOver(e, file)}
                        onDrop={(e: any) => handleItemDrop(e, file)}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: idx * 0.015 }}
                        onClick={(e) => handleFileClick(file, e)}
                        onContextMenu={(e) => handleContextMenu(e, file)}
                        className={`grid grid-cols-[1fr_100px_140px_40px] gap-4 items-center px-4 py-2.5 rounded-lg cursor-pointer transition-all duration-100 group ${draggedFile === file.path ? 'opacity-50' : ''}`}
                        style={{ backgroundColor: selectedFiles.has(file.path) ? 'var(--color-accent-subtle)' : 'transparent' }}
                      >
                        <div className="flex items-center gap-3 min-w-0">
                          <input
                            type="checkbox"
                            checked={selectedFiles.has(file.path)}
                            onChange={(e) => {
                              const newSet = new Set(selectedFiles);
                              if (e.target.checked) newSet.add(file.path);
                              else newSet.delete(file.path);
                              setSelectedFiles(newSet);
                            }}
                            onClick={(e) => e.stopPropagation()}
                            className="w-4 h-4 rounded border-gray-300 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
                            style={{ opacity: selectedFiles.has(file.path) ? 1 : undefined }}
                          />
                          {getFileIcon(file)}
                          {renaming === file.path ? (
                            <input
                              type="text"
                              value={newName}
                              onChange={(e) => setNewName(e.target.value)}
                              onKeyDown={(e) => { if (e.key === 'Enter') handleRename(file.path); if (e.key === 'Escape') setRenaming(null); }}
                              onBlur={() => handleRename(file.path)}
                              autoFocus
                              onFocus={(e) => e.target.select()}
                              className="flex-1 text-sm bg-transparent outline-none"
                              style={{ color: 'var(--color-text-primary)', borderBottom: '1px solid var(--color-accent)' }}
                            />
                          ) : (
                            <span className="text-sm truncate" style={{ color: 'var(--color-text-primary)' }}>{file.name}</span>
                          )}
                          {file.is_pinned && <Pin className="w-3 h-3 flex-shrink-0" style={{ color: 'var(--color-warning)' }} />}
                        </div>
                        <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{file.is_dir ? '—' : formatSize(file.size)}</span>
                        <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{formatDate(file.mod_time)}</span>
                        <button onClick={(e) => { e.stopPropagation(); handleContextMenu(e, file); }} className="p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                          <MoreVertical className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
                        </button>
                      </motion.div>
                    ))}
                  </div>
                </div>
              )}

              <div>
                <div className="space-y-0.5">
                  <div className="grid grid-cols-[1fr_100px_140px_40px] gap-4 px-4 py-2 text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-tertiary)' }}>
                    <span>{activeSection === 'files' && displayFiles.some(f => f.is_pinned) ? 'All Files' : 'Name'}</span>
                    <span>Size</span>
                    <span>Modified</span>
                    <span></span>
                  </div>
                  {displayFiles.filter(f => activeSection !== 'files' || !f.is_pinned).map((file, idx) => (
                    <motion.div
                      key={file.path}
                      draggable
                      onDragStart={(e: any) => handleItemDragStart(e, file.path)}
                      onDragOver={(e: any) => handleItemDragOver(e, file)}
                      onDrop={(e: any) => handleItemDrop(e, file)}
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: idx * 0.015 }}
                      onClick={(e) => handleFileClick(file, e)}
                      onContextMenu={(e) => handleContextMenu(e, file)}
                      className={`grid grid-cols-[1fr_100px_140px_40px] gap-4 items-center px-4 py-2.5 rounded-lg cursor-pointer transition-all duration-100 group ${draggedFile === file.path ? 'opacity-50' : ''}`}
                      style={{ backgroundColor: selectedFiles.has(file.path) ? 'var(--color-accent-subtle)' : 'transparent' }}
                    >
                      <div className="flex items-center gap-3 min-w-0">
                        <input
                          type="checkbox"
                          checked={selectedFiles.has(file.path)}
                          onChange={(e) => {
                            const newSet = new Set(selectedFiles);
                            if (e.target.checked) newSet.add(file.path);
                            else newSet.delete(file.path);
                            setSelectedFiles(newSet);
                          }}
                          onClick={(e) => e.stopPropagation()}
                          className="w-4 h-4 rounded border-gray-300 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
                          style={{ opacity: selectedFiles.has(file.path) ? 1 : undefined }}
                        />
                        {getFileIcon(file)}
                        {renaming === file.path ? (
                          <input
                            type="text"
                            value={newName}
                            onChange={(e) => setNewName(e.target.value)}
                            onKeyDown={(e) => { if (e.key === 'Enter') handleRename(file.path); if (e.key === 'Escape') setRenaming(null); }}
                            onBlur={() => handleRename(file.path)}
                            autoFocus
                            onFocus={(e) => e.target.select()}
                            className="flex-1 text-sm bg-transparent outline-none"
                            style={{ color: 'var(--color-text-primary)', borderBottom: '1px solid var(--color-accent)' }}
                          />
                        ) : (
                          <span className="text-sm truncate" style={{ color: 'var(--color-text-primary)' }}>{file.name}</span>
                        )}
                        {file.is_pinned && <Pin className="w-3 h-3 flex-shrink-0" style={{ color: 'var(--color-warning)' }} />}
                      </div>
                      <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{file.is_dir ? '—' : formatSize(file.size)}</span>
                      <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{formatDate(file.mod_time)}</span>
                      <button onClick={(e) => { e.stopPropagation(); handleContextMenu(e, file); }} className="p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                        <MoreVertical className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
                      </button>
                    </motion.div>
                  ))}
                </div>
              </div>
            </div>
          )}
          </div>

      {/* Bulk Actions Bar */}
      <AnimatePresence>
        {selectedFiles.size > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 50 }}
            className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 px-6 py-3 rounded-2xl shadow-2xl border"
            style={{
              backgroundColor: 'var(--color-bg-elevated)',
              borderColor: 'var(--color-border)',
              backdropFilter: 'blur(12px)',
            }}
          >
            <div className="flex items-center gap-2 pr-4 border-r" style={{ borderColor: 'var(--color-border-subtle)' }}>
              <span className="text-sm font-semibold" style={{ color: 'var(--color-accent)' }}>
                {selectedFiles.size}
              </span>
              <span className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
                selected
              </span>
            </div>
            <div className="flex items-center gap-2">
              <button
                className="p-2 hover:bg-white/5 rounded-lg transition-colors flex items-center gap-2 text-sm"
                style={{ color: 'var(--color-text-primary)' }}
                onClick={() => {
                  // In a real app, this would trigger a bulk download zip
                  alert('Bulk download not implemented yet');
                }}
              >
                <Download className="w-4 h-4" />
              </button>
              <button
                className="p-2 hover:bg-red-500/10 rounded-lg transition-colors flex items-center gap-2 text-sm text-red-500"
                onClick={async () => {
                  if (confirm(`Move ${selectedFiles.size} items to trash?`)) {
                    for (const path of Array.from(selectedFiles)) {
                      await api.deleteFile(path).catch(() => {});
                    }
                    setSelectedFiles(new Set());
                    loadFiles();
                  }
                }}
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
            <div className="pl-4 border-l" style={{ borderColor: 'var(--color-border-subtle)' }}>
              <button
                onClick={() => setSelectedFiles(new Set())}
                className="p-2 hover:bg-white/5 rounded-lg transition-colors"
                style={{ color: 'var(--color-text-tertiary)' }}
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

          {/* Right Info Sidebar */}
          <AnimatePresence>
            {showInfo && (
              <motion.aside
                initial={{ x: 320, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: 320, opacity: 0 }}
                transition={{ type: 'spring', damping: 25, stiffness: 200 }}
                className="w-80 border-l flex-shrink-0 flex flex-col overflow-y-auto bg-opacity-50 backdrop-blur-md"
                style={{
                  backgroundColor: 'var(--color-sidebar-bg)',
                  borderColor: 'var(--color-border-subtle)',
                }}
              >
                <div className="p-5 flex flex-col gap-6">
                  <h3 className="text-sm font-semibold uppercase tracking-wider" style={{ color: 'var(--color-text-tertiary)' }}>
                    File Details
                  </h3>

                  {selectedFiles.size === 1 ? (() => {
                    const file = displayFiles.find(f => f.path === Array.from(selectedFiles)[0]);
                    if (!file) return null;
                    return (
                      <div className="space-y-6">
                        <div className="flex flex-col items-center gap-3">
                          <div className="w-20 h-20 flex items-center justify-center">
                            {getFileIcon(file)}
                          </div>
                          <span className="text-sm font-medium text-center break-all" style={{ color: 'var(--color-text-primary)' }}>
                            {file.name}
                          </span>
                        </div>

                        <div className="space-y-4">
                          <div className="flex flex-col gap-1">
                            <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>Type</span>
                            <span className="text-sm" style={{ color: 'var(--color-text-primary)' }}>
                              {file.is_dir ? 'Folder' : file.mime_type || 'Unknown'}
                            </span>
                          </div>
                          
                          <div className="flex flex-col gap-1">
                            <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>Size</span>
                            <span className="text-sm" style={{ color: 'var(--color-text-primary)' }}>
                              {file.is_dir ? '—' : formatSize(file.size)}
                            </span>
                          </div>

                          <div className="flex flex-col gap-1">
                            <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>Location</span>
                            <span className="text-sm break-all" style={{ color: 'var(--color-text-primary)' }}>
                              {file.path}
                            </span>
                          </div>

                          <div className="flex flex-col gap-1">
                            <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>Modified</span>
                            <span className="text-sm" style={{ color: 'var(--color-text-primary)' }}>
                              {new Date(file.mod_time).toLocaleString()}
                            </span>
                          </div>

                          {file.checksum && (
                            <div className="flex flex-col gap-1">
                              <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>Checksum (XXHash)</span>
                              <span className="text-xs font-mono break-all" style={{ color: 'var(--color-text-secondary)' }}>
                                {file.checksum}
                              </span>
                            </div>
                          )}
                        </div>
                      </div>
                    );
                  })() : selectedFiles.size > 1 ? (
                    <div className="flex flex-col items-center justify-center h-40 text-center gap-2">
                      <Check className="w-8 h-8" style={{ color: 'var(--color-accent)' }} />
                      <span className="text-sm" style={{ color: 'var(--color-text-primary)' }}>
                        {selectedFiles.size} items selected
                      </span>
                    </div>
                  ) : (
                    <div className="flex flex-col items-center justify-center h-40 text-center gap-2">
                      <Info className="w-8 h-8" style={{ color: 'var(--color-text-tertiary)' }} />
                      <span className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
                        Select a file to see its details
                      </span>
                    </div>
                  )}
                </div>
              </motion.aside>
            )}
          </AnimatePresence>
        </div>
        )}
      </main>

      {/* === CONTEXT MENU === */}
      <AnimatePresence>
        {contextMenu && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.1 }}
            className="fixed z-50 w-48 rounded-xl py-1.5 overflow-hidden"
            style={{
              left: contextMenu.x,
              top: contextMenu.y,
              backgroundColor: 'var(--color-bg-elevated)',
              border: '1px solid var(--color-border)',
              boxShadow: 'var(--shadow-lg)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            {activeSection === 'trash' ? (
              <>
                <ContextMenuItem
                  icon={<RefreshCw className="w-4 h-4" />}
                  label="Restore"
                  onClick={() => { handleRestore(contextMenu.file); setContextMenu(null); }}
                />
              </>
            ) : (
              <>
                <ContextMenuItem
                  icon={<Download className="w-4 h-4" />}
                  label="Download"
                  onClick={() => {
                    const downloadUrl = contextMenu.file.is_dir
                      ? api.getDownloadFolderUrl(contextMenu.file.path)
                      : api.getDownloadUrl(contextMenu.file.path);
                    window.open(downloadUrl, '_blank');
                    setContextMenu(null);
                  }}
                />
                <ContextMenuItem
                  icon={<Pencil className="w-4 h-4" />}
                  label="Rename"
                  onClick={() => {
                    setRenaming(contextMenu.file.path);
                    setNewName(contextMenu.file.name);
                    setContextMenu(null);
                  }}
                />
                <ContextMenuItem
                  icon={<Pin className="w-4 h-4" />}
                  label={contextMenu.file.is_pinned ? 'Unpin' : 'Pin'}
                  onClick={() => { handlePin(contextMenu.file); setContextMenu(null); }}
                />
                <ContextMenuItem
                  icon={<LinkIcon className="w-4 h-4" />}
                  label="Share"
                  onClick={() => { setSharingFile(contextMenu.file.path); setContextMenu(null); }}
                />
                <ContextMenuItem
                  icon={<Move className="w-4 h-4" />}
                  label="Move"
                  onClick={() => { 
                    const filesToMove = selectedFiles.has(contextMenu.file.path) ? Array.from(selectedFiles) : [contextMenu.file.path];
                    setMovingFiles(filesToMove);
                    setMoveModalPath('.');
                    setShowMoveModal(true);
                    setContextMenu(null);
                  }}
                />
                <div className="h-px mx-2 my-1" style={{ backgroundColor: 'var(--color-border-subtle)' }} />
                <ContextMenuItem
                  icon={<Trash2 className="w-4 h-4" />}
                  label="Move to Trash"
                  danger
                  onClick={() => {
                    api.deleteFile(contextMenu.file.path).then(() => loadFiles());
                    setContextMenu(null);
                  }}
                />
              </>
            )}
          </motion.div>
        )}
      </AnimatePresence>

      {/* Upload Progress Panel */}
      <AnimatePresence>
        {uploads.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 50 }}
            className="fixed bottom-6 right-6 z-[110] w-80 rounded-2xl overflow-hidden"
            style={{
              backgroundColor: 'var(--color-bg-elevated)',
              border: '1px solid var(--color-border)',
              boxShadow: 'var(--shadow-lg)',
            }}
          >
            <div
              className="flex items-center justify-between px-4 py-3 border-b"
              style={{
                borderColor: 'var(--color-border-subtle)',
                backgroundColor: 'var(--color-bg-secondary)',
              }}
            >
              <div className="flex items-center gap-2">
                <Upload className="w-4 h-4" style={{ color: 'var(--color-accent)' }} />
                <span className="text-sm font-medium" style={{ color: 'var(--color-text-primary)' }}>
                  {uploads.filter(u => u.status === 'uploading').length > 0
                    ? `Uploading ${uploads.filter(u => u.status === 'uploading').length} file${uploads.filter(u => u.status === 'uploading').length > 1 ? 's' : ''}`
                    : 'Uploads complete'}
                </span>
              </div>
              <button
                onClick={() => setUploads(prev => prev.filter(u => u.status === 'uploading'))}
                className="p-1 rounded hover:bg-white/10"
              >
                <X className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
              </button>
            </div>
            <div className="max-h-60 overflow-y-auto p-2 space-y-1" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
              {uploads.map(upload => (
                <div key={upload.id} className="p-3 rounded-xl" style={{ backgroundColor: 'var(--color-bg-elevated)' }}>
                  <div className="flex items-center justify-between mb-1">
                    <span
                      className="text-xs font-medium truncate max-w-[200px]"
                      style={{ color: 'var(--color-text-primary)' }}
                      title={upload.name}
                    >
                      {upload.name}
                    </span>
                    <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                      {upload.status === 'complete' ? '✓' : upload.status === 'error' ? '✗' : `${Math.round(upload.progress)}%`}
                    </span>
                  </div>
                  <div
                    className="h-1.5 w-full rounded-full overflow-hidden"
                    style={{ backgroundColor: 'var(--color-bg-secondary)' }}
                  >
                    <motion.div
                      className="h-full rounded-full"
                      initial={{ width: 0 }}
                      animate={{ width: `${upload.progress}%` }}
                      style={{
                        backgroundColor:
                          upload.status === 'error'
                            ? 'var(--color-danger)'
                            : upload.status === 'complete'
                            ? 'var(--color-success)'
                            : 'var(--color-accent)',
                      }}
                    />
                  </div>
                  {upload.status === 'error' && (
                    <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>
                      {upload.error}
                    </p>
                  )}
                </div>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <TaskManager />
      <FilePreview file={previewFile} onClose={() => setPreviewFile(null)} />
      <AnimatePresence>
        {sharingFile && (
          <ShareModal filePath={sharingFile} onClose={() => setSharingFile(null)} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showTrashModal && (
          <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="w-full max-w-md overflow-hidden rounded-2xl shadow-xl"
              style={{ backgroundColor: 'var(--color-bg-primary)', border: '1px solid var(--color-border)' }}
            >
              <div className="p-6">
                <h2 className="text-xl font-bold mb-2" style={{ color: 'var(--color-text-primary)' }}>Empty Trash?</h2>
                <p className="mb-6" style={{ color: 'var(--color-text-secondary)' }}>
                  Are you sure you want to permanently delete all items in the trash? This action cannot be undone.
                </p>
                <div className="flex justify-end gap-3">
                  <button
                    onClick={() => setShowTrashModal(false)}
                    className="px-4 py-2 rounded-lg text-sm font-medium transition-colors hover:opacity-80"
                    style={{ backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-primary)' }}
                  >
                    Cancel
                  </button>
                  <button
                    onClick={() => {
                      setShowTrashModal(false);
                      handleEmptyTrash();
                    }}
                    className="px-4 py-2 rounded-lg text-sm font-medium transition-colors hover:opacity-90"
                    style={{ backgroundColor: 'var(--color-danger)', color: '#fff' }}
                  >
                    Empty Trash
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showMoveModal && (
          <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="w-full max-w-lg overflow-hidden rounded-2xl shadow-xl flex flex-col"
              style={{ backgroundColor: 'var(--color-bg-primary)', border: '1px solid var(--color-border)', maxHeight: '80vh' }}
            >
              <div className="p-4 border-b flex items-center justify-between" style={{ borderColor: 'var(--color-border-subtle)' }}>
                <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text-primary)' }}>Move {movingFiles.length} item{movingFiles.length > 1 ? 's' : ''}</h2>
                <button onClick={() => setShowMoveModal(false)} className="p-2 rounded-lg hover:bg-black/5">
                  <X className="w-5 h-5" style={{ color: 'var(--color-text-secondary)' }} />
                </button>
              </div>
              <div className="p-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--color-border-subtle)', backgroundColor: 'var(--color-bg-secondary)' }}>
                <button 
                  onClick={() => {
                    if (moveModalPath === '.') return;
                    const parts = moveModalPath.split('/');
                    parts.pop();
                    setMoveModalPath(parts.length === 0 ? '.' : parts.join('/'));
                  }}
                  disabled={moveModalPath === '.'}
                  className={`p-1.5 rounded-lg ${moveModalPath === '.' ? 'opacity-50' : 'hover:bg-black/5 transition-colors'}`}
                >
                  <ArrowUp className="w-4 h-4" style={{ color: 'var(--color-text-primary)' }} />
                </button>
                <div className="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap" style={{ color: 'var(--color-text-primary)' }}>
                  Home {moveModalPath !== '.' && '> ' + moveModalPath.replace(/\//g, ' > ')}
                </div>
              </div>
              <div className="flex-1 overflow-y-auto p-2 min-h-[200px]">
                {moveFolders.length === 0 ? (
                  <div className="h-full flex items-center justify-center text-sm italic" style={{ color: 'var(--color-text-tertiary)' }}>
                    No folders here
                  </div>
                ) : (
                  moveFolders.map(folder => (
                    <button
                      key={folder.path}
                      onClick={() => setMoveModalPath(folder.path)}
                      className="w-full flex items-center gap-3 p-3 rounded-xl transition-colors text-left"
                      style={{ color: 'var(--color-text-primary)' }}
                      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}
                      onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
                    >
                      <Folder className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--color-accent)' }} />
                      <span className="text-sm font-medium truncate">{folder.name}</span>
                    </button>
                  ))
                )}
              </div>
              <div className="p-4 border-t flex justify-end gap-3" style={{ borderColor: 'var(--color-border-subtle)' }}>
                <button
                  onClick={() => setShowMoveModal(false)}
                  className="px-4 py-2 rounded-lg text-sm font-medium transition-colors hover:opacity-80"
                  style={{ backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-primary)' }}
                >
                  Cancel
                </button>
                <button
                  onClick={handleMoveExecute}
                  className="px-4 py-2 rounded-lg text-sm font-medium transition-colors hover:opacity-90"
                  style={{ backgroundColor: 'var(--color-accent)', color: '#fff' }}
                >
                  Move Here
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}

function ContextMenuItem({
  icon,
  label,
  onClick,
  danger = false,
}: {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  danger?: boolean;
}) {
  return (
    <button
      onClick={onClick}
      className="w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors"
      style={{
        color: danger ? 'var(--color-danger)' : 'var(--color-text-primary)',
      }}
      onMouseEnter={(e) => {
        (e.target as HTMLElement).style.backgroundColor = danger ? 'rgba(239, 68, 68, 0.1)' : 'var(--color-bg-hover)';
      }}
      onMouseLeave={(e) => {
        (e.target as HTMLElement).style.backgroundColor = 'transparent';
      }}
    >
      {icon}
      {label}
    </button>
  );
}