'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
} 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('.');
  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 [uploads, setUploads] = useState<UploadProgress[]>([]);
  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]);

  // 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') {
      setCurrentPath('.');
      loadFiles();
    } else if (section === 'pinned') {
      loadPinned();
    } else if (section === 'trash') {
      loadTrash();
    }
  }

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

  function navigateToFolder(file: FileItem) {
    if (!file.is_dir) return;
    setCurrentPath(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();
  }

  // Drag and drop upload
  function handleDragOver(e: React.DragEvent) {
    e.preventDefault();
    setDragOver(true);
  }

  function handleDragLeave() {
    setDragOver(false);
  }

  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);
    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 isMedia = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'mp4', 'webm', 'ogg'].includes(ext) || file.mime_type.startsWith('image/') || file.mime_type.startsWith('video/');

    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) => {
    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 typeA = a.is_dir ? '0' : (a.mime_type || a.name.split('.').pop() || '');
      const typeB = b.is_dir ? '0' : (b.mime_type || b.name.split('.').pop() || '');
      cmp = typeA.localeCompare(typeB);
    }
    // Directories always first if sorting by name
    if (sortBy === 'name' && a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
    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={() => { setCurrentPath('.'); 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={() => setCurrentPath(pathSegments.slice(0, i + 1).join('/'))}
                  className="text-sm font-medium hover:opacity-80 transition-opacity truncate max-w-32"
                  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={handleEmptyTrash}
                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 mt-1 w-40 rounded-xl shadow-lg border opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all z-50 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>

                <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"
                  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"
                    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}
                        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"
                        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-16 h-16 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>
                          )}
                          <span className="text-[10px]" style={{ color: 'var(--color-text-tertiary)' }}>
                            {file.is_dir ? 'Folder' : formatSize(file.size)}
                          </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}
                      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"
                      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-16 h-16 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>
                        )}
                        <span className="text-[10px]" style={{ color: 'var(--color-text-tertiary)' }}>
                          {file.is_dir ? 'Folder' : formatSize(file.size)}
                        </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}
                        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"
                        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}
                      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"
                      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>

          {/* Right Info Sidebar */}
          <AnimatePresence>
            {showInfo && (
              <motion.div
                initial={{ width: 0, opacity: 0 }}
                animate={{ width: 320, opacity: 1 }}
                exit={{ width: 0, opacity: 0 }}
                className="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.div>
            )}
          </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); }}
                />
              </>
            ) : (
              <>
                {!contextMenu.file.is_dir && (
                  <ContextMenuItem
                    icon={<Download className="w-4 h-4" />}
                    label="Download"
                    onClick={() => {
                      window.open(api.getDownloadUrl(contextMenu.file.path), '_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); }}
                />
                <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>
    </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>
  );
}
