import React from "react";
import {Button} from "@/components/ui/button.tsx";
import {Card} from "@/components/ui/card.tsx";
import {Separator} from "@/components/ui/separator.tsx";
import {useTranslation} from 'react-i18next';
import {
    Loader2,
    Pin,
    Network,
    Tag,
    Play,
    Square,
    AlertCircle,
    Clock,
    Wifi,
    WifiOff,
    X
} from "lucide-react";
import {Badge} from "@/components/ui/badge.tsx";
import type {TunnelStatus, SSHTunnelObjectProps} from '../../../types/index.js';

export function TunnelObject({
                                 host,
                                 tunnelStatuses,
                                 tunnelActions,
                                 onTunnelAction,
                                 compact = false,
                                 bare = false
                             }: SSHTunnelObjectProps): React.ReactElement {
    const {t} = useTranslation();

    const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => {
        const tunnel = host.tunnelConnections[tunnelIndex];
        const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
        return tunnelStatuses[tunnelName];
    };

    const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => {
        if (!status) return {
            icon: <WifiOff className="h-4 w-4"/>,
            text: t('tunnels.unknown'),
            color: 'text-muted-foreground',
            bgColor: 'bg-muted/50',
            borderColor: 'border-border'
        };

        const statusValue = status.status || 'DISCONNECTED';

        switch (statusValue.toUpperCase()) {
            case 'CONNECTED':
                return {
                    icon: <Wifi className="h-4 w-4"/>,
                    text: t('tunnels.connected'),
                    color: 'text-green-600 dark:text-green-400',
                    bgColor: 'bg-green-500/10 dark:bg-green-400/10',
                    borderColor: 'border-green-500/20 dark:border-green-400/20'
                };
            case 'CONNECTING':
                return {
                    icon: <Loader2 className="h-4 w-4 animate-spin"/>,
                    text: t('tunnels.connecting'),
                    color: 'text-blue-600 dark:text-blue-400',
                    bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
                    borderColor: 'border-blue-500/20 dark:border-blue-400/20'
                };
            case 'DISCONNECTING':
                return {
                    icon: <Loader2 className="h-4 w-4 animate-spin"/>,
                    text: t('tunnels.disconnecting'),
                    color: 'text-orange-600 dark:text-orange-400',
                    bgColor: 'bg-orange-500/10 dark:bg-orange-400/10',
                    borderColor: 'border-orange-500/20 dark:border-orange-400/20'
                };
            case 'DISCONNECTED':
                return {
                    icon: <WifiOff className="h-4 w-4"/>,
                    text: t('tunnels.disconnected'),
                    color: 'text-muted-foreground',
                    bgColor: 'bg-muted/30',
                    borderColor: 'border-border'
                };
            case 'WAITING':
                return {
                    icon: <Clock className="h-4 w-4"/>,
                    color: 'text-blue-600 dark:text-blue-400',
                    bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
                    borderColor: 'border-blue-500/20 dark:border-blue-400/20'
                };
            case 'ERROR':
            case 'FAILED':
                return {
                    icon: <AlertCircle className="h-4 w-4"/>,
                    text: status.reason || t('tunnels.error'),
                    color: 'text-red-600 dark:text-red-400',
                    bgColor: 'bg-red-500/10 dark:bg-red-400/10',
                    borderColor: 'border-red-500/20 dark:border-red-400/20'
                };
            default:
                return {
                    icon: <WifiOff className="h-4 w-4"/>,
                    text: statusValue,
                    color: 'text-muted-foreground',
                    bgColor: 'bg-muted/30',
                    borderColor: 'border-border'
                };
        }
    };

    if (bare) {
        return (
            <div className="w-full min-w-0">
                <div className="space-y-3">
                    {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
                        <div className="space-y-3">
                            {host.tunnelConnections.map((tunnel, tunnelIndex) => {
                                const status = getTunnelStatus(tunnelIndex);
                                const statusDisplay = getTunnelStatusDisplay(status);
                                const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
                                const isActionLoading = tunnelActions[tunnelName];
                                const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
                                const isConnected = statusValue === 'CONNECTED';
                                const isConnecting = statusValue === 'CONNECTING';
                                const isDisconnecting = statusValue === 'DISCONNECTING';
                                const isRetrying = statusValue === 'RETRYING';
                                const isWaiting = statusValue === 'WAITING';

                                return (
                                    <div key={tunnelIndex}
                                         className={`border rounded-lg p-3 min-w-0 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
                                        <div className="flex items-start justify-between gap-2">
                                            <div className="flex items-start gap-2 flex-1 min-w-0">
                                                <span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
                                                    {statusDisplay.icon}
                                                </span>
                                                <div className="flex-1 min-w-0">
                                                    <div className="text-sm font-medium break-words">
                                                        {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
                                                    </div>
                                                    <div className={`text-xs ${statusDisplay.color} font-medium`}>
                                                        {statusDisplay.text}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="flex flex-col items-end gap-1 flex-shrink-0 min-w-[120px]">
                                                {!isActionLoading ? (
                                                    <div className="flex flex-col gap-1">
                                                        {isConnected ? (
                                                            <>
                                                                <Button
                                                                    size="sm"
                                                                    variant="outline"
                                                                    onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
                                                                    className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
                                                                >
                                                                    <Square className="h-3 w-3 mr-1"/>
                                                                    {t('tunnels.disconnect')}
                                                                </Button>
                                                            </>
                                                        ) : isRetrying || isWaiting ? (
                                                            <Button
                                                                size="sm"
                                                                variant="outline"
                                                                onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
                                                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
                                                            >
                                                                <X className="h-3 w-3 mr-1"/>
                                                                {t('tunnels.cancel')}
                                                            </Button>
                                                        ) : (
                                                            <Button
                                                                size="sm"
                                                                variant="outline"
                                                                onClick={() => onTunnelAction('connect', host, tunnelIndex)}
                                                                disabled={isConnecting || isDisconnecting}
                                                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
                                                            >
                                                                <Play className="h-3 w-3 mr-1"/>
                                                                {t('tunnels.connect')}
                                                            </Button>
                                                        )}
                                                    </div>
                                                ) : (
                                                    <Button
                                                        size="sm"
                                                        variant="outline"
                                                        disabled
                                                        className="h-7 px-2 text-muted-foreground border-border text-xs"
                                                    >
                                                        <Loader2 className="h-3 w-3 mr-1 animate-spin"/>
                                                        {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
                                                    </Button>
                                                )}
                                            </div>
                                        </div>

                                        {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
                                            <div
                                                className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
                                                <div className="font-medium mb-1">{t('tunnels.error')}:</div>
                                                {status.reason}
                                                {status.reason && status.reason.includes('Max retries exhausted') && (
                                                    <>
                                                        <div
                                                            className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
                                                            {t('tunnels.checkDockerLogs')} <a
                                                            href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
                                                            rel="noopener noreferrer"
                                                            className="underline text-blue-600 dark:text-blue-400">Discord</a> or
                                                            create a <a
                                                            href="https://github.com/LukeGus/Termix/issues/new"
                                                            target="_blank" rel="noopener noreferrer"
                                                            className="underline text-blue-600 dark:text-blue-400">GitHub
                                                            issue</a> for help.
                                                        </div>
                                                    </>
                                                )}
                                            </div>
                                        )}

                                        {(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
                                            <div
                                                className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
                                                <div className="font-medium mb-1">
                                                    {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
                                                </div>
                                                <div>
                                                    {t('tunnels.attempt', {
                                                        current: status.retryCount,
                                                        max: status.maxRetries
                                                    })}
                                                    {status.nextRetryIn && (
                                                        <span> • {t('tunnels.nextRetryIn', {seconds: status.nextRetryIn})}</span>
                                                    )}
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="text-center py-4 text-muted-foreground">
                            <Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
                            <p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
                        </div>
                    )}
                </div>
            </div>
        );
    }

    return (
        <Card className="w-full bg-card border-border shadow-sm hover:shadow-md transition-shadow relative group p-0">
            <div className="p-4">
                {!compact && (
                    <div className="flex items-center justify-between gap-2 mb-3">
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                            {host.pin && <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0"/>}
                            <div className="flex-1 min-w-0">
                                <h3 className="font-semibold text-card-foreground truncate">
                                    {host.name || `${host.username}@${host.ip}`}
                                </h3>
                                <p className="text-xs text-muted-foreground truncate">
                                    {host.ip}:{host.port} • {host.username}
                                </p>
                            </div>
                        </div>
                    </div>
                )}

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

                {!compact && <Separator className="mb-3"/>}

                <div className="space-y-3">
                    {!compact && (
                        <h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
                            <Network className="h-4 w-4"/>
                            {t('tunnels.tunnelConnections')} ({host.tunnelConnections.length})
                        </h4>
                    )}
                    {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
                        <div className="space-y-3">
                            {host.tunnelConnections.map((tunnel, tunnelIndex) => {
                                const status = getTunnelStatus(tunnelIndex);
                                const statusDisplay = getTunnelStatusDisplay(status);
                                const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
                                const isActionLoading = tunnelActions[tunnelName];
                                const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
                                const isConnected = statusValue === 'CONNECTED';
                                const isConnecting = statusValue === 'CONNECTING';
                                const isDisconnecting = statusValue === 'DISCONNECTING';
                                const isRetrying = statusValue === 'RETRYING';
                                const isWaiting = statusValue === 'WAITING';

                                return (
                                    <div key={tunnelIndex}
                                         className={`border rounded-lg p-3 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
                                        <div className="flex items-start justify-between gap-2">
                                            <div className="flex items-start gap-2 flex-1 min-w-0">
                                                <span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
                                                    {statusDisplay.icon}
                                                </span>
                                                <div className="flex-1 min-w-0">
                                                    <div className="text-sm font-medium break-words">
                                                        {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
                                                    </div>
                                                    <div className={`text-xs ${statusDisplay.color} font-medium`}>
                                                        {statusDisplay.text}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="flex items-center gap-1 flex-shrink-0">
                                                {!isActionLoading && (
                                                    <div className="flex flex-col gap-1">
                                                        {isConnected ? (
                                                            <>
                                                                <Button
                                                                    size="sm"
                                                                    variant="outline"
                                                                    onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
                                                                    className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
                                                                >
                                                                    <Square className="h-3 w-3 mr-1"/>
                                                                    {t('tunnels.disconnect')}
                                                                </Button>
                                                            </>
                                                        ) : isRetrying || isWaiting ? (
                                                            <Button
                                                                size="sm"
                                                                variant="outline"
                                                                onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
                                                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
                                                            >
                                                                <X className="h-3 w-3 mr-1"/>
                                                                {t('tunnels.cancel')}
                                                            </Button>
                                                        ) : (
                                                            <Button
                                                                size="sm"
                                                                variant="outline"
                                                                onClick={() => onTunnelAction('connect', host, tunnelIndex)}
                                                                disabled={isConnecting || isDisconnecting}
                                                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
                                                            >
                                                                <Play className="h-3 w-3 mr-1"/>
                                                                {t('tunnels.connect')}
                                                            </Button>
                                                        )}
                                                    </div>
                                                )}
                                                {isActionLoading && (
                                                    <Button
                                                        size="sm"
                                                        variant="outline"
                                                        disabled
                                                        className="h-7 px-2 text-muted-foreground border-border text-xs"
                                                    >
                                                        <Loader2 className="h-3 w-3 mr-1 animate-spin"/>
                                                        {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
                                                    </Button>
                                                )}
                                            </div>
                                        </div>

                                        {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
                                            <div
                                                className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
                                                <div className="font-medium mb-1">{t('tunnels.error')}:</div>
                                                {status.reason}
                                                {status.reason && status.reason.includes('Max retries exhausted') && (
                                                    <>
                                                        <div
                                                            className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
                                                            {t('tunnels.checkDockerLogs')} <a
                                                            href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
                                                            rel="noopener noreferrer"
                                                            className="underline text-blue-600 dark:text-blue-400">Discord</a> or
                                                            create a <a
                                                            href="https://github.com/LukeGus/Termix/issues/new"
                                                            target="_blank" rel="noopener noreferrer"
                                                            className="underline text-blue-600 dark:text-blue-400">GitHub
                                                            issue</a> for help.
                                                        </div>
                                                    </>
                                                )}
                                            </div>
                                        )}

                                        {(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
                                            <div
                                                className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
                                                <div className="font-medium mb-1">
                                                    {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
                                                </div>
                                                <div>
                                                    {t('tunnels.attempt', {
                                                        current: status.retryCount,
                                                        max: status.maxRetries
                                                    })}
                                                    {status.nextRetryIn && (
                                                        <span> • {t('tunnels.nextRetryIn', {seconds: status.nextRetryIn})}</span>
                                                    )}
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="text-center py-4 text-muted-foreground">
                            <Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
                            <p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
                        </div>
                    )}
                </div>
            </div>
        </Card>
    );
}