import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useCallback, useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import { ChannelInspector } from "./components/channel-inspector.js";
import { SortIcon } from "./components/sort-icon.js";
import { truncateId, } from "./utils.js";
const COLUMNS = [
    { key: "id", label: "ID", width: "120px" },
    { key: "name", label: "Name", width: "150px" },
    { key: "collectionId", label: "Collection ID", width: "200px" },
    { key: "filter", label: "Filter", width: "200px" },
    { key: "channel", label: "Channel", width: "100px" },
];
function formatFilter(filter) {
    const parts = [];
    if (filter.branch) {
        parts.push(`branch:${filter.branch}`);
    }
    if (filter.documentId.length > 0) {
        parts.push(`${filter.documentId.length} doc(s)`);
    }
    if (filter.scope.length > 0) {
        parts.push(`${filter.scope.length} scope(s)`);
    }
    return parts.length > 0 ? parts.join(", ") : "-";
}
function sortRemotes(remotes, sort) {
    if (!sort)
        return remotes;
    return [...remotes].sort((a, b) => {
        let aValue;
        let bValue;
        switch (sort.column) {
            case "id":
                aValue = a.id;
                bValue = b.id;
                break;
            case "name":
                aValue = a.name;
                bValue = b.name;
                break;
            case "collectionId":
                aValue = a.collectionId;
                bValue = b.collectionId;
                break;
            case "filter":
                aValue = formatFilter(a.filter);
                bValue = formatFilter(b.filter);
                break;
            default:
                return 0;
        }
        const comparison = aValue.localeCompare(bValue);
        return sort.direction === "asc" ? comparison : -comparison;
    });
}
export function RemotesInspector({ getRemotes }) {
    const [remotes, setRemotes] = useState([]);
    const [loading, setLoading] = useState(true);
    const [sort, setSort] = useState();
    const [selectedRemote, setSelectedRemote] = useState();
    const loadRemotes = useCallback(async () => {
        setLoading(true);
        const data = await getRemotes();
        setRemotes(data);
        setLoading(false);
    }, [getRemotes]);
    useEffect(() => {
        void loadRemotes();
    }, [loadRemotes]);
    const handleRefresh = useCallback(async () => {
        await loadRemotes();
        if (selectedRemote) {
            const updated = remotes.find((r) => r.id === selectedRemote.id);
            setSelectedRemote(updated);
        }
    }, [loadRemotes, selectedRemote, remotes]);
    const handleSort = (columnKey) => {
        if (columnKey === "channel")
            return;
        const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
        setSort({ column: columnKey, direction: newDirection });
    };
    const handleViewChannel = (remote) => {
        setSelectedRemote(remote);
    };
    const handleBack = () => {
        setSelectedRemote(undefined);
    };
    if (selectedRemote) {
        return (_jsx(ChannelInspector, { channel: selectedRemote.channel, onBack: handleBack, onRefresh: () => void handleRefresh(), remoteName: selectedRemote.name }));
    }
    const sortedRemotes = sortRemotes(remotes, sort);
    return (_jsxs("div", { className: "flex h-full flex-col gap-2 p-4", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Remotes Inspector" }), _jsxs("button", { className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50", disabled: loading, onClick: () => void handleRefresh(), type: "button", children: [_jsx(Icon, { name: "Reload", size: 14 }), "Refresh"] })] }), _jsx("div", { className: "max-h-full overflow-auto rounded-lg border border-gray-300", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { className: "sticky top-0 bg-gray-100", children: _jsx("tr", { children: COLUMNS.map((column, index) => {
                                    const isActive = sort?.column === column.key;
                                    const sortDirection = isActive ? sort.direction : "asc";
                                    const isSortable = column.key !== "channel";
                                    return (_jsx("th", { className: twMerge("group px-3 py-2 text-left text-xs font-medium text-gray-600", index > 0 && "border-l border-gray-300", isSortable &&
                                            "cursor-pointer hover:bg-gray-200 hover:text-gray-900"), onClick: () => isSortable && handleSort(column.key), style: { width: column.width }, children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: column.label }), isSortable && (_jsx(SortIcon, { active: isActive, direction: sortDirection }))] }) }, column.key));
                                }) }) }), _jsx("tbody", { children: loading && sortedRemotes.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-8 text-center text-sm text-gray-500", colSpan: COLUMNS.length, children: "Loading..." }) })) : sortedRemotes.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-8 text-center text-sm text-gray-500", colSpan: COLUMNS.length, children: "No remotes configured" }) })) : (sortedRemotes.map((remote) => (_jsxs("tr", { className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50", children: [_jsx("td", { className: "px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.id, children: truncateId(remote.id) }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.name, children: remote.name }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.collectionId, children: remote.collectionId }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: formatFilter(remote.filter), children: formatFilter(remote.filter) }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2", children: _jsxs("button", { className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100", onClick: () => handleViewChannel(remote), type: "button", children: ["View", _jsx(Icon, { name: "CaretRight", size: 12 })] }) })] }, remote.id)))) })] }) }), _jsxs("div", { className: "shrink-0 text-sm text-gray-600", children: ["Showing ", sortedRemotes.length, " remote(s)"] })] }));
}
//# sourceMappingURL=remotes-inspector.js.map