import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { SyncOperationStatus, } from "@powerhousedao/reactor";
import { twMerge } from "tailwind-merge";
import { truncateId } from "../utils.js";
import { SortIcon } from "./sort-icon.js";
const COLUMNS = [
    { key: "id", label: "ID", width: "120px" },
    { key: "documentId", label: "Document ID", width: "150px" },
    { key: "branch", label: "Branch", width: "100px" },
    { key: "status", label: "Status", width: "150px" },
    { key: "opsCount", label: "Ops Count", width: "80px" },
];
const DEAD_LETTER_COLUMNS = [
    { key: "id", label: "ID", width: "120px" },
    { key: "documentId", label: "Document ID", width: "150px" },
    { key: "branch", label: "Branch", width: "100px" },
    { key: "error", label: "Error", width: "200px" },
];
function getStatusLabel(status) {
    switch (status) {
        case SyncOperationStatus.Unknown:
            return "Unknown";
        case SyncOperationStatus.TransportPending:
            return "Transport Pending";
        case SyncOperationStatus.ExecutionPending:
            return "Execution Pending";
        case SyncOperationStatus.Applied:
            return "Applied";
        case SyncOperationStatus.Error:
            return "Error";
        default:
            return "Unknown";
    }
}
function getStatusIcon(status) {
    switch (status) {
        case SyncOperationStatus.TransportPending:
        case SyncOperationStatus.ExecutionPending:
            return _jsx("span", { children: "\u23F3" });
        case SyncOperationStatus.Applied:
            return _jsx("span", { children: "\u2705" });
        case SyncOperationStatus.Error:
            return _jsx("span", { children: "\u274C" });
        default:
            return _jsx("span", { children: "\u2753" });
    }
}
function getErrorMessage(error) {
    if (!error)
        return "";
    return error.error.message;
}
function sortOperations(operations, sort) {
    const ops = [...operations];
    if (!sort)
        return ops;
    return ops.sort((a, b) => {
        let comparison = 0;
        switch (sort.column) {
            case "id":
                comparison = a.id.localeCompare(b.id);
                break;
            case "documentId":
                comparison = a.documentId.localeCompare(b.documentId);
                break;
            case "branch":
                comparison = a.branch.localeCompare(b.branch);
                break;
            case "status":
                comparison = a.status - b.status;
                break;
            case "opsCount":
                comparison = a.operations.length - b.operations.length;
                break;
            case "error":
                comparison = getErrorMessage(a.error).localeCompare(getErrorMessage(b.error));
                break;
            default:
                return 0;
        }
        return sort.direction === "asc" ? comparison : -comparison;
    });
}
export function MailboxTable({ title, mailboxType, operations, sort, onSort, collapsed, onToggleCollapse, }) {
    const columns = mailboxType === "deadLetter" ? DEAD_LETTER_COLUMNS : COLUMNS;
    const sortedOps = sortOperations(operations, sort);
    const handleSort = (columnKey) => {
        onSort(mailboxType, columnKey);
    };
    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("button", { className: "flex items-center gap-2 text-left text-sm font-medium text-gray-700 hover:text-gray-900", onClick: onToggleCollapse, type: "button", children: [_jsx(Icon, { className: twMerge("transition-transform", collapsed && "-rotate-90"), name: "ChevronDown", size: 14 }), title, " (", operations.length, " item", operations.length !== 1 ? "s" : "", ")"] }), !collapsed && (_jsx("div", { className: "max-h-64 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";
                                    return (_jsx("th", { className: twMerge("group cursor-pointer px-3 py-2 text-left text-xs font-medium text-gray-600 hover:bg-gray-200 hover:text-gray-900", index > 0 && "border-l border-gray-300"), onClick: () => handleSort(column.key), style: { width: column.width }, children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: column.label }), _jsx(SortIcon, { active: isActive, direction: sortDirection })] }) }, column.key));
                                }) }) }), _jsx("tbody", { children: sortedOps.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-4 text-center text-sm text-gray-500", colSpan: columns.length, children: "No operations" }) })) : (sortedOps.map((op) => (_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: op.id, children: truncateId(op.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: op.documentId, children: truncateId(op.documentId) }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: op.branch, children: op.branch }) }), mailboxType === "deadLetter" ? (_jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs", children: _jsxs("span", { className: "block truncate text-red-600", title: getErrorMessage(op.error), children: ["\u274C ", getErrorMessage(op.error) || "Unknown error"] }) })) : (_jsxs(_Fragment, { children: [_jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsxs("span", { className: "flex items-center gap-1", children: [getStatusIcon(op.status), getStatusLabel(op.status)] }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: op.operations.length })] }))] }, op.id)))) })] }) }))] }));
}
//# sourceMappingURL=mailbox-table.js.map