import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useThreadList } from "@openuidev/react-headless";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import clsx from "clsx";
import { EllipsisIcon, Trash2Icon } from "lucide-react";
import { Fragment, useEffect, useState } from "react";
import { useLayoutContext } from "../../context/LayoutContext";
import { Button } from "../Button";
import { IconButton } from "../IconButton";
import { useOptionalNav } from "./_shared/navContext";
import { useAgentInterfaceStore } from "./_shared/store";
export const ThreadButton = ({ id, title, className, }) => {
    const selectThread = useThreadList((s) => s.selectThread);
    const deleteThread = useThreadList((s) => s.deleteThread);
    const selectedThreadId = useThreadList((s) => s.selectedThreadId);
    const { isSidebarOpen, setIsSidebarOpen } = useAgentInterfaceStore((state) => ({
        isSidebarOpen: state.isSidebarOpen,
        setIsSidebarOpen: state.setIsSidebarOpen,
    }));
    const { layout } = useLayoutContext();
    const nav = useOptionalNav();
    const [isActionsOpen, setIsActionsOpen] = useState(false);
    return (_jsxs("div", { className: clsx("openui-agent-thread-button", {
            "openui-agent-thread-button--selected": selectedThreadId === id,
            "openui-agent-thread-button--actions-open": isActionsOpen,
        }, className), children: [_jsx("button", { className: "openui-agent-thread-button-title", onClick: () => {
                    if (layout === "mobile") {
                        setIsSidebarOpen(!isSidebarOpen);
                    }
                    selectThread(id);
                    // Auto-clear any active route so the thread view surfaces.
                    if (nav && nav.path !== undefined) {
                        nav.navigate(undefined);
                    }
                }, children: title }), _jsxs(DropdownMenu.Root, { open: isActionsOpen, onOpenChange: setIsActionsOpen, children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(IconButton, { className: "openui-agent-thread-button-dropdown-trigger", icon: _jsx(EllipsisIcon, { size: "1em" }), size: "2-extra-small", variant: "tertiary", "aria-label": "Thread actions" }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { className: "openui-agent-thread-button-dropdown-menu", side: "bottom", align: "start", sideOffset: 4, children: _jsx(DropdownMenu.Item, { asChild: true, onSelect: () => {
                                    deleteThread(id);
                                }, children: _jsx(Button, { buttonType: "destructive", className: "openui-agent-thread-button-dropdown-menu-item", iconLeft: _jsx(Trash2Icon, { size: "1em" }), size: "extra-small", variant: "tertiary", children: "Delete" }) }) }) })] })] }));
};
export const ThreadList = ({ className }) => {
    const threads = useThreadList((s) => s.threads);
    const loadThreads = useThreadList((s) => s.loadThreads);
    useEffect(() => {
        loadThreads();
    }, []);
    const groupThreads = () => {
        const now = new Date();
        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        const yesterday = new Date(today);
        yesterday.setDate(yesterday.getDate() - 1);
        const last7Days = new Date(today);
        last7Days.setDate(last7Days.getDate() - 7);
        const last30Days = new Date(today);
        last30Days.setDate(last30Days.getDate() - 30);
        const thisYear = new Date(today);
        thisYear.setMonth(0, 1);
        return threads.reduce((groups, thread) => {
            const threadDate = new Date(thread.createdAt);
            if (threadDate >= today) {
                groups.today = [...(groups.today || []), thread];
            }
            else if (threadDate >= yesterday) {
                groups.yesterday = [...(groups.yesterday || []), thread];
            }
            else if (threadDate >= last7Days) {
                groups.last7Days = [...(groups.last7Days || []), thread];
            }
            else if (threadDate >= last30Days) {
                groups.last30Days = [...(groups.last30Days || []), thread];
            }
            else if (threadDate >= thisYear) {
                groups.thisYear = [...(groups.thisYear || []), thread];
            }
            else {
                groups.older = [...(groups.older || []), thread];
            }
            return groups;
        }, {
            today: [],
            yesterday: [],
            last7Days: [],
            last30Days: [],
            thisYear: [],
            older: [],
        });
    };
    const groupedThreads = groupThreads();
    const groupLabels = {
        today: "Today",
        yesterday: "Yesterday",
        last7Days: "Previous 7 Days",
        last30Days: "Previous 30 Days",
        thisYear: "This Year",
        older: "Older",
    };
    return (_jsx("div", { className: clsx("openui-agent-thread-list", className), children: Object.entries(groupedThreads)
            .filter(([_, groupThreads]) => groupThreads.length > 0)
            .map(([group, groupThreads]) => (_jsxs(Fragment, { children: [_jsx("div", { className: "openui-agent-thread-list-group", children: groupLabels[group] }), groupThreads.map((thread) => (_jsx(ThreadButton, { id: thread.id, title: thread.title }, thread.id)))] }, group))) }));
};
//# sourceMappingURL=ThreadList.js.map