NetMesh/components/sftp/SftpHostPicker.tsx

/**
 * SFTP Host Picker Dialog
 */

import { Monitor, Search } from 'lucide-react';
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useI18n } from '../../application/i18n/I18nProvider';
import {
    sftpHostEndpointsEqual,
    sftpSourceSessionIdForHost,
    type SftpConnectedHostEntry,
} from '../../domain/sftpConnectedHosts';
import { isPluginHostProtocol } from '../../domain/pluginConnection';
import { Host } from '../../types';
import { DistroAvatar } from '../DistroAvatar';
import { getQuickSwitcherRowStateClass, shouldUseQuickSwitcherPointerNavigation } from '../QuickSwitcher';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
import { Input } from '../ui/input';
import {
    VariableSizeVirtualList,
    type VariableSizeVirtualListHandle,
} from '../ui/VariableSizeVirtualList';
import { clampListIndex, stepListIndex } from '../ui/virtualListMath';

const SFTP_PICKER_ROW_HEIGHT = 44;
const SFTP_PICKER_HEADER_HEIGHT = 32;
const SFTP_PICKER_EMPTY_HEIGHT = 56;

interface SftpHostPickerProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    hosts: Host[];
    connectedHosts?: SftpConnectedHostEntry[];
    side: 'left' | 'right';
    hostSearch: string;
    onHostSearchChange: (search: string) => void;
    onSelectLocal: () => void;
    onSelectHost: (host: Host, options?: { sourceSessionId?: string }) => void;
}

const StatusDot: React.FC = () => (
    <span className="h-1.5 w-1.5 rounded-full shrink-0 bg-emerald-500" aria-hidden />
);

function formatHostMeta(host: Host): string {
    const endpoint = host.username ? `${host.username}@${host.hostname}` : host.hostname;
    return host.group ? `${endpoint} · ${host.group}` : endpoint;
}

type PickerItem =
    | { type: 'local'; id: string }
    | { type: 'connected'; id: string; entry: SftpConnectedHostEntry }
    | { type: 'host'; id: string; host: Host };

type VisualRow =
    | { kind: 'header'; key: string; label: string }
    | { kind: 'item'; key: string; item: PickerItem; itemIndex: number }
    | { kind: 'empty'; key: string; message: string };

const SftpHostPickerInner: React.FC<SftpHostPickerProps> = ({
    open,
    onOpenChange,
    hosts,
    connectedHosts = [],
    side,
    hostSearch,
    onHostSearchChange,
    onSelectLocal,
    onSelectHost,
}) => {
    const { t } = useI18n();
    const inputRef = useRef<HTMLInputElement>(null);
    const listRef = useRef<VariableSizeVirtualListHandle>(null);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true);
    const isKeyboardNavigatingRef = useRef(true);
    const term = hostSearch.trim().toLowerCase();

    const filteredConnectedHosts = useMemo(() => {
        return connectedHosts.filter(({ host }) =>
            !term ||
            host.label.toLowerCase().includes(term) ||
            host.hostname.toLowerCase().includes(term) ||
            host.username.toLowerCase().includes(term),
        );
    }, [connectedHosts, term]);

    const connectedByHostId = useMemo(() => {
        const map = new Map<string, SftpConnectedHostEntry>();
        for (const entry of filteredConnectedHosts) {
            map.set(entry.host.id, entry);
        }
        return map;
    }, [filteredConnectedHosts]);

    const filteredHosts = useMemo(() => {
        return hosts.filter((h) => {
            // SFTP is an SSH-specific host capability. Plugin protocols may
            // provide arbitrary transports and cannot be treated as SSH.
            if (h.protocol === "serial" || isPluginHostProtocol(h.protocol)) return false;
            // Hide a saved host only when Connected already shows the same endpoint.
            // If the vault host was edited after connect, keep both: Live (old) + Saved (new).
            const connected = connectedByHostId.get(h.id);
            if (connected && sftpHostEndpointsEqual(h, connected.host)) return false;
            return !term
                || h.label.toLowerCase().includes(term)
                || h.hostname.toLowerCase().includes(term);
        }).sort((a, b) => a.label.localeCompare(b.label));
    }, [hosts, term, connectedByHostId]);
    const sideLabel = side === 'left' ? t('common.left') : t('common.right');

    const { items, visualRows, itemIndexToVisualIndex } = useMemo(() => {
        const nextItems: PickerItem[] = [];
        const nextVisual: VisualRow[] = [];
        const nextMap = new Map<number, number>();

        const pushHeader = (key: string, label: string) => {
            nextVisual.push({ kind: 'header', key, label });
        };
        const pushItem = (item: PickerItem) => {
            const itemIndex = nextItems.length;
            nextItems.push(item);
            nextMap.set(itemIndex, nextVisual.length);
            nextVisual.push({ kind: 'item', key: item.id, item, itemIndex });
        };

        pushHeader('header:local', t('sftp.picker.local.badge'));
        pushItem({ type: 'local', id: 'local' });

        if (filteredConnectedHosts.length > 0) {
            pushHeader('header:connected', t('sftp.picker.connected.section'));
            for (const entry of filteredConnectedHosts) {
                pushItem({
                    type: 'connected',
                    id: `connected:${entry.sessionId}`,
                    entry,
                });
            }
        }

        // Only show the Hosts section when there are saved hosts to list, or when
        // nothing matched at all (no connected + no saved). Avoid a dangling
        // "Hosts" header after connected-only results hide the saved inventory.
        if (filteredHosts.length > 0) {
            pushHeader('header:hosts', t('vault.nav.hosts'));
            for (const host of filteredHosts) {
                pushItem({ type: 'host', id: host.id, host });
            }
        } else if (filteredConnectedHosts.length === 0) {
            pushHeader('header:hosts', t('vault.nav.hosts'));
            nextVisual.push({
                kind: 'empty',
                key: 'empty:hosts',
                message: t('sftp.picker.noMatch'),
            });
        }

        return {
            items: nextItems,
            visualRows: nextVisual,
            itemIndexToVisualIndex: nextMap,
        };
    }, [filteredConnectedHosts, filteredHosts, t]);

    useEffect(() => {
        if (!open) return;
        setSelectedIndex(0);
        isKeyboardNavigatingRef.current = true;
        setIsKeyboardNavigating(true);
        const focusTimer = setTimeout(() => inputRef.current?.focus(), 50);
        return () => clearTimeout(focusTimer);
    }, [open]);

    useEffect(() => {
        if (!open) return;
        setSelectedIndex(0);
        isKeyboardNavigatingRef.current = true;
        setIsKeyboardNavigating(true);
    }, [hostSearch, open]);

    useEffect(() => {
        if (!open) return;
        setSelectedIndex((prev) => clampListIndex(prev, items.length));
    }, [items.length, open]);

    useEffect(() => {
        if (!open) return;
        const visualIndex = itemIndexToVisualIndex.get(selectedIndex);
        if (visualIndex === undefined) return;
        listRef.current?.scrollToIndex(visualIndex, 'auto');
    }, [itemIndexToVisualIndex, open, selectedIndex]);

    const handleSelect = useCallback((item: PickerItem) => {
        if (item.type === 'local') {
            onSelectLocal();
        } else if (item.type === 'connected') {
            // Sudo SFTP cannot reuse the terminal shell; omit the hint so connect
            // UI (reusedConnection / spinner) matches the dedicated open path.
            const sourceSessionId = sftpSourceSessionIdForHost(
                item.entry.host,
                item.entry.sessionId,
            );
            onSelectHost(
                item.entry.host,
                sourceSessionId ? { sourceSessionId } : undefined,
            );
        } else {
            onSelectHost(item.host);
        }
        onOpenChange(false);
    }, [onOpenChange, onSelectHost, onSelectLocal]);

    // Match Quick Switcher: pointer movement only leaves keyboard-nav mode.
    // It must not rewrite the keyboard-selected index until the user clicks.
    const handlePointerHover = useCallback((movementX: number, movementY: number) => {
        if (!shouldUseQuickSwitcherPointerNavigation(movementX, movementY)) return;
        if (!isKeyboardNavigatingRef.current) return;
        isKeyboardNavigatingRef.current = false;
        setIsKeyboardNavigating(false);
    }, []);

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            isKeyboardNavigatingRef.current = true;
            setIsKeyboardNavigating(true);
            setSelectedIndex((prev) => stepListIndex(prev, items.length, 1));
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            isKeyboardNavigatingRef.current = true;
            setIsKeyboardNavigating(true);
            setSelectedIndex((prev) => stepListIndex(prev, items.length, -1));
        } else if (e.key === 'Enter' && items.length > 0) {
            e.preventDefault();
            const item = items[clampListIndex(selectedIndex, items.length)];
            if (!item) return;
            handleSelect(item);
        }
    };

    const getRowHeight = useCallback((row: VisualRow) => {
        if (row.kind === 'header') return SFTP_PICKER_HEADER_HEIGHT;
        if (row.kind === 'empty') return SFTP_PICKER_EMPTY_HEIGHT;
        return SFTP_PICKER_ROW_HEIGHT;
    }, []);

    // Cap at 360px for large inventories, but shrink to content for short lists
    // (Local-only / few hosts) so the dialog does not leave a large blank region.
    const listViewportHeight = useMemo(() => {
        let total = 0;
        for (const row of visualRows) total += getRowHeight(row);
        return Math.min(360, Math.max(total, 1));
    }, [getRowHeight, visualRows]);

    const renderRow = useCallback((row: VisualRow) => {
        if (row.kind === 'header') {
            return (
                <div className="flex h-full items-end px-4 pb-1.5">
                    <span className="text-xs font-medium text-muted-foreground">{row.label}</span>
                </div>
            );
        }
        if (row.kind === 'empty') {
            return (
                <div className="px-4 py-6 text-xs text-muted-foreground text-center">
                    {row.message}
                </div>
            );
        }

        const { item, itemIndex } = row;
        const isSelected = selectedIndex === itemIndex;

        if (item.type === 'local') {
            return (
                <div
                    className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${getQuickSwitcherRowStateClass(isSelected, isKeyboardNavigating)}`}
                    onClick={() => handleSelect(item)}
                    onMouseMove={(event) => handlePointerHover(event.movementX, event.movementY)}
                >
                    <div className="flex items-center gap-3 min-w-0">
                        <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
                            <Monitor size={16} />
                        </div>
                        <span className="text-sm font-medium truncate">{t('sftp.picker.local.title')}</span>
                    </div>
                    <div className="ml-3 shrink-0 text-[11px] text-muted-foreground truncate max-w-[12rem]">
                        {t('sftp.picker.local.desc')}
                    </div>
                </div>
            );
        }

        const host = item.type === 'connected' ? item.entry.host : item.host;
        const showStatus = item.type === 'connected';
        return (
            <div
                className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${getQuickSwitcherRowStateClass(isSelected, isKeyboardNavigating)}`}
                onClick={() => handleSelect(item)}
                onMouseMove={(event) => handlePointerHover(event.movementX, event.movementY)}
            >
                <div className="flex items-center gap-3 min-w-0">
                    <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} size="sm" />
                    <div className="flex min-w-0 items-center gap-1.5">
                        {showStatus ? <StatusDot /> : null}
                        <span className="text-sm font-medium truncate">{host.label}</span>
                    </div>
                </div>
                <div className="ml-3 shrink-0 text-[11px] text-muted-foreground truncate max-w-[12rem]">
                    {formatHostMeta(host)}
                </div>
            </div>
        );
    }, [handlePointerHover, handleSelect, isKeyboardNavigating, selectedIndex, t]);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-lg p-0 overflow-hidden gap-0">
                <DialogHeader className="sr-only">
                    <DialogTitle>{t('sftp.picker.title')}</DialogTitle>
                    <DialogDescription>
                        {t('sftp.picker.desc', { side: side === 'left' ? t('common.left') : t('common.right') })}
                    </DialogDescription>
                </DialogHeader>
                <div className="flex items-center gap-3 px-4 py-3 pr-12 border-b border-border">
                    <Search size={16} className="text-muted-foreground" />
                    <Input
                        ref={inputRef}
                        value={hostSearch}
                        onChange={e => onHostSearchChange(e.target.value)}
                        onKeyDown={handleKeyDown}
                        placeholder={t('sftp.picker.searchPlaceholder')}
                        className="flex-1 h-8 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-0 text-sm"
                    />
                    <span className="ml-auto mr-1 text-[11px] text-muted-foreground bg-muted px-2 py-0.5 rounded whitespace-nowrap">
                        {sideLabel}
                    </span>
                </div>

                <div
                    className="max-h-[360px]"
                    style={{ height: listViewportHeight }}
                    data-host-picker-virtual="sftp"
                >
                    <VariableSizeVirtualList<VisualRow>
                        ref={listRef}
                        items={visualRows}
                        getItemHeight={getRowHeight}
                        className="h-full"
                        overscan={8}
                        getItemKey={(row) => row.key}
                        renderItem={renderRow}
                    />
                </div>
            </DialogContent>
        </Dialog>
    );
};

export const SftpHostPicker = memo(SftpHostPickerInner);
SftpHostPicker.displayName = 'SftpHostPicker';