'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { 
  Folder, 
  File, 
  FolderPlus, 
  Upload, 
  Trash2, 
  Edit2,
  Download,
  Share2,
  Eye,
  EyeOff,
  Lock,
  Unlock,
  Globe,
  Shield,
  AlertCircle,
  MoreVertical,
  ChevronRight,
  ChevronDown,
  Search,
  Grid,
  List,
  Copy,
  X
} from 'lucide-react';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
} from '@/components/ui/context-menu';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
import { useToast } from '@/hooks/use-toast';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { cn } from '@/lib/utils';
import { useSession } from 'next-auth/react';
import {
  Dropzone,
  DropzoneDescription,
  DropzoneInput,
  DropzoneTitle,
  DropzoneUploadIcon,
  DropzoneZone,
} from "@/components/ui/dropzone";
import {
  FileList,
  FileListAction,
  FileListDescription,
  FileListHeader,
  FileListIcon,
  FileListInfo,
  FileListItem,
  FileListName,
  FileListSize,
} from "@/components/ui/file-list";
import { decryptWithServerAction } from '@/components/drm/drmUtils';
import { Progress } from '@/components/ui/progress';

interface FileItem {
  id: string;
  name: string;
  type: 'file' | 'folder';
  size?: number;
  mimeType?: string;
  category: 'public' | 'restricted' | 'confidential' | 'internal';
  externalAccessLevel?: 'view_only' | 'view_download' | 'full_access';
  updatedAt: Date;
  permissions?: {
    canView: boolean;
    canDownload: boolean;
    canEdit: boolean;
    canDelete: boolean;
  };
  downloadCount?: number;
  viewCount?: number;
  parentId?: string | null;
  children?: FileItem[];
}

interface UploadingFile {
  file: File;
  progress: number;
  status: 'pending' | 'uploading' | 'processing' | 'completed' | 'error';
  error?: string;
}

interface FileManagerProps {
  projectId: string;
}

// 카테고리별 아이콘과 색상
const categoryConfig = {
  public: { icon: Globe, color: 'text-green-500', label: '공개' },
  restricted: { icon: Eye, color: 'text-yellow-500', label: '제한' },
  confidential: { icon: Lock, color: 'text-red-500', label: '기밀' },
  internal: { icon: Shield, color: 'text-blue-500', label: '내부' },
};

// Tree Item Component
const TreeItem: React.FC<{
  item: FileItem;
  level: number;
  expandedFolders: Set<string>;
  selectedItems: Set<string>;
  onToggleExpand: (id: string) => void;
  onSelectItem: (id: string) => void;
  onDoubleClick: (item: FileItem) => void;
  onDownload: (item: FileItem) => void;
  onDownloadFolder: (item: FileItem) => void;
  onDelete: (ids: string[]) => void;
  onShare: (item: FileItem) => void;
  onRename: (item: FileItem) => void;
  isInternalUser: boolean;
}> = ({ 
  item, 
  level, 
  expandedFolders, 
  selectedItems, 
  onToggleExpand, 
  onSelectItem,
  onDoubleClick,
  onDownload,
  onDownloadFolder,
  onDelete,
  onShare,
  onRename,
  isInternalUser 
}) => {
  const hasChildren = item.type === 'folder' && item.children && item.children.length > 0;
  const isExpanded = expandedFolders.has(item.id);
  const isSelected = selectedItems.has(item.id);
  const CategoryIcon = categoryConfig[item.category].icon;
  const categoryColor = categoryConfig[item.category].color;
  const categoryLabel = categoryConfig[item.category].label;

  const formatFileSize = (bytes?: number) => {
    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]}`;
  };

  return (
    <>
      <div
        className={cn(
          "flex items-center p-2 rounded-lg cursor-pointer transition-colors",
          "hover:bg-accent",
          isSelected && "bg-accent"
        )}
        style={{ paddingLeft: `${level * 24 + 8}px` }}
        onClick={() => onSelectItem(item.id)}
        onDoubleClick={() => onDoubleClick(item)}
      >
        <div className="flex items-center mr-2">
          {item.type === 'folder' && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                onToggleExpand(item.id);
              }}
              className="p-0.5 hover:bg-gray-200 rounded"
            >
              {isExpanded ? (
                <ChevronDown className="h-4 w-4" />
              ) : (
                <ChevronRight className="h-4 w-4" />
              )}
            </button>
          )}
          {item.type === 'file' && (
            <div className="w-5" />
          )}
        </div>
        
        {item.type === 'folder' ? (
          <Folder className="h-5 w-5 text-blue-500 mr-2" />
        ) : (
          <File className="h-5 w-5 text-gray-500 mr-2" />
        )}
        
        <span className="flex-1">{item.name}</span>
        
        <Badge variant="outline" className="mr-2">
          <CategoryIcon className={cn("h-3 w-3 mr-1", categoryColor)} />
          {categoryLabel}
        </Badge>
        
        <span className="text-sm text-muted-foreground mr-4">
          {formatFileSize(item.size)}
        </span>
        <span className="text-sm text-muted-foreground mr-2">
          {new Date(item.updatedAt).toLocaleDateString()}
        </span>
        
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm">
              <MoreVertical className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            {item.type === 'file' && item.permissions?.canDownload && (
              <DropdownMenuItem onClick={() => onDownload(item)}>
                <Download className="h-4 w-4 mr-2" />
                다운로드
              </DropdownMenuItem>
            )}
            
            {item.type === 'folder' && (
              <DropdownMenuItem onClick={() => onDownloadFolder(item)}>
                <Download className="h-4 w-4 mr-2" />
                폴더 전체 다운로드
              </DropdownMenuItem>
            )}
            
            {isInternalUser && (
              <>
                <DropdownMenuItem onClick={() => onShare(item)}>
                  <Share2 className="h-4 w-4 mr-2" />
                  공유
                </DropdownMenuItem>
                
                {item.permissions?.canEdit && (
                  <DropdownMenuItem onClick={() => onRename(item)}>
                    <Edit2 className="h-4 w-4 mr-2" />
                    이름 변경
                  </DropdownMenuItem>
                )}
              </>
            )}
            
            {item.permissions?.canDelete && (
              <>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  className="text-destructive"
                  onClick={() => onDelete([item.id])}
                >
                  <Trash2 className="h-4 w-4 mr-2" />
                  삭제
                </DropdownMenuItem>
              </>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      
      {item.type === 'folder' && isExpanded && item.children && (
        <div>
          {item.children.map((child) => (
            <TreeItem
              key={child.id}
              item={child}
              level={level + 1}
              expandedFolders={expandedFolders}
              selectedItems={selectedItems}
              onToggleExpand={onToggleExpand}
              onSelectItem={onSelectItem}
              onDoubleClick={onDoubleClick}
              onDownload={onDownload}
              onDownloadFolder={onDownloadFolder}
              onDelete={onDelete}
              onShare={onShare}
              onRename={onRename}
              isInternalUser={isInternalUser}
            />
          ))}
        </div>
      )}
    </>
  );
};

export function FileManager({ projectId }: FileManagerProps) {
  const { data: session } = useSession();
  const [items, setItems] = useState<FileItem[]>([]);
  const [treeItems, setTreeItems] = useState<FileItem[]>([]);
  const [currentPath, setCurrentPath] = useState<string[]>([]);
  const [currentParentId, setCurrentParentId] = useState<string | null>(null);
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('list');
  const [searchQuery, setSearchQuery] = useState('');
  const [loading, setLoading] = useState(false);
  
  // 업로드 상태
  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
  const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
  const [uploadCategory, setUploadCategory] = useState<string>('confidential');
  
  // 다이얼로그 상태
  const [folderDialogOpen, setFolderDialogOpen] = useState(false);
  const [shareDialogOpen, setShareDialogOpen] = useState(false);
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
  
  // 다이얼로그 데이터
  const [dialogValue, setDialogValue] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string>('confidential');
  const [selectedFile, setSelectedFile] = useState<FileItem | null>(null);
  const [shareSettings, setShareSettings] = useState({
    accessLevel: 'view_only',
    password: '',
    expiresAt: '',
    maxDownloads: '',
  });
  
  const { toast } = useToast();

  // 사용자가 내부 사용자인지 확인
  const isInternalUser = session?.user?.domain !== 'partners';

  // 트리 구조 생성 함수
  const buildTree = (flatItems: FileItem[]): FileItem[] => {
    const itemMap = new Map<string, FileItem>();
    const rootItems: FileItem[] = [];
    
    // 모든 아이템을 맵에 저장 (children 초기화)
    flatItems.forEach(item => {
      itemMap.set(item.id, { ...item, children: [] });
    });
    
    // 부모-자식 관계 설정
    flatItems.forEach(item => {
      const mappedItem = itemMap.get(item.id)!;
      
      if (!item.parentId) {
        // parentId가 없으면 루트 아이템
        rootItems.push(mappedItem);
      } else {
        // parentId가 있으면 부모의 children에 추가
        const parent = itemMap.get(item.parentId);
        if (parent) {
          if (!parent.children) parent.children = [];
          parent.children.push(mappedItem);
        } else {
          // 부모를 찾을 수 없으면 루트로 처리
          rootItems.push(mappedItem);
        }
      }
    });
    
    return rootItems;
  };

  // 파일 목록 가져오기
  const fetchItems = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      
      // 트리 뷰일 때는 전체 목록을 가져옴
      if (viewMode === 'list') {
        params.append('viewMode', 'tree');
        // 트리 뷰에서도 현재 경로 정보는 유지 (하이라이팅 등에 사용)
        if (currentParentId) params.append('currentParentId', currentParentId);
      } else {
        // 그리드 뷰일 때는 현재 폴더의 내용만 가져옴
        if (currentParentId) params.append('parentId', currentParentId);
      }
      
      const response = await fetch(`/api/data-room/${projectId}?${params}`);
      if (!response.ok) throw new Error('Failed to fetch files');
      
      const data = await response.json();
      setItems(data);
      
      // 트리 구조 생성
      if (viewMode === 'list') {
        const tree = buildTree(data);
        setTreeItems(tree);
      }
    } catch (error) {
      toast({
        title: '오류',
        description: '파일을 불러오는데 실패했습니다.',
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  }, [projectId, currentParentId, viewMode, toast]);

  useEffect(() => {
    fetchItems();
  }, [fetchItems]);

  // 폴더 생성
  const createFolder = async () => {
    try {
      const response = await fetch(`/api/data-room/${projectId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: dialogValue,
          type: 'folder',
          category: selectedCategory,
          parentId: currentParentId,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || 'Failed to create folder');
      }

      await fetchItems();
      setFolderDialogOpen(false);
      setDialogValue('');
      
      toast({
        title: '성공',
        description: '폴더가 생성되었습니다.',
      });
    } catch (error: any) {
      toast({
        title: '오류',
        description: error.message || '폴더 생성에 실패했습니다.',
        variant: 'destructive',
      });
    }
  };

  // 파일 업로드 처리
  const handleFileUpload = async (files: FileList | File[]) => {
    const fileArray = Array.from(files);
    
    // 업로드 파일 목록 초기화
    const newUploadingFiles: UploadingFile[] = fileArray.map(file => ({
      file,
      progress: 0,
      status: 'pending' as const
    }));
    
    setUploadingFiles(newUploadingFiles);
    
    // 각 파일 업로드 처리
    for (let i = 0; i < fileArray.length; i++) {
      const file = fileArray[i];
      
      try {
        // 상태 업데이트: 업로드 중
        setUploadingFiles(prev => prev.map((f, idx) => 
          idx === i ? { ...f, status: 'uploading', progress: 20 } : f
        ));

        // DRM 복호화
        setUploadingFiles(prev => prev.map((f, idx) => 
          idx === i ? { ...f, status: 'processing', progress: 40 } : f
        ));
        
        const decryptedData = await decryptWithServerAction(file);
        
        // FormData 생성
        const formData = new FormData();
        const blob = new Blob([decryptedData], { type: file.type });
        formData.append('file', blob, file.name);
        formData.append('category', uploadCategory);
        formData.append('fileSize', file.size.toString()); // 파일 크기 전달
        if (currentParentId) {
          formData.append('parentId', currentParentId);
        }
        
        // 업로드 진행률 업데이트
        setUploadingFiles(prev => prev.map((f, idx) => 
          idx === i ? { ...f, progress: 60 } : f
        ));

        // API 호출
        const response = await fetch(`/api/data-room/${projectId}/upload`, {
          method: 'POST',
          body: formData,
        });

        if (!response.ok) {
          const error = await response.json();
          throw new Error(error.error || 'Upload failed');
        }
        
        // 성공
        setUploadingFiles(prev => prev.map((f, idx) => 
          idx === i ? { ...f, status: 'completed', progress: 100 } : f
        ));
        
      } catch (error: any) {
        // 실패
        setUploadingFiles(prev => prev.map((f, idx) => 
          idx === i ? { 
            ...f, 
            status: 'error', 
            error: error.message || '업로드 실패'
          } : f
        ));
      }
    }
    
    // 모든 업로드 완료 후 목록 새로고침
    await fetchItems();
    
    // 성공한 파일이 있으면 토스트 표시
    const successCount = newUploadingFiles.filter(f => f.status === 'completed').length;
    if (successCount > 0) {
      toast({
        title: '업로드 완료',
        description: `${successCount}개 파일이 업로드되었습니다.`,
      });
    }
  };

  // 폴더 다운로드
  const downloadFolder = async (folder: FileItem) => {
    if (folder.type !== 'folder') return;
    
    try {
      toast({
        title: '권한 확인 중',
        description: '폴더 내 파일들의 다운로드 권한을 확인하고 있습니다...',
      });

      // 폴더 다운로드 API 호출
      const response = await fetch(`/api/data-room/${projectId}/download-folder/${folder.id}`, {
        method: 'GET',
      });
      
      if (!response.ok) {
        const error = await response.json();
        
        // 권한이 없는 파일이 있는 경우 상세 정보 제공
        if (error.unauthorizedFiles) {
          toast({
            title: '다운로드 권한 부족',
            description: `${error.unauthorizedFiles.length}개 파일에 대한 권한이 없습니다: ${error.unauthorizedFiles.join(', ')}`,
            variant: 'destructive',
          });
          return;
        }
        
        throw new Error(error.error || '폴더 다운로드 실패');
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      
      // 폴더명을 파일명에 포함
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
      const fileName = `${folder.name}_${timestamp}.zip`;
      
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      toast({
        title: '다운로드 완료',
        description: `${folder.name} 폴더가 다운로드되었습니다.`,
      });

    } catch (error: any) {
      toast({
        title: '오류',
        description: error.message || '폴더 다운로드에 실패했습니다.',
        variant: 'destructive',
      });
    }
  };

  // 파일 공유
  const shareFile = async () => {
    if (!selectedFile) return;

    try {
      const response = await fetch(`/api/data-room/${projectId}/share`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          fileId: selectedFile.id,
          ...shareSettings,
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to create share link');
      }

      const data = await response.json();
      
      // 공유 링크 복사
      await navigator.clipboard.writeText(data.shareUrl);
      
      toast({
        title: '공유 링크 생성됨',
        description: '링크가 클립보드에 복사되었습니다.',
      });
      
      setShareDialogOpen(false);
      setSelectedFile(null);
    } catch (error) {
      toast({
        title: '오류',
        description: '공유 링크 생성에 실패했습니다.',
        variant: 'destructive',
      });
    }
  };

  // 다중 파일 다운로드
  const downloadMultipleFiles = async (itemIds: string[]) => {
    // 선택된 파일들 중 실제 파일만 필터링 (폴더 제외)
    const filesToDownload = items.filter(item => 
      itemIds.includes(item.id) && 
      item.type === 'file' && 
      item.permissions?.canDownload
    );

    if (filesToDownload.length === 0) {
      toast({
        title: '알림',
        description: '다운로드 가능한 파일이 없습니다.',
        variant: 'default',
      });
      return;
    }

    // 단일 파일인 경우 일반 다운로드 사용
    if (filesToDownload.length === 1) {
      await downloadFile(filesToDownload[0]);
      return;
    }

    try {
      toast({
        title: '다운로드 준비 중',
        description: `${filesToDownload.length}개 파일을 압축하고 있습니다...`,
      });

      // 여러 파일 다운로드 API 호출
      const response = await fetch(`/api/data-room/${projectId}/download-multiple`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ fileIds: filesToDownload.map(f => f.id) })
      });
      
      if (!response.ok) {
        throw new Error('다운로드 실패');
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      
      // 현재 날짜시간을 파일명에 포함
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
      const fileName = `files_${timestamp}.zip`;
      
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      toast({
        title: '다운로드 완료',
        description: `${filesToDownload.length}개 파일이 다운로드되었습니다.`,
      });

    } catch (error) {
      console.error('다중 다운로드 오류:', error);
      
      // 실패 시 개별 다운로드 옵션 제공
      toast({
        title: '압축 다운로드 실패',
        description: '개별 다운로드를 시도하시겠습니까?',
        action: (
          <Button
            size="sm"
            variant="outline"
            onClick={() => {
              // 개별 다운로드 실행
              filesToDownload.forEach(async (file, index) => {
                // 다운로드 간격을 두어 브라우저 부하 감소
                setTimeout(() => downloadFile(file), index * 500);
              });
            }}
          >
            개별 다운로드
          </Button>
        ),
      });
    }
  };

  // 파일 다운로드
  const downloadFile = async (file: FileItem) => {
    try {
      const response = await fetch(`/api/data-room/${projectId}/${file.id}/download`);
      
      if (!response.ok) {
        throw new Error('Download failed');
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      
      const a = document.createElement('a');
      a.href = url;
      a.download = file.name;
      document.body.appendChild(a);
      a.click();
      
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      toast({
        title: '오류',
        description: '다운로드에 실패했습니다.',
        variant: 'destructive',
      });
    }
  };

  // 파일 삭제
  const deleteItems = async (itemIds: string[]) => {
    try {
      await Promise.all(
        itemIds.map(id =>
          fetch(`/api/data-room/${projectId}/${id}`, { method: 'DELETE' })
        )
      );

      await fetchItems();
      setSelectedItems(new Set());
      
      toast({
        title: '성공',
        description: '선택한 항목이 삭제되었습니다.',
      });
    } catch (error) {
      toast({
        title: '오류',
        description: '삭제에 실패했습니다.',
        variant: 'destructive',
      });
    }
  };

  // 폴더 더블클릭 처리
  const handleFolderOpen = (folder: FileItem) => {
    if (viewMode === 'grid') {
      setCurrentPath([...currentPath, folder.name]);
      setCurrentParentId(folder.id);
    } else {
      // 트리 뷰에서는 expand/collapse
      const newExpanded = new Set(expandedFolders);
      if (newExpanded.has(folder.id)) {
        newExpanded.delete(folder.id);
      } else {
        newExpanded.add(folder.id);
      }
      setExpandedFolders(newExpanded);
    }
    setSelectedItems(new Set());
  };

  // 폴더 확장 토글
  const toggleFolderExpand = (folderId: string) => {
    const newExpanded = new Set(expandedFolders);
    if (newExpanded.has(folderId)) {
      newExpanded.delete(folderId);
    } else {
      newExpanded.add(folderId);
    }
    setExpandedFolders(newExpanded);
  };

  // 아이템 선택
  const toggleItemSelection = (itemId: string) => {
    const newSelected = new Set(selectedItems);
    if (newSelected.has(itemId)) {
      newSelected.delete(itemId);
    } else {
      newSelected.add(itemId);
    }
    setSelectedItems(newSelected);
  };

  // 경로 탐색
  const navigateToPath = (index: number) => {
    if (index === -1) {
      setCurrentPath([]);
      setCurrentParentId(null);
    } else {
      setCurrentPath(currentPath.slice(0, index + 1));
      // parentId 업데이트 로직 필요
    }
  };

  // 필터링된 아이템
  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const filteredTreeItems = treeItems.filter(item =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // 파일 크기 포맷
  const formatFileSize = (bytes?: number) => {
    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]}`;
  };

  return (
    <div className="flex flex-col h-full">
      {/* 툴바 */}
      <div className="border-b p-4">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            {isInternalUser && (
              <>
                <Button
                  size="sm"
                  onClick={() => setFolderDialogOpen(true)}
                >
                  <FolderPlus className="h-4 w-4 mr-1" />
                  새 폴더
                </Button>
                <Button 
                  size="sm" 
                  variant="outline"
                  onClick={() => setUploadDialogOpen(true)}
                >
                  <Upload className="h-4 w-4 mr-1" />
                  업로드
                </Button>
              </>
            )}
            
            {selectedItems.size > 0 && (
              <>
                {/* 다중 다운로드 버튼 */}
                {items.filter(item => 
                  selectedItems.has(item.id) && 
                  item.type === 'file' && 
                  item.permissions?.canDownload
                ).length > 0 && (
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => downloadMultipleFiles(Array.from(selectedItems))}
                  >
                    <Download className="h-4 w-4 mr-1" />
                    다운로드 ({items.filter(item => 
                      selectedItems.has(item.id) && item.type === 'file'
                    ).length})
                  </Button>
                )}
                
                {/* 삭제 버튼 */}
                {items.find(item => selectedItems.has(item.id))?.permissions?.canDelete && (
                  <Button
                    size="sm"
                    variant="destructive"
                    onClick={() => deleteItems(Array.from(selectedItems))}
                  >
                    <Trash2 className="h-4 w-4 mr-1" />
                    삭제 ({selectedItems.size})
                  </Button>
                )}
              </>
            )}
            
            {!isInternalUser && (
              <Badge variant="secondary" className="ml-2">
                <Shield className="h-3 w-3 mr-1" />
                외부 사용자
              </Badge>
            )}
          </div>
          
          <div className="flex items-center gap-2">
            <div className="relative">
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="검색..."
                className="pl-8 w-64"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            
            <Button
              size="sm"
              variant="ghost"
              onClick={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
            >
              {viewMode === 'grid' ? <List className="h-4 w-4" /> : <Grid className="h-4 w-4" />}
            </Button>
          </div>
        </div>

        {/* Breadcrumb */}
        <Breadcrumb>
         <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink onClick={() => navigateToPath(-1)}>
              Home
            </BreadcrumbLink>
          </BreadcrumbItem>
          {currentPath.map((path, index) => (
            <BreadcrumbItem key={index}>
              <ChevronRight className="h-4 w-4" />
              <BreadcrumbLink onClick={() => navigateToPath(index)}>
                {path}
              </BreadcrumbLink>
            </BreadcrumbItem>
          ))}
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      {/* 파일 목록 */}
      <ScrollArea className="flex-1 p-4">
        {loading ? (
          <div className="flex justify-center items-center h-64">
            <div className="text-muted-foreground">로딩 중...</div>
          </div>
        ) : filteredItems.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64">
            <Folder className="h-12 w-12 text-muted-foreground mb-2" />
            <p className="text-muted-foreground">비어있음</p>
          </div>
        ) : viewMode === 'grid' ? (
          <div className="grid grid-cols-6 gap-4">
            {filteredItems.map((item) => {
              const CategoryIcon = categoryConfig[item.category].icon;
              const categoryColor = categoryConfig[item.category].color;
              
              return (
                <ContextMenu key={item.id}>
                  <ContextMenuTrigger>
                    <div
                      className={cn(
                        "flex flex-col items-center p-3 rounded-lg cursor-pointer transition-colors",
                        "hover:bg-accent",
                        selectedItems.has(item.id) && "bg-accent"
                      )}
                      onClick={() => toggleItemSelection(item.id)}
                      onDoubleClick={() => {
                        if (item.type === 'folder') {
                          handleFolderOpen(item);
                        }
                      }}
                    >
                      <div className="relative">
                        {item.type === 'folder' ? (
                          <Folder className="h-12 w-12 text-blue-500" />
                        ) : (
                          <File className="h-12 w-12 text-gray-500" />
                        )}
                        <CategoryIcon className={cn("h-4 w-4 absolute -bottom-1 -right-1", categoryColor)} />
                      </div>
                      
                      <span className="mt-2 text-sm text-center truncate w-full">
                        {item.name}
                      </span>
                      
                      {item.viewCount !== undefined && (
                        <div className="flex items-center gap-2 mt-1">
                          <span className="text-xs text-muted-foreground flex items-center">
                            <Eye className="h-3 w-3 mr-1" />
                            {item.viewCount}
                          </span>
                          {item.downloadCount !== undefined && (
                            <span className="text-xs text-muted-foreground flex items-center">
                              <Download className="h-3 w-3 mr-1" />
                              {item.downloadCount}
                            </span>
                          )}
                        </div>
                      )}
                    </div>
                  </ContextMenuTrigger>
                  
                  <ContextMenuContent>
                    {item.type === 'folder' && (
                      <>
                        <ContextMenuItem onClick={() => handleFolderOpen(item)}>
                          열기
                        </ContextMenuItem>
                        <ContextMenuItem onClick={() => downloadFolder(item)}>
                          <Download className="h-4 w-4 mr-2" />
                          폴더 전체 다운로드
                        </ContextMenuItem>
                      </>
                    )}
                    
                    {item.type === 'file' && item.permissions?.canDownload && (
                      <ContextMenuItem onClick={() => downloadFile(item)}>
                        <Download className="h-4 w-4 mr-2" />
                        다운로드
                      </ContextMenuItem>
                    )}
                    
                    {isInternalUser && (
                      <>
                        <ContextMenuSeparator />
                        <ContextMenuSub>
                          <ContextMenuSubTrigger>
                            <Shield className="h-4 w-4 mr-2" />
                            카테고리 변경
                          </ContextMenuSubTrigger>
                          <ContextMenuSubContent>
                            {Object.entries(categoryConfig).map(([key, config]) => (
                              <ContextMenuItem key={key}>
                                <config.icon className={cn("h-4 w-4 mr-2", config.color)} />
                                {config.label}
                              </ContextMenuItem>
                            ))}
                          </ContextMenuSubContent>
                        </ContextMenuSub>
                        
                        <ContextMenuItem
                          onClick={() => {
                            setSelectedFile(item);
                            setShareDialogOpen(true);
                          }}
                        >
                          <Share2 className="h-4 w-4 mr-2" />
                          공유
                        </ContextMenuItem>
                        
                        {item.permissions?.canEdit && (
                          <ContextMenuItem onClick={() => {
                            setSelectedFile(item);
                            setDialogValue(item.name);
                            setRenameDialogOpen(true);
                          }}>
                            <Edit2 className="h-4 w-4 mr-2" />
                            이름 변경
                          </ContextMenuItem>
                        )}
                      </>
                    )}
                    
                    {item.permissions?.canDelete && (
                      <>
                        <ContextMenuSeparator />
                        <ContextMenuItem
                          className="text-destructive"
                          onClick={() => deleteItems([item.id])}
                        >
                          <Trash2 className="h-4 w-4 mr-2" />
                          삭제
                        </ContextMenuItem>
                      </>
                    )}
                  </ContextMenuContent>
                </ContextMenu>
              );
            })}
          </div>
        ) : (
          // Tree View
          <div className="space-y-1">
            {filteredTreeItems.map((item) => (
              <TreeItem
                key={item.id}
                item={item}
                level={0}
                expandedFolders={expandedFolders}
                selectedItems={selectedItems}
                onToggleExpand={toggleFolderExpand}
                onSelectItem={toggleItemSelection}
                onDoubleClick={handleFolderOpen}
                onDownload={downloadFile}
                onDownloadFolder={downloadFolder}
                onDelete={deleteItems}
                onShare={(item) => {
                  setSelectedFile(item);
                  setShareDialogOpen(true);
                }}
                onRename={(item) => {
                  setSelectedFile(item);
                  setDialogValue(item.name);
                  setRenameDialogOpen(true);
                }}
                isInternalUser={isInternalUser}
              />
            ))}
          </div>
        )}
      </ScrollArea>

      {/* 업로드 다이얼로그 */}
      <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>파일 업로드</DialogTitle>
            <DialogDescription>
              파일을 드래그 앤 드롭하거나 클릭하여 선택하세요.
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4">
            {/* 카테고리 선택 */}
            <div>
              <Label htmlFor="upload-category">카테고리</Label>
              <Select value={uploadCategory} onValueChange={setUploadCategory}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(categoryConfig).map(([key, config]) => (
                    <SelectItem key={key} value={key}>
                      <div className="flex items-center">
                        <config.icon className={cn("h-4 w-4 mr-2", config.color)} />
                        <span>{config.label}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Dropzone */}
            <Dropzone 
              onDrop={(acceptedFiles: File[]) => {
                handleFileUpload(acceptedFiles);
              }}
              accept={{
                'application/pdf': ['.pdf'],
                'application/msword': ['.doc'],
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
                'application/vnd.ms-excel': ['.xls'],
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
                'application/vnd.ms-powerpoint': ['.ppt'],
                'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx'],
                'text/plain': ['.txt'],
                'text/csv': ['.csv'],
                'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'],
                'application/zip': ['.zip'],
                'application/x-rar-compressed': ['.rar'],
                'application/x-7z-compressed': ['.7z'],
                'application/x-dwg': ['.dwg'],
                'application/x-dxf': ['.dxf'],
              }}
              multiple={true}
              disabled={false}
            >
              <DropzoneZone className="h-48 border-2 border-dashed border-gray-300 rounded-lg">
                <DropzoneInput />
                <div className="flex flex-col items-center justify-center h-full">
                  <DropzoneUploadIcon className="h-12 w-12 text-muted-foreground mb-4" />
                  <DropzoneTitle>파일을 드래그하거나 클릭하여 업로드</DropzoneTitle>
                  <DropzoneDescription>여러 파일을 동시에 업로드할 수 있습니다</DropzoneDescription>
                </div>
              </DropzoneZone>
            </Dropzone>

            {/* 업로드 중인 파일 목록 */}
            {uploadingFiles.length > 0 && (
              <FileList>
                <FileListHeader>업로드 중인 파일</FileListHeader>
                {uploadingFiles.map((uploadFile, index) => (
                  <FileListItem key={index}>
                    <FileListIcon>
                      <File className="h-4 w-4" />
                    </FileListIcon>
                    <FileListInfo>
                      <FileListName>{uploadFile.file.name}</FileListName>
                      <FileListDescription>
                        <div className="flex items-center gap-2">
                          <FileListSize>{uploadFile.file.size}</FileListSize>
                          {uploadFile.status === 'uploading' && <span>업로드 중...</span>}
                          {uploadFile.status === 'processing' && <span>처리 중...</span>}
                          {uploadFile.status === 'completed' && (
                            <span className="text-green-600">완료</span>
                          )}
                          {uploadFile.status === 'error' && (
                            <span className="text-red-600">{uploadFile.error}</span>
                          )}
                        </div>
                        {(uploadFile.status === 'uploading' || uploadFile.status === 'processing') && (
                          <Progress value={uploadFile.progress} className="h-1 mt-1" />
                        )}
                      </FileListDescription>
                    </FileListInfo>
                    <FileListAction>
                      {uploadFile.status === 'error' && (
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => {
                            setUploadingFiles(prev => 
                              prev.filter((_, i) => i !== index)
                            );
                          }}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      )}
                    </FileListAction>
                  </FileListItem>
                ))}
              </FileList>
            )}
          </div>
          
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => {
                setUploadDialogOpen(false);
                setUploadingFiles([]);
              }}
            >
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 폴더 생성 다이얼로그 */}
      <Dialog open={folderDialogOpen} onOpenChange={setFolderDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>새 폴더 만들기</DialogTitle>
            <DialogDescription>
              폴더 이름과 접근 권한 카테고리를 설정하세요.
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4">
            <div>
              <Label htmlFor="folder-name">폴더 이름</Label>
              <Input
                id="folder-name"
                value={dialogValue}
                onChange={(e) => setDialogValue(e.target.value)}
                placeholder="폴더 이름 입력"
              />
            </div>
            
            <div>
              <Label htmlFor="folder-category">카테고리</Label>
              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(categoryConfig).map(([key, config]) => (
                    <SelectItem key={key} value={key}>
                      <div className="flex items-center">
                        <config.icon className={cn("h-4 w-4 mr-2", config.color)} />
                        <span>{config.label}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          
          <DialogFooter>
            <Button variant="outline" onClick={() => setFolderDialogOpen(false)}>
              취소
            </Button>
            <Button onClick={createFolder}>생성</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 파일 공유 다이얼로그 */}
      <Dialog open={shareDialogOpen} onOpenChange={setShareDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>파일 공유</DialogTitle>
            <DialogDescription>
              {selectedFile?.name}을(를) 공유합니다.
            </DialogDescription>
          </DialogHeader>
          
          <Tabs defaultValue="link" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="link">링크 공유</TabsTrigger>
              <TabsTrigger value="permission">권한 설정</TabsTrigger>
            </TabsList>
            
            <TabsContent value="link" className="space-y-4">
              <div>
                <Label htmlFor="access-level">접근 레벨</Label>
                <Select 
                  value={shareSettings.accessLevel} 
                  onValueChange={(value) => setShareSettings({...shareSettings, accessLevel: value})}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="view_only">
                      <div className="flex items-center">
                        <Eye className="h-4 w-4 mr-2" />
                        보기만 가능
                      </div>
                    </SelectItem>
                    <SelectItem value="view_download">
                      <div className="flex items-center">
                        <Download className="h-4 w-4 mr-2" />
                        보기 + 다운로드
                      </div>
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              <div>
                <Label htmlFor="password">비밀번호 (선택)</Label>
                <Input
                  id="password"
                  type="password"
                  value={shareSettings.password}
                  onChange={(e) => setShareSettings({...shareSettings, password: e.target.value})}
                  placeholder="비밀번호 입력"
                />
              </div>
              
              <div>
                <Label htmlFor="expires">만료일 (선택)</Label>
                <Input
                  id="expires"
                  type="datetime-local"
                  value={shareSettings.expiresAt}
                  onChange={(e) => setShareSettings({...shareSettings, expiresAt: e.target.value})}
                />
              </div>
              
              <div>
                <Label htmlFor="max-downloads">최대 다운로드 횟수 (선택)</Label>
                <Input
                  id="max-downloads"
                  type="number"
                  value={shareSettings.maxDownloads}
                  onChange={(e) => setShareSettings({...shareSettings, maxDownloads: e.target.value})}
                  placeholder="무제한"
                />
              </div>
            </TabsContent>
            
            <TabsContent value="permission" className="space-y-4">
              <div>
                <Label htmlFor="target-domain">대상 도메인</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="도메인 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="partners">파트너</SelectItem>
                    <SelectItem value="internal">내부</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              <div className="space-y-2">
                <Label>권한</Label>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="can-view" className="text-sm font-normal">보기</Label>
                    <Switch id="can-view" defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label htmlFor="can-download" className="text-sm font-normal">다운로드</Label>
                    <Switch id="can-download" />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label htmlFor="can-edit" className="text-sm font-normal">수정</Label>
                    <Switch id="can-edit" />
                  </div>
                  <div className="flex items-center justify-between">
                    <Label htmlFor="can-share" className="text-sm font-normal">공유</Label>
                    <Switch id="can-share" />
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
          
          <DialogFooter>
            <Button variant="outline" onClick={() => setShareDialogOpen(false)}>
              취소
            </Button>
            <Button onClick={shareFile}>
              <Share2 className="h-4 w-4 mr-2" />
              공유 링크 생성
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}