'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useCallback, useMemo } from 'react';
import Editor, { loader } from '@monaco-editor/react';
// Configure Monaco to use CDN
loader.config({
    paths: {
        vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs'
    }
});
// Helper to format JSON properly
function formatValue(value, language) {
    if (language === 'json') {
        try {
            // Try to parse and re-stringify with proper formatting
            const parsed = JSON.parse(value);
            return JSON.stringify(parsed, null, 2);
        } catch  {
            // If it's not valid JSON, return as-is
            return value;
        }
    }
    return value;
}
// Calculate height based on content lines
function calculateHeight(value, minHeight, maxHeight) {
    const lineHeight = 20 // Approximate line height in pixels
    ;
    const padding = 24 // Top + bottom padding
    ;
    const lines = value.split('\n').length;
    const contentHeight = lines * lineHeight + padding;
    let height = Math.max(contentHeight, minHeight);
    if (maxHeight) {
        height = Math.min(height, maxHeight);
    }
    return height;
}
export function CodeEditor({ value, onChange, language = 'json', readOnly = false, height = '100%', minHeight = 100, maxHeight, className = '', placeholder, theme = 'light', showBorder = true, rounded = true, showLineNumbers = true }) {
    const editorRef = useRef(null);
    // Format value for display
    const formattedValue = useMemo(()=>formatValue(value, language), [
        value,
        language
    ]);
    const handleMount = useCallback((editor)=>{
        editorRef.current = editor;
    }, []);
    const handleChange = useCallback((newValue)=>{
        if (onChange && newValue !== undefined) {
            onChange(newValue);
        }
    }, [
        onChange
    ]);
    const monacoTheme = theme === 'dark' ? 'vs-dark' : 'vs';
    const bgColor = theme === 'dark' ? '!bg-[#1e1e1e]' : 'bg-white';
    // Calculate the actual height for Monaco
    const computedHeight = height === 'auto' ? calculateHeight(formattedValue, minHeight, maxHeight) : typeof height === 'number' ? height : height;
    const borderClass = showBorder ? 'border border-border' : '';
    const roundedClass = rounded ? 'rounded-sm' : '';
    const inlineStyle = {
        height: typeof computedHeight === 'number' ? `${computedHeight}px` : computedHeight,
        backgroundColor: theme === 'dark' ? '#1e1e1e' : undefined
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: `relative overflow-hidden ${borderClass} ${roundedClass} ${bgColor} ${className}`,
        style: inlineStyle,
        children: [
            !formattedValue && placeholder && /*#__PURE__*/ _jsx("div", {
                className: "absolute inset-0 flex items-center justify-center text-gray-500 text-sm z-10 pointer-events-none",
                children: placeholder
            }),
            /*#__PURE__*/ _jsx(Editor, {
                height: "100%",
                language: language,
                value: formattedValue,
                onChange: handleChange,
                onMount: handleMount,
                theme: monacoTheme,
                options: {
                    readOnly,
                    domReadOnly: readOnly,
                    contextmenu: !readOnly,
                    minimap: {
                        enabled: false
                    },
                    scrollBeyondLastLine: false,
                    fontSize: 13,
                    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace",
                    lineNumbers: showLineNumbers ? readOnly ? 'on' : 'on' : 'off',
                    renderLineHighlight: readOnly ? 'none' : 'line',
                    scrollbar: {
                        vertical: 'auto',
                        horizontal: 'auto'
                    },
                    padding: {
                        top: 12,
                        bottom: 12
                    },
                    wordWrap: 'on',
                    automaticLayout: true,
                    overviewRulerBorder: false,
                    overviewRulerLanes: 0,
                    hideCursorInOverviewRuler: true,
                    guides: {
                        indentation: !readOnly
                    },
                    cursorBlinking: readOnly ? 'solid' : 'smooth',
                    lineDecorationsWidth: showLineNumbers ? 8 : 0,
                    lineNumbersMinChars: showLineNumbers ? 3 : 0
                },
                loading: /*#__PURE__*/ _jsx("div", {
                    className: "flex items-center justify-center h-full text-muted-foreground text-sm",
                    children: "Loading editor..."
                })
            })
        ]
    });
}
export function CodeViewer({ value, language = 'json', height = 'auto', minHeight = 100, maxHeight, className = '', theme = 'light', showBorder = false, rounded = false, showLineNumbers = true }) {
    return /*#__PURE__*/ _jsx(CodeEditor, {
        value: value,
        language: language,
        readOnly: true,
        height: height,
        minHeight: minHeight,
        maxHeight: maxHeight,
        className: className,
        theme: theme,
        showBorder: showBorder,
        rounded: rounded,
        showLineNumbers: showLineNumbers
    });
}
