import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * TabContainer — Self-contained tabbed interface.
 * Absorbs BottomTabBar + StatusPanel functionality.
 */
import { Box, Text } from 'ink';
import { useScreenInput } from '../hooks/useScreenInput.js';
import { useState, useEffect } from 'react';
import { Colors, Icons } from '../styles.js';
import { linkify } from '../utils/terminal-rendering.js';
export const TabContainer = ({ tabs, statusMessage, requestedTab, onTabConsumed, }) => {
    const [activeTab, setActiveTab] = useState(0);
    useEffect(() => {
        if (!requestedTab)
            return;
        const idx = tabs.findIndex((t) => t.id === requestedTab);
        if (idx !== -1)
            setActiveTab(idx);
        onTabConsumed?.();
    }, [requestedTab]);
    useScreenInput((input, key) => {
        // Arrow keys always switch tabs (Snake uses WASD for movement)
        if (key.leftArrow) {
            setActiveTab((prev) => Math.max(0, prev - 1));
            return;
        }
        if (key.rightArrow) {
            setActiveTab((prev) => Math.min(tabs.length - 1, prev + 1));
            return;
        }
        // Number keys also work for tab switching (1-indexed)
        const num = parseInt(input, 10);
        if (!isNaN(num) && num >= 1 && num <= tabs.length) {
            setActiveTab(num - 1);
        }
    });
    const current = tabs[activeTab];
    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: current?.component }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [statusMessage && (_jsx(Box, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: Colors.muted, paddingX: 1, overflow: "hidden", children: _jsxs(Text, { color: Colors.muted, children: [Icons.diamondOpen, " ", linkify(statusMessage)] }) })), _jsx(Box, { height: 1 }), _jsxs(Box, { gap: 1, paddingX: 1, justifyContent: "space-between", children: [_jsx(Box, { gap: 1, children: tabs.map((tab, i) => (_jsx(Text, { inverse: i === activeTab, color: i === activeTab ? Colors.accent : Colors.muted, bold: i === activeTab, children: ` ${tab.label} ` }, tab.id))) }), _jsx(Text, { color: Colors.muted, children: "\u2190 \u2192 to switch tabs" })] })] })] }));
};
