firebase-os 1.1.3 → 1.1.5

package/src/pages/StorageAdmin.tsx

@@ -0,0 +1,769 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useParams, useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { db, storage } from '../lib/firebase';
+import { collection, addDoc, getDocs, query, serverTimestamp, deleteDoc, doc, orderBy, updateDoc, where, onSnapshot } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
+import { useAuth } from '../lib/AuthContext';
+import { Button } from '../components/Button';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { DashboardNav } from '../components/DashboardNav';
+import { UploadCloud, Trash2, X, File as FileIcon, Image, FileText, Video, Archive, Code, Check, Eye, Download, Link, Edit2, FolderOpen, Plus, Globe, Users as UsersIcon, Lock, Shield, Loader2, User as UserIcon, Database } from 'lucide-react';
+
+interface StorageRecord {
+  _id: string;
+  fileName: string;
+  fileType: string;
+  fileSize: number;
+  downloadURL: string;
+  uid: string;
+  uploaderEmail?: string;
+  uploaderRole?: string;
+  accessPrefix: 'pub_' | 'mem_' | 'user_' | 'admin_' | 'users_';
+  createdAt: any;
+}
+
+export function StorageAdmin() {
+  const { user, userRole } = useAuth();
+  const [records, setRecords] = useState<StorageRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const navigate = useNavigate();
+  const { '*': subPath } = useParams();
+
+  const pathParts = subPath ? subPath.split('/').filter(Boolean) : [];
+  const folderSlug = pathParts[0] || 'private';
+
+  let targetUserId = null;
+  let fileIdFromUrl = null;
+
+  if (folderSlug === 'users') {
+    targetUserId = pathParts[1] || null;
+    fileIdFromUrl = pathParts[2] || null;
+  } else {
+    fileIdFromUrl = pathParts[1] || null;
+  }
+
+  const folderNameToPrefix: Record<string, string> = {
+    'public': 'pub_',
+    'shared': 'mem_',
+    'private': 'user_',
+    'admin': 'admin_',
+    'users': 'users_'
+  };
+
+  const prefixToFolderName: Record<string, string> = {
+    'pub_': 'public',
+    'mem_': 'shared',
+    'user_': 'private',
+    'admin_': 'admin',
+    'users_': 'users'
+  };
+
+  const activeFolder = (folderNameToPrefix[folderSlug as string] || 'user_') as 'pub_' | 'mem_' | 'user_' | 'admin_' | 'users_';
+
+  const setActiveFolder = (newPrefix: any) => {
+    navigate(`/drive/${prefixToFolderName[newPrefix]}`);
+  };
+
+  const [allUsers, setAllUsers] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (activeFolder === 'users_' && userRole === 'admin' && allUsers.length === 0) {
+      getDocs(collection(db, 'user_profiles')).then(snap => {
+        setAllUsers(snap.docs.map(d => ({ id: d.id, ...d.data() })));
+      });
+    }
+  }, [activeFolder, userRole, allUsers.length]);
+
+  // Staged Upload State
+  const [isUploading, setIsUploading] = useState(false);
+  const [stagedFile, setStagedFile] = useState<File | null>(null);
+  const [stagedName, setStagedName] = useState('');
+  const [stagedAccess, setStagedAccess] = useState<'pub_' | 'mem_' | 'user_' | 'admin_' | 'users_'>('user_');
+  const [uploadModal, setUploadModal] = useState(false);
+  const [showLocationDropdown, setShowLocationDropdown] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const onGlobalDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const file = e.dataTransfer.files[0];
+      setStagedFile(file);
+      setStagedName(file.name);
+      setStagedAccess(activeFolder);
+      setUploadModal(true);
+    }
+  };
+
+  // File Preview & Actions
+  const previewFile = fileIdFromUrl ? records.find(r => r._id === fileIdFromUrl) || null : null;
+
+  const setPreviewFile = (file: StorageRecord | null) => {
+    setPreviewLoading(true);
+    if (file) {
+      if (activeFolder === 'users_' && targetUserId) {
+        navigate(`/drive/users/${targetUserId}/${file._id}`);
+      } else {
+        navigate(`/drive/${prefixToFolderName[activeFolder]}/${file._id}`);
+      }
+    } else {
+      if (activeFolder === 'users_' && targetUserId) {
+        navigate(`/drive/users/${targetUserId}`);
+      } else {
+        navigate(`/drive/${prefixToFolderName[activeFolder]}`);
+      }
+    }
+  };
+
+  const [renameFile, setRenameFile] = useState<{ id: string, name: string, prefix: string } | null>(null);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState<{ id: string, url: string, name: string, prefix: string } | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [copiedLink, setCopiedLink] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(true);
+  const [loadingImages, setLoadingImages] = useState<Record<string, boolean>>({});
+  const [showNotFound, setShowNotFound] = useState(false);
+
+  useEffect(() => {
+    if (previewFile || confirmDelete || renameFile || uploadModal || showNotFound) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [previewFile, confirmDelete, renameFile, uploadModal, showNotFound]);
+
+  useEffect(() => {
+    if (!loading && fileIdFromUrl && !records.some(r => r._id === fileIdFromUrl)) {
+      setShowNotFound(true);
+      const timer = setTimeout(() => {
+        setShowNotFound(false);
+        if (activeFolder === 'users_' && targetUserId) {
+          navigate(`/drive/users/${targetUserId}`);
+        } else {
+          navigate(`/drive/${prefixToFolderName[activeFolder]}`);
+        }
+      }, 2500);
+      return () => clearTimeout(timer);
+    } else {
+      setShowNotFound(false);
+    }
+  }, [loading, fileIdFromUrl, records, activeFolder, navigate, targetUserId]);
+
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+
+    const prefixes = userRole === 'admin'
+      ? ['pub_', 'mem_', 'user_', 'admin_']
+      : ['pub_', 'mem_', 'user_'];
+
+    const unsubs = prefixes.map(pfx => {
+      let q;
+      if (pfx === 'user_' && userRole !== 'admin') {
+        q = query(collection(db, `${pfx}files`), where('uid', '==', user.uid));
+      } else {
+        q = query(collection(db, `${pfx}files`), orderBy('createdAt', 'desc'));
+      }
+
+      return onSnapshot(q, (snap) => {
+        const newData = (snap.docs || []).map(d => ({ _id: d.id, accessPrefix: pfx as any, ...d.data() }) as StorageRecord);
+        
+        setRecords(prev => {
+          // Filter out existing records for this prefix and add new ones
+          const otherPrefixes = prev.filter(r => r.accessPrefix !== pfx);
+          const combined = [...otherPrefixes, ...newData];
+          return combined.sort((a, b) => {
+            const d1 = a.createdAt?.toMillis ? a.createdAt.toMillis() : 0;
+            const d2 = b.createdAt?.toMillis ? b.createdAt.toMillis() : 0;
+            return d2 - d1;
+          });
+        });
+        setLoading(false);
+      }, (err) => {
+        console.warn(`Error listening to ${pfx}files:`, err);
+      });
+    });
+
+    return () => unsubs.forEach(unsub => unsub());
+  }, [user?.uid, userRole]);
+
+  const handleSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setStagedFile(file);
+      setStagedName(file.name);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const file = e.dataTransfer.files[0];
+      setStagedFile(file);
+      setStagedName(file.name);
+    }
+  };
+
+  const handleSaveUpload = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stagedFile || !stagedName) return;
+
+    setIsUploading(true);
+    try {
+      const uniqueName = `${Date.now()}_${stagedFile.name.replace(/[^a-zA-Z0-9.-]/g, '_')}`;
+      const storagePath = `${stagedAccess}files/${uniqueName}`;
+
+      const fileRef = ref(storage, storagePath);
+      await uploadBytes(fileRef, stagedFile, {
+        customMetadata: { ownerId: user!.uid }
+      });
+
+      const downloadURL = await getDownloadURL(fileRef);
+
+      await addDoc(collection(db, `${stagedAccess}files`), {
+        fileName: stagedName,
+        fileType: stagedFile.type || 'unknown',
+        fileSize: stagedFile.size,
+        downloadURL,
+        uid: user!.uid,
+        uploaderEmail: user!.email || 'user',
+        uploaderRole: userRole || 'user',
+        createdAt: serverTimestamp()
+      });
+
+      setUploadModal(false);
+      setStagedFile(null);
+      setStagedName('');
+      setActiveFolder(stagedAccess);
+    } catch (err: any) {
+      console.error(err);
+      alert(`Upload failed: ${err.message}`);
+    }
+    setIsUploading(false);
+  };
+
+  const executeDelete = async () => {
+    if (!confirmDelete) return;
+    setIsDeleting(true);
+    try {
+      try {
+        const fileRef = ref(storage, confirmDelete.url);
+        await deleteObject(fileRef);
+      } catch (err) {
+        console.warn("Storage item missing:", err);
+      }
+      await deleteDoc(doc(db, `${confirmDelete.prefix}files`, confirmDelete.id));
+      setRecords(prev => prev.filter(r => r._id !== confirmDelete.id));
+      setConfirmDelete(null);
+    } catch (e: any) {
+      alert(e.message);
+    }
+    setIsDeleting(false);
+  };
+
+  const executeRename = async () => {
+    if (!renameFile || !renameFile.name.trim()) { setRenameFile(null); return; }
+    const original = records.find(r => r._id === renameFile.id);
+    if (original && original.fileName === renameFile.name.trim()) { setRenameFile(null); return; }
+    setIsRenaming(true);
+    try {
+      await updateDoc(doc(db, `${renameFile.prefix}files`, renameFile.id), {
+        fileName: renameFile.name.trim()
+      });
+      setRecords(prev => prev.map(r => r._id === renameFile.id ? { ...r, fileName: renameFile.name.trim() } : r));
+      setRenameFile(null);
+    } catch (err: any) {
+      console.error('Rename failed:', err);
+    }
+    setIsRenaming(false);
+  };
+
+  const handleCopyLink = (url: string, id: string) => {
+    navigator.clipboard.writeText(url);
+    setCopiedLink(id);
+    setTimeout(() => setCopiedLink(null), 2000);
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const canEditFile = (rec: StorageRecord) => {
+    if (!user) return false;
+
+    // Shared folder (mem_): owner or admin (but admins can't delete other admins)
+    if (rec.accessPrefix === 'mem_') {
+      if (rec.uid === user.uid) return true;
+      if (userRole === 'admin') return rec.uploaderRole !== 'admin';
+      return false;
+    }
+
+    // Admin folder (admin_): strictly creator only
+    if (rec.accessPrefix === 'admin_') return rec.uid === user.uid;
+
+    // Public folder (pub_): strictly admins only
+    if (rec.accessPrefix === 'pub_') return userRole === 'admin';
+
+    // Private (user_): owner or admin (if viewing others)
+    return rec.uid === user.uid || userRole === 'admin';
+  };
+
+  const renderIcon = (type: string, url: string, big = false) => {
+    const sizeClasses = big ? "w-16 h-16" : "w-10 h-10";
+    const iconSize = big ? "w-8 h-8" : "w-5 h-5";
+
+    if (type.startsWith('image/')) {
+      if (big) return <img src={url} alt="preview" className="w-full h-full object-contain rounded-lg" />;
+      return <div className={`${sizeClasses} bg-cover bg-center rounded-lg`} style={{ backgroundImage: `url(${url})` }} />;
+    }
+    if (type.includes('video') || type.includes('audio')) return <div className={`${sizeClasses} flex items-center justify-center bg-purple-500/10 text-purple-500 rounded-lg`}><Video className={iconSize} /></div>;
+    if (type.includes('pdf') || type.includes('word') || type.includes('text')) return <div className={`${sizeClasses} flex items-center justify-center bg-blue-500/10 text-blue-500 rounded-lg`}><FileText className={iconSize} /></div>;
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive')) return <div className={`${sizeClasses} flex items-center justify-center bg-yellow-500/10 text-yellow-500 rounded-lg`}><Archive className={iconSize} /></div>;
+    if (type.includes('html') || type.includes('csv') || type.includes('json')) return <div className={`${sizeClasses} flex items-center justify-center bg-emerald-500/10 text-emerald-500 rounded-lg`}><Code className={iconSize} /></div>;
+    return <div className={`${sizeClasses} flex items-center justify-center bg-foreground/5 text-foreground/40 rounded-lg`}><FileIcon className={iconSize} /></div>;
+  };
+
+  const folders = [
+    { id: 'user_', label: 'Private', icon: Lock, description: "This is a private folder availbale to all users in your app. Each user can see their own files. Admins can see all everyone's files here." },
+    { id: 'mem_', label: 'Shared', icon: UsersIcon, description: "This is a shared folder that all signed-in users can see. Every user can upload files here and view other member's files. However, editing and deletion are strictly restricted to the original creator of the file." },
+    { id: 'pub_', label: 'Public', icon: Globe, description: "This admin-only folder is for assets like logos, banners, or favicons. Files here are view-only for everyone; only admins can upload or delete them." },
+    { id: 'admin_', label: 'Admin Shared', icon: Shield, description: "This is a shared folder for app administrators. Admins can view everything here, but they can only edit or delete files that they themselves uploaded." },
+    { id: 'users_', label: 'User Uploads', icon: Database, description: "View all underlying private user uploads securely. Select a user to explore their files." }
+  ];
+
+  const visibleFolders = folders.filter(f => {
+    if (userRole === 'admin') return true;
+    return f.id === 'user_' || f.id === 'mem_';
+  });
+
+  let activeRecords = [];
+  if (activeFolder === 'users_') {
+    activeRecords = records.filter(r => r.accessPrefix === 'user_' && r.uid === targetUserId);
+  } else if (activeFolder === 'user_') {
+    activeRecords = records.filter(r => r.accessPrefix === 'user_' && r.uid === user?.uid);
+  } else {
+    activeRecords = records.filter(r => r.accessPrefix === activeFolder);
+  }
+
+  const currentFolderObj = visibleFolders.find(f => f.id === activeFolder);
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 flex flex-col pt-12 min-h-screen relative overflow-visible">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">Drive</h1>
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />
+            /drive
+          </div>
+        </div>
+      </motion.div>
+
+      <div 
+        className="flex flex-col gap-6 flex-1 pb-16"
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={onGlobalDrop}
+      >
+        <DashboardNav />
+
+        <div className="flex flex-col md:flex-row glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl min-h-[600px] bg-background">
+
+          {/* Sidebar Navigation */}
+          <div className="md:w-[280px] border-b md:border-b-0 md:border-r border-[var(--panel-border)] bg-foreground/[0.01] p-4 flex flex-col shrink-0 overflow-y-auto hide-scrollbar">
+            <div className="text-[11px] font-extrabold text-foreground/40 uppercase tracking-widest pl-4 mb-4 mt-2">Locations</div>
+            <div className="flex flex-col gap-2">
+              {visibleFolders.map(folder => (
+                <button
+                  key={folder.id}
+                  onClick={() => setActiveFolder(folder.id as any)}
+                  className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-2xl transition-all font-bold text-[14px] text-left ${activeFolder === folder.id
+                    ? 'bg-accent/15 text-accent shadow-sm border border-accent/20'
+                    : 'text-foreground/70 hover:bg-foreground/5 hover:text-foreground border border-transparent'
+                    }`}
+                >
+                  <folder.icon className={`w-5 h-5 ${activeFolder === folder.id ? 'text-accent' : 'text-foreground/40'}`} />
+                  {folder.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Active Folder Viewer */}
+          <div className="flex-1 flex flex-col relative w-full h-full min-w-0">
+
+            {/* Folder Header & Upload Action */}
+            <div className="p-6 md:p-8 flex items-start justify-between gap-6 shrink-0 border-b border-[var(--panel-border)]/50 bg-background/50">
+              <div className="flex-1 max-w-xl">
+                <h2 className="text-2xl font-extrabold text-foreground tracking-tight flex items-center gap-3">
+                  {currentFolderObj?.label}
+                </h2>
+                <p className="text-[13px] mt-3 text-foreground/60 leading-relaxed font-medium">
+                  {currentFolderObj?.description}
+                </p>
+              </div>
+
+              {activeFolder !== 'users_' && (
+                <Button onClick={() => { setStagedAccess(activeFolder); setUploadModal(true); }} className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-[13px] font-bold shadow-md hover:shadow-lg transition-all glow-hover border-transparent !border-0 outline-none ring-0">
+                  <Plus className="w-4 h-4" /> Add File Here
+                </Button>
+              )}
+            </div>
+
+            {/* Grid content */}
+            <div className="p-6 md:p-8 flex-1 overflow-y-auto relative min-h-[300px]">
+              {loading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-sm rounded-b-[2rem]">
+                  <Loader2 className="w-8 h-8 text-accent animate-spin" />
+                </div>
+              )}
+
+              {activeFolder === 'users_' && !targetUserId ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-20">
+                  {allUsers.map((u: any) => (
+                    <div
+                      key={u.id}
+                      onClick={() => navigate(`/drive/users/${u.id}`)}
+                      className="flex items-center gap-4 bg-background border border-[var(--panel-border)] p-5 rounded-2xl cursor-pointer hover:border-accent/50 hover:shadow-md transition-all group"
+                    >
+                      <div className="w-12 h-12 rounded-full bg-foreground/5 flex items-center justify-center shrink-0 border border-[var(--panel-border)]">
+                        {u.photoURL ? <img src={u.photoURL} alt="avatar" className="w-full h-full rounded-full object-cover" /> : <UserIcon className="w-5 h-5 text-foreground/40" />}
+                      </div>
+                      <div className="flex flex-col min-w-0">
+                        <span className="font-bold text-foreground truncate group-hover:text-accent transition-colors text-[14px]">{u.firstName} {u.lastName}</span>
+                        <span className="text-[12px] font-medium text-foreground/50 truncate mt-0.5">{u.email}</span>
+                      </div>
+                    </div>
+                  ))}
+                  {allUsers.length === 0 && (
+                    <div className="col-span-full py-12 flex flex-col items-center justify-center text-center">
+                      <UserIcon className="w-12 h-12 text-foreground/10 mb-4" />
+                      <p className="text-[15px] font-bold text-foreground/50">No users found</p>
+                    </div>
+                  )}
+                </div>
+              ) : activeRecords.length > 0 ? (
+                <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-20">
+                  {activeRecords.map(rec => (
+                    <div key={rec._id} className="flex flex-col bg-background border border-[var(--panel-border)] rounded-2xl hover:border-accent/40 transition-all group overflow-hidden shadow-sm hover:shadow-md h-[190px] relative">
+                      {/* Context Actions */}
+                      <div className="absolute top-2 right-2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/90 backdrop-blur-md rounded-lg p-1 border border-[var(--panel-border)] shadow-xl">
+                        <a href={rec.downloadURL} download target="_blank" rel="noreferrer" className="p-1.5 hover:bg-foreground/5 rounded-md text-foreground/60 hover:text-blue-500 transition-colors" title="Download"><Download className="w-4 h-4" /></a>
+                        <button onClick={(e) => { e.stopPropagation(); handleCopyLink(rec.accessPrefix === 'pub_' ? rec.downloadURL : `${window.location.origin}/drive/${prefixToFolderName[rec.accessPrefix]}/${rec._id}`, rec._id); }} className="p-1.5 hover:bg-foreground/5 rounded-md text-foreground/60 hover:text-emerald-500 transition-colors" title="Copy Link">
+                          {copiedLink === rec._id ? <Check className="w-4 h-4 text-emerald-500" /> : <Link className="w-4 h-4" />}
+                        </button>
+                        {canEditFile(rec) && (
+                          <>
+                            <button onClick={(e) => { e.stopPropagation(); setRenameFile({ id: rec._id, name: rec.fileName, prefix: rec.accessPrefix }); }} className="p-1.5 hover:bg-foreground/5 rounded-md text-foreground/60 hover:text-purple-500 transition-colors" title="Rename"><Edit2 className="w-4 h-4" /></button>
+                            <button onClick={(e) => { e.stopPropagation(); setConfirmDelete({ id: rec._id, url: rec.downloadURL, name: rec.fileName, prefix: rec.accessPrefix }); }} className="p-1.5 hover:bg-red-500/10 rounded-md text-foreground/60 hover:text-red-500 transition-colors" title="Delete"><Trash2 className="w-4 h-4" /></button>
+                          </>
+                        )}
+                      </div>
+
+                      <div
+                        className="h-[120px] w-full border-b border-[var(--panel-border)]/50 bg-foreground/[0.02] flex items-center justify-center overflow-hidden relative cursor-pointer rounded-t-[calc(1rem-1px)]"
+                        onClick={() => setPreviewFile(rec)}
+                      >
+                        {rec.fileType.startsWith('image/') ? (
+                          <>
+                            {loadingImages[rec._id] !== false && (
+                              <div className="absolute inset-0 flex items-center justify-center bg-accent/5 backdrop-blur-sm z-0">
+                                <Loader2 className="w-5 h-5 text-accent animate-spin" />
+                              </div>
+                            )}
+                            <img
+                              src={rec.downloadURL}
+                              alt=""
+                              className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 group-hover:scale-105 ${loadingImages[rec._id] === false ? 'opacity-100' : 'opacity-0'}`}
+                              onLoad={() => setLoadingImages(prev => ({ ...prev, [rec._id]: false }))}
+                              onError={() => setLoadingImages(prev => ({ ...prev, [rec._id]: false }))}
+                            />
+                          </>
+                        ) : (
+                          renderIcon(rec.fileType, rec.downloadURL, true)
+                        )}
+                      </div>
+                      <div className="p-3 flex flex-col justify-center flex-1 min-w-0" onClick={() => !renameFile && setPreviewFile(rec)}>
+                        {renameFile?.id === rec._id ? (
+                          <input
+                            autoFocus
+                            type="text"
+                            value={renameFile.name}
+                            onChange={e => setRenameFile({ ...renameFile, name: e.target.value })}
+                            onBlur={() => executeRename()}
+                            onKeyDown={e => { if (e.key === 'Enter') executeRename(); if (e.key === 'Escape') setRenameFile(null); }}
+                            onClick={e => e.stopPropagation()}
+                            className="text-[12.5px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full"
+                          />
+                        ) : (
+                          <span className="text-[12.5px] font-bold text-foreground truncate select-none group-hover:text-accent transition-colors" title={rec.fileName}>{rec.fileName}</span>
+                        )}
+                        <span className="text-[11px] text-foreground/40 font-bold uppercase tracking-wider mt-1 select-none">{formatSize(rec.fileSize)}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                !loading && (
+                  <div
+                    onDragOver={e => e.preventDefault()}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                        const file = e.dataTransfer.files[0];
+                        setStagedFile(file);
+                        setStagedName(file.name);
+                        setStagedAccess(activeFolder);
+                        setUploadModal(true);
+                      }
+                    }}
+                    onClick={() => { setStagedAccess(activeFolder); setUploadModal(true); }}
+                    className="absolute inset-0 m-6 flex flex-col items-center justify-center text-foreground/40 transition-colors cursor-pointer group"
+                  >
+                    <p className="text-[20px] font-bold text-foreground/50 group-hover:text-foreground/70 transition-colors">Folder is empty</p>
+                    <p className="text-[13px] font-medium mt-1 text-foreground/40 group-hover:text-foreground/60 transition-colors">Click here or drag and drop a file to upload</p>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {uploadModal && (
+          <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+            <motion.div onClick={() => !isUploading && setUploadModal(false)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/80 backdrop-blur-xl cursor-pointer" />
+            <motion.div initial={{ opacity: 0, scale: 0.95, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 10 }} className="w-full max-w-[480px] border-[var(--panel-border)] border rounded-3xl relative z-10 glass-panel shadow-2xl flex flex-col bg-background">
+
+              <div className="flex items-center justify-between p-6 border-b border-[var(--panel-border)]/50 relative z-20">
+                <div className="relative">
+                  <button onClick={() => setShowLocationDropdown(!showLocationDropdown)} className="flex items-center gap-2 group outline-none">
+                    <span className="text-[16px] font-extrabold text-foreground tracking-tight">Upload to</span>
+                    <span className="bg-accent/10 group-hover:bg-accent/20 text-accent px-2 py-1 rounded-md text-[13px] font-bold transition-colors flex items-center gap-1 shadow-sm">
+                      {visibleFolders.find(f => f.id === stagedAccess)?.label}
+                    </span>
+                  </button>
+
+                  <AnimatePresence>
+                    {showLocationDropdown && (
+                      <React.Fragment>
+                        <div className="fixed inset-0 z-[90]" onClick={() => setShowLocationDropdown(false)} />
+                        <motion.div initial={{ opacity: 0, y: -5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -5 }} className="absolute top-full left-0 mt-3 w-48 bg-background border border-[var(--panel-border)] rounded-xl shadow-2xl py-1 overflow-hidden z-[100]">
+                          {visibleFolders.map(f => (
+                            <button
+                              key={f.id}
+                              type="button"
+                              onClick={() => { setStagedAccess(f.id as any); setShowLocationDropdown(false); }}
+                              className="w-full text-left px-4 py-3 hover:bg-foreground/5 text-[13px] font-bold text-foreground flex items-center gap-3 transition-colors outline-none"
+                            >
+                              <f.icon className="w-4 h-4 text-foreground/50" />
+                              {f.label}
+                            </button>
+                          ))}
+                        </motion.div>
+                      </React.Fragment>
+                    )}
+                  </AnimatePresence>
+                </div>
+                <button onClick={() => !isUploading && setUploadModal(false)} className="text-foreground/40 hover:text-foreground transition-colors"><X className="w-5 h-5" /></button>
+              </div>
+
+              {!stagedFile ? (
+                <div
+                  onDragOver={e => e.preventDefault()}
+                  onDrop={handleDrop}
+                  className="p-12 flex flex-col items-center justify-center rounded-b-[2rem]"
+                >
+                  <div className="w-20 h-20 rounded-full bg-foreground/5 flex items-center justify-center mb-5 border-2 border-dashed border-[var(--panel-border)]">
+                    <UploadCloud className="w-8 h-8 text-foreground/40" />
+                  </div>
+                  <p className="text-[15px] font-bold text-foreground mb-1">Drag and drop file here</p>
+                  <p className="text-[13px] text-foreground/50 font-medium mb-8">or click to browse local files</p>
+                  <input type="file" ref={fileInputRef} onChange={handleSelectFile} className="hidden" />
+                  <Button onClick={() => fileInputRef.current?.click()} className="px-8 py-3 rounded-full font-bold shadow-md bg-accent text-white hover:bg-accent/90 transition-colors">Browse Files</Button>
+                </div>
+              ) : (
+                <form onSubmit={handleSaveUpload} className="p-6 flex flex-col gap-6 relative z-10 rounded-b-[2rem]">
+                  <div className="flex items-center gap-4 bg-foreground/[0.03] p-4 rounded-2xl border border-[var(--panel-border)] shadow-sm">
+                    {renderIcon(stagedFile.type, URL.createObjectURL(stagedFile))}
+                    <div className="flex flex-col flex-1 min-w-0 pr-4">
+                      <span className="text-[13px] font-bold text-foreground truncate">{stagedFile.name}</span>
+                      <span className="text-[11px] text-foreground/50 font-bold uppercase tracking-wider mt-1">{formatSize(stagedFile.size)}</span>
+                    </div>
+                    <button type="button" onClick={() => !isUploading && setStagedFile(null)} className="w-8 h-8 flex items-center justify-center text-foreground/40 hover:text-red-500 rounded-xl hover:bg-red-500/10 transition-colors shrink-0"><Trash2 className="w-4 h-4" /></button>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <label className="text-[11px] font-bold text-foreground/50 uppercase tracking-widest pl-1">Edit File Name</label>
+                    <input
+                      type="text"
+                      required
+                      value={stagedName}
+                      onChange={e => setStagedName(e.target.value)}
+                      disabled={isUploading}
+                      className="w-full bg-foreground/[0.02] border border-[var(--panel-border)] rounded-xl px-4 py-3.5 text-[14px] font-bold text-foreground outline-none focus:border-accent transition-colors shadow-sm"
+                    />
+                  </div>
+
+                  <div className="flex justify-end pt-4 mt-2 border-t border-[var(--panel-border)]/50">
+                    <Button type="submit" isLoading={isUploading} className="w-full py-4 rounded-xl text-[14px] font-bold shadow-lg">
+                      {isUploading ? 'Uploading to Drive...' : `Save to ${visibleFolders.find(f => f.id === stagedAccess)?.label}`}
+                    </Button>
+                  </div>
+                </form>
+              )}
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {typeof window !== 'undefined' && createPortal(
+        <AnimatePresence>
+          {previewFile && (
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-12">
+              <motion.div onClick={() => setPreviewFile(null)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/95 backdrop-blur-xl cursor-pointer" />
+
+              <button onClick={() => setPreviewFile(null)} className="absolute top-6 right-6 z-[160] w-12 h-12 bg-foreground/10 hover:bg-foreground/20 text-foreground rounded-full flex items-center justify-center backdrop-blur-md transition-all cursor-pointer">
+                <X className="w-5 h-5" />
+              </button>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 10 }} className="relative z-10 w-full max-w-6xl max-h-[85vh] flex flex-col pointer-events-auto shadow-2xl rounded-3xl overflow-hidden glass-panel border border-[var(--panel-border)]">
+                <div className="flex items-center justify-between p-6 bg-background/80 backdrop-blur-md border-b border-[var(--panel-border)] shrink-0 shadow-sm z-20">
+                  <div className="flex flex-col min-w-0 pr-4">
+                    <span className="text-xl font-extrabold text-foreground truncate">{previewFile.fileName}</span>
+                    <span className="text-[12px] text-foreground/70 font-bold uppercase tracking-wider mt-1">
+                      {previewFile.fileType} • {formatSize(previewFile.fileSize)}
+                      {previewFile.accessPrefix === 'mem_' && (previewFile.uploaderEmail || previewFile.uid) && ` • From: ${previewFile.uploaderEmail || previewFile.uid}`}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <button onClick={() => handleCopyLink(previewFile.accessPrefix === 'pub_' ? previewFile.downloadURL : `${window.location.origin}/drive/${prefixToFolderName[previewFile.accessPrefix]}/${previewFile._id}`, previewFile._id)} className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 transition-colors rounded-xl shadow-sm hover:text-emerald-500" title="Copy Link">
+                      {copiedLink === previewFile._id ? <Check className="w-4 h-4 text-emerald-500" /> : <Link className="w-4 h-4" />}
+                    </button>
+                    {canEditFile(previewFile) && (
+                      <>
+                        <button onClick={() => { setPreviewFile(null); setRenameFile({ id: previewFile._id, name: previewFile.fileName, prefix: previewFile.accessPrefix }); }} className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 hover:text-purple-500 transition-colors rounded-xl shadow-sm" title="Rename">
+                          <Edit2 className="w-4 h-4" />
+                        </button>
+                        <button onClick={() => { setPreviewFile(null); setConfirmDelete({ id: previewFile._id, url: previewFile.downloadURL, name: previewFile.fileName, prefix: previewFile.accessPrefix }); }} className="p-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-500 transition-colors rounded-xl shadow-sm" title="Delete">
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </>
+                    )}
+                    <a href={previewFile.downloadURL} download target="_blank" rel="noreferrer" className="p-2.5 bg-accent text-white hover:bg-accent/90 transition-colors rounded-xl shadow-lg ml-1" title="Download">
+                      <Download className="w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex-1 w-full relative bg-foreground/[0.02] min-h-[50vh] md:min-h-[600px]" onClick={() => setPreviewFile(null)}>
+                  <div className="absolute inset-x-4 inset-y-8 md:inset-x-12 md:inset-y-12 flex items-center justify-center">
+                    {previewLoading && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded-lg z-50 pointer-events-none fade-in">
+                        <div className="w-12 h-12 rounded-full bg-background/80 backdrop-blur-md shadow-xl flex items-center justify-center border border-[var(--panel-border)]/50">
+                          <Loader2 className="w-5 h-5 text-accent animate-spin" />
+                        </div>
+                      </div>
+                    )}
+                    {previewFile.fileType.startsWith('image/') ? (
+                      <img onLoad={() => setPreviewLoading(false)} src={previewFile.downloadURL} alt={previewFile.fileName} className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full object-contain drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] rounded-lg pointer-events-auto transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`} onClick={e => e.stopPropagation()} />
+                    ) : previewFile.fileType.startsWith('video/') ? (
+                      <video onLoadedData={() => setPreviewLoading(false)} src={previewFile.downloadURL} controls autoPlay className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full outline-none bg-black/40 rounded-lg pointer-events-auto drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`} onClick={e => e.stopPropagation()} />
+                    ) : previewFile.fileType === 'application/pdf' ? (
+                      <iframe onLoad={() => setPreviewLoading(false)} src={previewFile.downloadURL} className={`w-full h-full border-none bg-white rounded-lg relative z-10 transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`} title="PDF Preview" />
+                    ) : (
+                      <div className="w-full h-full flex flex-col items-center justify-center text-foreground/40 text-center relative z-10" onClick={e => { e.stopPropagation(); setPreviewLoading(false); }}>
+                        <FileIcon className="w-24 h-24 mb-6 opacity-40 drop-shadow-sm" />
+                        <span className="text-[20px] font-extrabold text-foreground">Preview Unavailable</span>
+                        <span className="text-[14px] mt-2 text-foreground/60 font-medium max-w-xs">This file format cannot be previewed. Please download it instead.</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+
+      <AnimatePresence>
+        {showNotFound && (
+          <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/90 backdrop-blur-xl" />
+            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="relative z-10 w-full max-w-sm flex flex-col items-center pointer-events-auto shadow-2xl rounded-3xl overflow-hidden glass-panel border border-red-500/20 bg-background/80 p-8 text-center">
+              <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-6">
+                <X className="w-8 h-8 text-red-500" />
+              </div>
+              <h3 className="text-xl font-bold text-foreground mb-2">Access Denied</h3>
+              <p className="text-[14px] text-foreground/60 font-medium leading-relaxed">You don't have access to this file, or it may have been deleted.</p>
+              <div className="w-5 h-5 border-2 border-accent/20 border-t-accent rounded-full animate-spin mt-6" />
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+
+
+      <ConfirmModal
+        isOpen={!!confirmDelete}
+        title="Confirm Deletion"
+        message={<>Are you entirely sure you wish to delete <strong className="text-foreground truncate block my-0.5">{confirmDelete?.name}</strong> This action is permanent.</>}
+        onConfirm={executeDelete}
+        onCancel={() => setConfirmDelete(null)}
+        isProcessing={isDeleting}
+        confirmText="Yes, Delete"
+      />
+
+      <AnimatePresence>
+        {isDragging && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[1000] bg-background/60 backdrop-blur-md pointer-events-none flex items-center justify-center p-6"
+          >
+            <motion.div 
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              className="w-full max-w-lg aspect-video bg-background/80 border-2 border-dashed border-accent p-12 rounded-[40px] shadow-2xl flex flex-col items-center justify-center gap-6 relative"
+            >
+              <div className="absolute inset-0 bg-accent/5 rounded-[38px] animate-pulse" />
+              <div className="w-20 h-20 rounded-full bg-accent/10 flex items-center justify-center text-accent shadow-[0_0_40px_rgba(var(--accent-rgb),0.2)]">
+                 <UploadCloud className="w-10 h-10 animate-bounce" />
+              </div>
+              <div className="flex flex-col items-center text-center gap-2 relative z-10">
+                <span className="text-[24px] font-extrabold text-foreground tracking-tight">Drop files to upload</span>
+                <span className="text-[14px] font-medium text-foreground/50">Your files will be staged for review</span>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </main>
+  );
+}