import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
/**
 * OtelLogsList – Tabular log-records view with severity colour coding,
 * expandable body/attributes, and trace correlation links.
 *
 * Uses Primer React components for consistent theming.
 *
 * @module otel/OtelLogsList
 */
import React, { useState } from 'react';
import { Box, Text, Label, Spinner } from '@primer/react';
import { Blankslate } from '@primer/react/experimental';
import { LogIcon } from '@primer/octicons-react';
import { formatTime, severityVariant } from '../utils.js';
// ── helpers ─────────────────────────────────────────────────────────
/** Severity badge using Primer Label, centered in its grid cell. */
const Severity = ({ text }) => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));
/** Expandable row detail for a single log record. */
const LogDetail = ({ log }) => (_jsxs(Box, { sx: {
        gridColumn: '1 / -1',
        bg: 'canvas.subtle',
        borderBottom: '1px solid',
        borderColor: 'border.default',
        p: 3,
    }, children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: {
                        fontSize: 0,
                        fontWeight: 'bold',
                        color: 'fg.muted',
                        display: 'block',
                        mb: 1,
                    }, children: "Body" }), _jsx(Box, { as: "pre", sx: {
                        fontSize: 1,
                        fontFamily: 'mono',
                        whiteSpace: 'pre-wrap',
                        wordBreak: 'break-word',
                        m: 0,
                        bg: 'canvas.default',
                        border: '1px solid',
                        borderColor: 'border.default',
                        borderRadius: 2,
                        p: 2,
                    }, children: log.body })] }), log.trace_id && (_jsxs(Box, { sx: { display: 'flex', gap: 3, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
                        fontSize: 0,
                        fontWeight: 'bold',
                        color: 'fg.muted',
                        display: 'block',
                        mb: 1,
                    }, children: "Attributes" }), _jsx(Box, { sx: {
                        bg: 'canvas.default',
                        border: '1px solid',
                        borderColor: 'border.default',
                        borderRadius: 2,
                        p: 2,
                    }, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { sx: {
                            display: 'flex',
                            gap: 2,
                            py: 1,
                            borderBottom: '1px solid',
                            borderColor: 'border.muted',
                        }, children: [_jsx(Text, { sx: {
                                    color: 'accent.fg',
                                    fontSize: 0,
                                    fontFamily: 'mono',
                                    minWidth: 150,
                                }, children: k }), _jsx(Text, { sx: {
                                    fontSize: 0,
                                    fontFamily: 'mono',
                                    wordBreak: 'break-word',
                                }, children: typeof v === 'string' ? v : JSON.stringify(v) })] }, k))) })] }))] }));
// ── Main component ──────────────────────────────────────────────────
export const OtelLogsList = ({ logs, loading, selectedLogIndex, onSelectLog, }) => {
    const [expandedIdx, setExpandedIdx] = useState(null);
    const colTemplate = '140px 80px 160px 1fr';
    if (loading && logs.length === 0) {
        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 5 }, children: _jsx(Spinner, { size: "medium" }) }));
    }
    if (!loading && logs.length === 0) {
        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(LogIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "No log records found" }), _jsx(Blankslate.Description, { children: "Send some log data first." })] }));
    }
    return (_jsxs(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: [_jsx(Box, { sx: {
                    display: 'grid',
                    gridTemplateColumns: colTemplate,
                    bg: 'canvas.subtle',
                    borderBottom: '2px solid',
                    borderColor: 'border.default',
                    px: 3,
                    py: 1,
                    position: 'sticky',
                    top: 0,
                    zIndex: 1,
                }, children: ['Time', 'Severity', 'Service', 'Body'].map(h => (_jsx(Text, { sx: {
                        fontSize: 0,
                        fontWeight: 'bold',
                        color: 'fg.muted',
                        textTransform: 'uppercase',
                        letterSpacing: '0.05em',
                        textAlign: h === 'Severity' ? 'center' : undefined,
                    }, children: h }, h))) }), logs.map((log, idx) => {
                const selected = idx === selectedLogIndex;
                const expanded = idx === expandedIdx;
                return (_jsxs(React.Fragment, { children: [_jsxs(Box, { sx: {
                                display: 'grid',
                                gridTemplateColumns: colTemplate,
                                px: 3,
                                py: '5px',
                                borderBottom: '1px solid',
                                borderColor: 'border.muted',
                                cursor: 'pointer',
                                bg: selected
                                    ? 'accent.subtle'
                                    : expanded
                                        ? 'canvas.subtle'
                                        : 'canvas.default',
                                ':hover': {
                                    bg: selected || expanded ? undefined : 'canvas.subtle',
                                },
                            }, onClick: () => {
                                setExpandedIdx(expanded ? null : idx);
                                onSelectLog?.(log, idx);
                            }, children: [_jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', color: 'fg.default' }, children: formatTime(log.timestamp) }), _jsx(Severity, { text: log.severity_text }), _jsx(Text, { sx: {
                                        fontSize: 1,
                                        color: 'fg.muted',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                    }, children: log.service_name }), _jsx(Text, { sx: {
                                        fontSize: 1,
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                    }, children: log.body })] }), expanded && _jsx(LogDetail, { log: log })] }, idx));
            })] }));
};
