XCDesktop/src/modules/remote/components/file-transfer/RemoteFilePanel.tsx

import React, { useState, useEffect, useCallback } from 'react'
import { Folder, FileText, ChevronLeft, RefreshCw } from 'lucide-react'
import { clsx } from 'clsx'
import { fetchRemoteFiles, type RemoteFileItem } from '../../api'

interface RemoteFilePanelProps {
  serverHost: string
  port: number
  password?: string
  selectedFile: RemoteFileItem | null
  onSelect: (file: RemoteFileItem | null) => void
  onDownload: () => void
  disabled?: boolean
}

export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
  serverHost,
  port,
  password,
  selectedFile,
  onSelect,
  onDownload,
  disabled,
}) => {
  const [currentPath, setCurrentPath] = useState('')
  const [files, setFiles] = useState<RemoteFileItem[]>([])
  const [loading, setLoading] = useState(false)
  const [pathHistory, setPathHistory] = useState<string[]>([''])

  const loadFiles = useCallback(async (path: string) => {
    setLoading(true)
    try {
      const items = await fetchRemoteFiles(serverHost, port, path, password)
      setFiles(items)
    } catch (err) {
      console.error('Failed to load remote files:', err)
      setFiles([])
    } finally {
      setLoading(false)
    }
  }, [serverHost, port, password])

  useEffect(() => {
    loadFiles(currentPath)
  }, [currentPath, loadFiles])

  const handleGoBack = () => {
    if (pathHistory.length > 1) {
      const newHistory = [...pathHistory]
      newHistory.pop()
      const prevPath = newHistory[newHistory.length - 1]
      setPathHistory(newHistory)
      setCurrentPath(prevPath)
      onSelect(null)
    }
  }

  const handleGoInto = (file: RemoteFileItem) => {
    const newPath = currentPath ? `${currentPath}/${file.name}` : file.name
    setPathHistory([...pathHistory, newPath])
    setCurrentPath(newPath)
    onSelect(null)
  }

  const handleRefresh = () => {
    loadFiles(currentPath)
  }

  const getDisplayPath = () => {
    if (!currentPath) return '远程文件'
    const parts = currentPath.split('/')
    return parts[parts.length - 1] || currentPath
  }

  return (
    <div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div className="h-12 flex items-center justify-between px-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center gap-2">
          <button
            onClick={handleGoBack}
            disabled={pathHistory.length <= 1}
            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
            title="返回上级"
          >
            <ChevronLeft size={18} />
          </button>
          <span className="text-base font-medium text-gray-700 dark:text-gray-300 truncate max-w-[180px]">
            {getDisplayPath()}
          </span>
        </div>
        <button
          onClick={handleRefresh}
          disabled={loading}
          className="p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
          title="刷新"
        >
          <RefreshCw size={16} className={clsx(loading && 'animate-spin')} />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto p-2" onClick={(e) => {
        if ((e.target as HTMLElement).classList.contains('space-y-1') || (e.target as HTMLElement).classList.contains('p-2')) {
          onSelect(null)
        }
      }}>
        {loading ? (
          <div className="flex items-center justify-center h-full text-gray-400">
            加载中...
          </div>
        ) : files.length === 0 ? (
          <div className="flex items-center justify-center h-full text-gray-400">
            空文件夹
          </div>
        ) : (
          <div className="space-y-1">
            {files.map((file) => (
              <div
                key={file.path}
                onClick={() => onSelect(selectedFile?.path === file.path ? null : file)}
                onDoubleClick={() => file.type === 'dir' && handleGoInto(file)}
                className={clsx(
                  'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors text-sm',
                  selectedFile?.path === file.path
                    ? 'bg-gray-100 text-gray-800 dark:bg-gray-700/60 dark:text-gray-200'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-200'
                )}
              >
                {file.type === 'dir' ? (
                  <Folder size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
                ) : (
                  <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
                )}
                <span className="flex-1 truncate">
                  {file.name}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
        <button
          onClick={onDownload}
          disabled={!selectedFile || disabled}
          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-500 text-white rounded-lg transition-colors"
        >
          <span>↓</span>
          下载
        </button>
      </div>
    </div>
  )
}