import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { NavLink } from "@vertesia/ui/router";
import { useUserSession } from "@vertesia/ui/session";
import { FolderClosed, Search, Trash2 } from "lucide-react";
import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip, useFetch, EmptyCollection } from "@vertesia/ui/core";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useState, useEffect } from "react";
import { CreateCollectionModal } from "./CreateCollection";
dayjs.extend(relativeTime);
export function CollectionsTable({}) {
    const { client } = useUserSession();
    const toast = useToast();
    const [collectionToDelete, setCollectionToDelete] = useState();
    const [isLoading, setIsLoading] = useState(true);
    const [isOpen, setOpen] = useState(false);
    const { data: collections, error, refetch } = useFetch(() => client.store.collections.search({}), []);
    // Update loading state when data is fetched
    useEffect(() => {
        if (collections || error) {
            setIsLoading(false);
        }
    }, [collections, error]);
    if (error) {
        return _jsx(ErrorBox, { title: 'Collections fetch failed', children: error.message });
    }
    const deleteCollection = async () => {
        if (!collectionToDelete)
            return;
        try {
            await client.store.collections.delete(collectionToDelete);
            toast({
                title: 'Collection deleted',
                status: 'success',
                duration: 3000
            });
            refetch();
        }
        catch (err) {
            console.error('Failed to delete collection:', err);
            toast({
                title: 'Failed to delete collection',
                description: err.message || 'An error occurred',
                status: 'error',
                duration: 5000
            });
        }
        finally {
            setCollectionToDelete(undefined);
        }
    };
    return (_jsxs(_Fragment, { children: [collections &&
                (collections.length > 0 ?
                    (_jsxs(Table, { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Created" }), _jsx("th", {})] }) }), _jsx(TBody, { columns: 4, isLoading: isLoading, children: collections.map((c) => {
                                    return _jsxs(TR, { children: [_jsx("td", { children: _jsxs("div", { className: "flex items-center gap-2", children: [collectionIcon(c.dynamic), _jsx(NavLink, { href: `/collections/${c.id}`, children: c.name })] }) }), _jsx("td", { children: c.type?.name || "-" }), _jsx("td", { children: dayjs(c.created_at).fromNow() }), _jsx("td", { className: "text-right", children: _jsx(Button, { variant: "destructive", size: "sm", onClick: () => setCollectionToDelete(c.id), children: _jsx(Trash2, { className: "size-4" }) }) })] }, c.id);
                                }) })] })) :
                    _jsx(EmptyCollection, { title: "No Collections", buttonLabel: 'New Collections', onClick: () => setOpen(true), children: "Get started by creating a new Collections." })), _jsx(CreateCollectionModal, { isOpen: isOpen, onClose: () => setOpen(false) }), _jsx(ConfirmModal, { isOpen: !!collectionToDelete, title: "Delete Collection", content: "Are you sure you want to delete this collection? This action cannot be undone.", onConfirm: deleteCollection, onCancel: () => setCollectionToDelete(undefined) })] }));
}
export function collectionIcon(isDynamic) {
    const tooltipText = isDynamic ? "Dynamic Collection" : "Static Collection";
    const icon = isDynamic ? _jsx(Search, { className: "size-5" }) : _jsx(FolderClosed, { className: "size-5" });
    return (_jsx(VTooltip, { description: tooltipText, className: "mr-2", children: icon }));
}
//# sourceMappingURL=CollectionsTable.js.map