'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect, useLayoutEffect, useState, createContext, useContext } from 'react';
import { cn } from '@/lib/utils';
import { getPhosphorIcon } from '@/lib/utils/icons';
const SlidingIndicatorContext = /*#__PURE__*/ createContext(null);
export function SlidingIndicatorProvider({ children, className }) {
    const containerRef = useRef(null);
    const itemsRef = useRef(new Map());
    const [selectedId, setSelectedId] = useState(null);
    const [indicatorStyle, setIndicatorStyle] = useState({
        opacity: 0,
        top: 0,
        height: 0
    });
    const registerItem = (id, element)=>{
        if (element) {
            itemsRef.current.set(id, element);
        } else {
            itemsRef.current.delete(id);
        }
    };
    // Update indicator position when selection changes
    useLayoutEffect(()=>{
        if (!selectedId || !containerRef.current) {
            setIndicatorStyle((prev)=>({
                    ...prev,
                    opacity: 0
                }));
            return;
        }
        const selectedElement = itemsRef.current.get(selectedId);
        if (!selectedElement) {
            setIndicatorStyle((prev)=>({
                    ...prev,
                    opacity: 0
                }));
            return;
        }
        const containerRect = containerRef.current.getBoundingClientRect();
        const itemRect = selectedElement.getBoundingClientRect();
        setIndicatorStyle({
            opacity: 1,
            top: itemRect.top - containerRect.top + containerRef.current.scrollTop,
            height: itemRect.height,
            left: 8,
            right: 8
        });
    }, [
        selectedId
    ]);
    // Also update on scroll to keep indicator in sync
    useEffect(()=>{
        const container = containerRef.current;
        if (!container) return;
        const handleScroll = ()=>{
            if (!selectedId) return;
            const selectedElement = itemsRef.current.get(selectedId);
            if (!selectedElement) return;
            const containerRect = container.getBoundingClientRect();
            const itemRect = selectedElement.getBoundingClientRect();
            setIndicatorStyle((prev)=>({
                    ...prev,
                    top: itemRect.top - containerRect.top + container.scrollTop
                }));
        };
        container.addEventListener('scroll', handleScroll, {
            passive: true
        });
        return ()=>container.removeEventListener('scroll', handleScroll);
    }, [
        selectedId
    ]);
    return /*#__PURE__*/ _jsx(SlidingIndicatorContext.Provider, {
        value: {
            registerItem,
            selectedId,
            setSelectedId
        },
        children: /*#__PURE__*/ _jsxs("div", {
            ref: containerRef,
            className: cn('relative', className),
            children: [
                /*#__PURE__*/ _jsx("div", {
                    className: "docs-sidebar-indicator absolute rounded-lg bg-background dark:bg-stone-800/50 pointer-events-none z-0",
                    style: {
                        ...indicatorStyle,
                        transition: 'top 350ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out'
                    }
                }),
                children
            ]
        })
    });
}
/**
 * Sidebar Item component - individual clickable item in the sidebar
 * Uses subtle sage/mint style when selected with smooth sliding animation
 */ export function SidebarItem({ children, selected = false, active = false, disabled = false, indent = 0, onClick, className, asideContent, itemId, icon }) {
    const buttonRef = useRef(null);
    const context = useContext(SlidingIndicatorContext);
    const id = itemId || String(children);
    const IconComponent = getPhosphorIcon(icon);
    // Register this item with the sliding indicator provider
    useEffect(()=>{
        if (context && buttonRef.current) {
            context.registerItem(id, buttonRef.current);
            return ()=>context.registerItem(id, null);
        }
    }, [
        context,
        id
    ]);
    // Update selected state in context
    useEffect(()=>{
        if (context && selected) {
            context.setSelectedId(id);
        }
    }, [
        context,
        selected,
        id
    ]);
    // Auto-scroll into view when selected (e.g., via agent navigation)
    useEffect(()=>{
        if (selected && buttonRef.current) {
            // Small delay to allow folder expansion animation to complete
            setTimeout(()=>{
                buttonRef.current?.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            }, 100);
        }
    }, [
        selected
    ]);
    // Check if we're inside a sliding indicator provider
    const hasSliding = context !== null;
    return /*#__PURE__*/ _jsx("li", {
        className: "docs-sidebar-item-wrapper flex flex-col",
        children: /*#__PURE__*/ _jsxs("button", {
            ref: buttonRef,
            type: "button",
            disabled: disabled,
            "aria-selected": selected,
            onClick: onClick,
            className: cn(// Base styles
            'docs-sidebar-item group/button flex items-center rounded-lg px-3 py-2 w-full text-left relative z-10', 'text-sm leading-5 transition-colors duration-150', // Indentation
            indent > 0 && `ml-${indent * 3}`, // State variants
            selected ? hasSliding ? 'docs-sidebar-item-active text-green-700 font-semibold dark:text-green-400' // No bg when sliding
             : 'docs-sidebar-item-active bg-background text-green-700 font-semibold dark:bg-stone-800/50 dark:text-green-400' : active ? 'text-sidebar-foreground font-medium hover:bg-sidebar-accent/50' : disabled ? 'text-sidebar-foreground/50 cursor-default' : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground', className),
            style: {
                paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined
            },
            children: [
                IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
                    className: "h-4 w-4 mr-2 shrink-0 opacity-60",
                    weight: "regular"
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: "flex-1 truncate",
                    children: children
                }),
                asideContent && /*#__PURE__*/ _jsx("span", {
                    className: "ml-2 shrink-0",
                    children: asideContent
                })
            ]
        })
    });
}
