/**
 * SSH文件管理器
 * 双面板布局：左侧显示服务器文件，右侧用于上传
 */
import React, { useState } from 'react';
import { DraggableWindow } from '@/components/ui/draggable-window';
import { ServerFilePanel } from './ServerFilePanel';
import { UploadPanel } from './UploadPanel';
import type { FileManagerProps } from './types';

export const FileManager: React.FC<FileManagerProps> = ({
    serverId,
    serverName,
    open,
    onClose,
    onMinimize,
    isActive,
    onFocus,
}) => {
    const [currentPath, setCurrentPath] = useState<string>('/');
    const [refreshTrigger, setRefreshTrigger] = useState(0);

    // 上传完成后刷新服务器文件列表
    const handleUploadComplete = () => {
        setRefreshTrigger(prev => prev + 1);
    };

    if (!open) return null;

    // 计算屏幕中心位置
    const windowWidth = 1100;
    const windowHeight = 650;
    const centerX = Math.max(0, (window.innerWidth - windowWidth) / 2);
    const centerY = Math.max(0, (window.innerHeight - windowHeight) / 2);

    return (
        <DraggableWindow
            id={`file-manager-${serverId}`}
            title={`文件管理 - ${serverName}`}
            onClose={onClose}
            onMinimize={onMinimize}
            isActive={isActive}
            onFocus={onFocus}
            initialPosition={{ x: centerX, y: centerY }}
            initialSize={{ width: windowWidth, height: windowHeight }}
        >
            <div className="h-full flex gap-4 p-2">
                    {/* 左侧：服务器文件浏览 - 占2/3宽度 */}
                    <div className="flex-[2] flex flex-col border rounded-lg overflow-hidden">
                        <div className="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b flex-shrink-0">
                            <h3 className="font-semibold">服务器文件</h3>
                        </div>
                        <div className="flex-1 overflow-hidden">
                            <ServerFilePanel
                                serverId={serverId}
                                currentPath={currentPath}
                                onPathChange={setCurrentPath}
                                refreshTrigger={refreshTrigger}
                            />
                        </div>
                    </div>

                    {/* 右侧：文件上传 - 占1/3宽度 */}
                    <div className="flex-1 flex flex-col border rounded-lg overflow-hidden">
                        <div className="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b">
                            <h3 className="font-semibold">文件上传</h3>
                        </div>
                        <UploadPanel
                            serverId={serverId}
                            currentPath={currentPath}
                            onUploadComplete={handleUploadComplete}
                        />
                    </div>
            </div>
        </DraggableWindow>
    );
};
