"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { OperationItem } from "./OperationItem";
import { useEditContext } from "../client/editContext";
import { Clock } from "lucide-react";
import { formatDate } from "../utils";
export function TimelineView({ operations, showUserName = false, showDescription = true, showCheckbox = false, selectedIds, onSelect, }) {
    const editContext = useEditContext();
    // Sort operations chronologically and group by version - memoized to prevent jump on re-render
    const { sortedOps, versions } = useMemo(() => {
        if (!operations || operations.length === 0) {
            return { sortedOps: [], versions: [] };
        }
        const toMillis = (d) => {
            const t = Date.parse(d);
            return Number.isFinite(t) ? t : 0;
        };
        // Oldest -> newest so the timeline reads top-to-bottom.
        const sorted = [...operations].sort((a, b) => toMillis(a.date) - toMillis(b.date));
        const versionSet = Array.from(new Set(sorted.map((o) => o.mainItem?.version || 0))).sort((a, b) => a - b);
        return { sortedOps: sorted, versions: versionSet };
    }, [operations]);
    if (sortedOps.length === 0) {
        return (_jsx("div", { className: "text-neutral-grey-50 p-4 text-center text-xs", children: "No history available for timeline" }));
    }
    return (_jsx("div", { className: "bg-neutral-grey-5/30 flex-1 overflow-y-auto p-4", children: _jsx("div", { className: "border-border-default relative space-y-10 border-l-2 pb-8 pl-8", children: versions.map((v) => {
                const opsInVersion = sortedOps.filter((o) => (o.mainItem?.version || 0) === v);
                // Find version creation date (prefer explicit "add-version", otherwise use the first op in that version).
                const versionCreationOp = opsInVersion.find((o) => o.type === "add-version");
                const versionDate = versionCreationOp
                    ? new Date(versionCreationOp.date)
                    : new Date(opsInVersion[0].date);
                return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border-feedback-blue absolute top-0 -left-[45px] z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 bg-white shadow-sm", children: _jsxs("span", { className: "text-feedback-blue text-[10px] font-bold", children: ["v", v] }) }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("h3", { className: "text-neutral-grey-100 text-sm font-bold", children: ["Version ", v] }), _jsxs("div", { className: "rounded-badge border-border-default badge-pad text-2xs text-neutral-grey-50 flex items-center gap-1.5 border bg-white", children: [_jsx(Clock, { strokeWidth: 1, className: "h-3 w-3" }), formatDate(versionDate)] })] }), _jsx("div", { className: "space-y-3", children: opsInVersion.map((o, i) => (_jsxs("div", { className: "group relative", children: [_jsx("div", { className: "border-border-default group-hover:border-feedback-blue absolute top-4 -left-[38px] z-10 h-2.5 w-2.5 rounded-full border-2 bg-white transition-colors" }), _jsx("div", { className: "border-border-default hover:border-feedback-blue overflow-hidden rounded-lg border bg-white shadow-sm transition-all", children: _jsx(OperationItem, { operation: o, index: i, showUserName: showUserName, showDescription: showDescription, showCheckbox: showCheckbox, selected: selectedIds?.has(o.id), onSelect: (selected) => onSelect?.(o.id, selected), hidePath: true }) })] }, o.id || i))) })] })] }, v));
            }) }) }));
}
//# sourceMappingURL=TimelineView.js.map