import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import Gradient from 'ink-gradient';
import { theme } from '../semantic-colors.js';
const VALUE_COLUMN_WIDTH = 10;
const COLOR_DESCRIPTIONS = {
    'text.primary': 'Primary text color (uses terminal default if blank)',
    'text.secondary': 'Secondary/dimmed text color',
    'text.link': 'Hyperlink and highlighting color',
    'text.accent': 'Accent color for emphasis',
    'text.response': 'Color for model response text (uses terminal default if blank)',
    'background.primary': 'Main terminal background color',
    'background.message': 'Subtle background for message blocks',
    'background.input': 'Background for the input prompt',
    'background.focus': 'Background highlight for selected/focused items',
    'background.diff.added': 'Background for added lines in diffs',
    'background.diff.removed': 'Background for removed lines in diffs',
    'border.default': 'Standard border color',
    'ui.comment': 'Color for code comments and metadata',
    'ui.symbol': 'Color for technical symbols and UI icons',
    'ui.active': 'Border color for active or running elements',
    'ui.dark': 'Deeply dimmed color for subtle UI elements',
    'ui.focus': 'Color for focused elements (e.g. selected menu items, focused borders)',
    'status.error': 'Color for error messages and critical status',
    'status.success': 'Color for success messages and positive status',
    'status.warning': 'Color for warnings and cautionary status',
};
/**
 * Determines a contrasting text color (black or white) based on the background color's luminance.
 */
function getContrastingTextColor(hex) {
    if (!hex || !hex.startsWith('#') || hex.length < 7) {
        // Fallback for invalid hex codes or named colors
        return theme.text.primary;
    }
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    // Using YIQ formula to determine luminance
    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
    return yiq >= 128 ? '#000000' : '#FFFFFF';
}
export const ColorsDisplay = ({ activeTheme, }) => {
    const semanticColors = activeTheme.semanticColors;
    const backgroundRows = [];
    const standardRows = [];
    let gradientRow = null;
    if (semanticColors.ui.gradient && semanticColors.ui.gradient.length > 0) {
        gradientRow = {
            type: 'gradient',
            name: 'ui.gradient',
            value: semanticColors.ui.gradient,
        };
    }
    /**
     * Recursively flattens the semanticColors object.
     */
    const flattenColors = (obj, path = '') => {
        for (const [key, value] of Object.entries(obj)) {
            if (value === undefined || value === null)
                continue;
            const newPath = path ? `${path}.${key}` : key;
            if (key === 'gradient' && Array.isArray(value)) {
                // Gradient handled separately
                continue;
            }
            if (typeof value === 'object' && !Array.isArray(value)) {
                flattenColors(value, newPath);
            }
            else if (typeof value === 'string') {
                if (newPath.startsWith('background.')) {
                    backgroundRows.push({
                        type: 'background',
                        name: newPath,
                        value,
                    });
                }
                else {
                    standardRows.push({
                        type: 'standard',
                        name: newPath,
                        value,
                    });
                }
            }
        }
    };
    flattenColors(semanticColors);
    // Final order: Backgrounds first, then Standards, then Gradient
    const allRows = [
        ...backgroundRows,
        ...standardRows,
        ...(gradientRow ? [gradientRow] : []),
    ];
    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 0, borderStyle: "round", borderColor: theme.border.default, children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.text.accent, children: "DEVELOPER TOOLS (Not visible to users)" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.text.primary, children: _jsx(Text, { bold: true, children: "How do colors get applied?" }) }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Hex:" }), " Rendered exactly by modern terminals. Not overridden by app themes."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Blank:" }), " Uses your terminal's default foreground/background."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "Compatibility:" }), " On older terminals, hex is approximated to the nearest ANSI color."] }), _jsxs(Text, { color: theme.text.primary, children: ["\u2022 ", _jsx(Text, { bold: true, children: "ANSI Names:" }), " 'red', 'green', etc. are mapped to your terminal app's palette."] })] })] })] }), _jsxs(Box, { flexDirection: "row", marginBottom: 0, paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, children: _jsx(Text, { bold: true, color: theme.text.link, dimColor: true, children: "Value" }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { bold: true, color: theme.text.link, dimColor: true, children: "Name" }) })] }), _jsx(Box, { flexDirection: "column", children: allRows.map((row) => {
                    if (row.type === 'standard')
                        return renderStandardRow(row);
                    if (row.type === 'gradient')
                        return renderGradientRow(row);
                    if (row.type === 'background')
                        return renderBackgroundRow(row);
                    return null;
                }) })] }));
};
function renderStandardRow({ name, value }) {
    const isHex = value.startsWith('#');
    const displayColor = isHex ? value : theme.text.primary;
    const description = COLOR_DESCRIPTIONS[name] || '';
    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, children: _jsx(Text, { color: displayColor, children: value || '(blank)' }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsx(Box, { width: "30%", children: _jsx(Text, { color: displayColor, children: name }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
}
function renderGradientRow({ name, value }) {
    const description = COLOR_DESCRIPTIONS[name] || '';
    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, flexDirection: "column", children: value.map((c, i) => (_jsx(Text, { color: c, children: c }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsx(Box, { width: "30%", children: _jsx(Gradient, { colors: value, children: _jsx(Text, { children: name }) }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
}
function renderBackgroundRow({ name, value }) {
    const description = COLOR_DESCRIPTIONS[name] || '';
    return (_jsxs(Box, { flexDirection: "row", paddingX: 1, children: [_jsx(Box, { width: VALUE_COLUMN_WIDTH, backgroundColor: value, justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: getContrastingTextColor(value), bold: true, wrap: "truncate", children: value || 'default' }) }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingLeft: 1, children: [_jsx(Box, { width: "30%", children: _jsx(Text, { color: theme.text.primary, children: name }) }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, children: _jsx(Text, { color: theme.text.secondary, children: description }) })] })] }, name));
}
//# sourceMappingURL=ColorsDisplay.js.map