/**
 * Observability Dashboard
 *
 * Interactive terminal dashboard for monitoring:
 * - Agent costs and budget
 * - Latency and performance
 * - Tool usage statistics
 *
 * Keyboard navigation:
 * - Tab/1-4: Switch views
 * - q: Quit dashboard
 * - r: Refresh data
 */
import React, { useState, useCallback } from 'react';
import { Box, Text, useInput, useApp } from 'ink';
import { useTheme, ThemeProvider } from '../context/theme-context.js';
import { useDashboardData } from './hooks/use-dashboard-data.js';
import { OverviewView } from './views/overview-view.js';
import { CostsView } from './views/costs-view.js';
import { LatencyView } from './views/latency-view.js';
import { ToolsView } from './views/tools-view.js';
const TABS = [
    { id: 'overview', label: 'Overview', key: '1', icon: '📊' },
    { id: 'costs', label: 'Costs', key: '2', icon: '💰' },
    { id: 'latency', label: 'Latency', key: '3', icon: '⚡' },
    { id: 'tools', label: 'Tools', key: '4', icon: '🔧' },
];
/**
 * Dashboard Header with tab navigation
 */
function DashboardHeader({ activeTab, }) {
    const { colors } = useTheme();
    return (React.createElement(Box, { borderStyle: "double", borderColor: colors.primary, paddingX: 1, flexDirection: "column" },
        React.createElement(Box, { justifyContent: "space-between" },
            React.createElement(Text, { bold: true, color: colors.primary }, "\u2554\u2550\u2550\u2550 GROK CLI OBSERVABILITY DASHBOARD \u2550\u2550\u2550\u2557"),
            React.createElement(Text, { dimColor: true }, "Press [q] to quit \u2022 [r] to refresh")),
        React.createElement(Box, { marginTop: 1 }, TABS.map((tab) => {
            const isActive = tab.id === activeTab;
            return (React.createElement(Box, { key: tab.id, marginRight: 2 },
                React.createElement(Text, { color: isActive ? colors.primary : colors.textMuted, bold: isActive, inverse: isActive }, ` [${tab.key}] ${tab.icon} ${tab.label} `)));
        }))));
}
/**
 * Dashboard Footer with help text
 */
function DashboardFooter({ lastUpdate }) {
    const { colors } = useTheme();
    return (React.createElement(Box, { borderStyle: "single", borderColor: colors.border, paddingX: 1, justifyContent: "space-between" },
        React.createElement(Text, { dimColor: true }, "Navigation: [1-4] Switch tabs \u2022 [\u2191\u2193] Scroll \u2022 [q] Quit"),
        React.createElement(Text, { dimColor: true },
            "Last update: ",
            new Date(lastUpdate).toLocaleTimeString())));
}
/**
 * Main Dashboard Content
 */
function DashboardContent({ initialTab = 'overview', budget = 10, refreshInterval = 1000, onClose, }) {
    const { colors } = useTheme();
    const { exit } = useApp();
    const [activeTab, setActiveTab] = useState(initialTab);
    // Get real-time data
    const data = useDashboardData({ refreshInterval });
    // Handle keyboard input
    useInput(useCallback((input, key) => {
        // Tab switching
        if (input === '1')
            setActiveTab('overview');
        else if (input === '2')
            setActiveTab('costs');
        else if (input === '3')
            setActiveTab('latency');
        else if (input === '4')
            setActiveTab('tools');
        else if (key.tab) {
            // Cycle through tabs
            const currentIndex = TABS.findIndex((t) => t.id === activeTab);
            const nextIndex = (currentIndex + 1) % TABS.length;
            setActiveTab(TABS[nextIndex].id);
        }
        // Quit
        else if (input === 'q' || input === 'Q') {
            if (onClose)
                onClose();
            exit();
        }
    }, [activeTab, exit, onClose]));
    // Render active view
    const renderView = () => {
        switch (activeTab) {
            case 'overview':
                return React.createElement(OverviewView, { data: data });
            case 'costs':
                return React.createElement(CostsView, { data: data, budget: budget });
            case 'latency':
                return React.createElement(LatencyView, { data: data });
            case 'tools':
                return React.createElement(ToolsView, { data: data });
            default:
                return React.createElement(OverviewView, { data: data });
        }
    };
    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
        React.createElement(DashboardHeader, { activeTab: activeTab }),
        !data.isConnected && (React.createElement(Box, { paddingX: 1, marginY: 1 },
            React.createElement(Text, { color: colors.warning }, "\u26A0 Connecting to metrics collector..."))),
        React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: colors.border, minHeight: 20 }, renderView()),
        React.createElement(DashboardFooter, { lastUpdate: data.lastUpdate })));
}
/**
 * Observability Dashboard Component
 *
 * Full-screen interactive dashboard for monitoring agent performance.
 */
export function ObservabilityDashboard(props) {
    return (React.createElement(ThemeProvider, null,
        React.createElement(DashboardContent, { ...props })));
}
/**
 * Standalone Dashboard (for direct rendering)
 */
export function StandaloneDashboard(props) {
    return React.createElement(ObservabilityDashboard, { ...props });
}
export default ObservabilityDashboard;
//# sourceMappingURL=dashboard.js.map