'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { X, Spinner } from '@phosphor-icons/react';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { CollectionTree } from './collection-tree';
import { SidebarSection } from './sidebar-section';
import { SidebarItem, SlidingIndicatorProvider } from './sidebar-item';
import { SidebarGroup } from './sidebar-group';
import { useMobile } from '@/lib/api-docs/mobile-context';
import { cn } from '@/lib/utils';
export function DocsSidebar({ collection, selectedRequest, selectedDocSection, selectedDocPage, activeTab, onSelectRequest, onSelectDocumentation, onSelectDocPage, apiVersions, selectedApiVersion, onApiVersionChange, isVersionLoading }) {
    const { isMobile, isLeftSidebarOpen, closeLeftSidebar } = useMobile();
    const [mounted, setMounted] = useState(false);
    // Ensure we're mounted before using portal (for SSR)
    useEffect(()=>{
        setMounted(true);
    }, []);
    // Handle request selection with mobile close
    const handleSelectRequest = (request)=>{
        onSelectRequest(request);
        if (isMobile) {
            closeLeftSidebar();
        }
    };
    // Handle doc click with mobile close
    const handleDocClickWithClose = (headingId)=>{
        if (onSelectDocumentation) {
            onSelectDocumentation(headingId);
        }
        if (isMobile) {
            closeLeftSidebar();
        }
    };
    // Handle doc page click with mobile close
    const handleDocPageClick = (slug)=>{
        if (onSelectDocPage) {
            onSelectDocPage(slug);
        }
        if (isMobile) {
            closeLeftSidebar();
        }
    };
    // Get doc groups from collection
    const docGroups = collection.docGroups || [];
    // Check if any child in a group is selected
    const isChildSelected = (page)=>{
        if (!page.children) return false;
        return page.children.some((child)=>selectedDocPage === child.slug);
    };
    // Get the selected child slug for a group (for triggering auto-expand)
    const getSelectedChildSlug = (page)=>{
        if (!page.children) return null;
        const selected = page.children.find((child)=>selectedDocPage === child.slug);
        return selected?.slug || null;
    };
    // Render a doc page item (may be a collapsible group with children)
    const renderDocPage = (page)=>{
        // Handle collapsible group with children
        if (page.isGroup && page.children && page.children.length > 0) {
            return /*#__PURE__*/ _jsx(SidebarGroup, {
                title: page.title,
                defaultOpen: isChildSelected(page),
                selectedChildSlug: getSelectedChildSlug(page),
                children: page.children.map((child)=>{
                    const isSelected = selectedDocPage === child.slug;
                    return /*#__PURE__*/ _jsx(SidebarItem, {
                        itemId: `doc-${child.slug}`,
                        selected: isSelected,
                        indent: 1,
                        icon: child.icon,
                        onClick: ()=>handleDocPageClick(child.slug),
                        children: child.title
                    }, child.id);
                })
            }, page.id);
        }
        // Regular page item
        const isSelected = selectedDocPage === page.slug;
        return /*#__PURE__*/ _jsx(SidebarItem, {
            itemId: `doc-${page.slug}`,
            selected: isSelected,
            icon: page.icon,
            onClick: ()=>handleDocPageClick(page.slug),
            children: page.title
        }, page.id);
    };
    // Sidebar content component (shared between mobile and desktop)
    const sidebarContent = /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            isMobile && /*#__PURE__*/ _jsx("div", {
                className: "px-4 h-[41px] flex items-center justify-end border-b border-sidebar-border shrink-0",
                children: /*#__PURE__*/ _jsx(Button, {
                    variant: "ghost",
                    size: "icon",
                    onClick: closeLeftSidebar,
                    className: "h-7 w-7 lg:hidden",
                    children: /*#__PURE__*/ _jsx(X, {
                        className: "h-4 w-4",
                        weight: "bold"
                    })
                })
            }),
            activeTab === 'api-reference' && apiVersions && apiVersions.length > 1 && /*#__PURE__*/ _jsxs("div", {
                className: "docs-sidebar-version-selector px-4 py-3 border-b border-sidebar-border shrink-0",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center justify-between mb-1.5",
                        children: [
                            /*#__PURE__*/ _jsx("label", {
                                className: "docs-sidebar-version-label text-xs font-medium text-muted-foreground",
                                children: "API Version"
                            }),
                            isVersionLoading && /*#__PURE__*/ _jsx(Spinner, {
                                className: "h-3 w-3 animate-spin text-muted-foreground"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(Select, {
                        value: selectedApiVersion || apiVersions.find((v)=>v.default)?.version || apiVersions[0]?.version,
                        onValueChange: (value)=>onApiVersionChange?.(value),
                        disabled: isVersionLoading,
                        children: [
                            /*#__PURE__*/ _jsx(SelectTrigger, {
                                className: cn("docs-sidebar-version-trigger w-full h-9 text-sm", isVersionLoading && "opacity-50"),
                                children: /*#__PURE__*/ _jsx(SelectValue, {
                                    placeholder: "Select version"
                                })
                            }),
                            /*#__PURE__*/ _jsx(SelectContent, {
                                children: apiVersions.map((v)=>/*#__PURE__*/ _jsxs(SelectItem, {
                                        value: v.version,
                                        children: [
                                            v.version,
                                            v.default && /*#__PURE__*/ _jsx("span", {
                                                className: "ml-2 text-xs text-muted-foreground",
                                                children: "(latest)"
                                            })
                                        ]
                                    }, v.version))
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs(SlidingIndicatorProvider, {
                className: "docs-sidebar-content flex-1 overflow-y-auto overflow-x-hidden custom-scroll",
                children: [
                    docGroups.length > 0 && /*#__PURE__*/ _jsx(_Fragment, {
                        children: docGroups.map((group, index)=>/*#__PURE__*/ _jsx(SidebarSection, {
                                title: group.title,
                                icon: group.icon,
                                className: index > 0 ? '' : '',
                                children: group.pages.map(renderDocPage)
                            }, group.id))
                    }),
                    (collection.folders.length > 0 || collection.requests.length > 0) && /*#__PURE__*/ _jsx(SidebarSection, {
                        title: "Endpoints",
                        className: docGroups.length > 0 ? 'border-t border-sidebar-border' : '',
                        children: /*#__PURE__*/ _jsx(CollectionTree, {
                            collection: collection,
                            selectedRequest: selectedRequest,
                            onSelectRequest: handleSelectRequest
                        })
                    })
                ]
            })
        ]
    });
    // Mobile sidebar rendered via portal to escape stacking context
    const mobileSidebar = mounted && isMobile ? /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            isLeftSidebarOpen && /*#__PURE__*/ _jsx("div", {
                className: "docs-sidebar-overlay fixed inset-0 bg-black/50 z-[55] lg:hidden",
                onClick: closeLeftSidebar
            }),
            /*#__PURE__*/ _jsx("aside", {
                className: cn("docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background", "fixed inset-y-0 left-0 z-[60] w-[280px] h-full", "transform transition-transform duration-300 ease-in-out", !isLeftSidebarOpen && "-translate-x-full", isLeftSidebarOpen && "translate-x-0"),
                children: sidebarContent
            })
        ]
    }), document.body) : null;
    // Desktop sidebar rendered in place
    const desktopSidebar = !isMobile ? /*#__PURE__*/ _jsx("aside", {
        className: cn("docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background", "relative w-72 h-full"),
        children: sidebarContent
    }) : null;
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            mobileSidebar,
            desktopSidebar
        ]
    });
}
