NetMesh/components/terminal/TerminalConnectionProgress.tsx

/**
 * Terminal Connection Progress
 * Displays connection progress with logs and timeout
 */
import { Loader2, Play } from 'lucide-react';
import React from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import { Button } from '../ui/button';
import { ScrollArea } from '../ui/scroll-area';

export interface TerminalConnectionProgressProps {
    status: 'connecting' | 'connected' | 'disconnected';
    error: string | null;
    timeLeft: number;
    isAwaitingUserInput?: boolean;
    showEnterReconnectHint?: boolean;
    isCancelling: boolean;
    showLogs: boolean;
    progressLogs: string[];
    onCancelConnect: () => void;
    onCloseSession: () => void;
    onRetry?: () => void;
    reconnectLabel?: string;
}

export interface TerminalConnectionLogListProps {
    progressLogs: string[];
    error?: string | null;
}

export const TerminalConnectionLogList: React.FC<TerminalConnectionLogListProps> = ({
    progressLogs,
    error,
}) => (
    <div className="rounded-md border border-border/35 bg-background/40">
        <ScrollArea className="max-h-44">
            <div className="space-y-1 p-2.5 pb-4 pr-4 text-xs text-foreground/90">
                {progressLogs.map((line, idx) => (
                    <div key={idx} className="flex items-start gap-2">
                        <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500" />
                        <div className="min-w-0 break-words leading-5">{line}</div>
                    </div>
                ))}
                {error && (
                    <div className="flex items-start gap-2 text-destructive">
                        <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-destructive" />
                        <div className="min-w-0 break-words leading-5">{error}</div>
                    </div>
                )}
            </div>
        </ScrollArea>
    </div>
);

export const TerminalConnectionProgress: React.FC<TerminalConnectionProgressProps> = ({
    status,
    error,
    timeLeft,
    isAwaitingUserInput = false,
    showEnterReconnectHint = false,
    isCancelling: _isCancelling,
    showLogs,
    progressLogs,
    onCancelConnect: _onCancelConnect,
    onCloseSession,
    onRetry,
    reconnectLabel,
}) => {
    const { t } = useI18n();

    return (
        <>
            <div className="flex items-start justify-between gap-3 text-[11px] text-muted-foreground">
                <div className="flex min-w-0 items-start gap-2">
                    {status === 'connecting' ? (
                        <>
                            <Loader2 className="h-3 w-3 mt-0.5 flex-shrink-0 animate-spin" />
                            <span className="min-w-0 whitespace-pre-wrap break-words leading-5">
                                {isAwaitingUserInput
                                    ? t('terminal.progress.waitingForUserInput')
                                    : t('terminal.progress.timeoutIn', { seconds: timeLeft })}
                            </span>
                        </>
                    ) : (
                        <>
                            <div className="mt-[0.4rem] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-destructive" />
                            <span className="min-w-0 whitespace-pre-wrap break-words leading-5 text-destructive">
                                {error || t('terminal.progress.disconnected')}
                            </span>
                        </>
                    )}
                </div>
            </div>

            {showLogs && (
                <TerminalConnectionLogList progressLogs={progressLogs} error={error} />
            )}

            {status !== 'connecting' && (
                <div className="flex flex-wrap items-center justify-between gap-2">
                    {showEnterReconnectHint && (
                        <div className="min-w-0 break-words text-[11px] leading-5 text-muted-foreground">
                            {t('terminal.progress.enterReconnectHint')}
                        </div>
                    )}
                    <div className="ml-auto flex shrink-0 justify-end gap-2">
                        <Button variant="ghost" size="sm" className="h-7 px-3 text-[11px]" onClick={onCloseSession}>
                            {t('terminal.toolbar.closeSession')}
                        </Button>
                        {onRetry && (
                            <Button size="sm" className="h-7 px-3 text-[11px]" onClick={onRetry}>
                                <Play className="h-3 w-3 mr-1.5" /> {reconnectLabel ?? t('terminal.progress.startOver')}
                            </Button>
                        )}
                    </div>
                </div>
            )}
        </>
    );
};

export default TerminalConnectionProgress;