'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect, useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertCircle, Terminal, ArrowDown, Code, FileText } from 'lucide-react';
import { EventLogViewer } from './event-log-viewer.js';
export function LogTab({ content, isConnected, error }) {
    const { t } = useTranslation('web');
    const containerRef = useRef(null);
    const [autoScroll, setAutoScroll] = useState(true);
    const [viewMode, setViewMode] = useState('structured');
    const handleScroll = useCallback(() => {
        const el = containerRef.current;
        if (!el)
            return;
        const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
        setAutoScroll(isAtBottom);
    }, []);
    const jumpToBottom = useCallback(() => {
        const el = containerRef.current;
        if (!el)
            return;
        el.scrollTop = el.scrollHeight;
        setAutoScroll(true);
    }, []);
    // Auto-scroll when new content arrives (only if auto-scroll is active)
    useEffect(() => {
        if (autoScroll && containerRef.current) {
            containerRef.current.scrollTop = containerRef.current.scrollHeight;
        }
    }, [content, autoScroll]);
    if (error) {
        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
    }
    if (!content) {
        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Terminal, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: t('logTab.noLogOutput') }), isConnected ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for log data..." })) : null] }));
    }
    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('structured'), className: `rounded p-1 transition-colors ${viewMode === 'structured'
                                    ? 'bg-muted text-foreground'
                                    : 'text-muted-foreground hover:text-foreground'}`, title: t('logTab.structuredView'), children: _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setViewMode('raw'), className: `rounded p-1 transition-colors ${viewMode === 'raw'
                                    ? 'bg-muted text-foreground'
                                    : 'text-muted-foreground hover:text-foreground'}`, title: t('logTab.rawView'), children: _jsx(Code, { className: "h-3.5 w-3.5" }) }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ms-1 flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] })] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: `flex-1 overflow-y-auto ${viewMode === 'raw'
                    ? 'bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300'
                    : 'bg-background'}`, children: viewMode === 'structured' ? _jsx(EventLogViewer, { content: content }) : content })] }));
}
