"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { useWorkflowVersions } from "./useWorkflowVersions.js";
import { WorkflowVersionBadge } from "./WorkflowVersionBadge.js";
const PAGE_SIZE = 20;
/**
 * Vertical timeline showing version history for a workflow.
 *
 * Internally fetches versions via `useWorkflowVersions(org, slug)` and
 * renders each entry with a `WorkflowVersionBadge`, actor name, relative
 * timestamp, and commit message. Supports selection highlighting and
 * client-side pagination via "Load more".
 *
 * All visual properties flow through `--stgm-*` design tokens.
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * <WorkflowVersionTimeline
 *   workflowId="wf_123"
 *   org="acme"
 *   slug="deploy-pipeline"
 *   onSelectVersion={(hash) => setSelected(hash)}
 *   selectedHash={selected}
 * />
 * ```
 */
export function WorkflowVersionTimeline({ workflowId: _workflowId, org, slug, onSelectVersion, selectedHash, className, }) {
    const { versions, isLoading, isEmpty } = useWorkflowVersions(org, slug);
    const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
    const handleLoadMore = useCallback(() => {
        setVisibleCount((c) => c + PAGE_SIZE);
    }, []);
    if (isLoading) {
        return _jsx(TimelineSkeleton, { className: className });
    }
    if (isEmpty) {
        return _jsx(EmptyState, { className: className });
    }
    const visibleVersions = versions.slice(0, visibleCount);
    const hasMore = versions.length > visibleCount;
    return (_jsxs("div", { className: cn("flex flex-col pt-2", className), children: [_jsx("div", { role: "list", "aria-label": "Workflow version history", children: visibleVersions.map((entry, index) => (_jsx(VersionTimelineRow, { entry: entry, isSelected: entry.id === selectedHash, isLast: index === visibleVersions.length - 1 && !hasMore, onSelect: () => onSelectVersion?.(entry.id) }, entry.id))) }), hasMore && (_jsxs("button", { type: "button", onClick: handleLoadMore, className: cn("mt-2 self-center rounded-md px-3 py-1.5 text-xs font-medium text-primary transition-colors", "hover:bg-primary-subtle", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: ["Load more (", versions.length - visibleCount, " remaining)"] }))] }));
}
// ---------------------------------------------------------------------------
// Timeline row
// ---------------------------------------------------------------------------
function VersionTimelineRow({ entry, isSelected, isLast, onSelect, }) {
    const handleKeyDown = (e) => {
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onSelect();
        }
    };
    return (_jsxs("div", { role: "listitem", className: "relative flex gap-3", children: [_jsxs("div", { className: "flex flex-col items-center pt-1", children: [_jsx("div", { className: cn("size-2.5 shrink-0 rounded-full border-2", entry.isCurrent
                            ? "border-primary bg-primary"
                            : isSelected
                                ? "border-primary bg-background"
                                : "border-border bg-background"), "aria-hidden": "true" }), !isLast && (_jsx("div", { className: "mt-1 w-px flex-1 bg-border", "aria-hidden": "true" }))] }), _jsxs("button", { type: "button", onClick: onSelect, onKeyDown: handleKeyDown, tabIndex: 0, "aria-selected": isSelected, className: cn("mb-4 flex min-w-0 flex-1 flex-col gap-1 rounded-md px-2.5 py-2 text-left transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isSelected ? "bg-accent-hover" : "hover:bg-accent-hover"), children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(WorkflowVersionBadge, { versionHash: entry.id, tag: entry.tag, isCurrent: entry.isCurrent }) }), _jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("time", { dateTime: entry.timestamp.toISOString(), title: entry.timestamp.toLocaleString(), children: formatRelativeTime(entry.timestamp) }), entry.actor && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsxs("span", { className: "flex items-center gap-1", children: [entry.actor.avatar && (_jsx("img", { src: entry.actor.avatar, alt: "", className: "size-3.5 rounded-full" })), _jsx("span", { children: entry.actor.displayName || entry.actor.id })] })] }))] }), entry.sublabel && (_jsx("p", { className: "text-xs text-muted-foreground", children: entry.sublabel }))] })] }));
}
// ---------------------------------------------------------------------------
// Non-happy states
// ---------------------------------------------------------------------------
function TimelineSkeleton({ className }) {
    return (_jsx("div", { className: cn("flex flex-col gap-4 pt-2", className), "aria-busy": "true", "aria-label": "Loading workflow version history", children: [1, 2, 3].map((i) => (_jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "size-2.5 animate-pulse rounded-full bg-muted" }), i < 3 && _jsx("div", { className: "mt-1 w-px flex-1 bg-border" })] }), _jsxs("div", { className: "mb-4 flex-1 space-y-2 px-2.5 py-2", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-16 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-10 animate-pulse rounded-full bg-muted" })] }), _jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" })] })] }, i))) }));
}
function EmptyState({ className }) {
    return (_jsxs("div", { role: "status", className: cn("flex flex-col items-center gap-2 py-8 text-center", className), children: [_jsx(HistoryIcon, { className: "size-8 text-muted-foreground-faint" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No version history available" })] }));
}
// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------
function formatRelativeTime(date) {
    const now = Date.now();
    const diffMs = now - date.getTime();
    const diffSec = Math.floor(diffMs / 1000);
    const diffMin = Math.floor(diffSec / 60);
    const diffHr = Math.floor(diffMin / 60);
    const diffDays = Math.floor(diffHr / 24);
    if (diffSec < 60)
        return "just now";
    if (diffMin < 60)
        return `${diffMin}m ago`;
    if (diffHr < 24)
        return `${diffHr}h ago`;
    if (diffDays < 7)
        return `${diffDays}d ago`;
    if (diffDays < 30)
        return `${Math.floor(diffDays / 7)}w ago`;
    return date.toLocaleDateString(undefined, {
        month: "short",
        day: "numeric",
        year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
    });
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function HistoryIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 4v4l2.5 1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M2 8a6 6 0 0 1 6-6" })] }));
}
//# sourceMappingURL=WorkflowVersionTimeline.js.map