'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { FileText, WarningCircle } from '@phosphor-icons/react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { KeyValueEditor } from './key-value-editor';
import { CodeEditor } from './code-editor';
import { cn } from '@/lib/utils';
const CONTENT_TYPES = [
    {
        label: 'None',
        value: 'none'
    },
    {
        label: 'JSON',
        value: 'application/json',
        language: 'json'
    },
    {
        label: 'XML',
        value: 'application/xml',
        language: 'xml'
    },
    {
        label: 'Plain Text',
        value: 'text/plain',
        language: 'plaintext'
    },
    {
        label: 'HTML',
        value: 'text/html',
        language: 'html'
    },
    {
        label: 'Form URL Encoded',
        value: 'application/x-www-form-urlencoded'
    },
    {
        label: 'Multipart Form',
        value: 'multipart/form-data'
    },
    {
        label: 'Binary',
        value: 'application/octet-stream'
    }
];
export function BodyEditor({ body, contentType, onBodyChange, onContentTypeChange, showError = false }) {
    const [formData, setFormData] = useState([]);
    // Parse form data from body when content type changes
    useEffect(()=>{
        if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
            try {
                if (body) {
                    const parsed = JSON.parse(body);
                    if (Array.isArray(parsed)) {
                        setFormData(parsed.map((item, i)=>({
                                id: `form_${i}`,
                                key: item.key || '',
                                value: item.value || '',
                                active: true
                            })));
                    }
                }
            } catch  {
                setFormData([]);
            }
        }
    }, [
        contentType,
        body
    ]);
    // Default templates for each content type
    const DEFAULT_TEMPLATES = {
        'application/json': '{\n  \n}',
        'application/xml': '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n  \n</root>',
        'text/html': '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
        'text/plain': ''
    };
    // Check if current body is a default template or invalid (should be replaced when switching types)
    const isDefaultTemplate = (currentBody)=>{
        if (!currentBody || currentBody.trim() === '' || currentBody.trim() === 'null') return true;
        return Object.values(DEFAULT_TEMPLATES).some((template)=>currentBody.trim() === template.trim());
    };
    // Normalize body value - convert "null" string to empty
    const normalizedBody = body === 'null' || body === null ? '' : body;
    const handleContentTypeChange = (value)=>{
        console.log('[BodyEditor] Content type changed to:', value);
        const newType = value === 'none' ? null : value;
        onContentTypeChange(newType);
        // Set default body content based on type
        if (newType === null) {
            onBodyChange(null);
        } else if (isDefaultTemplate(body)) {
            // Replace with new template if current body is empty or a default template
            const template = DEFAULT_TEMPLATES[newType] ?? '';
            onBodyChange(template);
        }
    // If body has custom content, keep it when switching types
    };
    const handleFormDataChange = (items)=>{
        setFormData(items);
        onBodyChange(JSON.stringify(items.map(({ key, value })=>({
                key,
                value
            }))));
    };
    const currentValue = contentType || 'none';
    const currentTypeInfo = CONTENT_TYPES.find((t)=>t.value === currentValue);
    const editorLanguage = currentTypeInfo?.language || 'plaintext';
    // Content type selector header component
    const ContentTypeHeader = ()=>/*#__PURE__*/ _jsxs("div", {
            className: cn("flex items-center border-b bg-muted/30 px-4 py-2", showError ? "border-red-500 bg-red-500/5" : "border-border"),
            children: [
                showError && /*#__PURE__*/ _jsx(WarningCircle, {
                    className: "h-4 w-4 text-red-500 animate-pulse mr-2",
                    weight: "fill"
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: cn("text-xs font-medium mr-3", showError ? "text-red-500" : "text-muted-foreground"),
                    children: showError ? "Body needs attention" : "Type"
                }),
                /*#__PURE__*/ _jsxs(Select, {
                    value: currentValue,
                    onValueChange: handleContentTypeChange,
                    children: [
                        /*#__PURE__*/ _jsx(SelectTrigger, {
                            className: "h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50",
                            children: /*#__PURE__*/ _jsx(SelectValue, {
                                placeholder: "Select type"
                            })
                        }),
                        /*#__PURE__*/ _jsx(SelectContent, {
                            children: CONTENT_TYPES.map((type)=>/*#__PURE__*/ _jsx(SelectItem, {
                                    value: type.value,
                                    children: type.label
                                }, type.value))
                        })
                    ]
                })
            ]
        });
    // Form data editors (URL encoded, multipart)
    if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
        return /*#__PURE__*/ _jsxs("div", {
            className: "flex flex-col h-full",
            children: [
                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
                /*#__PURE__*/ _jsx("div", {
                    className: "flex-1 overflow-auto",
                    children: /*#__PURE__*/ _jsx(KeyValueEditor, {
                        items: formData,
                        onChange: handleFormDataChange,
                        title: contentType === 'multipart/form-data' ? 'Form Data' : 'URL Encoded',
                        keyLabel: "Field",
                        valueLabel: "Value",
                        showDescription: false
                    })
                })
            ]
        });
    }
    // Binary file (placeholder)
    if (contentType === 'application/octet-stream') {
        return /*#__PURE__*/ _jsxs("div", {
            className: "flex flex-col h-full",
            children: [
                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex-1 flex flex-col items-center justify-center p-8 text-center",
                    children: [
                        /*#__PURE__*/ _jsx(FileText, {
                            className: "h-10 w-10 text-muted-foreground/50 mb-3",
                            weight: "duotone"
                        }),
                        /*#__PURE__*/ _jsx("p", {
                            className: "text-sm text-muted-foreground",
                            children: "Binary file upload not supported"
                        })
                    ]
                })
            ]
        });
    }
    // No body
    if (contentType === null) {
        return /*#__PURE__*/ _jsxs("div", {
            className: "flex flex-col h-full",
            children: [
                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex-1 flex flex-col items-center justify-center p-8 text-center",
                    children: [
                        /*#__PURE__*/ _jsx(FileText, {
                            className: "h-10 w-10 text-muted-foreground/50 mb-3",
                            weight: "duotone"
                        }),
                        /*#__PURE__*/ _jsx("p", {
                            className: "text-sm text-muted-foreground",
                            children: "No request body"
                        }),
                        /*#__PURE__*/ _jsx("p", {
                            className: "text-xs text-muted-foreground/70 mt-1",
                            children: "Select a type to add body"
                        })
                    ]
                })
            ]
        });
    }
    // Monaco editor for JSON, XML, Text, HTML
    const editorValue = normalizedBody || '';
    // Placeholder text based on content type
    const placeholderMap = {
        'application/json': 'Enter JSON body...',
        'application/xml': 'Enter XML body...',
        'text/html': 'Enter HTML body...',
        'text/plain': 'Enter text...'
    };
    const placeholder = placeholderMap[contentType || ''] || 'Enter request body...';
    return /*#__PURE__*/ _jsxs("div", {
        className: "flex flex-col h-full",
        children: [
            /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
            /*#__PURE__*/ _jsx("div", {
                className: "flex-1 dark-editor h-full",
                children: /*#__PURE__*/ _jsx(CodeEditor, {
                    value: editorValue,
                    onChange: onBodyChange,
                    language: editorLanguage,
                    height: "100%",
                    theme: "dark",
                    showLineNumbers: false,
                    showBorder: false,
                    rounded: false,
                    placeholder: placeholder
                }, `editor-${contentType}`)
            })
        ]
    });
}
