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.
 */
/**
 * OtelHeader – Top-level header bar with branding, signal generator
 * buttons, and a result dialog for OTEL observability applications.
 *
 * This is a generic, reusable header. Authentication state is decoupled:
 * pass `onSignOut` to wire up your own logout action.
 */
import { useState, useCallback, useRef } from 'react';
import { Box, Text, Button, Dialog } from '@primer/react';
import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
import { UserBadge } from '../profile/index.js';
export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, }) => {
    const [dialogOpen, setDialogOpen] = useState(false);
    const [dialogTitle, setDialogTitle] = useState('');
    const [dialogRequest, setDialogRequest] = useState('');
    const [dialogBody, setDialogBody] = useState('');
    const [dialogVariant, setDialogVariant] = useState('success');
    const [generating, setGenerating] = useState(false);
    const returnFocusRef = useRef(null);
    const generate = useCallback(async (kind, count) => {
        if (onNavigate) {
            const signalMap = {
                traces: 'traces',
                'ai-traces': 'traces',
                logs: 'logs',
                metrics: 'metrics',
            };
            onNavigate(signalMap[kind]);
        }
        setGenerating(true);
        const url = `${baseUrl}/api/generate/${kind}?count=${count}`;
        setDialogRequest(`POST ${url}`);
        try {
            const headers = {};
            if (token) {
                headers['Authorization'] = `Bearer ${token}`;
            }
            const resp = await fetch(url, { method: 'POST', headers });
            if (!resp.ok)
                throw new Error(`HTTP ${resp.status}`);
            const data = await resp.json();
            setDialogTitle(`Generated ${kind}`);
            setDialogBody(JSON.stringify(data, null, 2));
            setDialogVariant('success');
        }
        catch (err) {
            setDialogTitle(`Error generating ${kind}`);
            setDialogBody(err instanceof Error ? err.message : String(err));
            setDialogVariant('error');
        }
        finally {
            setGenerating(false);
            setDialogOpen(true);
        }
    }, [baseUrl, token, onNavigate]);
    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "header", sx: {
                    display: 'flex',
                    alignItems: 'center',
                    gap: 3,
                    px: 3,
                    py: 2,
                    bg: 'canvas.inset',
                    borderBottom: '1px solid',
                    borderColor: 'border.default',
                    flexShrink: 0,
                    // Allow overflow visible so the JWT popover can extend below the header.
                    overflow: 'visible',
                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, token && _jsx(UserBadge, { token: token }), onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
                    {
                        content: 'Close',
                        onClick: () => setDialogOpen(false),
                        buttonType: 'default',
                    },
                ], children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Request" }), _jsx(Box, { as: "pre", sx: {
                                    fontFamily: 'mono',
                                    fontSize: 1,
                                    p: 2,
                                    mt: 1,
                                    bg: 'canvas.inset',
                                    borderRadius: 2,
                                    overflow: 'auto',
                                    color: 'fg.default',
                                    whiteSpace: 'pre-wrap',
                                    wordBreak: 'break-all',
                                    border: '1px solid',
                                    borderColor: 'border.default',
                                }, children: dialogRequest })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Response" }), _jsx(Box, { as: "pre", sx: {
                                    fontFamily: 'mono',
                                    fontSize: 1,
                                    p: 2,
                                    mt: 1,
                                    bg: 'canvas.subtle',
                                    borderRadius: 2,
                                    overflow: 'auto',
                                    maxHeight: 300,
                                    color: dialogVariant === 'error' ? 'danger.fg' : 'fg.default',
                                    whiteSpace: 'pre-wrap',
                                    wordBreak: 'break-all',
                                }, children: dialogBody })] })] }))] }));
};
