'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ShieldCheck, Key, Lock, User, Hash, WarningCircle } from '@phosphor-icons/react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context';
const AUTH_TYPES = [
    {
        value: 'none',
        label: 'No Auth',
        icon: ShieldCheck
    },
    {
        value: 'basic',
        label: 'Basic Auth',
        icon: User
    },
    {
        value: 'bearer',
        label: 'Bearer Token',
        icon: Key
    },
    {
        value: 'api-key',
        label: 'API Key',
        icon: Lock
    }
];
export function AuthEditor({ auth, onChange, showError = false }) {
    const { state: navState } = usePlaygroundNavigation();
    // Check if auth field should be highlighted (from either prop or context)
    const isHighlighted = showError || navState.highlightField?.type === 'auth' && navState.showError;
    const handleTypeChange = (type)=>{
        switch(type){
            case 'none':
                onChange({
                    authType: 'none',
                    authActive: true
                });
                break;
            case 'basic':
                onChange({
                    authType: 'basic',
                    authActive: true,
                    username: '',
                    password: ''
                });
                break;
            case 'bearer':
                onChange({
                    authType: 'bearer',
                    authActive: true,
                    token: ''
                });
                break;
            case 'api-key':
                onChange({
                    authType: 'api-key',
                    authActive: true,
                    addTo: 'HEADERS',
                    key: 'X-API-Key',
                    value: ''
                });
                break;
        }
    };
    const currentType = AUTH_TYPES.find((t)=>t.value === auth.authType) || AUTH_TYPES[0];
    const CurrentIcon = currentType.icon;
    return /*#__PURE__*/ _jsxs("div", {
        className: "flex flex-col h-full",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: cn("flex items-center border-b bg-muted/30 px-4 py-2", isHighlighted ? "border-red-500 bg-red-500/5" : "border-border"),
                children: [
                    isHighlighted && /*#__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", isHighlighted ? "text-red-500" : "text-muted-foreground"),
                        children: isHighlighted ? "Auth required" : "Type"
                    }),
                    /*#__PURE__*/ _jsxs(Select, {
                        value: auth.authType,
                        onValueChange: handleTypeChange,
                        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, {
                                    children: /*#__PURE__*/ _jsxs("span", {
                                        className: "flex items-center gap-2",
                                        children: [
                                            /*#__PURE__*/ _jsx(CurrentIcon, {
                                                className: "h-3.5 w-3.5",
                                                weight: "bold"
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                children: currentType.label
                                            })
                                        ]
                                    })
                                })
                            }),
                            /*#__PURE__*/ _jsx(SelectContent, {
                                children: AUTH_TYPES.map((type)=>/*#__PURE__*/ _jsx(SelectItem, {
                                        value: type.value,
                                        children: /*#__PURE__*/ _jsxs("div", {
                                            className: "flex items-center gap-2",
                                            children: [
                                                /*#__PURE__*/ _jsx(type.icon, {
                                                    className: "h-3.5 w-3.5",
                                                    weight: "bold"
                                                }),
                                                /*#__PURE__*/ _jsx("span", {
                                                    children: type.label
                                                })
                                            ]
                                        })
                                    }, type.value))
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "flex-1 overflow-auto",
                children: [
                    auth.authType === 'none' && /*#__PURE__*/ _jsx("div", {
                        className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", isHighlighted && "bg-red-500/5 border-2 border-red-500/30 rounded-lg m-4 animate-pulse"),
                        children: isHighlighted ? /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx(WarningCircle, {
                                    className: "h-10 w-10 text-red-500 mb-3",
                                    weight: "fill"
                                }),
                                /*#__PURE__*/ _jsx("p", {
                                    className: "text-sm font-medium text-red-600 dark:text-red-400 mb-1",
                                    children: "Authentication Required"
                                }),
                                /*#__PURE__*/ _jsx("p", {
                                    className: "text-xs text-muted-foreground",
                                    children: "Select an auth type above to configure credentials"
                                })
                            ]
                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx(ShieldCheck, {
                                    className: "h-10 w-10 text-muted-foreground/50 mb-3",
                                    weight: "duotone"
                                }),
                                /*#__PURE__*/ _jsx("p", {
                                    className: "text-sm text-muted-foreground",
                                    children: "No authentication required"
                                })
                            ]
                        })
                    }),
                    auth.authType === 'basic' && /*#__PURE__*/ _jsxs("table", {
                        className: "w-full text-sm",
                        children: [
                            /*#__PURE__*/ _jsx("thead", {
                                className: "bg-muted/20 text-xs text-muted-foreground",
                                children: /*#__PURE__*/ _jsxs("tr", {
                                    children: [
                                        /*#__PURE__*/ _jsx("th", {
                                            className: "text-left font-medium px-4 py-2 w-32",
                                            children: "Field"
                                        }),
                                        /*#__PURE__*/ _jsx("th", {
                                            className: "text-left font-medium px-4 py-2",
                                            children: "Value"
                                        })
                                    ]
                                })
                            }),
                            /*#__PURE__*/ _jsxs("tbody", {
                                children: [
                                    /*#__PURE__*/ _jsxs("tr", {
                                        className: "border-b border-border/50",
                                        children: [
                                            /*#__PURE__*/ _jsx("td", {
                                                className: "px-4 py-1",
                                                children: /*#__PURE__*/ _jsxs("div", {
                                                    className: "flex items-center gap-2 text-sm font-medium",
                                                    children: [
                                                        /*#__PURE__*/ _jsx(User, {
                                                            className: "h-3.5 w-3.5 text-muted-foreground"
                                                        }),
                                                        "username"
                                                    ]
                                                })
                                            }),
                                            /*#__PURE__*/ _jsx("td", {
                                                className: "px-2 py-1",
                                                children: /*#__PURE__*/ _jsx(Input, {
                                                    type: "text",
                                                    value: auth.username,
                                                    onChange: (e)=>onChange({
                                                            ...auth,
                                                            username: e.target.value
                                                        }),
                                                    placeholder: "Enter username...",
                                                    className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
                                                })
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsxs("tr", {
                                        className: "border-b border-border/50",
                                        children: [
                                            /*#__PURE__*/ _jsx("td", {
                                                className: "px-4 py-1",
                                                children: /*#__PURE__*/ _jsxs("div", {
                                                    className: "flex items-center gap-2 text-sm font-medium",
                                                    children: [
                                                        /*#__PURE__*/ _jsx(Lock, {
                                                            className: "h-3.5 w-3.5 text-muted-foreground"
                                                        }),
                                                        "password"
                                                    ]
                                                })
                                            }),
                                            /*#__PURE__*/ _jsx("td", {
                                                className: "px-2 py-1",
                                                children: /*#__PURE__*/ _jsx(Input, {
                                                    type: "password",
                                                    value: auth.password,
                                                    onChange: (e)=>onChange({
                                                            ...auth,
                                                            password: e.target.value
                                                        }),
                                                    placeholder: "Enter password...",
                                                    className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
                                                })
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    }),
                    auth.authType === 'bearer' && /*#__PURE__*/ _jsxs("table", {
                        className: "w-full text-sm",
                        children: [
                            /*#__PURE__*/ _jsx("thead", {
                                className: "bg-muted/20 text-xs text-muted-foreground",
                                children: /*#__PURE__*/ _jsxs("tr", {
                                    children: [
                                        /*#__PURE__*/ _jsx("th", {
                                            className: "text-left font-medium px-4 py-2 w-32",
                                            children: "Field"
                                        }),
                                        /*#__PURE__*/ _jsx("th", {
                                            className: "text-left font-medium px-4 py-2",
                                            children: "Value"
                                        })
                                    ]
                                })
                            }),
                            /*#__PURE__*/ _jsx("tbody", {
                                children: /*#__PURE__*/ _jsxs("tr", {
                                    className: "border-b border-border/50",
                                    children: [
                                        /*#__PURE__*/ _jsx("td", {
                                            className: "px-4 py-1 align-top pt-3",
                                            children: /*#__PURE__*/ _jsxs("div", {
                                                className: "flex items-center gap-2 text-sm font-medium",
                                                children: [
                                                    /*#__PURE__*/ _jsx(Key, {
                                                        className: "h-3.5 w-3.5 text-muted-foreground"
                                                    }),
                                                    "token"
                                                ]
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx("td", {
                                            className: "px-2 py-1",
                                            children: /*#__PURE__*/ _jsx("textarea", {
                                                value: auth.token,
                                                onChange: (e)=>onChange({
                                                        ...auth,
                                                        token: e.target.value
                                                    }),
                                                placeholder: "Paste your bearer token...",
                                                className: "w-full min-h-[80px] px-3 py-2 rounded-md border border-border/50 bg-transparent font-mono text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
                                            })
                                        })
                                    ]
                                })
                            })
                        ]
                    }),
                    auth.authType === 'api-key' && /*#__PURE__*/ _jsxs(_Fragment, {
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-muted/10",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "text-xs text-muted-foreground font-medium",
                                        children: "Add to"
                                    }),
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "flex p-0.5 bg-muted rounded-sm",
                                        children: [
                                            /*#__PURE__*/ _jsx("button", {
                                                type: "button",
                                                onClick: ()=>onChange({
                                                        ...auth,
                                                        addTo: 'HEADERS'
                                                    }),
                                                className: cn("px-3 py-1 rounded text-xs font-medium transition-all", auth.addTo === 'HEADERS' ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
                                                children: "Header"
                                            }),
                                            /*#__PURE__*/ _jsx("button", {
                                                type: "button",
                                                onClick: ()=>onChange({
                                                        ...auth,
                                                        addTo: 'QUERY_PARAMS'
                                                    }),
                                                className: cn("px-3 py-1 rounded text-xs font-medium transition-all", auth.addTo === 'QUERY_PARAMS' ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
                                                children: "Query"
                                            })
                                        ]
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsxs("table", {
                                className: "w-full text-sm",
                                children: [
                                    /*#__PURE__*/ _jsx("thead", {
                                        className: "bg-muted/20 text-xs text-muted-foreground",
                                        children: /*#__PURE__*/ _jsxs("tr", {
                                            children: [
                                                /*#__PURE__*/ _jsx("th", {
                                                    className: "text-left font-medium px-4 py-2 w-32",
                                                    children: "Field"
                                                }),
                                                /*#__PURE__*/ _jsx("th", {
                                                    className: "text-left font-medium px-4 py-2",
                                                    children: "Value"
                                                })
                                            ]
                                        })
                                    }),
                                    /*#__PURE__*/ _jsxs("tbody", {
                                        children: [
                                            /*#__PURE__*/ _jsxs("tr", {
                                                className: "border-b border-border/50",
                                                children: [
                                                    /*#__PURE__*/ _jsx("td", {
                                                        className: "px-4 py-1",
                                                        children: /*#__PURE__*/ _jsxs("div", {
                                                            className: "flex items-center gap-2 text-sm font-medium",
                                                            children: [
                                                                /*#__PURE__*/ _jsx(Hash, {
                                                                    className: "h-3.5 w-3.5 text-muted-foreground"
                                                                }),
                                                                "key"
                                                            ]
                                                        })
                                                    }),
                                                    /*#__PURE__*/ _jsx("td", {
                                                        className: "px-2 py-1",
                                                        children: /*#__PURE__*/ _jsx(Input, {
                                                            type: "text",
                                                            value: auth.key,
                                                            onChange: (e)=>onChange({
                                                                    ...auth,
                                                                    key: e.target.value
                                                                }),
                                                            placeholder: "X-API-Key",
                                                            className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
                                                        })
                                                    })
                                                ]
                                            }),
                                            /*#__PURE__*/ _jsxs("tr", {
                                                className: "border-b border-border/50",
                                                children: [
                                                    /*#__PURE__*/ _jsx("td", {
                                                        className: "px-4 py-1",
                                                        children: /*#__PURE__*/ _jsxs("div", {
                                                            className: "flex items-center gap-2 text-sm font-medium",
                                                            children: [
                                                                /*#__PURE__*/ _jsx(Key, {
                                                                    className: "h-3.5 w-3.5 text-muted-foreground"
                                                                }),
                                                                "value"
                                                            ]
                                                        })
                                                    }),
                                                    /*#__PURE__*/ _jsx("td", {
                                                        className: "px-2 py-1",
                                                        children: /*#__PURE__*/ _jsx(Input, {
                                                            type: "password",
                                                            value: auth.value,
                                                            onChange: (e)=>onChange({
                                                                    ...auth,
                                                                    value: e.target.value
                                                                }),
                                                            placeholder: "Enter API key...",
                                                            className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
                                                        })
                                                    })
                                                ]
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    })
                ]
            })
        ]
    });
}
