'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
// import { Button } from '@/components/ui/button'
import { ShieldCheck, Link as LinkIcon, WarningCircle } from '@phosphor-icons/react';
import { KeyValueEditor } from './key-value-editor';
import { BodyEditor } from './body-editor';
import { AuthEditor } from './auth-editor';
import { getAuthTypeLabel } from '@/lib/api-docs/auth';
import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context';
import { cn } from '@/lib/utils';
export function RequestTabs({ params, headers, body, bodyContentType, auth, usingGlobalAuth = false, globalAuth, onParamsChange, onHeadersChange, onBodyChange, onBodyContentTypeChange, onAuthChange, onUseGlobalAuth }) {
    const paramsCount = params.filter((p)=>p.active && p.key).length;
    const headersCount = headers.filter((h)=>h.active && h.key).length;
    const hasBody = body !== null && body.length > 0;
    const hasAuth = auth.authType !== 'none';
    // Always default to Parameters tab for consistency
    const [activeTab, setActiveTab] = useState('params');
    // Get navigation context
    const { state: navState, setActiveTab: syncActiveTab, clearHighlight } = usePlaygroundNavigation();
    // Sync with navigation context
    useEffect(()=>{
        if (navState.activeTab && navState.activeTab !== activeTab) {
            setActiveTab(navState.activeTab);
        }
    }, [
        navState.activeTab,
        activeTab
    ]);
    // Update context when tab changes locally
    const handleTabChange = (tab)=>{
        setActiveTab(tab);
        syncActiveTab(tab);
        clearHighlight();
    };
    // Check if a tab should show error indicator
    const shouldShowTabError = (tab)=>{
        if (!navState.showError || !navState.highlightField) return false;
        switch(tab){
            case 'params':
                return navState.highlightField.type === 'param';
            case 'headers':
                return navState.highlightField.type === 'header';
            case 'body':
                return navState.highlightField.type === 'body';
            case 'auth':
                return navState.highlightField.type === 'auth';
            default:
                return false;
        }
    };
    return /*#__PURE__*/ _jsxs(Tabs, {
        value: activeTab,
        onValueChange: handleTabChange,
        className: "flex flex-col h-full gap-0",
        children: [
            /*#__PURE__*/ _jsxs(TabsList, {
                className: "w-full justify-start rounded-none border-b bg-muted/30 h-auto p-0 overflow-x-auto overflow-y-hidden flex-shrink-0",
                children: [
                    /*#__PURE__*/ _jsxs(TabsTrigger, {
                        value: "params",
                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('params') && "border-red-500 data-[state=active]:border-red-500"),
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "hidden sm:inline",
                                children: "Parameters"
                            }),
                            /*#__PURE__*/ _jsx("span", {
                                className: "sm:hidden",
                                children: "Params"
                            }),
                            shouldShowTabError('params') ? /*#__PURE__*/ _jsx(WarningCircle, {
                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
                                weight: "fill"
                            }) : paramsCount > 0 ? /*#__PURE__*/ _jsx(Badge, {
                                variant: "secondary",
                                className: "ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs",
                                children: paramsCount
                            }) : null
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(TabsTrigger, {
                        value: "body",
                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('body') && "border-red-500 data-[state=active]:border-red-500"),
                        children: [
                            "Body",
                            shouldShowTabError('body') ? /*#__PURE__*/ _jsx(WarningCircle, {
                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
                                weight: "fill"
                            }) : hasBody ? /*#__PURE__*/ _jsx("span", {
                                className: "ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full"
                            }) : null
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(TabsTrigger, {
                        value: "headers",
                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('headers') && "border-red-500 data-[state=active]:border-red-500"),
                        children: [
                            "Headers",
                            shouldShowTabError('headers') ? /*#__PURE__*/ _jsx(WarningCircle, {
                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
                                weight: "fill"
                            }) : headersCount > 0 ? /*#__PURE__*/ _jsx(Badge, {
                                variant: "secondary",
                                className: "ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs",
                                children: headersCount
                            }) : null
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(TabsTrigger, {
                        value: "auth",
                        className: cn("rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap", shouldShowTabError('auth') && "border-red-500 data-[state=active]:border-red-500"),
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "hidden sm:inline",
                                children: "Authorization"
                            }),
                            /*#__PURE__*/ _jsx("span", {
                                className: "sm:hidden",
                                children: "Auth"
                            }),
                            shouldShowTabError('auth') ? /*#__PURE__*/ _jsx(WarningCircle, {
                                className: "ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse",
                                weight: "fill"
                            }) : usingGlobalAuth ? /*#__PURE__*/ _jsx(LinkIcon, {
                                className: "ml-1 sm:ml-2 h-3.5 w-3.5 text-green-600 dark:text-green-400",
                                weight: "bold"
                            }) : hasAuth ? /*#__PURE__*/ _jsx("span", {
                                className: "ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full"
                            }) : null
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(TabsContent, {
                value: "params",
                className: "flex-1 m-0 overflow-auto",
                children: /*#__PURE__*/ _jsx(KeyValueEditor, {
                    items: params,
                    onChange: onParamsChange,
                    title: "Query Parameters",
                    keyLabel: "Name",
                    valueLabel: "Value",
                    showError: navState.highlightField?.type === 'param' && navState.showError
                })
            }),
            /*#__PURE__*/ _jsx(TabsContent, {
                value: "body",
                className: "flex-1 m-0 overflow-auto",
                children: /*#__PURE__*/ _jsx(BodyEditor, {
                    body: body,
                    contentType: bodyContentType,
                    onBodyChange: onBodyChange,
                    onContentTypeChange: onBodyContentTypeChange,
                    showError: navState.highlightField?.type === 'body' && navState.showError
                })
            }),
            /*#__PURE__*/ _jsx(TabsContent, {
                value: "headers",
                className: "flex-1 m-0 overflow-auto",
                children: /*#__PURE__*/ _jsx(KeyValueEditor, {
                    items: headers,
                    onChange: onHeadersChange,
                    title: "Request Headers",
                    keyLabel: "Name",
                    valueLabel: "Value",
                    showError: navState.highlightField?.type === 'header' && navState.showError
                })
            }),
            /*#__PURE__*/ _jsxs(TabsContent, {
                value: "auth",
                className: "flex-1 m-0 overflow-hidden flex flex-col",
                children: [
                    globalAuth && globalAuth.authType !== 'none' && /*#__PURE__*/ _jsx("div", {
                        className: "flex items-center justify-between px-4 py-1.5 bg-muted/40 border-b border-border text-xs",
                        children: usingGlobalAuth ? /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsxs("span", {
                                    className: "flex items-center gap-1.5 text-muted-foreground",
                                    children: [
                                        /*#__PURE__*/ _jsx(LinkIcon, {
                                            className: "h-3 w-3 text-green-600 dark:text-green-400",
                                            weight: "bold"
                                        }),
                                        /*#__PURE__*/ _jsxs("span", {
                                            children: [
                                                "Global: ",
                                                /*#__PURE__*/ _jsx("span", {
                                                    className: "text-foreground font-medium",
                                                    children: getAuthTypeLabel(globalAuth)
                                                })
                                            ]
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ _jsx("button", {
                                    onClick: ()=>onAuthChange({
                                            ...globalAuth
                                        }),
                                    className: "text-muted-foreground hover:text-foreground transition-colors",
                                    children: "Customize"
                                })
                            ]
                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsxs("span", {
                                    className: "flex items-center gap-1.5 text-muted-foreground",
                                    children: [
                                        /*#__PURE__*/ _jsx(ShieldCheck, {
                                            className: "h-3 w-3",
                                            weight: "bold"
                                        }),
                                        /*#__PURE__*/ _jsx("span", {
                                            children: "Custom auth"
                                        })
                                    ]
                                }),
                                onUseGlobalAuth && /*#__PURE__*/ _jsx("button", {
                                    onClick: onUseGlobalAuth,
                                    className: "text-muted-foreground hover:text-foreground transition-colors",
                                    children: "Use global"
                                })
                            ]
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "flex-1 overflow-auto",
                        children: /*#__PURE__*/ _jsx(AuthEditor, {
                            auth: auth,
                            onChange: onAuthChange,
                            showError: navState.highlightField?.type === 'auth' && navState.showError
                        })
                    })
                ]
            })
        ]
    });
}
