import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Component } from 'react';
import { cn } from '../../../../utils/cn.js';

/**
 * Error boundary specifically designed for chart components
 * Provides graceful error handling and fallback UI
 */
class ChartErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        return {
            hasError: true,
            error,
        };
    }
    componentDidCatch(error, errorInfo) {
        this.setState({
            error,
            errorInfo,
        });
        // Call optional error handler
        if (this.props.onError) {
            this.props.onError(error, errorInfo);
        }
        // Log error in development
        if (process.env.NODE_ENV === 'development') {
            console.error('Chart Error Boundary caught an error:', error, errorInfo);
        }
    }
    render() {
        var _a;
        if (this.state.hasError) {
            // Use custom fallback if provided
            if (this.props.fallback) {
                return this.props.fallback;
            }
            // Default error UI
            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
        }
        return this.props.children;
    }
}

export { ChartErrorBoundary };
