"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: "p-4 text-center text-xs text-gray-500", children: "No history available for timeline" }));
    }
    return (_jsx("div", { className: "flex-1 overflow-y-auto bg-gray-50/30 p-4", children: _jsx("div", { className: "relative space-y-10 border-l-2 border-gray-200 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: "absolute top-0 -left-[45px] z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-blue-500 bg-white shadow-sm", children: _jsxs("span", { className: "text-[10px] font-bold text-blue-600", 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-sm font-bold text-gray-800", children: ["Version ", v] }), _jsxs("div", { className: "flex items-center gap-1.5 rounded-full border border-gray-100 bg-white px-2 py-1 text-[10px] text-gray-500", children: [_jsx(Clock, { 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: "absolute top-4 -left-[38px] z-10 h-2.5 w-2.5 rounded-full border-2 border-gray-300 bg-white transition-colors group-hover:border-blue-400" }), _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-100 bg-white shadow-sm transition-all hover:border-blue-200", 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