import React, { useState, useRef, useCallback, useEffect } from "react";
import { cn } from "@/lib/utils";
import {
  Folder,
  File,
  FileText,
  FileImage,
  FileVideo,
  FileAudio,
  Archive,
  Code,
  Settings,
  Download,
  ChevronLeft,
  ChevronRight,
  MoreHorizontal,
  RefreshCw,
  ArrowUp
} from "lucide-react";
import { useTranslation } from "react-i18next";

interface FileItem {
  name: string;
  type: "file" | "directory" | "link";
  path: string;
  size?: number;
  modified?: string;
  permissions?: string;
  owner?: string;
  group?: string;
}

interface FileManagerGridProps {
  files: FileItem[];
  selectedFiles: FileItem[];
  onFileSelect: (file: FileItem, multiSelect?: boolean) => void;
  onFileOpen: (file: FileItem) => void;
  onSelectionChange: (files: FileItem[]) => void;
  currentPath: string;
  isLoading?: boolean;
  onPathChange: (path: string) => void;
  onRefresh: () => void;
  onUpload?: (files: FileList) => void;
  onContextMenu?: (event: React.MouseEvent, file?: FileItem) => void;
  viewMode?: 'grid' | 'list';
}

const getFileIcon = (fileName: string, isDirectory: boolean, viewMode: 'grid' | 'list' = 'grid') => {
  const iconClass = viewMode === 'grid' ? "w-8 h-8" : "w-6 h-6";

  if (isDirectory) {
    return <Folder className={`${iconClass} text-blue-400`} />;
  }

  const ext = fileName.split('.').pop()?.toLowerCase();

  switch (ext) {
    case 'txt':
    case 'md':
    case 'readme':
      return <FileText className={`${iconClass} text-gray-400`} />;
    case 'png':
    case 'jpg':
    case 'jpeg':
    case 'gif':
    case 'bmp':
    case 'svg':
      return <FileImage className={`${iconClass} text-green-400`} />;
    case 'mp4':
    case 'avi':
    case 'mkv':
    case 'mov':
      return <FileVideo className={`${iconClass} text-purple-400`} />;
    case 'mp3':
    case 'wav':
    case 'flac':
    case 'ogg':
      return <FileAudio className={`${iconClass} text-pink-400`} />;
    case 'zip':
    case 'tar':
    case 'gz':
    case 'rar':
    case '7z':
      return <Archive className={`${iconClass} text-orange-400`} />;
    case 'js':
    case 'ts':
    case 'jsx':
    case 'tsx':
    case 'py':
    case 'java':
    case 'cpp':
    case 'c':
    case 'cs':
    case 'php':
    case 'rb':
    case 'go':
    case 'rs':
      return <Code className={`${iconClass} text-yellow-400`} />;
    case 'json':
    case 'xml':
    case 'yaml':
    case 'yml':
    case 'toml':
    case 'ini':
    case 'conf':
    case 'config':
      return <Settings className={`${iconClass} text-cyan-400`} />;
    default:
      return <File className={`${iconClass} text-gray-400`} />;
  }
};

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

export function FileManagerGrid({
  files,
  selectedFiles,
  onFileSelect,
  onFileOpen,
  onSelectionChange,
  currentPath,
  isLoading,
  onPathChange,
  onRefresh,
  onUpload,
  onContextMenu,
  viewMode = 'grid'
}: FileManagerGridProps) {
  const { t } = useTranslation();
  const gridRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [dragCounter, setDragCounter] = useState(0);
  const [isSelecting, setIsSelecting] = useState(false);
  const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
  const [selectionRect, setSelectionRect] = useState<{ x: number; y: number; width: number; height: number } | null>(null);

  // 导航历史管理
  const [navigationHistory, setNavigationHistory] = useState<string[]>([currentPath]);
  const [historyIndex, setHistoryIndex] = useState(0);

  // 更新导航历史
  useEffect(() => {
    const lastPath = navigationHistory[historyIndex];
    if (currentPath !== lastPath) {
      const newHistory = navigationHistory.slice(0, historyIndex + 1);
      newHistory.push(currentPath);
      setNavigationHistory(newHistory);
      setHistoryIndex(newHistory.length - 1);
    }
  }, [currentPath]);

  // 导航函数
  const goBack = () => {
    if (historyIndex > 0) {
      const newIndex = historyIndex - 1;
      setHistoryIndex(newIndex);
      onPathChange(navigationHistory[newIndex]);
    }
  };

  const goForward = () => {
    if (historyIndex < navigationHistory.length - 1) {
      const newIndex = historyIndex + 1;
      setHistoryIndex(newIndex);
      onPathChange(navigationHistory[newIndex]);
    }
  };

  const goUp = () => {
    const parts = currentPath.split('/').filter(Boolean);
    if (parts.length > 0) {
      parts.pop();
      const parentPath = '/' + parts.join('/');
      onPathChange(parentPath);
    } else if (currentPath !== '/') {
      onPathChange('/');
    }
  };

  // 路径导航
  const pathParts = currentPath.split('/').filter(Boolean);
  const navigateToPath = (index: number) => {
    if (index === -1) {
      onPathChange('/');
    } else {
      const newPath = '/' + pathParts.slice(0, index + 1).join('/');
      onPathChange(newPath);
    }
  };

  // 拖放处理
  const handleDragEnter = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev + 1);
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
      setIsDragging(true);
    }
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCounter(prev => prev - 1);
    if (dragCounter <= 1) {
      setIsDragging(false);
    }
  }, [dragCounter]);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();

    setIsDragging(false);
    setDragCounter(0);

    if (onUpload && e.dataTransfer.files.length > 0) {
      onUpload(e.dataTransfer.files);
    }
  }, [onUpload]);

  // 文件选择处理
  const handleFileClick = (file: FileItem, event: React.MouseEvent) => {
    event.stopPropagation();

    console.log('File clicked:', file.name, 'Current selected:', selectedFiles.length);

    if (event.detail === 2) {
      // 双击打开
      console.log('Double click - opening file');
      onFileOpen(file);
    } else {
      // 单击选择
      const multiSelect = event.ctrlKey || event.metaKey;
      const rangeSelect = event.shiftKey;

      console.log('Single click - multiSelect:', multiSelect, 'rangeSelect:', rangeSelect);

      if (rangeSelect && selectedFiles.length > 0) {
        // 范围选择 (Shift+点击)
        console.log('Range selection');
        const lastSelected = selectedFiles[selectedFiles.length - 1];
        const currentIndex = files.findIndex(f => f.path === file.path);
        const lastIndex = files.findIndex(f => f.path === lastSelected.path);

        if (currentIndex !== -1 && lastIndex !== -1) {
          const start = Math.min(currentIndex, lastIndex);
          const end = Math.max(currentIndex, lastIndex);
          const rangeFiles = files.slice(start, end + 1);
          console.log('Range selection result:', rangeFiles.length, 'files');
          onSelectionChange(rangeFiles);
        }
      } else if (multiSelect) {
        // 多选 (Ctrl+点击)
        console.log('Multi selection');
        const isSelected = selectedFiles.some(f => f.path === file.path);
        if (isSelected) {
          console.log('Removing from selection');
          onSelectionChange(selectedFiles.filter(f => f.path !== file.path));
        } else {
          console.log('Adding to selection');
          onSelectionChange([...selectedFiles, file]);
        }
      } else {
        // 单选
        console.log('Single selection - should select only:', file.name);
        onSelectionChange([file]);
      }
    }
  };

  // 空白区域点击取消选择
  const handleGridClick = (event: React.MouseEvent) => {
    if (event.target === event.currentTarget) {
      onSelectionChange([]);
    }
  };

  // 键盘支持
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (!gridRef.current?.contains(document.activeElement)) return;

      switch (event.key) {
        case 'Escape':
          onSelectionChange([]);
          break;
        case 'a':
        case 'A':
          if (event.ctrlKey || event.metaKey) {
            event.preventDefault();
            console.log('Ctrl+A pressed - selecting all files:', files.length);
            onSelectionChange([...files]);
          }
          break;
        case 'Delete':
          if (selectedFiles.length > 0) {
            // 触发删除操作
            console.log('Delete selected files:', selectedFiles);
          }
          break;
        case 'F2':
          if (selectedFiles.length === 1) {
            // 触发重命名
            console.log('Rename file:', selectedFiles[0]);
          }
          break;
        case 'F5':
          event.preventDefault();
          onRefresh();
          break;
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [selectedFiles, files, onSelectionChange, onRefresh]);

  if (isLoading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
          <p className="text-sm text-muted-foreground">{t("common.loading")}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col bg-dark-bg">
      {/* 工具栏和路径导航 */}
      <div className="flex-shrink-0 border-b border-dark-border">
        {/* 导航按钮 */}
        <div className="flex items-center gap-1 p-2 border-b border-dark-border">
          <button
            onClick={goBack}
            disabled={historyIndex <= 0}
            className={cn(
              "p-1 rounded hover:bg-dark-hover",
              historyIndex <= 0 && "opacity-50 cursor-not-allowed"
            )}
            title={t("common.back")}
          >
            <ChevronLeft className="w-4 h-4" />
          </button>
          <button
            onClick={goForward}
            disabled={historyIndex >= navigationHistory.length - 1}
            className={cn(
              "p-1 rounded hover:bg-dark-hover",
              historyIndex >= navigationHistory.length - 1 && "opacity-50 cursor-not-allowed"
            )}
            title={t("common.forward")}
          >
            <ChevronRight className="w-4 h-4" />
          </button>
          <button
            onClick={goUp}
            disabled={currentPath === '/'}
            className={cn(
              "p-1 rounded hover:bg-dark-hover",
              currentPath === '/' && "opacity-50 cursor-not-allowed"
            )}
            title={t("fileManager.parentDirectory")}
          >
            <ArrowUp className="w-4 h-4" />
          </button>
          <button
            onClick={onRefresh}
            className="p-1 rounded hover:bg-dark-hover"
            title={t("common.refresh")}
          >
            <RefreshCw className="w-4 h-4" />
          </button>
        </div>

        {/* 面包屑导航 */}
        <div className="flex items-center px-3 py-2 text-sm">
          <button
            onClick={() => navigateToPath(-1)}
            className="hover:text-blue-400 hover:underline"
          >
            /
          </button>
          {pathParts.map((part, index) => (
            <React.Fragment key={index}>
              <span className="mx-1 text-muted-foreground">/</span>
              <button
                onClick={() => navigateToPath(index)}
                className="hover:text-blue-400 hover:underline"
              >
                {part}
              </button>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* 主文件网格 */}
      <div
        ref={gridRef}
        className={cn(
          "flex-1 p-4 overflow-auto",
          isDragging && "bg-blue-500/10 border-2 border-dashed border-blue-500"
        )}
        onClick={handleGridClick}
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        onContextMenu={(e) => onContextMenu?.(e)}
        tabIndex={0}
      >
        {isDragging && (
          <div className="absolute inset-0 flex items-center justify-center bg-blue-500/10 backdrop-blur-sm z-10">
            <div className="text-center">
              <Download className="w-12 h-12 mx-auto mb-2 text-blue-500" />
              <p className="text-lg font-medium text-blue-500">
                {t("fileManager.dragFilesToUpload")}
              </p>
            </div>
          </div>
        )}

        {files.length === 0 ? (
          <div className="h-full flex items-center justify-center">
            <div className="text-center text-muted-foreground">
              <Folder className="w-16 h-16 mx-auto mb-4 opacity-50" />
              <p>{t("fileManager.emptyFolder")}</p>
            </div>
          </div>
        ) : viewMode === 'grid' ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
            {files.map((file) => {
              const isSelected = selectedFiles.some(f => f.path === file.path);

              // 详细调试路径比较
              if (selectedFiles.length > 0) {
                console.log(`\n=== File: ${file.name} ===`);
                console.log(`File path: "${file.path}"`);
                console.log(`Selected files:`, selectedFiles.map(f => `"${f.path}"`));
                console.log(`Path comparison results:`, selectedFiles.map(f =>
                  `"${f.path}" === "${file.path}" -> ${f.path === file.path}`
                ));
                console.log(`Final isSelected: ${isSelected}`);
              }

              return (
                <div
                  key={file.path}
                  className={cn(
                    "group p-3 rounded-lg cursor-pointer transition-all",
                    "hover:bg-dark-hover border-2 border-transparent",
                    isSelected && "bg-blue-500/20 border-blue-500"
                  )}
                  title={`${file.name} - Selected: ${isSelected} - SelectedCount: ${selectedFiles.length}`}
                  onClick={(e) => handleFileClick(file, e)}
                  onContextMenu={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onContextMenu?.(e, file);
                  }}
                >
                  <div className="flex flex-col items-center text-center">
                    {/* 文件图标 */}
                    <div className="mb-2">
                      {getFileIcon(file.name, file.type === 'directory', viewMode)}
                    </div>

                    {/* 文件名 */}
                    <div className="w-full">
                      <p className="text-xs text-white truncate" title={file.name}>
                        {file.name}
                      </p>
                      {file.size && file.type === 'file' && (
                        <p className="text-xs text-muted-foreground mt-1">
                          {formatFileSize(file.size)}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          /* 列表视图 */
          <div className="space-y-1">
            {files.map((file) => {
              const isSelected = selectedFiles.some(f => f.path === file.path);

              return (
                <div
                  key={file.path}
                  className={cn(
                    "flex items-center gap-3 p-2 rounded cursor-pointer transition-all",
                    "hover:bg-dark-hover",
                    isSelected && "bg-blue-500/20"
                  )}
                  onClick={(e) => handleFileClick(file, e)}
                  onContextMenu={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onContextMenu?.(e, file);
                  }}
                >
                  {/* 文件图标 */}
                  <div className="flex-shrink-0">
                    {getFileIcon(file.name, file.type === 'directory', viewMode)}
                  </div>

                  {/* 文件信息 */}
                  <div className="flex-1 min-w-0">
                    <p className="text-sm text-white truncate" title={file.name}>
                      {file.name}
                    </p>
                    {file.modified && (
                      <p className="text-xs text-muted-foreground">
                        {file.modified}
                      </p>
                    )}
                  </div>

                  {/* 文件大小 */}
                  <div className="flex-shrink-0 text-right">
                    {file.type === 'file' && file.size && (
                      <p className="text-xs text-muted-foreground">
                        {formatFileSize(file.size)}
                      </p>
                    )}
                  </div>

                  {/* 权限信息 */}
                  <div className="flex-shrink-0 text-right w-20">
                    {file.permissions && (
                      <p className="text-xs text-muted-foreground font-mono">
                        {file.permissions}
                      </p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* 状态栏 */}
      <div className="flex-shrink-0 border-t border-dark-border px-4 py-2 text-xs text-muted-foreground">
        <div className="flex justify-between items-center">
          <span>
            {files.length} {t("fileManager.itemCount", { count: files.length })}
          </span>
          {selectedFiles.length > 0 && (
            <span>
              {t("fileManager.selectedCount", { count: selectedFiles.length })}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}