import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { usePathname, useSearchParams } from "../client/navigation";
import { useEditContext } from "../client/editContext";
import { SimpleMenu } from "../ui/SimpleMenu";
import { Splitter } from "../ui/Splitter";
import { Info } from "lucide-react";
export function Status() {
    const editContext = useEditContext();
    const config = editContext?.configuration;
    const groups = config?.settings.groups;
    const searchParams = useSearchParams();
    const urlActiveItemKey = searchParams.get("ccpanel");
    // Get the first available panel as default
    const defaultActiveItemKey = groups?.flatMap((x) => x.panels)?.[0]?.id;
    const [activeItemKey, setActiveItemKey] = useState(urlActiveItemKey || defaultActiveItemKey || null);
    const pathname = usePathname();
    const updateUrl = (key) => {
        if (urlActiveItemKey === key)
            return;
        const current = new URLSearchParams(searchParams.toString());
        if (key) {
            current.set("ccpanel", key);
            // Ensure view=settings is set when navigating within Settings
            if (!current.has("view")) {
                current.set("view", "settings");
            }
        }
        else {
            current.delete("ccpanel");
        }
        // Use window.history.pushState directly to avoid page reloads in static export mode
        // This matches the pattern used in EditorShell.tsx
        // Use the actual browser pathname (including any basePath like /parhelia)
        // so we don't accidentally drop the base segment when updating the URL
        const actualPathname = typeof window !== "undefined" ? window.location.pathname : pathname;
        const newUrl = `${actualPathname}?${current.toString()}`;
        window.history.pushState(null, "", newUrl);
    };
    // Keep active item in sync with URL param changes (e.g., programmatic navigation)
    useEffect(() => {
        if (urlActiveItemKey && urlActiveItemKey !== activeItemKey) {
            setActiveItemKey(urlActiveItemKey);
        }
    }, [urlActiveItemKey]);
    // Set default active item when config loads and no active item is set
    useEffect(() => {
        if (!activeItemKey && defaultActiveItemKey) {
            setActiveItemKey(defaultActiveItemKey);
        }
    }, [defaultActiveItemKey, activeItemKey]);
    const items = groups?.map((group) => {
        return {
            id: group.title,
            label: group.title,
            icon: group.icon,
            items: group.panels.map((panel) => ({
                id: panel.id,
                label: panel.title,
                icon: panel.icon,
            })) || [],
        };
    });
    // Find the currently selected panel content
    const selectedPanel = groups
        ?.flatMap((x) => x.panels)
        ?.find((item) => item.id === activeItemKey);
    if (!groups || !items) {
        return (_jsx("div", { className: "flex h-full flex-col items-center justify-center", children: "Loading..." }));
    }
    const panels = [
        {
            name: "menu",
            defaultSize: 300,
            content: (_jsx("div", { className: "h-full border-r border-gray-200", children: _jsx(SimpleMenu, { items: items, activeItemKey: activeItemKey, onItemClick: (item) => {
                        setActiveItemKey(item.id);
                        // Only update URL when user explicitly clicks on an item
                        updateUrl(item.id);
                    } }) })),
        },
        {
            name: "content",
            defaultSize: "auto",
            content: (_jsx("div", { className: "absolute inset-0 flex flex-col bg-white select-text", children: selectedPanel ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-theme-secondary flex flex-col gap-3 border-b border-gray-200 px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [selectedPanel.icon ? (_jsx("span", { className: "text-gray-500 [&_svg]:h-5 [&_svg]:w-5", children: selectedPanel.icon })) : null, _jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: selectedPanel.title })] }), selectedPanel.subtitle && (_jsx("p", { className: "text-sm text-gray-500", children: selectedPanel.subtitle }))] }), _jsx("div", { className: "flex-1 overflow-auto", children: selectedPanel.content })] })) : (_jsxs("div", { className: "flex h-full flex-col items-center justify-center text-gray-500", children: [_jsx(Info, { className: "mb-4 h-10 w-10" }), _jsx("p", { children: "Select a panel from the menu to view its content" })] })) })),
        },
    ];
    return (_jsx("div", { className: "h-full", children: _jsx(Splitter, { panels: panels, localStorageKey: "settings-splitter" }) }));
}
//# sourceMappingURL=Status.js.map