'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect, useState, useRef } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { CodeViewer } from '../playground/code-editor';
import { useNavigation } from '@/lib/api-docs/navigation-context';
// Error Boundary for Mermaid Preview
class MermaidErrorBoundary extends React.Component {
    static getDerivedStateFromError(error) {
        return {
            hasError: true,
            error: error.message
        };
    }
    componentDidCatch(error, errorInfo) {
        console.error('[MermaidErrorBoundary] Error:', error, errorInfo);
    }
    render() {
        if (this.state.hasError) {
            return /*#__PURE__*/ _jsxs("div", {
                className: "my-4 p-4 border border-red-500/30 bg-red-500/10 rounded-lg",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "text-red-400 text-sm font-medium mb-2",
                        children: "Mermaid Diagram Error"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "text-red-300 text-xs mb-2",
                        children: this.state.error
                    }),
                    /*#__PURE__*/ _jsx("pre", {
                        className: "text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded",
                        children: this.props.code
                    })
                ]
            });
        }
        return this.props.children;
    }
    constructor(props){
        super(props);
        this.state = {
            hasError: false,
            error: null
        };
    }
}
// Mermaid preview component
function MermaidPreviewInner({ code }) {
    const [svg, setSvg] = useState('');
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);
    const renderIdRef = useRef(0);
    useEffect(()=>{
        if (!code.trim()) {
            setLoading(false);
            setSvg('');
            setError(null);
            return;
        }
        const currentRenderId = ++renderIdRef.current;
        setLoading(true);
        setError(null);
        const renderDiagram = async ()=>{
            try {
                const mermaid = (await import('mermaid')).default;
                mermaid.initialize({
                    startOnLoad: false,
                    theme: 'dark',
                    themeVariables: {
                        background: '#1e1e1e',
                        primaryColor: '#3b82f6',
                        primaryTextColor: '#ffffff',
                        primaryBorderColor: '#60a5fa',
                        secondaryColor: '#3b82f6',
                        secondaryTextColor: '#ffffff',
                        secondaryBorderColor: '#60a5fa',
                        tertiaryColor: '#3b82f6',
                        tertiaryTextColor: '#ffffff',
                        tertiaryBorderColor: '#60a5fa',
                        mainBkg: '#3b82f6',
                        nodeBkg: '#3b82f6',
                        nodeBorder: '#60a5fa',
                        nodeTextColor: '#ffffff',
                        clusterBkg: '#27272a',
                        clusterBorder: '#52525b',
                        titleColor: '#ffffff',
                        lineColor: '#94a3b8',
                        fontFamily: 'system-ui, sans-serif',
                        fontSize: '14px'
                    },
                    flowchart: {
                        htmlLabels: true,
                        useMaxWidth: true
                    }
                });
                const { svg: renderedSvg } = await mermaid.render(`mermaid-md-${currentRenderId}-${Date.now()}`, code);
                if (currentRenderId === renderIdRef.current) {
                    setSvg(renderedSvg);
                    setError(null);
                }
            } catch (err) {
                if (currentRenderId === renderIdRef.current) {
                    let errorMessage = 'Failed to render diagram';
                    if (err instanceof Error) {
                        errorMessage = err.message;
                        if (errorMessage.includes('Parse error')) {
                            const match = errorMessage.match(/Parse error on line (\d+)/);
                            if (match) {
                                errorMessage = `Syntax error on line ${match[1]}`;
                            }
                        }
                    } else if (typeof err === 'string') {
                        errorMessage = err;
                    }
                    console.error('[MermaidPreview] Render error:', errorMessage);
                    setError(errorMessage);
                }
            } finally{
                if (currentRenderId === renderIdRef.current) {
                    setLoading(false);
                }
            }
        };
        const debounceTimer = setTimeout(renderDiagram, 300);
        return ()=>clearTimeout(debounceTimer);
    }, [
        code
    ]);
    if (loading) {
        return /*#__PURE__*/ _jsx("div", {
            className: "my-4 p-4 bg-muted/30 rounded-lg flex items-center justify-center min-h-[100px]",
            children: /*#__PURE__*/ _jsx("div", {
                className: "text-muted-foreground text-sm",
                children: "Rendering diagram..."
            })
        });
    }
    if (error) {
        return /*#__PURE__*/ _jsxs("div", {
            className: "my-4 p-4 border border-yellow-500/30 bg-yellow-500/10 rounded-lg",
            children: [
                /*#__PURE__*/ _jsx("div", {
                    className: "text-yellow-400 text-sm font-medium mb-2",
                    children: "Diagram Syntax Error"
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "text-yellow-300 text-xs mb-2",
                    children: error
                }),
                /*#__PURE__*/ _jsx("pre", {
                    className: "text-xs text-muted-foreground overflow-x-auto p-2 bg-muted rounded",
                    children: code
                })
            ]
        });
    }
    if (!svg) {
        return null;
    }
    return /*#__PURE__*/ _jsx("div", {
        className: "my-4 p-4 bg-zinc-900 rounded-lg overflow-x-auto mermaid",
        dangerouslySetInnerHTML: {
            __html: svg
        }
    });
}
// Mermaid preview with error boundary wrapper
function MermaidPreview({ code }) {
    return /*#__PURE__*/ _jsx(MermaidErrorBoundary, {
        code: code,
        children: /*#__PURE__*/ _jsx(MermaidPreviewInner, {
            code: code
        })
    });
}
// Map common language identifiers to Monaco supported languages
function getMonacoLanguage(lang) {
    if (!lang) return 'plaintext';
    const langMap = {
        'js': 'javascript',
        'javascript': 'javascript',
        'ts': 'typescript',
        'typescript': 'typescript',
        'json': 'json',
        'xml': 'xml',
        'html': 'html',
        'htm': 'html',
        'bash': 'shell',
        'shell': 'shell',
        'sh': 'shell',
        'zsh': 'shell',
        'curl': 'shell',
        'text': 'plaintext',
        'plaintext': 'plaintext'
    };
    return langMap[lang.toLowerCase()] || 'plaintext';
}
/**
 * Generate a URL-friendly slug from heading text
 */ function generateSlug(text) {
    return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
}
/**
 * Extract text content from React children
 */ function getTextContent(children) {
    if (typeof children === 'string') return children;
    if (typeof children === 'number') return String(children);
    if (Array.isArray(children)) return children.map(getTextContent).join('');
    if (children && typeof children === 'object' && 'props' in children) {
        const element = children;
        return getTextContent(element.props.children);
    }
    return '';
}
/**
 * Custom link component that handles internal endpoint links
 */ function MarkdownLink({ href, children }) {
    const { navigateToEndpoint } = useNavigation();
    // Check if this is an internal endpoint link
    // Formats: #operation/operationId, #/paths/~1endpoint/method
    const isEndpointLink = href?.startsWith('#operation/') || href?.startsWith('#/paths/');
    if (isEndpointLink) {
        let operationId = '';
        if (href?.startsWith('#operation/')) {
            // Format: #operation/post_carts
            operationId = href.replace('#operation/', '');
        } else if (href?.startsWith('#/paths/')) {
            // Format: #/paths/~1carts/post → extract operation (simplified)
            const parts = href.replace('#/paths/', '').split('/');
            const method = parts[parts.length - 1];
            const path = parts.slice(0, -1).join('/').replace(/~1/g, '/');
            operationId = `${method}_${path.replace(/\//g, '_').replace(/^_/, '')}`;
        }
        return /*#__PURE__*/ _jsx("button", {
            onClick: ()=>navigateToEndpoint(operationId),
            className: "text-primary hover:underline font-medium cursor-pointer bg-transparent border-none p-0 inline",
            children: children
        });
    }
    // External link - open in new tab
    return /*#__PURE__*/ _jsx("a", {
        href: href,
        target: "_blank",
        rel: "noopener noreferrer",
        className: "text-primary hover:underline font-medium",
        children: children
    });
}
const markdownComponents = {
    h1: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h1", {
            id: id,
            className: "text-2xl font-bold mt-8 mb-4 pb-2 border-b border-border scroll-mt-20",
            children: children
        });
    },
    h2: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h2", {
            id: id,
            className: "text-xl font-semibold mt-6 mb-3 scroll-mt-20",
            children: children
        });
    },
    h3: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h3", {
            id: id,
            className: "text-lg font-semibold mt-5 mb-2 scroll-mt-20",
            children: children
        });
    },
    h4: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h4", {
            id: id,
            className: "text-base font-semibold mt-4 mb-2 scroll-mt-20",
            children: children
        });
    },
    h5: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h5", {
            id: id,
            className: "text-sm font-semibold mt-3 mb-1 scroll-mt-20",
            children: children
        });
    },
    h6: ({ children })=>{
        const text = getTextContent(children);
        const id = generateSlug(text);
        return /*#__PURE__*/ _jsx("h6", {
            id: id,
            className: "text-sm font-medium mt-2 mb-1 text-muted-foreground scroll-mt-20",
            children: children
        });
    },
    p: ({ children })=>/*#__PURE__*/ _jsx("p", {
            className: "mb-4 leading-7 text-foreground/90",
            children: children
        }),
    ul: ({ children })=>/*#__PURE__*/ _jsx("ul", {
            className: "list-disc pl-6 mb-4 space-y-2",
            children: children
        }),
    ol: ({ children })=>/*#__PURE__*/ _jsx("ol", {
            className: "list-decimal pl-6 mb-4 space-y-2",
            children: children
        }),
    li: ({ children })=>/*#__PURE__*/ _jsx("li", {
            className: "leading-7",
            children: children
        }),
    code: ({ className, children, ...props })=>{
        const match = /language-(\w+)/.exec(className || '');
        const isCodeBlock = !!match;
        const detectedLanguage = match?.[1]?.toLowerCase();
        const codeContent = String(children).replace(/\n$/, '');
        // Inline code
        if (!isCodeBlock) {
            return /*#__PURE__*/ _jsx("code", {
                className: "px-1.5 py-0.5 bg-muted rounded text-sm font-mono text-foreground",
                ...props,
                children: children
            });
        }
        // Mermaid code blocks - render as diagrams
        if (detectedLanguage === 'mermaid') {
            return /*#__PURE__*/ _jsx(MermaidPreview, {
                code: codeContent
            });
        }
        // Code block - use Monaco with dark theme and no line numbers
        const language = getMonacoLanguage(detectedLanguage);
        return /*#__PURE__*/ _jsx("div", {
            className: "my-4 dark-editor",
            children: /*#__PURE__*/ _jsx(CodeViewer, {
                value: codeContent,
                language: language,
                height: "auto",
                minHeight: Math.min(Math.max(codeContent.split('\n').length * 20 + 24, 60), 400),
                theme: "dark",
                showLineNumbers: false
            })
        });
    },
    pre: ({ children })=>{
        // Pre is handled by code block, just pass through
        return /*#__PURE__*/ _jsx(_Fragment, {
            children: children
        });
    },
    blockquote: ({ children })=>/*#__PURE__*/ _jsx("blockquote", {
            className: "border-l-4 border-primary/50 pl-4 py-1 my-4 bg-muted/30 rounded-r",
            children: /*#__PURE__*/ _jsx("div", {
                className: "text-muted-foreground italic",
                children: children
            })
        }),
    a: ({ href, children })=>/*#__PURE__*/ _jsx(MarkdownLink, {
            href: href,
            children: children
        }),
    strong: ({ children })=>/*#__PURE__*/ _jsx("strong", {
            className: "font-bold text-foreground",
            children: children
        }),
    em: ({ children })=>/*#__PURE__*/ _jsx("em", {
            className: "italic",
            children: children
        }),
    hr: ()=>/*#__PURE__*/ _jsx("hr", {
            className: "my-8 border-border"
        }),
    table: ({ children })=>/*#__PURE__*/ _jsx("div", {
            className: "my-4 overflow-x-auto",
            children: /*#__PURE__*/ _jsx("table", {
                className: "min-w-full border border-border rounded-sm overflow-hidden",
                children: children
            })
        }),
    thead: ({ children })=>/*#__PURE__*/ _jsx("thead", {
            className: "bg-muted",
            children: children
        }),
    tbody: ({ children })=>/*#__PURE__*/ _jsx("tbody", {
            className: "divide-y divide-border",
            children: children
        }),
    tr: ({ children })=>/*#__PURE__*/ _jsx("tr", {
            className: "hover:bg-muted/50",
            children: children
        }),
    th: ({ children })=>/*#__PURE__*/ _jsx("th", {
            className: "px-4 py-2 text-left text-sm font-semibold",
            children: children
        }),
    td: ({ children })=>/*#__PURE__*/ _jsx("td", {
            className: "px-4 py-2 text-sm",
            children: children
        })
};
export function MarkdownRenderer({ content, className = '' }) {
    if (!content) return null;
    return /*#__PURE__*/ _jsx("div", {
        className: `max-w-none ${className}`,
        children: /*#__PURE__*/ _jsx(ReactMarkdown, {
            components: markdownComponents,
            remarkPlugins: [
                remarkGfm
            ],
            children: content
        })
    });
}
