import React, { useState, useCallback, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
  closestCenter,
} from '@dnd-kit/core';
import {
  useDraggable,
  useDroppable,
} from '@dnd-kit/core';
import {
  ChevronRight,
  ChevronDown,
  File,
  Folder,
  FolderOpen,
  Plus,
  Trash2,
  Edit2,
  MoreHorizontal,
  Lock,
  LockOpen,
  RefreshCw,
  Bookmark,
  Star,
} from 'lucide-react';
import { useEditorStore } from '@/core/store';
import type { FileNode, LanguageMode } from '@/core/types';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@/components/ui/context-menu';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { SecureUnlockDialog } from '@/components/SecureUnlockDialog';
import { CreateItemDialog } from '@/components/CreateItemDialog';
import { useSecurity } from '@/contexts/SecurityContext';
import { isSecureItem, getSecureFolderId } from '@/lib/security-utils';
import { useSecureFileOpen } from '@/hooks/useSecureFileOpen';
import { toast } from 'sonner';
import { FileIcon } from '@/lib/file-icons';
import { getLanguageFromFileName, getLanguageColor } from '@/editor/languages';
import { 
  appleTreeExpand, 
  appleListItem, 
  appleSpringGentle,
  appleButtonPress 
} from '@/lib/apple-animations';

interface FileTreeItemProps {
  node: FileNode;
  depth: number;
}

/** Get all file IDs that are under this folder (recursively). */
function getFileIdsUnderFolder(folderId: string, files: FileNode[]): string[] {
  const ids: string[] = [];
  for (const f of files) {
    if (f.type !== 'file') continue;
    let current: FileNode | undefined = f;
    while (current?.parentId) {
      if (current.parentId === folderId) { ids.push(f.id); break; }
      current = files.find((x) => x.id === current!.parentId);
    }
  }
  return ids;
}

const FileTreeItem: React.FC<FileTreeItemProps> = ({ node, depth }) => {
  const { files, updateFile, deleteFile, addFile, moveFile, activeTabId, openTabs, openFileAndAddBookmark, bookmarks, removeBookmark, loadBookmarks } = useEditorStore();
  const { isUnlocked, lockItem } = useSecurity();
  const { openFile: secureOpenFile } = useSecureFileOpen();
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState(node.name);
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [createType, setCreateType] = useState<'file' | 'folder'>('file');
  const [showUnlockDialog, setShowUnlockDialog] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<string | null>(null);
  
  // Drag and drop
  const { attributes, listeners, setNodeRef: setDraggableRef, transform, isDragging } = useDraggable({
    id: node.id,
    data: { type: node.type, node },
  });
  
  const { setNodeRef: setDroppableRef, isOver } = useDroppable({
    id: node.id,
    data: { type: node.type, node },
    disabled: node.type !== 'folder', // Only folders are droppable
  });
  
  const style = transform ? {
    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
    opacity: isDragging ? 0.5 : 1,
  } : undefined;
  
  // Combine refs for both draggable and droppable
  const combinedRef = useCallback((el: HTMLDivElement | null) => {
    setDraggableRef(el);
    if (node.type === 'folder') {
      setDroppableRef(el);
    }
  }, [setDraggableRef, setDroppableRef, node.type]);
  
  // Check if item is secure (directly or inherited from parent)
  const isSecure = useMemo(() => {
    return isSecureItem(node, files);
  }, [node, files]);

  // Get secure folder ID (for files inside secure folders)
  const secureFolderId = useMemo(() => {
    return getSecureFolderId(node, files);
  }, [node, files]);

  // Check if unlocked (use secure folder ID for files inside secure folders)
  const isUnlockedItem = useMemo(() => {
    if (!isSecure) return true;
    const idToCheck = secureFolderId || node.id;
    return isUnlocked(idToCheck);
  }, [isSecure, secureFolderId, node.id, isUnlocked]);

  // Only the root-level Secure Notes folder is non-editable; items inside show options when unlocked
  const isRootSecureFolder = node.secure && node.type === 'folder' && (node.parentId == null || node.parentId === '');
  const canRenameOrDelete = !isRootSecureFolder && (!isSecure || isUnlockedItem);

  const children = useMemo(
    () => files.filter((f) => f.parentId === node.id).sort((a, b) => {
      if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
      return a.name.localeCompare(b.name);
    }),
    [files, node.id]
  );

  const isActive = useMemo(() => {
    if (!activeTabId) return false;
    const activeTab = openTabs.find((t) => t.id === activeTabId);
    return activeTab?.fileId === node.id;
  }, [activeTabId, openTabs, node.id]);

  const handleToggleExpand = useCallback(() => {
    if (node.type === 'folder') {
      // Prevent expanding locked secure folders
      if (isSecure && !isUnlockedItem) {
        setShowUnlockDialog(true);
        return;
      }
      updateFile(node.id, { isExpanded: !node.isExpanded });
    }
  }, [node, updateFile, isSecure, isUnlockedItem]);

  const handleClick = useCallback(() => {
    // Check if secure folder needs unlocking
    if (isSecure && !isUnlockedItem) {
      setShowUnlockDialog(true);
      return;
    }
    
    if (node.type === 'file') {
      // Use secure file open which handles security checks
      secureOpenFile(node.id);
    } else {
      handleToggleExpand();
    }
  }, [node, secureOpenFile, handleToggleExpand, isSecure, isUnlockedItem]);

  const handleRename = useCallback(async () => {
    if (newName.trim() && newName !== node.name) {
      try {
        await updateFile(node.id, { name: newName.trim() });
      } catch (error) {
        console.error('Failed to rename:', error);
      }
    }
    setIsRenaming(false);
  }, [newName, node, updateFile]);

  const handleCreateSubmit = useCallback(
    async (name: string) => {
      try {
        const secure = node.secure || false;
        await addFile({
          name,
          type: createType,
          parentId: node.type === 'folder' ? node.id : node.parentId,
          language: createType === 'file' ? (getLanguageFromFileName(name) as LanguageMode) : undefined,
          content: createType === 'file' ? '' : undefined,
          isExpanded: createType === 'folder' ? true : undefined,
          secure,
        });
        if (node.type === 'folder') {
          await updateFile(node.id, { isExpanded: true });
        }
      } catch (error) {
        console.error('Failed to create file:', error);
        throw error;
      }
    },
    [createType, node, addFile, updateFile]
  );

  const getFileIcon = () => {
    if (node.type === 'folder') {
      const icon = node.isExpanded ? (
        <FolderOpen className="w-4 h-4 text-primary" />
      ) : (
        <Folder className="w-4 h-4 text-primary" />
      );
      
      // Add lock icon for secure folders
      if (isSecure) {
        return (
          <div className="relative">
            {icon}
            {!isUnlockedItem ? (
              <Lock className="w-2.5 h-2.5 absolute -top-0.5 -right-0.5 text-primary" />
            ) : (
              <LockOpen className="w-2.5 h-2.5 absolute -top-0.5 -right-0.5 text-primary/60" />
            )}
          </div>
        );
      }
      return icon;
    }
    
    // Colorful file icon based on language/extension
    const language = getLanguageFromFileName(node.name);
    const color = getLanguageColor(language);
    
    // Secure file indicator
    if (isSecure) {
      return (
        <div className="relative">
          <FileIcon fileName={node.name} size={16} />
          {!isUnlockedItem && (
            <Lock className="w-2.5 h-2.5 absolute -top-0.5 -right-0.5 text-primary" />
          )}
        </div>
      );
    }
    
    return <FileIcon fileName={node.name} size={16} />;
  };

  const hasBookmark = useMemo(() => {
    if (node.type === 'file') return bookmarks.some((b) => b.fileId === node.id);
    const fileIdsUnder = getFileIdsUnderFolder(node.id, files);
    return bookmarks.some((b) => fileIdsUnder.includes(b.fileId));
  }, [node, bookmarks, files]);

  return (
    <motion.div {...appleListItem} transition={appleSpringGentle}>
      <ContextMenu>
        <ContextMenuTrigger>
          <motion.div
            ref={combinedRef}
            {...listeners}
            {...attributes}
            className={`file-tree-item group ${isActive ? 'selected' : ''} ${isDragging ? 'opacity-50' : ''} ${isOver && node.type === 'folder' ? 'ring-2 ring-primary' : ''}`}
            style={{ paddingLeft: `${depth * 12 + 8}px`, ...style }}
            onClick={handleClick}
            whileHover={{ x: 2 }}
            transition={appleSpringGentle}
          >
            {node.type === 'folder' && (
              <span className="flex-shrink-0">
                {node.isExpanded ? (
                  <ChevronDown className="w-3 h-3 text-muted-foreground" />
                ) : (
                  <ChevronRight className="w-3 h-3 text-muted-foreground" />
                )}
              </span>
            )}
            {node.type === 'file' && <span className="w-3" />}
            {getFileIcon()}
            {isRenaming ? (
              <Input
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                onBlur={handleRename}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleRename();
                  if (e.key === 'Escape') setIsRenaming(false);
                }}
                className="h-5 px-1 py-0 text-xs bg-secondary border-primary"
                autoFocus
                onClick={(e) => e.stopPropagation()}
              />
            ) : (
              <span className="text-sm truncate flex-1">{node.name}</span>
            )}
            {hasBookmark && (
              <Star className="w-3.5 h-3.5 text-yellow-500 fill-yellow-500 flex-shrink-0" />
            )}
            <DropdownMenu>
              <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                <motion.div {...appleButtonPress}>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <MoreHorizontal className="w-3 h-3" />
                  </Button>
                </motion.div>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                {canRenameOrDelete && (
                  <DropdownMenuItem onClick={() => setIsRenaming(true)}>
                    <Edit2 className="w-3 h-3 mr-2" /> Rename
                  </DropdownMenuItem>
                )}
                {node.type === 'file' && (!isSecure || isUnlockedItem) && (
                  <>
                    <DropdownMenuSeparator />
                    {hasBookmark ? (
                      <DropdownMenuItem onClick={async () => {
                        const toRemove = bookmarks.filter((b) => b.fileId === node.id);
                        try {
                          for (const b of toRemove) await removeBookmark(b.id);
                          await loadBookmarks();
                          toast.success('Removed from bookmarks');
                        } catch {
                          toast.error('Failed to remove bookmarks');
                        }
                      }}>
                        <Star className="w-3 h-3 mr-2 text-yellow-500 fill-yellow-500" /> Remove bookmark(s)
                      </DropdownMenuItem>
                    ) : (
                      <DropdownMenuItem onClick={async () => {
                        try {
                          await openFileAndAddBookmark(node.id);
                          toast.success('Added to bookmarks');
                        } catch {
                          toast.error('Failed to add bookmark');
                        }
                      }}>
                        <Bookmark className="w-3 h-3 mr-2" /> Add bookmark
                      </DropdownMenuItem>
                    )}
                  </>
                )}
                {node.type === 'folder' && (
                  <>
                    <DropdownMenuSeparator />
                    {/* Unlock option for locked secure folders */}
                    {isSecure && !isUnlockedItem && (
                      <DropdownMenuItem onClick={() => setShowUnlockDialog(true)}>
                        <LockOpen className="w-3 h-3 mr-2" /> Unlock Folder
                      </DropdownMenuItem>
                    )}
                    {/* New File - only if unlocked or not secure */}
                    <DropdownMenuItem 
                      onClick={() => {
                        if (isSecure && !isUnlockedItem) {
                          setShowUnlockDialog(true);
                        } else {
                          setCreateType('file');
                          setCreateDialogOpen(true);
                        }
                      }}
                    >
                      <File className="w-3 h-3 mr-2" /> New File
                    </DropdownMenuItem>
                    {/* New Folder - only if unlocked or not secure */}
                    <DropdownMenuItem 
                      onClick={() => {
                        if (isSecure && !isUnlockedItem) {
                          setShowUnlockDialog(true);
                        } else {
                          setCreateType('folder');
                          setCreateDialogOpen(true);
                        }
                      }}
                    >
                      <Folder className="w-3 h-3 mr-2" /> New Folder
                    </DropdownMenuItem>
                    {/* Lock option for unlocked secure folders */}
                    {isSecure && isUnlockedItem && (
                      <>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem onClick={() => lockItem(node.id)}>
                          <Lock className="w-3 h-3 mr-2" /> Lock Folder
                        </DropdownMenuItem>
                      </>
                    )}
                  </>
                )}
                {canRenameOrDelete && (
                  <>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                      onClick={() => {
                        setItemToDelete(node.id);
                        setDeleteConfirmOpen(true);
                      }}
                      className="text-destructive"
                    >
                      <Trash2 className="w-3 h-3 mr-2" /> Delete
                    </DropdownMenuItem>
                  </>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
          </motion.div>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-48">
          {canRenameOrDelete && (
            <ContextMenuItem onClick={() => setIsRenaming(true)}>
              <Edit2 className="w-3 h-3 mr-2" /> Rename
            </ContextMenuItem>
          )}
          {node.type === 'file' && !isSecure && (
            <>
              <ContextMenuSeparator />
              {hasBookmark ? (
                <ContextMenuItem onClick={async () => {
                  const toRemove = bookmarks.filter((b) => b.fileId === node.id);
                  try {
                    for (const b of toRemove) await removeBookmark(b.id);
                    await loadBookmarks();
                    toast.success('Removed from bookmarks');
                  } catch {
                    toast.error('Failed to remove bookmarks');
                  }
                }}>
                  <Star className="w-3 h-3 mr-2 text-yellow-500 fill-yellow-500" /> Remove bookmark(s)
                </ContextMenuItem>
              ) : (
                <ContextMenuItem onClick={async () => {
                  try {
                    await openFileAndAddBookmark(node.id);
                    toast.success('Added to bookmarks');
                  } catch {
                    toast.error('Failed to add bookmark');
                  }
                }}>
                  <Bookmark className="w-3 h-3 mr-2" /> Add bookmark
                </ContextMenuItem>
              )}
            </>
          )}
          {node.type === 'folder' && (
            <>
              <ContextMenuSeparator />
              {/* Unlock option for locked secure folders */}
              {isSecure && !isUnlockedItem && (
                <ContextMenuItem onClick={() => setShowUnlockDialog(true)}>
                  <LockOpen className="w-3 h-3 mr-2" /> Unlock Folder
                </ContextMenuItem>
              )}
              {/* New File - only if unlocked or not secure */}
              <ContextMenuItem 
                onClick={() => {
                  if (isSecure && !isUnlockedItem) {
                    setShowUnlockDialog(true);
                  } else {
                    setCreateType('file');
                    setCreateDialogOpen(true);
                  }
                }}
              >
                <File className="w-3 h-3 mr-2" /> New File
              </ContextMenuItem>
              {/* New Folder - only if unlocked or not secure */}
              <ContextMenuItem 
                onClick={() => {
                  if (isSecure && !isUnlockedItem) {
                    setShowUnlockDialog(true);
                  } else {
                    setCreateType('folder');
                    setCreateDialogOpen(true);
                  }
                }}
              >
                <Folder className="w-3 h-3 mr-2" /> New Folder
              </ContextMenuItem>
              {/* Lock option for unlocked secure folders */}
              {isSecure && isUnlockedItem && (
                <>
                  <ContextMenuSeparator />
                  <ContextMenuItem onClick={() => lockItem(node.id)}>
                    <Lock className="w-3 h-3 mr-2" /> Lock Folder
                  </ContextMenuItem>
                </>
              )}
            </>
          )}
          {canRenameOrDelete && (
            <>
              <ContextMenuSeparator />
              <ContextMenuItem
                onClick={() => {
                  setItemToDelete(node.id);
                  setDeleteConfirmOpen(true);
                }}
                className="text-destructive"
              >
                <Trash2 className="w-3 h-3 mr-2" /> Delete
              </ContextMenuItem>
            </>
          )}
        </ContextMenuContent>
      </ContextMenu>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete {itemToDelete && files.find(f => f.id === itemToDelete)?.type === 'folder' ? 'Folder' : 'File'}?</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete <strong>{itemToDelete ? files.find(f => f.id === itemToDelete)?.name : ''}</strong>?
              This will move the {itemToDelete && files.find(f => f.id === itemToDelete)?.type === 'folder' ? 'folder' : 'file'} to trash. You can restore it later.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={async () => {
                if (itemToDelete) {
                  const itemToDeleteObj = files.find(f => f.id === itemToDelete);
                  // Double-check security before deleting
                  if (itemToDeleteObj) {
                    const isItemSecure = isSecureItem(itemToDeleteObj, files);
                    const secureFolderIdForItem = getSecureFolderId(itemToDeleteObj, files);
                    const idToCheck = secureFolderIdForItem || itemToDeleteObj.id;
                    const isItemUnlocked = !isItemSecure || isUnlocked(idToCheck);
                    
                    if (isItemSecure && !isItemUnlocked) {
                      toast.error('Cannot delete locked secure item');
                      setDeleteConfirmOpen(false);
                      setItemToDelete(null);
                      return;
                    }
                  }
                  await deleteFile(itemToDelete);
                  setItemToDelete(null);
                }
                setDeleteConfirmOpen(false);
              }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Create new file/folder dialog */}
      <CreateItemDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        type={createType}
        parentLabel={node.name}
        onCreate={handleCreateSubmit}
      />

      {/* Render children */}
      <AnimatePresence>
        {node.type === 'folder' && node.isExpanded && (
          <motion.div
            {...appleTreeExpand}
            transition={appleSpringGentle}
          >
            {children.map((child) => (
              <FileTreeItem key={child.id} node={child} depth={depth + 1} />
            ))}
          </motion.div>
        )}
      </AnimatePresence>
      
      {/* Secure Unlock Dialog */}
      {isSecure && (
        <SecureUnlockDialog
          open={showUnlockDialog}
          onOpenChange={setShowUnlockDialog}
          itemId={secureFolderId || node.id}
          itemName={secureFolderId ? files.find(f => f.id === secureFolderId)?.name || 'Secure Folder' : node.name}
          itemType={secureFolderId ? 'folder' : (node.type === 'folder' ? 'folder' : 'note')}
          onUnlocked={() => {
            // After unlock, expand folder if it's a folder
            if (node.type === 'folder' && !node.isExpanded) {
              updateFile(node.id, { isExpanded: true });
            }
            setShowUnlockDialog(false);
          }}
        />
      )}
    </motion.div>
  );
};

export const FileExplorer: React.FC = () => {
  const { files, addFile, isLoading, refreshFiles, moveFile } = useEditorStore();
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [createType, setCreateType] = useState<'file' | 'folder'>('file');
  const [activeDragId, setActiveDragId] = useState<string | null>(null);
  
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    })
  );
  
  const handleDragStart = (event: DragStartEvent) => {
    setActiveDragId(event.active.id as string);
  };
  
  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveDragId(null);
    
    if (!over) return;
    
    const activeId = active.id as string;
    const overId = over.id as string;
    const activeData = active.data.current;
    const overData = over.data.current;
    
    // Don't move if dropped on itself
    if (activeId === overId) return;
    
    // Only allow dropping on folders
    if (overData?.type !== 'folder') return;
    
    // Prevent moving folder into itself or its descendants
    if (activeData?.type === 'folder') {
      const isDescendant = (folderId: string, checkId: string): boolean => {
        const folder = files.find((f) => f.id === folderId);
        if (!folder || !folder.parentId) return false;
        if (folder.parentId === checkId) return true;
        return isDescendant(folder.parentId, checkId);
      };
      if (activeId === overId || isDescendant(overId, activeId)) {
        toast.error('Cannot move folder into itself or its descendants');
        return;
      }
    }
    
    try {
      await moveFile(activeId, overId);
      toast.success('Moved successfully');
    } catch (error) {
      console.error('Failed to move:', error);
      toast.error(error instanceof Error ? error.message : 'Failed to move');
    }
  };

  // Get root-level items: Secure Notes (default secure folder) first, then other folders, then files
  const rootItems = useMemo(() => {
    const root = files.filter((f) => {
      const parentId = f.parentId;
      return parentId === null || parentId === undefined || parentId === '';
    }).sort((a, b) => {
      const aSecureFolder = a.type === 'folder' && a.secure;
      const bSecureFolder = b.type === 'folder' && b.secure;
      if (aSecureFolder && !bSecureFolder) return -1;
      if (!aSecureFolder && bSecureFolder) return 1;
      if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
      return a.name.localeCompare(b.name);
    });
    return root;
  }, [files]);

  const handleCreateRootSubmit = useCallback(
    async (name: string) => {
      try {
        await addFile({
          name,
          type: createType,
          parentId: null,
          language: createType === 'file' ? (getLanguageFromFileName(name) as LanguageMode) : undefined,
          content: createType === 'file' ? '' : undefined,
          isExpanded: createType === 'folder' ? true : undefined,
        });
      } catch (error) {
        console.error('Failed to create file:', error);
        throw error;
      }
    },
    [createType, addFile]
  );

  return (
    <div className="h-full flex flex-col">
      <div className="flex items-center justify-between px-3 py-2 border-b border-sidebar-border">
        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
          Explorer
        </span>
        <div className="flex gap-1">
          <motion.div {...appleButtonPress}>
            <Button
              variant="ghost"
              size="icon"
              className="h-5 w-5"
              onClick={() => refreshFiles()}
              title="Refresh"
            >
              <RefreshCw className={`w-3 h-3 ${isLoading ? 'animate-spin' : ''}`} />
            </Button>
          </motion.div>
          <motion.div {...appleButtonPress}>
            <Button
              variant="ghost"
              size="icon"
              className="h-5 w-5"
              onClick={() => { setCreateType('file'); setCreateDialogOpen(true); }}
              title="New File"
            >
              <File className="w-3 h-3" />
            </Button>
          </motion.div>
          <motion.div {...appleButtonPress}>
            <Button
              variant="ghost"
              size="icon"
              className="h-5 w-5"
              onClick={() => { setCreateType('folder'); setCreateDialogOpen(true); }}
              title="New Folder"
            >
              <Folder className="w-3 h-3" />
            </Button>
          </motion.div>
        </div>
      </div>

      <CreateItemDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        type={createType}
        parentLabel="Explorer"
        onCreate={handleCreateRootSubmit}
      />

      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      >
        <div className="flex-1 overflow-y-scroll overflow-x-hidden py-1 min-h-0 apple-scroll">
        {isLoading ? (
          <div className="px-3 py-8 text-center text-muted-foreground text-sm">
            <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-2" />
            <p>Loading...</p>
          </div>
        ) : rootItems.length === 0 ? (
          <div className="px-3 py-8 text-center text-muted-foreground text-sm">
            <Folder className="w-8 h-8 mx-auto mb-2 opacity-30" />
            <p>No files or folders</p>
            <p className="text-xs mt-1">Click + to create</p>
            <p className="text-xs mt-2 text-muted-foreground/60">
              Total files in store: {files.length}
            </p>
          </div>
        ) : (
          rootItems.map((item) => (
            <FileTreeItem key={item.id} node={item} depth={0} />
          ))
        )}
        </div>
        <DragOverlay>
          {activeDragId ? (
            <div className="p-2 bg-primary/10 border border-primary rounded">
              {files.find((f) => f.id === activeDragId)?.name}
            </div>
          ) : null}
        </DragOverlay>
      </DndContext>
    </div>
  );
};

export default FileExplorer;