'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Bug, ArrowsClockwise } from '@phosphor-icons/react';
import { Badge } from '@/components/ui/badge';
import { MethodBadge } from '../../shared/method-badge';
import { cn } from '@/lib/utils';
export function DebugContextCard({ context }) {
    const isError = context.status >= 400;
    // Try to format the response body
    let formattedBody = context.responseBody;
    try {
        const parsed = JSON.parse(context.responseBody);
        formattedBody = JSON.stringify(parsed, null, 2);
    } catch  {
    // Keep original
    }
    // Truncate if too long
    const truncatedBody = formattedBody.length > 300 ? formattedBody.slice(0, 300) + '...' : formattedBody;
    return /*#__PURE__*/ _jsx("div", {
        className: cn("fade-in slide-in-from-bottom-1 animate-in duration-150", "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-3"),
        children: /*#__PURE__*/ _jsxs("div", {
            className: "rounded-lg border border-border bg-muted/30 overflow-hidden",
            children: [
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b border-border",
                    children: [
                        /*#__PURE__*/ _jsx(Bug, {
                            className: "h-4 w-4 text-amber-500",
                            weight: "bold"
                        }),
                        /*#__PURE__*/ _jsx("span", {
                            className: "text-xs font-medium text-muted-foreground",
                            children: "Debug Context"
                        })
                    ]
                }),
                context.endpointName && /*#__PURE__*/ _jsxs("div", {
                    className: "px-3 py-2 border-b border-border",
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-center gap-2",
                            children: [
                                context.endpointMethod && /*#__PURE__*/ _jsx(MethodBadge, {
                                    method: context.endpointMethod,
                                    size: "sm"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "text-sm font-medium text-foreground",
                                    children: context.endpointName
                                })
                            ]
                        }),
                        context.endpointPath && /*#__PURE__*/ _jsx("p", {
                            className: "text-xs text-muted-foreground mt-1 font-mono",
                            children: context.endpointPath
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "px-3 py-2 border-b border-border",
                    children: /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-2",
                        children: [
                            /*#__PURE__*/ _jsx(ArrowsClockwise, {
                                className: "h-3.5 w-3.5 text-muted-foreground",
                                weight: "bold"
                            }),
                            /*#__PURE__*/ _jsx("span", {
                                className: "text-xs text-muted-foreground",
                                children: "Response"
                            }),
                            /*#__PURE__*/ _jsxs(Badge, {
                                variant: isError ? 'destructive' : 'default',
                                className: "text-xs h-5",
                                children: [
                                    context.status,
                                    " ",
                                    context.statusText
                                ]
                            })
                        ]
                    })
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "px-3 py-2",
                    children: /*#__PURE__*/ _jsx("pre", {
                        className: "text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-32 overflow-y-auto",
                        children: truncatedBody
                    })
                }),
                context.requestBody && /*#__PURE__*/ _jsxs("div", {
                    className: "px-3 py-2 border-t border-border",
                    children: [
                        /*#__PURE__*/ _jsx("p", {
                            className: "text-xs text-muted-foreground mb-1",
                            children: "Request Body"
                        }),
                        /*#__PURE__*/ _jsx("pre", {
                            className: "text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-20 overflow-y-auto",
                            children: context.requestBody.length > 200 ? context.requestBody.slice(0, 200) + '...' : context.requestBody
                        })
                    ]
                })
            ]
        })
    });
}
