import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ChevronDown, ChevronRight, RefreshCw, CreditCard } from 'lucide-react';
export function ErrorRenderer({ contentJson, debug: _debug, sessionId: _sessionId, onRetry, }) {
    const [showRawDetails, setShowRawDetails] = useState(false);
    // Check for special error types
    const isBalanceLow = contentJson.type === 'balance_low' ||
        contentJson.errorType === 'balance_low';
    const _isRetryable = contentJson.isRetryable === true || isBalanceLow;
    // Handle different error structures:
    // 1. { error: { name, url, statusCode, ... } } - from API errors
    // 2. { message, type, details: { ... }, isAborted } - from toErrorPayload
    // 3. { message, ... } - simple errors
    let errorDetails;
    let errorMessage;
    let errorType;
    let isAborted = false;
    // Check if we have the nested 'error' structure
    if (contentJson.error && typeof contentJson.error === 'object') {
        errorDetails = contentJson.error;
        // Try to extract message from nested error
        if (errorDetails.message && typeof errorDetails.message === 'string') {
            errorMessage = errorDetails.message;
        }
        if (errorDetails.type && typeof errorDetails.type === 'string') {
            errorType = errorDetails.type;
        }
    }
    // Check if we have the toErrorPayload structure
    else if (contentJson.details && typeof contentJson.details === 'object') {
        errorDetails = contentJson.details;
        if (contentJson.message && typeof contentJson.message === 'string') {
            errorMessage = contentJson.message;
        }
        if (contentJson.type && typeof contentJson.type === 'string') {
            errorType = contentJson.type;
        }
        if (contentJson.isAborted === true) {
            isAborted = true;
        }
    }
    // Simple error structure
    else {
        if (contentJson.message && typeof contentJson.message === 'string') {
            errorMessage = contentJson.message;
        }
        if (contentJson.type && typeof contentJson.type === 'string') {
            errorType = contentJson.type;
        }
        if (contentJson.isAborted === true) {
            isAborted = true;
        }
        // Use the whole contentJson as details if we don't have a specific details field
        errorDetails = contentJson;
    }
    // Try to extract and parse API error from responseBody if available
    let apiError;
    if (errorDetails?.responseBody &&
        typeof errorDetails.responseBody === 'string') {
        try {
            const parsed = JSON.parse(errorDetails.responseBody);
            if (parsed.error && typeof parsed.error === 'object') {
                apiError = {
                    type: typeof parsed.error.type === 'string'
                        ? parsed.error.type
                        : undefined,
                    message: typeof parsed.error.message === 'string'
                        ? parsed.error.message
                        : undefined,
                };
            }
        }
        catch {
            // Ignore parse errors
        }
    }
    // Special UI for balance_low errors
    if (isBalanceLow) {
        return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "h-4 w-4 text-amber-500" }), _jsx("span", { className: "font-medium text-foreground", children: "Balance too low" })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Complete your top-up in the modal, then retry your request." }), onRetry && (_jsx("div", { className: "pt-1", children: _jsxs("button", { type: "button", onClick: onRetry, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: [_jsx(RefreshCw, { className: "w-3 h-3" }), "Retry"] }) }))] }));
    }
    // Default error UI
    const renderValue = (value) => {
        if (value === null || value === undefined) {
            return _jsx("span", { className: "text-muted-foreground", children: "null" });
        }
        if (typeof value === 'boolean') {
            return (_jsx("span", { className: "text-amber-600 dark:text-amber-400", children: String(value) }));
        }
        if (typeof value === 'number') {
            return _jsx("span", { className: "text-blue-600 dark:text-blue-400", children: value });
        }
        if (typeof value === 'string') {
            // If it looks like JSON, try to format it
            if (value.startsWith('{') || value.startsWith('[')) {
                try {
                    const parsed = JSON.parse(value);
                    return (_jsx("pre", { className: "mt-1 p-2 bg-muted/50 rounded text-xs overflow-x-auto", children: _jsx("code", { children: JSON.stringify(parsed, null, 2) }) }));
                }
                catch {
                    // Not valid JSON, render as string
                }
            }
            return _jsx("span", { className: "text-foreground", children: value });
        }
        if (typeof value === 'object') {
            return (_jsx("pre", { className: "mt-1 p-2 bg-muted/50 rounded text-xs overflow-x-auto", children: _jsx("code", { children: JSON.stringify(value, null, 2) }) }));
        }
        return _jsx("span", { className: "text-foreground", children: String(value) });
    };
    const importantFields = [
        'name',
        'statusCode',
        'url',
        'model',
        'isRetryable',
        'cause',
    ];
    const renderedFields = new Set();
    return (_jsxs("div", { className: "space-y-2 text-sm", children: [isAborted && (_jsx("div", { className: "text-amber-600 dark:text-amber-400 font-medium", children: "Request aborted" })), apiError?.message && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: "API Error:" }), _jsx("div", { className: "text-foreground", children: apiError.message }), apiError.type && (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Type: ", apiError.type] }))] })), !apiError?.message && errorMessage && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "font-medium text-red-600 dark:text-red-400", children: "Error:" }), _jsx("div", { className: "text-foreground", children: errorMessage }), errorType && (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Type: ", errorType] }))] })), onRetry && (_jsx("div", { className: "pt-2", children: _jsxs("button", { type: "button", onClick: onRetry, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: [_jsx(RefreshCw, { className: "w-3 h-3" }), "Retry"] }) })), errorDetails && (_jsx("div", { className: "space-y-1.5", children: importantFields.map((field) => {
                    const value = errorDetails[field];
                    if (value === undefined || value === null)
                        return null;
                    renderedFields.add(field);
                    return (_jsxs("div", { className: "flex gap-2", children: [_jsxs("span", { className: "font-medium text-muted-foreground min-w-[100px]", children: [field, ":"] }), renderValue(value)] }, field));
                }) })), errorDetails && (_jsxs("div", { className: "mt-3 border-t border-border pt-2", children: [_jsxs("button", { type: "button", onClick: () => setShowRawDetails(!showRawDetails), className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors", children: [showRawDetails ? (_jsx(ChevronDown, { className: "h-3 w-3" })) : (_jsx(ChevronRight, { className: "h-3 w-3" })), showRawDetails ? 'Hide' : 'View', " Raw Error Details"] }), showRawDetails && (_jsx("div", { className: "mt-2", children: _jsx("pre", { className: "p-3 bg-muted/50 rounded text-xs overflow-x-auto max-h-96 overflow-y-auto", children: _jsx("code", { children: JSON.stringify(errorDetails, null, 2) }) }) }))] })), _debug && (_jsxs("details", { className: "mt-4 text-xs", children: [_jsx("summary", { className: "cursor-pointer text-muted-foreground", children: "Debug Info" }), _jsx("pre", { className: "mt-2 p-2 bg-muted/30 rounded overflow-x-auto", children: _jsx("code", { children: JSON.stringify({ contentJson, errorDetails, apiError }, null, 2) }) })] }))] }));
}
//# sourceMappingURL=ErrorRenderer.js.map