import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Button, Spinner, Text } from '@primer/react';
import { SyncIcon } from '@primer/octicons-react';
import { useOtelSystem } from '../hooks/index.js';
// ── Helpers ───────────────────────────────────────────────────────
function fmtBytes(bytes) {
    if (bytes >= 1024 ** 3)
        return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
    if (bytes >= 1024 ** 2)
        return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
    if (bytes >= 1024)
        return `${(bytes / 1024).toFixed(1)} KB`;
    return `${bytes} B`;
}
// ── Sub-components ────────────────────────────────────────────────
const CARD_SX = {
    bg: 'canvas.subtle',
    border: '1px solid',
    borderColor: 'border.default',
    borderRadius: 2,
    p: 3,
    mb: 3,
};
const LABEL_SX = {
    display: 'block',
    fontSize: 0,
    fontWeight: 'bold',
    color: 'fg.muted',
    mb: 1,
};
const GRID_SX = {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
    gap: 3,
};
const StatCell = ({ label, value }) => (_jsxs(Box, { children: [_jsx(Text, { sx: LABEL_SX, children: label }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: value })] }));
const SystemViewContent = ({ data }) => {
    const { process: proc, disk, tables, total_distinct_users } = data;
    return (_jsxs(Box, { children: [_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Process" }), proc?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: proc.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "RSS Memory", value: fmtBytes(proc?.memory_rss_bytes ?? 0) }), _jsx(StatCell, { label: "VMS Memory", value: fmtBytes(proc?.memory_vms_bytes ?? 0) }), _jsx(StatCell, { label: "CPU", value: `${(proc?.cpu_percent ?? 0).toFixed(1)} %` }), _jsx(StatCell, { label: "Threads", value: String(proc?.num_threads ?? '?') })] }))] }), _jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Disk" }), disk?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: disk.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "Data Dir", value: disk?.data_dir ?? '?' }), _jsx(StatCell, { label: "Total", value: fmtBytes(disk?.total_bytes ?? 0) }), _jsx(StatCell, { label: "Used", value: `${fmtBytes(disk?.used_bytes ?? 0)} (${(disk?.used_percent ?? 0).toFixed(1)}%)` }), _jsx(StatCell, { label: "Free", value: fmtBytes(disk?.free_bytes ?? 0) })] }))] }), tables && Object.keys(tables).length > 0 && (_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Tables" }), _jsxs(Box, { as: "table", sx: {
                            width: '100%',
                            borderCollapse: 'collapse',
                            fontSize: 0,
                            fontFamily: 'mono',
                        }, children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", children: ['Table', 'Rows', 'Users', 'Disk'].map(h => (_jsx(Box, { as: "th", sx: {
                                            textAlign: h === 'Table' ? 'left' : 'right',
                                            pb: 1,
                                            color: 'fg.muted',
                                            fontWeight: 'bold',
                                            borderBottom: '1px solid',
                                            borderColor: 'border.default',
                                        }, children: h }, h))) }) }), _jsx(Box, { as: "tbody", children: Object.entries(tables).map(([tbl, info]) => (_jsxs(Box, { as: "tr", children: [_jsx(Box, { as: "td", sx: { py: 1, pr: 3, color: 'accent.fg' }, children: tbl }), info?.error ? (_jsx(Box, { as: "td", colSpan: 3, sx: { color: 'danger.fg', py: 1 }, children: info.error })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: (info.row_count ?? 0).toLocaleString() }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: info.distinct_users ?? 0 }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1 }, children: fmtBytes(info.disk_bytes ?? 0) })] }))] }, tbl))) })] })] })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Total distinct users across all tables:", ' ', _jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: total_distinct_users ?? '?' })] })] }));
};
export const OtelSystemView = ({ baseUrl = '', token, }) => {
    const { data, loading, error, refresh } = useOtelSystem({ baseUrl, token });
    return (_jsxs(Box, { sx: {
            display: 'flex',
            flexDirection: 'column',
            flex: 1,
            minHeight: 0,
            overflow: 'auto',
            p: 3,
        }, children: [_jsxs(Box, { sx: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    mb: 3,
                    flexShrink: 0,
                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "System Statistics" }), _jsx(Button, { size: "small", variant: "invisible", onClick: refresh, disabled: loading, leadingVisual: SyncIcon, children: "Refresh" })] }), loading && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading\u2026" })] })), !loading && error && (_jsx(Box, { sx: {
                    bg: 'danger.subtle',
                    border: '1px solid',
                    borderColor: 'danger.muted',
                    borderRadius: 2,
                    p: 3,
                }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) })), !loading && !error && data && _jsx(SystemViewContent, { data: data }), !loading && !error && !data && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No data available." }))] }));
};
