'use client';
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import { Warning, ArrowClockwise, Code, FileText } from '@phosphor-icons/react';
/**
 * Error boundary for MDX content rendering.
 * Catches rendering errors and displays helpful guidance.
 */ export class MDXErrorBoundary extends Component {
    static getDerivedStateFromError(error) {
        return {
            hasError: true,
            error
        };
    }
    componentDidCatch(error, errorInfo) {
        console.error('[MDX Rendering Error]', error, errorInfo);
    }
    render() {
        if (this.state.hasError) {
            const errorMessage = this.state.error?.message || 'Unknown error';
            const suggestions = getErrorSuggestions(errorMessage);
            return /*#__PURE__*/ _jsx("div", {
                className: "docs-page docs-page-error w-full min-h-[200px] max-w-4xl mx-auto px-4 py-6 sm:px-8 sm:py-8",
                children: /*#__PURE__*/ _jsxs("div", {
                    className: "rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/50 p-6",
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-start gap-3 mb-4",
                            children: [
                                /*#__PURE__*/ _jsx(Warning, {
                                    className: "h-6 w-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5",
                                    weight: "fill"
                                }),
                                /*#__PURE__*/ _jsxs("div", {
                                    children: [
                                        /*#__PURE__*/ _jsx("h2", {
                                            className: "text-lg font-semibold text-amber-900 dark:text-amber-100",
                                            children: "Unable to render this page"
                                        }),
                                        /*#__PURE__*/ _jsx("p", {
                                            className: "text-sm text-amber-700 dark:text-amber-300 mt-1",
                                            children: "There's a syntax error in the MDX content that prevented rendering."
                                        })
                                    ]
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "bg-amber-100 dark:bg-amber-900/50 rounded-md p-3 mb-4",
                            children: [
                                /*#__PURE__*/ _jsx("p", {
                                    className: "text-xs font-medium text-amber-800 dark:text-amber-200 mb-1",
                                    children: "Error message:"
                                }),
                                /*#__PURE__*/ _jsx("code", {
                                    className: "text-sm text-amber-900 dark:text-amber-100 break-all",
                                    children: errorMessage
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "space-y-3",
                            children: [
                                /*#__PURE__*/ _jsx("p", {
                                    className: "text-sm font-medium text-amber-800 dark:text-amber-200",
                                    children: "Common causes and fixes:"
                                }),
                                /*#__PURE__*/ _jsx("ul", {
                                    className: "space-y-2",
                                    children: suggestions.map((suggestion, index)=>/*#__PURE__*/ _jsxs("li", {
                                            className: "flex items-start gap-2 text-sm text-amber-700 dark:text-amber-300",
                                            children: [
                                                /*#__PURE__*/ _jsx(suggestion.icon, {
                                                    className: "h-4 w-4 flex-shrink-0 mt-0.5",
                                                    weight: "bold"
                                                }),
                                                /*#__PURE__*/ _jsxs("div", {
                                                    children: [
                                                        /*#__PURE__*/ _jsxs("span", {
                                                            className: "font-medium",
                                                            children: [
                                                                suggestion.title,
                                                                ":"
                                                            ]
                                                        }),
                                                        ' ',
                                                        suggestion.description
                                                    ]
                                                })
                                            ]
                                        }, index))
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("button", {
                            onClick: this.handleRetry,
                            className: "mt-6 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-amber-700 transition-colors",
                            children: [
                                /*#__PURE__*/ _jsx(ArrowClockwise, {
                                    className: "h-4 w-4",
                                    weight: "bold"
                                }),
                                "Try again"
                            ]
                        })
                    ]
                })
            });
        }
        return this.props.children;
    }
    constructor(props){
        super(props), _define_property(this, "handleRetry", ()=>{
            this.setState({
                hasError: false,
                error: null
            });
        });
        this.state = {
            hasError: false,
            error: null
        };
    }
}
/**
 * Get context-aware error suggestions based on the error message
 */ function getErrorSuggestions(errorMessage) {
    const suggestions = [];
    // Check for common MDX errors
    if (errorMessage.includes('Unexpected') || errorMessage.includes('Expected')) {
        suggestions.push({
            icon: Code,
            title: 'JSX Syntax',
            description: 'Check for unclosed tags, missing quotes in attributes, or invalid JSX expressions. All tags must be properly closed (e.g., <Image /> not <Image>).'
        });
    }
    if (errorMessage.includes('is not defined') || errorMessage.includes('is not a function')) {
        suggestions.push({
            icon: Code,
            title: 'Unknown Component',
            description: 'A component used in this page may not be available. Check that all component names are spelled correctly and are supported.'
        });
    }
    if (errorMessage.includes('mermaid') || errorMessage.includes('Mermaid')) {
        suggestions.push({
            icon: Code,
            title: 'Mermaid Syntax',
            description: 'Check your Mermaid diagram syntax. Ensure proper indentation and valid diagram type (flowchart, sequenceDiagram, etc.).'
        });
    }
    if (errorMessage.includes('frontmatter') || errorMessage.includes('yaml')) {
        suggestions.push({
            icon: FileText,
            title: 'Frontmatter Format',
            description: 'Ensure frontmatter is valid YAML between --- markers at the top of the file.'
        });
    }
    // Always add generic suggestions
    suggestions.push({
        icon: Code,
        title: 'Curly Braces',
        description: 'In MDX, curly braces {} are for JavaScript expressions. Use {"{"} and {"}"} to display literal braces.'
    });
    suggestions.push({
        icon: FileText,
        title: 'Special Characters',
        description: 'Characters like <, >, and & may need to be escaped or wrapped in JSX expressions.'
    });
    return suggestions.slice(0, 4) // Limit to 4 suggestions
    ;
}
