import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useState } from 'react';
import { Globe, ChevronRight, Loader2, AlertCircle, Copy, Check, ExternalLink, Clock, } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { Button } from '../ui/Button';
import { useTunnelStore } from '../../stores/tunnelStore';
import { useStartTunnel, useStopTunnel, useTunnelStream, useTunnelStatus, } from '../../hooks/useTunnel';
import { openUrl } from '../../lib/open-url';
function truncateUrl(url) {
    try {
        const parsed = new URL(url);
        const host = parsed.hostname;
        if (host.length > 24) {
            return `${host.slice(0, 12)}...${host.slice(-8)}`;
        }
        return host;
    }
    catch {
        return url.length > 24 ? `${url.slice(0, 12)}...${url.slice(-8)}` : url;
    }
}
export const TunnelSidebar = memo(function TunnelSidebar() {
    const isExpanded = useTunnelStore((s) => s.isExpanded);
    const collapseSidebar = useTunnelStore((s) => s.collapseSidebar);
    const status = useTunnelStore((s) => s.status);
    const url = useTunnelStore((s) => s.url);
    const error = useTunnelStore((s) => s.error);
    const progress = useTunnelStore((s) => s.progress);
    const startTunnel = useStartTunnel();
    const stopTunnel = useStopTunnel();
    const [copied, setCopied] = useState(false);
    useTunnelStatus();
    useTunnelStream();
    const handleCopyUrl = async () => {
        if (url) {
            await navigator.clipboard.writeText(url);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        }
    };
    const handleStart = () => {
        startTunnel.mutate();
    };
    const handleStop = () => {
        stopTunnel.mutate();
    };
    if (!isExpanded)
        return null;
    return (_jsxs("div", { className: "w-80 border-l border-border bg-background flex flex-col h-full", children: [_jsxs("div", { className: "h-14 flex items-center justify-between px-3 border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Globe, { className: "w-4 h-4 text-muted-foreground" }), _jsx("span", { className: "font-medium text-sm", children: "Remote Access" })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: collapseSidebar, title: "Close sidebar", children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [status === 'idle' && (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [_jsx(Globe, { className: "w-12 h-12 text-muted-foreground/30 mb-4" }), _jsx("h3", { className: "text-sm font-medium mb-2", children: "Access from anywhere" }), _jsx("p", { className: "text-xs text-muted-foreground mb-6 max-w-[200px]", children: "Start a secure tunnel to access otto from your phone or another device." }), _jsx("button", { type: "button", onClick: handleStart, disabled: startTunnel.isPending, className: "px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50", children: startTunnel.isPending ? 'Starting...' : 'Start Tunnel' })] })), status === 'starting' && (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [_jsx(Loader2, { className: "w-8 h-8 text-primary animate-spin mb-4" }), _jsx("h3", { className: "text-sm font-medium mb-2", children: "Setting up..." }), progress && (_jsx("p", { className: "text-xs text-muted-foreground max-w-[220px] break-words", children: progress }))] })), status === 'connected' && url && (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }), _jsx("span", { className: "text-xs font-medium text-green-600", children: "Connected" })] }), _jsx("div", { className: "flex justify-center pb-4", children: _jsx("div", { className: "p-3 bg-white rounded-lg", children: _jsx(QRCodeSVG, { value: url, size: 160, level: "M", includeMargin: false }) }) }), _jsx("p", { className: "text-xs text-muted-foreground mb-4 text-center", children: "Scan with your phone camera" }), _jsxs("div", { className: "flex items-center justify-between text-sm mb-4", children: [_jsx("span", { className: "text-muted-foreground", children: "URL" }), _jsxs("button", { type: "button", onClick: handleCopyUrl, className: "flex items-center gap-1.5 font-mono text-foreground hover:text-muted-foreground transition-colors", title: "Copy URL", children: [truncateUrl(url), copied ? (_jsx(Check, { className: "w-3 h-3 text-green-500" })) : (_jsx(Copy, { className: "w-3 h-3 text-muted-foreground" }))] })] }), _jsxs("button", { type: "button", onClick: () => openUrl(url), className: "flex items-center justify-center gap-2 px-4 py-2 border border-border rounded-md text-sm hover:bg-muted transition-colors mb-3", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), "Open in browser"] }), _jsx("button", { type: "button", onClick: handleStop, disabled: stopTunnel.isPending, className: "w-full px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors", children: stopTunnel.isPending ? 'Stopping...' : 'Stop Tunnel' })] })), status === 'error' && (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [error?.includes('Rate limited') ? (_jsxs(_Fragment, { children: [_jsx(Clock, { className: "w-8 h-8 text-yellow-500 mb-4" }), _jsx("h3", { className: "text-sm font-medium mb-2", children: "Rate Limited" }), _jsx("p", { className: "text-xs text-muted-foreground mb-6 max-w-[220px]", children: "Cloudflare limits anonymous tunnel requests. Please wait 5-10 minutes before trying again." })] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "w-8 h-8 text-destructive mb-4" }), _jsx("h3", { className: "text-sm font-medium mb-2", children: "Connection failed" }), _jsx("p", { className: "text-xs text-muted-foreground mb-6 max-w-[200px]", children: error || 'Unable to establish tunnel connection.' })] })), _jsx("button", { type: "button", onClick: handleStart, disabled: startTunnel.isPending || error?.includes('Rate limited'), className: "px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50", title: error?.includes('Rate limited')
                                    ? 'Wait 5-10 minutes'
                                    : undefined, children: error?.includes('Rate limited')
                                    ? 'Wait & Try Again'
                                    : 'Try Again' })] }))] })] }));
});
//# sourceMappingURL=TunnelSidebar.js.map