import React, {useState, useEffect, useMemo, useRef} from "react";
import {Card, CardContent} from "@/components/ui/card.tsx";
import {Button} from "@/components/ui/button.tsx";
import {Badge} from "@/components/ui/badge.tsx";
import {ScrollArea} from "@/components/ui/scroll-area.tsx";
import {Input} from "@/components/ui/input.tsx";
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
import {getSSHHosts, deleteSSHHost, bulkImportSSHHosts, updateSSHHost, renameFolder} from "@/ui/main-axios.ts";
import {toast} from "sonner";
import {useTranslation} from "react-i18next";
import {useConfirmation} from "@/hooks/use-confirmation.ts";
import {
    Edit,
    Trash2,
    Server,
    Folder,
    Tag,
    Pin,
    Terminal,
    Network,
    FileEdit,
    Search,
    Upload,
    Info,
    X,
    Check,
    Pencil,
    FolderMinus
} from "lucide-react";
import {Separator} from "@/components/ui/separator.tsx";
import type { SSHHost, SSHManagerHostViewerProps } from '../../../../types/index.js';

export function HostManagerViewer({onEditHost}: SSHManagerHostViewerProps) {
    const {t} = useTranslation();
    const {confirmWithToast} = useConfirmation();
    const [hosts, setHosts] = useState<SSHHost[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [searchQuery, setSearchQuery] = useState("");
    const [importing, setImporting] = useState(false);
    const [draggedHost, setDraggedHost] = useState<SSHHost | null>(null);
    const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
    const [editingFolder, setEditingFolder] = useState<string | null>(null);
    const [editingFolderName, setEditingFolderName] = useState("");
    const [operationLoading, setOperationLoading] = useState(false);
    const dragCounter = useRef(0);

    useEffect(() => {
        fetchHosts();
        
        // Listen for refresh events from other components
        const handleHostsRefresh = () => {
            fetchHosts();
        };
        
        window.addEventListener('hosts:refresh', handleHostsRefresh);
        window.addEventListener('ssh-hosts:changed', handleHostsRefresh);
        window.addEventListener('folders:changed', handleHostsRefresh);
        
        return () => {
            window.removeEventListener('hosts:refresh', handleHostsRefresh);
            window.removeEventListener('ssh-hosts:changed', handleHostsRefresh);
            window.removeEventListener('folders:changed', handleHostsRefresh);
        };
    }, []);

    const fetchHosts = async () => {
        try {
            setLoading(true);
            const data = await getSSHHosts();
            
            const cleanedHosts = data.map(host => {
                const cleanedHost = { ...host };
                if (cleanedHost.credentialId && cleanedHost.key) {
                    cleanedHost.key = undefined;
                    cleanedHost.keyPassword = undefined;
                    cleanedHost.keyType = undefined;
                    cleanedHost.authType = 'credential';
                } else if (cleanedHost.credentialId && cleanedHost.password) {
                    cleanedHost.password = undefined;
                    cleanedHost.authType = 'credential';
                } else if (cleanedHost.key && cleanedHost.password) {
                    cleanedHost.password = undefined;
                    cleanedHost.authType = 'key';
                }
                return cleanedHost;
            });
            
            setHosts(cleanedHosts);
            setError(null);
        } catch (err) {
            setError(t('hosts.failedToLoadHosts'));
        } finally {
            setLoading(false);
        }
    };

    const handleDelete = async (hostId: number, hostName: string) => {
        confirmWithToast(
            t('hosts.confirmDelete', { name: hostName }),
            async () => {
                try {
                    await deleteSSHHost(hostId);
                    toast.success(t('hosts.hostDeletedSuccessfully', { name: hostName }));
                    await fetchHosts();
                    window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
                } catch (err) {
                    toast.error(t('hosts.failedToDeleteHost'));
                }
            },
            'destructive'
        );
    };

    const handleExport = (host: SSHHost) => {
        const actualAuthType = host.credentialId ? 'credential' : (host.key ? 'key' : 'password');
        
        // Check if host uses sensitive authentication data
        if (actualAuthType === 'credential') {
            const confirmMessage = t('hosts.exportCredentialWarning', { 
                name: host.name || `${host.username}@${host.ip}` 
            });
            
            confirmWithToast(confirmMessage, () => {
                performExport(host, actualAuthType);
            });
            return;
        } else if (actualAuthType === 'password' || actualAuthType === 'key') {
            const confirmMessage = t('hosts.exportSensitiveDataWarning', { 
                name: host.name || `${host.username}@${host.ip}` 
            });
            
            confirmWithToast(confirmMessage, () => {
                performExport(host, actualAuthType);
            });
            return;
        }
        
        // No sensitive data, proceed directly
        performExport(host, actualAuthType);
    };

    const performExport = (host: SSHHost, actualAuthType: string) => {

        // Create export data with sensitive fields excluded
        const exportData: any = {
            name: host.name,
            ip: host.ip,
            port: host.port,
            username: host.username,
            authType: actualAuthType, // Use the determined authType, not the stored one
            folder: host.folder,
            tags: host.tags,
            pin: host.pin,
            enableTerminal: host.enableTerminal,
            enableTunnel: host.enableTunnel,
            enableFileManager: host.enableFileManager,
            defaultPath: host.defaultPath,
            tunnelConnections: host.tunnelConnections,
        };

        // Only include credentialId if actualAuthType is credential, but set it to null for security
        if (actualAuthType === 'credential') {
            exportData.credentialId = null; // Set to null instead of undefined so it's included but empty
        }

        // Remove undefined values from export, but keep null values
        const cleanExportData = Object.fromEntries(
            Object.entries(exportData).filter(([_, value]) => value !== undefined)
        );


        const blob = new Blob([JSON.stringify(cleanExportData, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${host.name || host.username + '@' + host.ip}-host-config.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);

        toast.success(`Exported host configuration for ${host.name || host.username}@${host.ip}`);
    };


    const handleEdit = (host: SSHHost) => {
        if (onEditHost) {
            onEditHost(host);
        }
    };

    const handleRemoveFromFolder = async (host: SSHHost) => {
        confirmWithToast(
            t('hosts.confirmRemoveFromFolder', { name: host.name || `${host.username}@${host.ip}`, folder: host.folder }),
            async () => {
                try {
                    setOperationLoading(true);
                    const updatedHost = { ...host, folder: '' };
                    await updateSSHHost(host.id, updatedHost);
                    toast.success(t('hosts.removedFromFolder', { name: host.name || `${host.username}@${host.ip}` }));
                    await fetchHosts();
                    window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
                } catch (err) {
                    toast.error(t('hosts.failedToRemoveFromFolder'));
                } finally {
                    setOperationLoading(false);
                }
            }
        );
    };

    const handleFolderRename = async (oldName: string) => {
        if (!editingFolderName.trim() || editingFolderName === oldName) {
            setEditingFolder(null);
            setEditingFolderName('');
            return;
        }

        try {
            setOperationLoading(true);
            await renameFolder(oldName, editingFolderName.trim());
            toast.success(t('hosts.folderRenamed', { oldName, newName: editingFolderName.trim() }));
            await fetchHosts();
            window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
            setEditingFolder(null);
            setEditingFolderName('');
        } catch (err) {
            toast.error(t('hosts.failedToRenameFolder'));
        } finally {
            setOperationLoading(false);
        }
    };

    const startFolderEdit = (folderName: string) => {
        setEditingFolder(folderName);
        setEditingFolderName(folderName);
    };

    const cancelFolderEdit = () => {
        setEditingFolder(null);
        setEditingFolderName('');
    };

    // Drag and drop handlers
    const handleDragStart = (e: React.DragEvent, host: SSHHost) => {
        setDraggedHost(host);
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', ''); // Required for Firefox
    };

    const handleDragEnd = () => {
        setDraggedHost(null);
        setDragOverFolder(null);
        dragCounter.current = 0;
    };

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    };

    const handleDragEnter = (e: React.DragEvent, folderName: string) => {
        e.preventDefault();
        dragCounter.current++;
        setDragOverFolder(folderName);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        dragCounter.current--;
        if (dragCounter.current === 0) {
            setDragOverFolder(null);
        }
    };

    const handleDrop = async (e: React.DragEvent, targetFolder: string) => {
        e.preventDefault();
        dragCounter.current = 0;
        setDragOverFolder(null);

        if (!draggedHost) return;

        const newFolder = targetFolder === t('hosts.uncategorized') ? '' : targetFolder;
        
        if (draggedHost.folder === newFolder) {
            setDraggedHost(null);
            return;
        }

        try {
            setOperationLoading(true);
            const updatedHost = { ...draggedHost, folder: newFolder };
            await updateSSHHost(draggedHost.id, updatedHost);
            toast.success(t('hosts.movedToFolder', { 
                name: draggedHost.name || `${draggedHost.username}@${draggedHost.ip}`,
                folder: targetFolder 
            }));
            await fetchHosts();
            window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
        } catch (err) {
            toast.error(t('hosts.failedToMoveToFolder'));
        } finally {
            setOperationLoading(false);
            setDraggedHost(null);
        }
    };

    const handleJsonImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (!file) return;

        try {
            setImporting(true);
            const text = await file.text();
            const data = JSON.parse(text);

            if (!Array.isArray(data.hosts) && !Array.isArray(data)) {
                throw new Error(t('hosts.jsonMustContainHosts'));
            }

            const hostsArray = Array.isArray(data.hosts) ? data.hosts : data;

            if (hostsArray.length === 0) {
                throw new Error(t('hosts.noHostsInJson'));
            }

            if (hostsArray.length > 100) {
                throw new Error(t('hosts.maxHostsAllowed'));
            }

            const result = await bulkImportSSHHosts(hostsArray);

            if (result.success > 0) {
                toast.success(t('hosts.importCompleted', { success: result.success, failed: result.failed }));
                if (result.errors.length > 0) {
                    toast.error(`Import errors: ${result.errors.join(', ')}`);
                }
                await fetchHosts();
                window.dispatchEvent(new CustomEvent('ssh-hosts:changed'));
            } else {
                toast.error(t('hosts.importFailed') + `: ${result.errors.join(', ')}`);
            }

        } catch (err) {
            const errorMessage = err instanceof Error ? err.message : t('hosts.failedToImportJson');
            toast.error(t('hosts.importError') + `: ${errorMessage}`);
        } finally {
            setImporting(false);
            event.target.value = '';
        }
    };

    const filteredAndSortedHosts = useMemo(() => {
        let filtered = hosts;

        if (searchQuery.trim()) {
            const query = searchQuery.toLowerCase();
            filtered = hosts.filter(host => {
                const searchableText = [
                    host.name || '',
                    host.username,
                    host.ip,
                    host.folder || '',
                    ...(host.tags || []),
                    host.authType,
                    host.defaultPath || ''
                ].join(' ').toLowerCase();
                return searchableText.includes(query);
            });
        }

        return filtered.sort((a, b) => {
            if (a.pin && !b.pin) return -1;
            if (!a.pin && b.pin) return 1;

            const aName = a.name || a.username;
            const bName = b.name || b.username;
            return aName.localeCompare(bName);
        });
    }, [hosts, searchQuery]);

    const hostsByFolder = useMemo(() => {
        const grouped: { [key: string]: SSHHost[] } = {};

        filteredAndSortedHosts.forEach(host => {
            const folder = host.folder || t('hosts.uncategorized');
            if (!grouped[folder]) {
                grouped[folder] = [];
            }
            grouped[folder].push(host);
        });

        const sortedFolders = Object.keys(grouped).sort((a, b) => {
            if (a === t('hosts.uncategorized')) return -1;
            if (b === t('hosts.uncategorized')) return 1;
            return a.localeCompare(b);
        });

        const sortedGrouped: { [key: string]: SSHHost[] } = {};
        sortedFolders.forEach(folder => {
            sortedGrouped[folder] = grouped[folder];
        });

        return sortedGrouped;
    }, [filteredAndSortedHosts]);

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

    if (error) {
        return (
            <div className="flex items-center justify-center h-full">
                <div className="text-center">
                    <p className="text-red-500 mb-4">{error}</p>
                    <Button onClick={fetchHosts} variant="outline">
                        {t('hosts.retry')}
                    </Button>
                </div>
            </div>
        );
    }

    if (hosts.length === 0) {
        return (
            <div className="flex flex-col h-full min-h-0">
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h2 className="text-xl font-semibold">{t('hosts.sshHosts')}</h2>
                        <p className="text-muted-foreground">
                            {t('hosts.hostsCount', { count: 0 })}
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        className="relative"
                                        onClick={() => document.getElementById('json-import-input')?.click()}
                                        disabled={importing}
                                    >
                                        {importing ? t('hosts.importing') : t('hosts.importJson')}
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent side="bottom"
                                                className="max-w-sm bg-popover text-popover-foreground border border-border shadow-lg">
                                    <div className="space-y-2">
                                        <p className="font-semibold text-sm">{t('hosts.importJsonTitle')}</p>
                                        <p className="text-xs text-muted-foreground">
                                            {t('hosts.importJsonDesc')}
                                        </p>
                                    </div>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>

                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                        const sampleData = {
                            hosts: [
                                {
                                    name: "Web Server - Production",
                                    ip: "192.168.1.100",
                                    port: 22,
                                    username: "admin",
                                    authType: "password",
                                    password: "your_secure_password_here",
                                    folder: "Production",
                                    tags: ["web", "production", "nginx"],
                                    pin: true,
                                    enableTerminal: true,
                                    enableTunnel: false,
                                    enableFileManager: true,
                                    defaultPath: "/var/www"
                                },
                                {
                                    name: "Database Server",
                                    ip: "192.168.1.101",
                                    port: 22,
                                    username: "dbadmin",
                                    authType: "key",
                                    key: "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
                                    keyPassword: "optional_key_passphrase",
                                    keyType: "ssh-ed25519",
                                    folder: "Production",
                                    tags: ["database", "production", "postgresql"],
                                    pin: false,
                                    enableTerminal: true,
                                    enableTunnel: true,
                                    enableFileManager: false,
                                    tunnelConnections: [
                                        {
                                            sourcePort: 5432,
                                            endpointPort: 5432,
                                            endpointHost: "Web Server - Production",
                                            maxRetries: 3,
                                            retryInterval: 10,
                                            autoStart: true
                                        }
                                    ]
                                },
                                {
                                    name: "Development Server",
                                    ip: "192.168.1.102",
                                    port: 2222,
                                    username: "developer",
                                    authType: "credential",
                                    credentialId: 1,
                                    folder: "Development",
                                    tags: ["dev", "testing"],
                                    pin: false,
                                    enableTerminal: true,
                                    enableTunnel: false,
                                    enableFileManager: true,
                                    defaultPath: "/home/developer"
                                }
                            ]
                        };

                                const blob = new Blob([JSON.stringify(sampleData, null, 2)], {type: 'application/json'});
                                const url = URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = 'sample-ssh-hosts.json';
                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                                URL.revokeObjectURL(url);
                            }}
                        >
                            {t('hosts.downloadSample')}
                        </Button>

                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                                window.open('https://docs.termix.site/json-import', '_blank');
                            }}
                        >
                            {t('hosts.formatGuide')}
                        </Button>

                        <div className="w-px h-6 bg-border mx-2"/>

                        <Button onClick={fetchHosts} variant="outline" size="sm">
                            {t('hosts.refresh')}
                        </Button>
                    </div>
                </div>


                <input
                    id="json-import-input"
                    type="file"
                    accept=".json"
                    onChange={handleJsonImport}
                    style={{display: 'none'}}
                />

                <div className="flex items-center justify-center flex-1">
                    <div className="text-center">
                        <Server className="h-12 w-12 text-muted-foreground mx-auto mb-4"/>
                        <h3 className="text-lg font-semibold mb-2">{t('hosts.noHosts')}</h3>
                        <p className="text-muted-foreground mb-4">
                            {t('hosts.noHostsMessage')}
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="flex flex-col h-full min-h-0">
            <div className="flex items-center justify-between mb-2">
                <div>
                    <h2 className="text-xl font-semibold">{t('hosts.sshHosts')}</h2>
                    <p className="text-muted-foreground">
                        {t('hosts.hostsCount', { count: filteredAndSortedHosts.length })}
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    className="relative"
                                    onClick={() => document.getElementById('json-import-input')?.click()}
                                    disabled={importing}
                                >
                                    {importing ? t('hosts.importing') : t('hosts.importJson')}
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent side="bottom"
                                            className="max-w-sm bg-popover text-popover-foreground border border-border shadow-lg">
                                <div className="space-y-2">
                                    <p className="font-semibold text-sm">{t('hosts.importJsonTitle')}</p>
                                    <p className="text-xs text-muted-foreground">
                                        {t('hosts.importJsonDesc')}
                                    </p>
                                </div>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>

                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                            const sampleData = {
                                hosts: [
                                    {
                                        name: "Web Server - Production",
                                        ip: "192.168.1.100",
                                        port: 22,
                                        username: "admin",
                                        authType: "password",
                                        password: "your_secure_password_here",
                                        folder: "Production",
                                        tags: ["web", "production", "nginx"],
                                        pin: true,
                                        enableTerminal: true,
                                        enableTunnel: false,
                                        enableFileManager: true,
                                        defaultPath: "/var/www"
                                    },
                                    {
                                        name: "Database Server",
                                        ip: "192.168.1.101",
                                        port: 22,
                                        username: "dbadmin",
                                        authType: "key",
                                        key: "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
                                        keyPassword: "optional_key_passphrase",
                                        keyType: "ssh-ed25519",
                                        folder: "Production",
                                        tags: ["database", "production", "postgresql"],
                                        pin: false,
                                        enableTerminal: true,
                                        enableTunnel: true,
                                        enableFileManager: false,
                                        tunnelConnections: [
                                            {
                                                sourcePort: 5432,
                                                endpointPort: 5432,
                                                endpointHost: "Web Server - Production",
                                                maxRetries: 3,
                                                retryInterval: 10,
                                                autoStart: true
                                            }
                                        ]
                                    },
                                    {
                                        name: "Development Server",
                                        ip: "192.168.1.102",
                                        port: 2222,
                                        username: "developer",
                                        authType: "credential",
                                        credentialId: 1,
                                        folder: "Development",
                                        tags: ["dev", "testing"],
                                        pin: false,
                                        enableTerminal: true,
                                        enableTunnel: false,
                                        enableFileManager: true,
                                        defaultPath: "/home/developer"
                                    }
                                ]
                            };

                            const blob = new Blob([JSON.stringify(sampleData, null, 2)], {type: 'application/json'});
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = 'sample-ssh-hosts.json';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            URL.revokeObjectURL(url);
                        }}
                    >
                        {t('hosts.downloadSample')}
                    </Button>

                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                            window.open('https://docs.termix.site/json-import', '_blank');
                        }}
                    >
                        {t('hosts.formatGuide')}
                    </Button>

                    <div className="w-px h-6 bg-border mx-2"/>

                    <Button onClick={fetchHosts} variant="outline" size="sm">
                        {t('hosts.refresh')}
                    </Button>
                </div>
            </div>


            <input
                id="json-import-input"
                type="file"
                accept=".json"
                onChange={handleJsonImport}
                style={{display: 'none'}}
            />

            <div className="relative mb-3">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
                <Input
                    placeholder={t('placeholders.searchHosts')}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                />
            </div>

            <ScrollArea className="flex-1 min-h-0">
                <div className="space-y-2 pb-20">
                    {Object.entries(hostsByFolder).map(([folder, folderHosts]) => (
                        <div 
                            key={folder} 
                            className={`border rounded-md transition-all duration-200 ${
                                dragOverFolder === folder ? 'border-blue-500 bg-blue-500/10' : ''
                            }`}
                            onDragOver={handleDragOver}
                            onDragEnter={(e) => handleDragEnter(e, folder)}
                            onDragLeave={handleDragLeave}
                            onDrop={(e) => handleDrop(e, folder)}
                        >
                            <Accordion type="multiple" defaultValue={Object.keys(hostsByFolder)}>
                                <AccordionItem value={folder} className="border-none">
                                    <AccordionTrigger
                                        className="px-2 py-1 bg-muted/20 border-b hover:no-underline rounded-t-md">
                                        <div className="flex items-center gap-2 flex-1">
                                            <Folder className="h-4 w-4"/>
                                            {editingFolder === folder ? (
                                                <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                                                    <Input
                                                        value={editingFolderName}
                                                        onChange={(e) => setEditingFolderName(e.target.value)}
                                                        onKeyDown={(e) => {
                                                            if (e.key === 'Enter') handleFolderRename(folder);
                                                            if (e.key === 'Escape') cancelFolderEdit();
                                                        }}
                                                        className="h-6 text-sm px-2 flex-1"
                                                        autoFocus
                                                        disabled={operationLoading}
                                                    />
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            handleFolderRename(folder);
                                                        }}
                                                        className="h-6 w-6 p-0"
                                                        disabled={operationLoading}
                                                    >
                                                        <Check className="h-3 w-3"/>
                                                    </Button>
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            cancelFolderEdit();
                                                        }}
                                                        className="h-6 w-6 p-0"
                                                        disabled={operationLoading}
                                                    >
                                                        <X className="h-3 w-3"/>
                                                    </Button>
                                                </div>
                                            ) : (
                                                <>
                                                    <span 
                                                        className="font-medium cursor-pointer hover:text-blue-400 transition-colors" 
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            if (folder !== t('hosts.uncategorized')) {
                                                                startFolderEdit(folder);
                                                            }
                                                        }}
                                                        title={folder !== t('hosts.uncategorized') ? 'Click to rename folder' : ''}
                                                    >
                                                        {folder}
                                                    </span>
                                                    {folder !== t('hosts.uncategorized') && (
                                                        <Button
                                                            size="sm"
                                                            variant="ghost"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                startFolderEdit(folder);
                                                            }}
                                                            className="h-4 w-4 p-0 opacity-50 hover:opacity-100 transition-opacity"
                                                            title="Rename folder"
                                                        >
                                                            <Pencil className="h-3 w-3"/>
                                                        </Button>
                                                    )}
                                                </>
                                            )}
                                            <Badge variant="secondary" className="text-xs">
                                                {folderHosts.length}
                                            </Badge>
                                        </div>
                                    </AccordionTrigger>
                                    <AccordionContent className="p-2">
                                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                                            {folderHosts.map((host) => (
                                                <TooltipProvider key={host.id}>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <div
                                                                draggable
                                                                onDragStart={(e) => handleDragStart(e, host)}
                                                                onDragEnd={handleDragEnd}
                                                                className={`bg-[#222225] border border-input rounded-lg cursor-pointer hover:shadow-lg hover:border-blue-400/50 hover:bg-[#2a2a2d] transition-all duration-200 p-3 group relative ${
                                                                    draggedHost?.id === host.id ? 'opacity-50 scale-95' : ''
                                                                }`}
                                                                onClick={() => handleEdit(host)}
                                                            >
                                                                <div className="flex items-start justify-between">
                                                                    <div className="flex-1 min-w-0">
                                                                        <div className="flex items-center gap-1">
                                                                            {host.pin && <Pin
                                                                                className="h-3 w-3 text-yellow-500 flex-shrink-0"/>}
                                                                            <h3 className="font-medium truncate text-sm">
                                                                                {host.name || `${host.username}@${host.ip}`}
                                                                            </h3>
                                                                        </div>
                                                            <p className="text-xs text-muted-foreground truncate">
                                                                {host.ip}:{host.port}
                                                            </p>
                                                            <p className="text-xs text-muted-foreground truncate">
                                                                {host.username}
                                                            </p>
                                                        </div>
                                                        <div className="flex gap-1 flex-shrink-0 ml-1">
                                                            {host.folder && host.folder !== '' && (
                                                                <Tooltip>
                                                                    <TooltipTrigger asChild>
                                                                        <Button
                                                                            size="sm"
                                                                            variant="ghost"
                                                                            onClick={(e) => {
                                                                                e.stopPropagation();
                                                                                handleRemoveFromFolder(host);
                                                                            }}
                                                                            className="h-5 w-5 p-0 text-orange-500 hover:text-orange-700 hover:bg-orange-500/10"
                                                                            disabled={operationLoading}
                                                                        >
                                                                            <FolderMinus className="h-3 w-3"/>
                                                                        </Button>
                                                                    </TooltipTrigger>
                                                                    <TooltipContent>
                                                                        <p>Remove from folder "{host.folder}"</p>
                                                                    </TooltipContent>
                                                                </Tooltip>
                                                            )}
                                                            <Tooltip>
                                                                <TooltipTrigger asChild>
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            handleEdit(host);
                                                                        }}
                                                                        className="h-5 w-5 p-0 hover:bg-blue-500/10"
                                                                    >
                                                                        <Edit className="h-3 w-3"/>
                                                                    </Button>
                                                                </TooltipTrigger>
                                                                <TooltipContent>
                                                                    <p>Edit host</p>
                                                                </TooltipContent>
                                                            </Tooltip>
                                                            <Tooltip>
                                                                <TooltipTrigger asChild>
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            handleDelete(host.id, host.name || `${host.username}@${host.ip}`);
                                                                        }}
                                                                        className="h-5 w-5 p-0 text-red-500 hover:text-red-700 hover:bg-red-500/10"
                                                                    >
                                                                        <Trash2 className="h-3 w-3"/>
                                                                    </Button>
                                                                </TooltipTrigger>
                                                                <TooltipContent>
                                                                    <p>Delete host</p>
                                                                </TooltipContent>
                                                            </Tooltip>
                                                            <Tooltip>
                                                                <TooltipTrigger asChild>
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        onClick={(e) => {
                                                                            e.stopPropagation();
                                                                            handleExport(host);
                                                                        }}
                                                                        className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700 hover:bg-blue-500/10"
                                                                    >
                                                                        <Upload className="h-3 w-3"/>
                                                                    </Button>
                                                                </TooltipTrigger>
                                                                <TooltipContent>
                                                                    <p>Export host</p>
                                                                </TooltipContent>
                                                            </Tooltip>

                                                        </div>
                                                    </div>

                                                    <div className="mt-2 space-y-1">
                                                        {host.tags && host.tags.length > 0 && (
                                                            <div className="flex flex-wrap gap-1">
                                                                {host.tags.slice(0, 6).map((tag, index) => (
                                                                    <Badge key={index} variant="outline"
                                                                           className="text-xs px-1 py-0">
                                                                        <Tag className="h-2 w-2 mr-0.5"/>
                                                                        {tag}
                                                                    </Badge>
                                                                ))}
                                                                {host.tags.length > 6 && (
                                                                    <Badge variant="outline"
                                                                           className="text-xs px-1 py-0">
                                                                        +{host.tags.length - 6}
                                                                    </Badge>
                                                                )}
                                                            </div>
                                                        )}

                                                        <div className="flex flex-wrap gap-1">
                                                            {host.enableTerminal && (
                                                                <Badge variant="outline" className="text-xs px-1 py-0">
                                                                    <Terminal className="h-2 w-2 mr-0.5"/>
                                                                    {t('hosts.terminalBadge')}
                                                                </Badge>
                                                            )}
                                                            {host.enableTunnel && (
                                                                <Badge variant="outline" className="text-xs px-1 py-0">
                                                                    <Network className="h-2 w-2 mr-0.5"/>
                                                                    {t('hosts.tunnelBadge')}
                                                                    {host.tunnelConnections && host.tunnelConnections.length > 0 && (
                                                                        <span
                                                                            className="ml-0.5">({host.tunnelConnections.length})</span>
                                                                    )}
                                                                </Badge>
                                                            )}
                                                            {host.enableFileManager && (
                                                                <Badge variant="outline" className="text-xs px-1 py-0">
                                                                    <FileEdit className="h-2 w-2 mr-0.5"/>
                                                                    {t('hosts.fileManagerBadge')}
                                                                </Badge>
                                                            )}
                                                        </div>
                                                    </div>
                                                </div>
                                                            </TooltipTrigger>
                                                        <TooltipContent>
                                                            <div className="text-center">
                                                                <p className="font-medium">Click to edit host</p>
                                                                <p className="text-xs text-muted-foreground">Drag to move between folders</p>
                                                            </div>
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </TooltipProvider>
                                            ))}
                                        </div>
                                    </AccordionContent>
                                </AccordionItem>
                            </Accordion>
                        </div>
                    ))}
                </div>
            </ScrollArea>
        </div>
    );
}