import React, { useState, useMemo } from 'react';
import { FileItem, FileType } from '../types';
import { FileIcon } from './Icon';
import { formatBytes, formatDate } from '../utils/formatters';
import { ArrowUp, Server, Monitor, FolderOpen, RefreshCw, FolderPlus, Trash2, FilePenLine, Search } from 'lucide-react';

interface FilePaneProps {
  title: string;
  icon: 'local' | 'remote';
  path: string;
  files: FileItem[];
  isLoading: boolean;
  onNavigate: (path: string) => void;
  onNavigateUp: () => void;
  onSelectionChange: (ids: Set<string>) => void;
  selectedIds: Set<string>;
  connected?: boolean;
  refreshKey?: number;
  onCreateFolder?: () => void;
  onDelete?: () => void;
  onRename?: () => void;
}

const FilePane: React.FC<FilePaneProps> = ({
  title,
  icon,
  path,
  files,
  isLoading,
  onNavigate,
  onNavigateUp,
  onSelectionChange,
  selectedIds,
  connected = true,
  refreshKey,
  onCreateFolder,
  onDelete,
  onRename
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [lastClickedId, setLastClickedId] = useState<string | null>(null);
  const [pathInput, setPathInput] = useState(path);

  // Sync path input when prop changes OR refreshKey updates
  React.useEffect(() => {
    setPathInput(path);
  }, [path, refreshKey]);

  const handlePathKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      onNavigate(pathInput);
    } else if (e.key === 'Escape') {
      setPathInput(path); // Revert
      (e.target as HTMLInputElement).blur();
    }
  };

  // Filter files based on search term
  const displayFiles = useMemo(() => {
    if (!searchTerm) return files;
    return files.filter(f => f.name.toLowerCase().includes(searchTerm.toLowerCase()));
  }, [files, searchTerm]);

  const handleRowClick = (e: React.MouseEvent, file: FileItem) => {
    e.preventDefault(); // Prevent text selection

    let newSelected = new Set(selectedIds);

    if (e.ctrlKey || e.metaKey) {
      // Toggle selection
      if (newSelected.has(file.id)) {
        newSelected.delete(file.id);
      } else {
        newSelected.add(file.id);
      }
      setLastClickedId(file.id);
    } else if (e.shiftKey && lastClickedId) {
      // Range selection
      const lastIndex = displayFiles.findIndex(f => f.id === lastClickedId);
      const currentIndex = displayFiles.findIndex(f => f.id === file.id);

      if (lastIndex !== -1 && currentIndex !== -1) {
        const start = Math.min(lastIndex, currentIndex);
        const end = Math.max(lastIndex, currentIndex);

        newSelected = new Set();

        for (let i = start; i <= end; i++) {
          newSelected.add(displayFiles[i].id);
        }
      }
    } else {
      // Single selection
      newSelected = new Set([file.id]);
      setLastClickedId(file.id);
    }

    onSelectionChange(newSelected);
  };

  return (
    <div className={`flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm transition-all duration-300 ${!connected ? 'opacity-60 grayscale-[0.5] pointer-events-none' : ''}`}>
      {/* Header */}
      <div className="bg-slate-50 p-2 border-b border-slate-200 flex items-center justify-between">
        <div className="flex items-center gap-2 text-slate-700 font-semibold text-sm shrink-0">
          {icon === 'local' ? <Monitor size={16} /> : <Server size={16} />}
          <span>{title}</span>
        </div>
        <div className="flex items-center gap-2 bg-white px-2 py-0.5 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 shadow-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
          <span className="text-slate-400 shrink-0">경로:</span>
          <input
            type="text"
            value={pathInput}
            onChange={(e) => setPathInput(e.target.value)}
            onKeyDown={handlePathKeyDown}
            className="font-mono text-slate-700 w-full outline-none text-xs py-1"
            spellCheck={false}
          />
        </div>
      </div>

      {/* Toolbar */}
      <div className="bg-white p-1 border-b border-slate-200 flex gap-1 items-center">
        <button
          onClick={onNavigateUp}
          disabled={path === '/'}
          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          title="상위 폴더로 이동"
        >
          <ArrowUp size={16} />
        </button>
        <div className="w-px h-4 bg-slate-200 mx-1"></div>
        <button
          onClick={onCreateFolder}
          disabled={!connected || isLoading}
          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          title="새 폴더 생성"
        >
          <FolderPlus size={16} />
        </button>
        <button
          onClick={onRename}
          disabled={selectedIds.size !== 1 || !connected || isLoading}
          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          title="이름 변경"
        >
          <FilePenLine size={16} />
        </button>
        <button
          onClick={onDelete}
          disabled={selectedIds.size === 0 || !connected || isLoading}
          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          title="삭제"
        >
          <Trash2 size={16} />
        </button>
        <button
          className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors"
          title="새로고침"
          onClick={() => onNavigate(path)} // Simple refresh
          disabled={!connected || isLoading}
        >
          <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
        </button>

        <div className="flex-1"></div>

        {/* Search Input */}
        <div className="relative group">
          <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="검색..."
            className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
          />
        </div>
      </div>

      {/* File Grid */}
      <div className="flex-1 overflow-auto bg-white relative" onClick={() => onSelectionChange(new Set())}>
        {!connected ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400">
            <Server size={48} className="mb-4 opacity-20" />
            <p>서버에 연결되지 않음</p>
          </div>
        ) : isLoading ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400">
            <p className="mt-4 text-sm">목록 조회 중...</p>
          </div>
        ) : (
          <table className="w-full text-xs text-left border-collapse" onClick={(e) => e.stopPropagation()}>
            <thead className="bg-slate-50 text-slate-500 sticky top-0 z-10 shadow-sm">
              <tr>
                <th className="p-2 w-8 font-medium border-b border-slate-200"></th>
                <th className="p-2 font-medium border-b border-slate-200">파일명</th>
                <th className="p-2 w-24 font-medium border-b border-slate-200 text-right">크기</th>
                <th className="p-2 w-32 font-medium border-b border-slate-200 text-right hidden lg:table-cell">종류</th>
                <th className="p-2 w-32 font-medium border-b border-slate-200 text-right hidden md:table-cell">수정일</th>
              </tr>
            </thead>
            <tbody>
              {/* Back Button Row */}
              {path !== '/' && !searchTerm && (
                <tr
                  className="hover:bg-slate-50 cursor-pointer text-slate-500"
                  onClick={onNavigateUp}
                >
                  <td className="p-2 text-center"><FolderOpen size={14} /></td>
                  <td className="p-2 font-semibold">..</td>
                  <td className="p-2"></td>
                  <td className="p-2 hidden lg:table-cell"></td>
                  <td className="p-2 hidden md:table-cell"></td>
                </tr>
              )}
              {displayFiles.map((file) => {
                const isSelected = selectedIds.has(file.id);
                return (
                  <tr
                    key={file.id}
                    onClick={(e) => handleRowClick(e, file)}
                    onDoubleClick={() => {
                      if (file.type === FileType.FOLDER) {
                        onNavigate(path === '/' ? `/${file.name}` : `${path}/${file.name}`);
                        onSelectionChange(new Set()); // Clear selection on navigate
                        setSearchTerm(''); // Clear search on navigate
                      }
                    }}
                    className={`cursor-pointer border-b border-slate-50 group select-none ${isSelected
                      ? 'bg-blue-100 text-blue-900 border-blue-200'
                      : 'text-slate-700 hover:bg-slate-50'
                      }`}
                  >
                    <td className="p-2 text-center">
                      <FileIcon name={file.name} type={file.type} className="w-4 h-4" />
                    </td>
                    <td className="p-2 font-medium group-hover:text-blue-600 truncate max-w-[150px]">
                      {file.name}
                    </td>
                    <td className="p-2 text-right font-mono text-slate-500">
                      {file.type === FileType.FILE ? formatBytes(file.size) : ''}
                    </td>
                    <td className="p-2 text-right text-slate-400 hidden lg:table-cell">
                      {file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
                    </td>
                    <td className="p-2 text-right text-slate-400 hidden md:table-cell whitespace-nowrap">
                      {formatDate(file.date).split(',')[0]}
                    </td>
                  </tr>
                );
              })}
              {displayFiles.length === 0 && (
                <tr>
                  <td colSpan={5} className="p-8 text-center text-slate-400">
                    {searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>

      {/* Footer Status */}
      <div className="bg-slate-50 p-1 px-3 text-xs text-slate-500 border-t border-slate-200 flex justify-between">
        <span>{files.length} 개 항목 {selectedIds.size > 0 && `(${selectedIds.size}개 선택됨)`}</span>
        <span>{connected ? '준비됨' : '오프라인'}</span>
      </div>
    </div>
  );
};

export default FilePane;