'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { X, ArrowClockwise, Sparkle } from '@phosphor-icons/react';
import { AgentChat } from '../agent';
import { Button } from '@/components/ui/button';
import { useMobile } from '@/lib/api-docs/mobile-context';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
export function RightSidebar({ request, collection, apiSummary, onNavigateToEndpoint, onPrefillParameters, debugContext, onClearDebugContext, explainContext, onClearExplainContext, onOpenGlobalAuth, onNavigateToAuthTab, onNavigateToParamsTab, onNavigateToBodyTab, onNavigateToHeadersTab, onNavigateToDocSection, onNavigateToDocPage }) {
    // Mobile context - now used for both mobile and desktop
    const { isMobile, isRightSidebarOpen, closeRightSidebar } = useMobile();
    const [mounted, setMounted] = useState(false);
    // Ensure we're mounted before using portal (for SSR)
    useEffect(()=>{
        setMounted(true);
    }, []);
    // Debug context to send to agent (full context for card display)
    const [pendingDebugContext, setPendingDebugContext] = useState(null);
    // Handle debug context
    useEffect(()=>{
        if (debugContext) {
            // Pass full context to agent
            setPendingDebugContext(debugContext);
            // Clear the debug context from parent
            onClearDebugContext?.();
        }
    }, [
        debugContext,
        onClearDebugContext
    ]);
    // Clear debug context after it's been used
    const handleDebugContextConsumed = ()=>{
        setPendingDebugContext(null);
    };
    // Key for resetting chat
    const [chatKey, setChatKey] = useState(0);
    // Track if there are messages
    const [hasMessages, setHasMessages] = useState(false);
    // Handle reset conversation
    const handleResetConversation = useCallback(()=>{
        // Clear chat storage before remounting
        localStorage.removeItem('brainfish-agent-chat');
        setChatKey((prev)=>prev + 1);
        setHasMessages(false);
    }, []);
    // Sidebar content component
    const sidebarContent = /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "docs-agent-header shrink-0 px-3 sm:px-4 h-[41px] flex items-center border-b border-border bg-muted/30",
                children: /*#__PURE__*/ _jsxs("div", {
                    className: "flex items-center justify-between gap-2 w-full",
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "docs-agent-title flex items-center gap-2.5",
                            children: [
                                /*#__PURE__*/ _jsx(Sparkle, {
                                    className: "size-5 text-primary",
                                    weight: "fill"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "text-sm font-medium",
                                    children: "Assistant"
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-center gap-1 shrink-0",
                            children: [
                                hasMessages && /*#__PURE__*/ _jsxs(Tooltip, {
                                    children: [
                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                            asChild: true,
                                            children: /*#__PURE__*/ _jsx(Button, {
                                                variant: "ghost",
                                                size: "icon",
                                                onClick: handleResetConversation,
                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
                                                children: /*#__PURE__*/ _jsx(ArrowClockwise, {
                                                    className: "h-4 w-4",
                                                    weight: "bold"
                                                })
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                            side: "bottom",
                                            children: "New conversation"
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ _jsxs(Tooltip, {
                                    children: [
                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                            asChild: true,
                                            children: /*#__PURE__*/ _jsx(Button, {
                                                variant: "ghost",
                                                size: "icon",
                                                onClick: closeRightSidebar,
                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
                                                children: /*#__PURE__*/ _jsx(X, {
                                                    className: "h-4 w-4",
                                                    weight: "bold"
                                                })
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                            side: "bottom",
                                            children: "Close"
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "docs-agent-content flex-1 overflow-hidden",
                children: /*#__PURE__*/ _jsx(AgentChat, {
                    collection: collection,
                    currentEndpoint: request,
                    apiSummary: apiSummary,
                    onNavigate: onNavigateToEndpoint,
                    onPrefill: onPrefillParameters,
                    debugContext: pendingDebugContext,
                    onDebugContextConsumed: handleDebugContextConsumed,
                    explainContext: explainContext,
                    onExplainContextConsumed: onClearExplainContext,
                    onOpenGlobalAuth: onOpenGlobalAuth,
                    onNavigateToAuthTab: onNavigateToAuthTab,
                    onNavigateToParamsTab: onNavigateToParamsTab,
                    onNavigateToBodyTab: onNavigateToBodyTab,
                    onNavigateToHeadersTab: onNavigateToHeadersTab,
                    onNavigateToDocSection: onNavigateToDocSection,
                    onNavigateToDocPage: onNavigateToDocPage,
                    onHasMessagesChange: setHasMessages
                }, chatKey)
            })
        ]
    });
    // Render via portal for proper z-index stacking (both mobile and desktop)
    if (!mounted) return null;
    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            isMobile && isRightSidebarOpen && /*#__PURE__*/ _jsx("div", {
                className: "docs-agent-overlay fixed inset-0 bg-black/50 z-[55]",
                onClick: closeRightSidebar
            }),
            /*#__PURE__*/ _jsx("div", {
                className: cn("docs-agent-panel border-l border-border bg-background flex flex-col overflow-hidden", "fixed inset-y-0 right-0 z-[60]", // Width: smaller on mobile, full 384px on desktop
                "w-[320px] sm:w-[360px] lg:w-96", // Slide animation
                "transform transition-transform duration-300 ease-in-out", isRightSidebarOpen ? "translate-x-0" : "translate-x-full"),
                children: sidebarContent
            })
        ]
    }), document.body);
}
