gbclient/app/drive/page.tsx

"use client";
import React, { useState, useMemo, useEffect } from 'react';
import {
  Search, Download, Trash2, Share, Star,
  MoreVertical, Home, ChevronRight, ChevronLeft,
  Folder, File, Image, Video, Music, FileText, Code, Database,
  Clock, Users, Eye, Edit3, Copy, Scissors,
  FolderPlus, Info, Lock, Menu,
  ExternalLink, History, X
} from 'lucide-react';
import { cn } from "@/lib/utils";
import Footer from '../footer';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '@/components/ui/context-menu';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';

// Simple date formatting functions
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  });
};

const formatDateTime = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  });
};

const formatDistanceToNow = (date) => {
  const now = new Date();
  const diffMs = now.getTime() - new Date(date).getTime();
  const diffMinutes = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (diffMinutes < 1) return 'now';
  if (diffMinutes < 60) return `${diffMinutes}m ago`;
  if (diffHours < 24) return `${diffHours}h ago`;
  if (diffDays < 7) return `${diffDays}d ago`;
  return formatDate(date);
};

// File system data
const fileSystemData = {
  "": {
    id: "root",
    name: "My Drive",
    path: "",
    is_dir: true,
    children: ["projects", "documents", "media", "shared"]
  },
  "projects": {
    id: "projects",
    name: "Projects",
    path: "projects",
    is_dir: true,
    modified: "2025-01-15T10:30:00Z",
    starred: true,
    shared: false,
    children: ["web-apps", "mobile-apps", "ai-research"]
  },
  "projects/web-apps": {
    id: "web-apps",
    name: "Web Applications",
    path: "projects/web-apps",
    is_dir: true,
    modified: "2025-01-14T16:45:00Z",
    starred: false,
    shared: true,
    children: ["dashboard-pro", "package.json", "README.md"]
  },
  "projects/web-apps/package.json": {
    id: "package-json",
    name: "package.json",
    path: "projects/web-apps/package.json",
    is_dir: false,
    size: 2048,
    type: "json",
    modified: "2025-01-13T14:20:00Z",
    starred: false,
    shared: false
  },
  "projects/web-apps/README.md": {
    id: "readme-md",
    name: "README.md",
    path: "projects/web-apps/README.md",
    is_dir: false,
    size: 5120,
    type: "markdown",
    modified: "2025-01-12T09:30:00Z",
    starred: false,
    shared: true
  },
  "documents": {
    id: "documents",
    name: "Documents",
    path: "documents",
    is_dir: true,
    modified: "2025-01-14T12:00:00Z",
    starred: false,
    shared: false,
    children: ["proposals", "Q1-Strategy.pdf", "Budget-2025.xlsx"]
  },
  "documents/Q1-Strategy.pdf": {
    id: "q1-strategy",
    name: "Q1 Strategy.pdf",
    path: "documents/Q1-Strategy.pdf",
    is_dir: false,
    size: 1048576,
    type: "pdf",
    modified: "2025-01-10T15:30:00Z",
    starred: true,
    shared: true
  },
  "media": {
    id: "media",
    name: "Media",
    path: "media",
    is_dir: true,
    modified: "2025-01-13T18:45:00Z",
    starred: false,
    shared: false,
    children: ["photos", "videos", "vacation-2024.jpg"]
  },
  "media/vacation-2024.jpg": {
    id: "vacation-photo",
    name: "vacation-2024.jpg",
    path: "media/vacation-2024.jpg",
    is_dir: false,
    size: 3145728,
    type: "image",
    modified: "2024-12-25T20:00:00Z",
    starred: true,
    shared: false
  },
  "shared": {
    id: "shared",
    name: "Shared",
    path: "shared",
    is_dir: true,
    modified: "2025-01-12T11:20:00Z",
    starred: false,
    shared: true,
    children: ["team-resources", "client-files"]
  }
};

const getFileIcon = (item) => {
  if (item.is_dir) {
    return <Folder className="w-4 h-4 text-yellow-500" />;
  }

  const iconMap = {
    pdf: <FileText className="w-4 h-4 text-red-500" />,
    xlsx: <Database className="w-4 h-4 text-green-600" />,
    json: <Code className="w-4 h-4 text-yellow-600" />,
    markdown: <Edit3 className="w-4 h-4 text-purple-500" />,
    md: <Edit3 className="w-4 h-4 text-purple-500" />,
    jpg: <Image className="w-4 h-4 text-pink-500" />,
    jpeg: <Image className="w-4 h-4 text-pink-500" />,
    png: <Image className="w-4 h-4 text-pink-500" />,
    mp4: <Video className="w-4 h-4 text-red-600" />,
    mp3: <Music className="w-4 h-4 text-green-600" />
  };

  return iconMap[item.type] || <File className="w-4 h-4 text-muted-foreground" />;
};

const formatFileSize = (bytes) => {
  if (!bytes) return '';
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
};

const FileContextMenu = ({ file, children, onAction }) => {
  const contextMenuItems = [
    { icon: Eye, label: "Open", action: "open" },
    { icon: Download, label: "Download", action: "download" },
    { separator: true },
    {
      icon: Share, label: "Share", action: "share", submenu: [
        { icon: Users, label: "Share with team", action: "share-team" },
        { icon: ExternalLink, label: "Get link", action: "get-link" },
        { icon: Lock, label: "Restrict access", action: "restrict" },
      ]
    },
    { icon: Star, label: file?.starred ? "Remove from starred" : "Add to starred", action: "star" },
    { separator: true },
    { icon: Copy, label: "Copy", action: "copy" },
    { icon: Scissors, label: "Cut", action: "cut" },
    { icon: Edit3, label: "Rename", action: "rename" },
    { separator: true },
    {
      icon: FolderPlus, label: "Move to", action: "move", submenu: [
        { icon: Folder, label: "Documents", action: "move-documents" },
        { icon: Folder, label: "Projects", action: "move-projects" },
        { icon: Folder, label: "Choose folder...", action: "move-choose" },
      ]
    },
    { icon: Copy, label: "Make a copy", action: "duplicate" },
    { separator: true },
    { icon: History, label: "Version history", action: "history" },
    { icon: Info, label: "Details", action: "details" },
    { separator: true },
    { icon: Trash2, label: "Move to trash", action: "trash", destructive: true },
  ];

  const renderContextMenuItem = (item, index) => {
    if (item.separator) {
      return <ContextMenuSeparator key={index} />;
    }

    if (item.submenu) {
      return (
        <ContextMenuSub key={index}>
          <ContextMenuSubTrigger className="flex items-center gap-2">
            <item.icon className="w-4 h-4" />
            {item.label}
          </ContextMenuSubTrigger>
          <ContextMenuSubContent className="bg-popover">
            {item.submenu.map((subItem, subIndex) => (
              <ContextMenuItem
                key={subIndex}
                onClick={() => onAction(subItem.action, file)}
                className="flex items-center gap-2"
              >
                <subItem.icon className="w-4 h-4" />
                {subItem.label}
              </ContextMenuItem>
            ))}
          </ContextMenuSubContent>
        </ContextMenuSub>
      );
    }

    return (
      <ContextMenuItem
        key={index}
        onClick={() => onAction(item.action, file)}
        className={cn(
          "flex items-center gap-2",
          item.destructive && "text-destructive focus:text-destructive"
        )}
      >
        <item.icon className="w-4 h-4" />
        {item.label}
      </ContextMenuItem>
    );
  };

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        {children}
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56 bg-popover">
        {contextMenuItems.map(renderContextMenuItem)}
      </ContextMenuContent>
    </ContextMenu>
  );
};

const FolderTree = ({ onSelect, selectedPath = undefined, isCollapsed = undefined, isMobile = undefined }) => {
  const [expanded, setExpanded] = useState({ "": true, "projects": true });

  const toggleExpand = (path) => {
    setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
    onSelect(path);
  };

  const navLinks = [
    { title: "My Drive", path: "", icon: Home },
    { title: "Shared", path: "shared", icon: Users },
    { title: "Starred", path: "starred", icon: Star },
    { title: "Recent", path: "recent", icon: Clock },
    { title: "Trash", path: "trash", icon: Trash2 },
  ];

  const renderTreeItem = (path, level = 0) => {
    const item = fileSystemData[path];
    if (!item || !item.is_dir) return null;

    const isExpanded = expanded[path];
    const isSelected = selectedPath === path;

    return (
      <div key={item.id}>
        <button
          onClick={() => toggleExpand(path)}
          className={cn(
            "flex items-center w-full px-2 py-1.5 text-sm rounded-md hover:bg-accent transition-colors",
            isSelected && "bg-accent",
            isCollapsed ? "justify-center" : "justify-start"
          )}
        >
          {!isCollapsed && (
            <>
              <ChevronRight className={cn("w-4 h-4 mr-1 transition-transform", isExpanded && "rotate-90")} />
              {getFileIcon(item)}
              <span className="ml-2 truncate">{item.name}</span>
              {item.starred && <Star className="w-3 h-3 ml-auto text-yellow-500 fill-current" />}
            </>
          )}
          {isCollapsed && getFileIcon(item)}
        </button>
        {!isCollapsed && isExpanded && item.children && (
          <div className="ml-4">
            {item.children.map(childPath => {
              const fullPath = path ? `${path}/${childPath}` : childPath;
              return renderTreeItem(fullPath, level + 1);
            })}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className={cn("flex flex-col h-full bg-background border-r border-border", isMobile ? "w-full" : "")}>
      <div className={cn("p-2", isCollapsed ? "px-1" : "")}>
        <nav className="space-y-1">
          {navLinks.map((link) =>
            isCollapsed ? (
              <Tooltip key={link.path} delayDuration={0}>
                <TooltipTrigger asChild>
                  <Button
                    variant={selectedPath === link.path ? "default" : "ghost"}
                    size="icon"
                    className="w-9 h-9 bg-background hover:bg-accent"
                    onClick={() => onSelect(link.path)}
                  >
                    <link.icon className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="right" className="bg-popover">{link.title}</TooltipContent>
              </Tooltip>
            ) : (
              <Button
                key={link.path}
                variant={selectedPath === link.path ? "default" : "ghost"}
                className="w-full justify-start bg-background hover:bg-accent"
                onClick={() => onSelect(link.path)}
              >
                <link.icon className="mr-2 h-4 w-4" />
                {link.title}
              </Button>
            )
          )}
        </nav>
      </div>
      {!isCollapsed && (
        <>
          <Separator className="bg-border" />
          <ScrollArea className="flex-1 p-2">
            {renderTreeItem("")}
          </ScrollArea>
        </>
      )}
    </div>
  );
};

const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile, onContextAction, isMobile }) => {
  const files = useMemo(() => {
    const currentItem = fileSystemData[path];
    if (!currentItem || !currentItem.is_dir || !currentItem.children) return [];

    let items = currentItem.children.map(childName => {
      const childPath = path ? `${path}/${childName}` : childName;
      return fileSystemData[childPath];
    }).filter(Boolean);

    if (searchTerm) {
      items = items.filter(item =>
        item.name.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    if (filterType && filterType !== 'all') {
      items = items.filter(item => {
        if (filterType === 'folders') return item.is_dir;
        if (filterType === 'files') return !item.is_dir;
        if (filterType === 'starred') return item.starred;
        return true;
      });
    }

    return items.sort((a, b) => {
      if (a.is_dir && !b.is_dir) return -1;
      if (!a.is_dir && b.is_dir) return 1;
      return a.name.localeCompare(b.name);
    });
  }, [path, searchTerm, filterType]);

  return (
    <ScrollArea className={cn("h-full bg-background", isMobile ? "w-full" : "")}>
      <div className="flex flex-col">
        {files.map((item) => (
          <FileContextMenu
            key={item.id}
            file={item}
            onAction={onContextAction}
          >
            <button
              className={cn(
                "flex items-center gap-3 p-3 text-left text-sm transition-all hover:bg-accent border-b border-border",
                selectedFile?.id === item.id && "bg-accent"
              )}
              onClick={() => setSelectedFile(item)}
            >
              <div className="flex items-center gap-3 flex-1 min-w-0">
                {getFileIcon(item)}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <div className="font-medium truncate">{item.name}</div>
                    {item.starred && <Star className="w-3 h-3 text-yellow-500 fill-current" />}
                    {item.shared && <Users className="w-3 h-3 text-blue-500" />}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {item.is_dir ? 'Folder' : formatFileSize(item.size)}
                  </div>
                </div>
              </div>
              <div className="text-xs text-muted-foreground">
                {formatDistanceToNow(new Date(item.modified))}
              </div>
            </button>
          </FileContextMenu>
        ))}
      </div>
    </ScrollArea>
  );
};

const FileDisplay = ({ file, isMobile }) => {
  if (!file) {
    return (
      <div className={cn("flex flex-col items-center justify-center h-full text-center text-muted-foreground bg-background", isMobile ? "w-full" : "")}>
        <File className="w-12 h-12 mb-4" />
        <div className="text-lg font-medium">No file selected</div>
        <div className="text-sm">Select a file to view details</div>
      </div>
    );
  }

  return (
    <div className={cn("flex flex-col h-full bg-background", isMobile ? "w-full" : "")}>
      <div className="flex items-center p-2 bg-secondary border-b border-border">
        <div className="flex items-center gap-2">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" className="hover:bg-accent">
                  <Download className="h-4 w-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent className="bg-popover">Download</TooltipContent>
            </Tooltip>
          </TooltipProvider>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" className="hover:bg-accent">
                  <Share className="h-4 w-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent className="bg-popover">Share</TooltipContent>
            </Tooltip>
          </TooltipProvider>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" className="hover:bg-accent">
                  <Star className="h-4 w-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent className="bg-popover">Star</TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
        <div className="ml-auto">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="hover:bg-accent">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="bg-popover">
              <DropdownMenuItem>Rename</DropdownMenuItem>
              <DropdownMenuItem>Make a copy</DropdownMenuItem>
              <DropdownMenuItem className="text-destructive">Move to trash</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      <Separator className="bg-border" />
      <div className="flex-1 flex-col">
        <div className="flex items-start gap-4 p-4">
          <div className="p-2 rounded-lg bg-secondary">
            {getFileIcon(file)}
          </div>
          <div className="flex-1 min-w-0">
            <div className="font-semibold">{file.name}</div>
            <div className="text-sm text-muted-foreground">
              {file.is_dir ? 'Folder' : `${file.type?.toUpperCase() || 'File'} • ${formatFileSize(file.size)}`}
            </div>
          </div>
          {file.modified && (
            <div className="text-xs text-muted-foreground">
              {formatDate(file.modified)}
            </div>
          )}
        </div>
        <Separator className="bg-border" />
        <div className="p-4 space-y-4">
          <div>
            <div className="text-sm font-medium">Location</div>
            <div className="text-sm text-muted-foreground">/{file.path || ''}</div>
          </div>
          <div>
            <div className="text-sm font-medium">Modified</div>
            <div className="text-sm text-muted-foreground">
              {formatDateTime(file.modified)}
            </div>
          </div>
          {!file.is_dir && (
            <div>
              <div className="text-sm font-medium">Size</div>
              <div className="text-sm text-muted-foreground">{formatFileSize(file.size)}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default function FileManager() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [currentPath, setCurrentPath] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState('all');
  const [selectedFile, setSelectedFile] = useState(null);
  const [isMobile, setIsMobile] = useState(false);
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const [activePanel, setActivePanel] = useState('files'); // 'tree', 'files', 'preview'

  const currentItem = fileSystemData[currentPath];

  const shortcuts = [
    [
      { key: 'Q', label: 'Rename', action: () => console.log('Rename') },
      { key: 'W', label: 'View', action: () => console.log('View') },
      { key: 'E', label: 'Edit', action: () => console.log('Edit') },
      { key: 'R', label: 'Move', action: () => console.log('Move') },
      { key: 'T', label: 'MkDir', action: () => console.log('Make Directory') },
      { key: 'Y', label: 'Delete', action: () => console.log('Delete') },
      { key: 'U', label: 'Copy', action: () => console.log('Copy') },
      { key: 'I', label: 'Cut', action: () => console.log('Cut') },
      { key: 'O', label: 'Paste', action: () => console.log('Paste') },
      { key: 'P', label: 'Duplicate', action: () => console.log('Duplicate') },
    ],
    [
      { key: 'A', label: 'Select', action: () => console.log('Select') },
      { key: 'S', label: 'Select All', action: () => console.log('Select All') },
      { key: 'D', label: 'Deselect', action: () => console.log('Deselect') },
      { key: 'G', label: 'Details', action: () => console.log('Details') },
      { key: 'H', label: 'History', action: () => console.log('History') },
      { key: 'J', label: 'Share', action: () => console.log('Share') },
      { key: 'K', label: 'Star', action: () => console.log('Star') },
      { key: 'L', label: 'Download', action: () => console.log('Download') },
      { key: 'Z', label: 'Upload', action: () => console.log('Upload') },
      { key: 'X', label: 'Refresh', action: () => console.log('Refresh') },
    ]
  ];

  const handleContextAction = (action, file) => {
    console.log(`Context action: ${action}`, file);
    switch (action) {
      case 'star':
        console.log('Toggle star for', file.name);
        break;
      case 'share':
        console.log('Share', file.name);
        break;
      case 'download':
        console.log('Download', file.name);
        break;
      case 'trash':
        console.log('Move to trash', file.name);
        break;
      case 'copy':
        console.log('Copy', file.name);
        break;
      case 'cut':
        console.log('Cut', file.name);
        break;
      case 'rename':
        console.log('Rename', file.name);
        break;
      case 'duplicate':
        console.log('Duplicate', file.name);
        break;
      case 'details':
        console.log('Show details for', file.name);
        setSelectedFile(file);
        if (isMobile) setActivePanel('preview');
        break;
      default:
        console.log('Unknown action:', action);
    }
  };

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    const handleKeyDown = (e) => {
      const isCtrl = e.ctrlKey || e.metaKey;
      const isShift = e.shiftKey;

      if (isCtrl && e.key === 'n' && isShift) {
        e.preventDefault();
        console.log('New folder shortcut');
      } else if (isCtrl && e.key === 'n') {
        e.preventDefault();
        console.log('New file shortcut');
      } else if (isCtrl && e.key === 'u') {
        e.preventDefault();
        console.log('Upload shortcut');
      } else if (isCtrl && e.key === 'f') {
        e.preventDefault();
        document.querySelector('input[placeholder="Search files"]').focus();
      } else if (e.key === 'Delete' && selectedFile) {
        e.preventDefault();
        console.log('Delete shortcut');
      } else if (e.key === 'F2' && selectedFile) {
        e.preventDefault();
        console.log('Rename shortcut');
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [selectedFile]);

  if (isMobile) {
    return (
      <TooltipProvider>
        <div className="flex flex-col h-screen bg-background">
          <div className="flex items-center justify-between p-2 bg-secondary border-b border-border">
            <div className="flex items-center gap-2">
              <Sheet open={showMobileMenu} onOpenChange={setShowMobileMenu} >
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-[280px] p-0 bg-background">
                  <FolderTree
                    onSelect={(path) => {
                      setCurrentPath(path);
                      setShowMobileMenu(false);
                      setActivePanel('files');
                    }}
                    selectedPath={currentPath}
                    isMobile={true}
                  />
                </SheetContent>
              </Sheet>
              <h1 className="text-lg font-bold truncate">{currentItem?.name || 'My Drive'}</h1>
            </div>
            <div className="flex items-center gap-2">
              {activePanel !== 'preview' && (
                <Button variant="ghost" size="icon" onClick={() => setActivePanel('preview')}>
                  <Info className="h-4 w-4" />
                </Button>
              )}
              {activePanel === 'preview' && (
                <Button variant="ghost" size="icon" onClick={() => setActivePanel('files')}>
                  <ChevronLeft className="h-4 w-4" />
                </Button>
              )}
            </div>
          </div>

          <div className="flex-1 overflow-hidden">
            {activePanel === 'files' && (
              <div className="flex flex-col h-full">
                <div className="p-2 bg-secondary border-b border-border">
                  <div className="relative">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="Search files"
                      className="pl-8 w-full bg-background border border-border"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                </div>
                <FileList
                  path={currentPath}
                  searchTerm={searchTerm}
                  filterType={filterType}
                  selectedFile={selectedFile}
                  setSelectedFile={(file) => {
                    setSelectedFile(file);
                    setActivePanel('preview');
                  }}
                  onContextAction={handleContextAction}
                  isMobile={true}
                />
              </div>
            )}

            {activePanel === 'preview' && (
              <FileDisplay
                file={selectedFile}
                isMobile={true}
              />
            )}
          </div>

          <Footer shortcuts={shortcuts} isMobile={true} />
        </div>
      </TooltipProvider>
    );
  }

  return (
    <TooltipProvider>
      <div className="flex flex-col h-[calc(100vh-40px)] bg-background">
        <ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
          <ResizablePanel
            defaultSize={20}
            collapsedSize={4}
            collapsible={true}
            minSize={15}
            maxSize={30}
            onCollapse={() => setIsCollapsed(true)}
            onResize={() => setIsCollapsed(false)}
            className={cn(isCollapsed && "min-w-[50px] transition-all duration-300")}
          >
            <FolderTree
              onSelect={setCurrentPath}
              selectedPath={currentPath}
              isCollapsed={isCollapsed}
            />
          </ResizablePanel>

          <ResizableHandle withHandle className="bg-border" />

          <ResizablePanel defaultSize={50} minSize={30} className="bg-background border-r border-border">
            <Tabs defaultValue="all" className="flex flex-col h-full">
              <div className="flex items-center px-4 py-2 bg-secondary border-b border-border">
                <h1 className="text-xl font-bold">{currentItem?.name || 'My Drive'}</h1>
                <TabsList className="ml-auto bg-background">
                  <TabsTrigger value="all" className="data-[state=active]:bg-accent">All</TabsTrigger>
                  <TabsTrigger value="starred" className="data-[state=active]:bg-accent">Starred</TabsTrigger>
                </TabsList>
              </div>
              <Separator className="bg-border" />
              <div className="bg-secondary p-4">
                <div className="flex items-center gap-2">
                  <div className="relative flex-1">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="Search files"
                      className="pl-8 bg-background border border-border"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <Select value={filterType} onValueChange={setFilterType}>
                    <SelectTrigger className="w-[140px] bg-background border border-border">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-popover">
                      <SelectItem value="all">All items</SelectItem>
                      <SelectItem value="folders">Folders</SelectItem>
                      <SelectItem value="files">Files</SelectItem>
                      <SelectItem value="starred">Starred</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <TabsContent value="all" className="m-0 flex-1">
                <FileList
                  path={currentPath}
                  searchTerm={searchTerm}
                  filterType={filterType}
                  selectedFile={selectedFile}
                  setSelectedFile={setSelectedFile}
                  onContextAction={handleContextAction}
                />
              </TabsContent>
              <TabsContent value="starred" className="m-0 flex-1">
                <FileList
                  path={currentPath}
                  searchTerm={searchTerm}
                  filterType="starred"
                  selectedFile={selectedFile}
                  setSelectedFile={setSelectedFile}
                  onContextAction={handleContextAction}
                />
              </TabsContent>
            </Tabs>
          </ResizablePanel>

          <ResizableHandle withHandle className="bg-border" />

          <ResizablePanel defaultSize={30} minSize={25} className="bg-background">
            <FileDisplay file={selectedFile} />
          </ResizablePanel>
        </ResizablePanelGroup>
        <Footer shortcuts={shortcuts} />
      </div>
    </TooltipProvider>
  );
}