"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import Link from "next/link";
import { cn } from "../../../utils/cn";
function SidebarCollapsibleGroup({ item, currentPath, sidebarOpen, isActive, }) {
    const children = item.children ?? [];
    const hasActiveChild = children.some((c) => c.path && isActive(c.path, c.exact));
    const [open, setOpen] = useState(hasActiveChild);
    useEffect(() => {
        if (hasActiveChild)
            setOpen(true);
    }, [currentPath, hasActiveChild]);
    const trigger = (_jsxs("div", { className: cn("flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors cursor-pointer", hasActiveChild
            ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
            : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"), children: [typeof item.icon === "string" ? (_jsx("span", { className: "text-xl", children: item.icon })) : (item.icon), sidebarOpen && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium flex-1", children: item.label }), _jsx("span", { className: cn("inline-block transition-transform", open ? "rotate-180" : "rotate-0"), "aria-hidden": true, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] }))] }));
    if (!sidebarOpen) {
        return (_jsx("div", { className: "flex justify-center py-2", title: item.label, children: typeof item.icon === "string" ? (_jsx("span", { className: "text-xl", children: item.icon })) : (item.icon) }, item.id));
    }
    return (_jsxs("div", { className: "space-y-0.5", children: [_jsx("button", { type: "button", className: "w-full text-left", onClick: () => setOpen(!open), onMouseEnter: item.onMouseEnter, onFocus: item.onFocus, "aria-expanded": open, "aria-controls": `sidebar-group-${item.id}`, children: trigger }), _jsx("div", { id: `sidebar-group-${item.id}`, role: "region", "aria-label": item.label, className: cn("overflow-hidden transition-all duration-200 ease-out", open ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"), children: _jsx("div", { className: "pl-4 pt-0.5 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-600 ml-5", children: children.map((child) => {
                        if (!child.path)
                            return null;
                        const childContent = (_jsxs("div", { className: cn("flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors text-sm", isActive(child.path, child.exact)
                                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
                                : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"), children: [typeof child.icon === "string" ? (_jsx("span", { className: "text-lg", children: child.icon })) : (child.icon), _jsx("span", { className: "font-medium", children: child.label })] }));
                        return (_jsx(Link, { href: child.path, onClick: child.onClick, onMouseEnter: child.onMouseEnter, onFocus: child.onFocus, children: childContent }, child.id));
                    }) }) })] }, item.id));
}
export const Sidebar = ({ menuItems, footerItems = [], currentPath, sidebarOpen = true, onSidebarToggle, headerContent, headerTitle = "CMS Admin", className, mainContentClassName, openWidth = "200px", closedWidth = "80px", footerExtra, }) => {
    const isActive = (path, exact) => {
        if (exact) {
            return currentPath === path;
        }
        return currentPath?.startsWith(path) || false;
    };
    const sidebarWidth = sidebarOpen ? openWidth : closedWidth;
    return (_jsxs("aside", { className: cn("h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col", className), style: {
            width: sidebarWidth,
        }, children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-shrink-0", children: headerContent ? (headerContent) : (_jsxs(_Fragment, { children: [sidebarOpen && (_jsx("h1", { className: "text-xl font-bold text-gray-900 dark:text-white", children: headerTitle })), onSidebarToggle && (_jsx("button", { onClick: onSidebarToggle, className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700", "aria-label": sidebarOpen ? "Collapse sidebar" : "Expand sidebar", children: _jsx("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: sidebarOpen
                                        ? "M6 18L18 6M6 6l12 12"
                                        : "M4 6h16M4 12h16M4 18h16" }) }) }))] })) }), _jsx("nav", { className: "flex-1 p-4 space-y-2 overflow-y-auto", children: menuItems.map((item) => {
                    // Collapsible group (accordion): item with children
                    if (item.children && item.children.length > 0) {
                        return (_jsx(SidebarCollapsibleGroup, { item: item, currentPath: currentPath, sidebarOpen: sidebarOpen, isActive: isActive }, item.id));
                    }
                    const content = (_jsxs("div", { className: cn("flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors", item.path && isActive(item.path, item.exact)
                            ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"), children: [typeof item.icon === "string" ? (_jsx("span", { className: "text-xl", children: item.icon })) : (item.icon), sidebarOpen && _jsx("span", { className: "font-medium", children: item.label })] }));
                    if (item.path) {
                        return (_jsx(Link, { href: item.path, onClick: item.onClick, onMouseEnter: item.onMouseEnter, onFocus: item.onFocus, children: content }, item.id));
                    }
                    return (_jsx("button", { onClick: item.onClick, onMouseEnter: item.onMouseEnter, onFocus: item.onFocus, className: "w-full text-left", children: content }, item.id));
                }) }), footerItems.length > 0 && (_jsxs("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 space-y-2", children: [footerItems.map((item) => {
                        const content = (_jsxs("div", { className: cn("flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors", item.variant === "error"
                                ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
                                : isActive(item.path || "")
                                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
                                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"), children: [typeof item.icon === "string" ? (_jsx("span", { className: "text-xl", children: item.icon })) : (item.icon), sidebarOpen && (_jsx("span", { className: "font-medium", children: item.label }))] }));
                        if (item.onClick) {
                            return (_jsx("button", { onClick: item.onClick, onMouseEnter: item.onMouseEnter, onFocus: item.onFocus, className: item.path ? "w-full text-left" : "w-full", children: content }, item.id));
                        }
                        if (item.path) {
                            return (_jsx(Link, { href: item.path, onMouseEnter: item.onMouseEnter, onFocus: item.onFocus, children: content }, item.id));
                        }
                        return _jsx("div", { children: content }, item.id);
                    }), footerExtra && (_jsx("div", { className: "pt-2 text-center text-[12pt] text-gray-500 dark:text-gray-400", children: footerExtra }))] }))] }));
};
export default Sidebar;
