"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { useWorkflowVersionDiff } from "./useWorkflowVersionDiff";
/**
 * Shows a unified diff between two workflow versions' YAML.
 *
 * Internally uses `useWorkflowVersionDiff(workflowId, hashA, hashB)` to
 * fetch and compute the diff. Renders a header identifying each version
 * and a scrollable unified diff with green/red line highlighting.
 *
 * All visual properties flow through `--stgm-*` / `--stgm-diff-*` design
 * tokens. Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * <WorkflowVersionDiffViewer
 *   workflowId="wf_123"
 *   hashA="a1b2c3d4..."
 *   hashB="e5f6g7h8..."
 * />
 * ```
 */
export function WorkflowVersionDiffViewer({ workflowId, hashA, hashB, className, }) {
    const { diff, isLoading, error } = useWorkflowVersionDiff(workflowId, hashA, hashB);
    if (isLoading) {
        return _jsx(DiffSkeleton, { className: className });
    }
    if (error) {
        return (_jsxs("div", { role: "alert", className: cn("rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", className), children: ["Failed to load diff: ", error.message] }));
    }
    if (!diff || diff.length === 0) {
        return (_jsx("div", { role: "status", className: cn("flex items-center justify-center rounded-lg border border-border py-8 text-sm text-muted-foreground", className), children: "No changes between these versions" }));
    }
    return (_jsxs("div", { className: cn("overflow-auto rounded-lg border border-border font-mono text-[13px] leading-[1.6]", className), children: [_jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground", children: [_jsx("code", { className: "rounded bg-diff-removed-bg px-1 py-0.5", children: hashA.slice(0, 8) }), _jsx(ArrowIcon, { className: "size-3 shrink-0" }), _jsx("code", { className: "rounded bg-diff-added-bg px-1 py-0.5", children: hashB.slice(0, 8) })] }), _jsxs("table", { className: "w-full border-collapse", role: "table", children: [_jsx("thead", { className: "sr-only", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Line" }), _jsx("th", { scope: "col", children: "Change" }), _jsx("th", { scope: "col", children: "Content" })] }) }), _jsx("tbody", { children: diff.map((line, idx) => (_jsx(DiffLineRow, { line: line, lineNumber: idx + 1 }, idx))) })] })] }));
}
// ---------------------------------------------------------------------------
// Diff line rendering
// ---------------------------------------------------------------------------
const LINE_NUM_CLASSES = "w-[1px] min-w-8 select-none whitespace-nowrap px-2 text-right text-[11px] text-muted-foreground-faint";
const MARKER_CLASSES = "w-[1px] select-none px-1 text-center";
function DiffLineRow({ line, lineNumber, }) {
    const marker = line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";
    const rowClass = line.type === "added"
        ? "bg-diff-added-bg"
        : line.type === "removed"
            ? "bg-diff-removed-bg"
            : "";
    const markerColor = line.type === "added"
        ? "text-diff-added-fg"
        : line.type === "removed"
            ? "text-diff-removed-fg"
            : "text-muted-foreground-faint";
    const ariaLabel = line.type === "added"
        ? `Added: ${line.content}`
        : line.type === "removed"
            ? `Removed: ${line.content}`
            : undefined;
    return (_jsxs("tr", { className: rowClass, "aria-label": ariaLabel, children: [_jsx("td", { className: LINE_NUM_CLASSES, children: lineNumber }), _jsx("td", { className: cn(MARKER_CLASSES, markerColor), "aria-hidden": "true", children: marker }), _jsx("td", { className: "whitespace-pre-wrap break-all px-2", children: line.content })] }));
}
// ---------------------------------------------------------------------------
// Non-happy states
// ---------------------------------------------------------------------------
function DiffSkeleton({ className }) {
    return (_jsxs("div", { className: cn("overflow-hidden rounded-lg border border-border", className), "aria-busy": "true", "aria-label": "Loading diff", children: [_jsx("div", { className: "border-b border-border bg-muted px-3 py-2", children: _jsx("div", { className: "h-4 w-48 animate-pulse rounded bg-muted-foreground/20" }) }), _jsx("div", { className: "space-y-1 p-3", children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-6 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 animate-pulse rounded bg-muted", style: { width: `${40 + (i % 3) * 20}%` } })] }, i))) })] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function ArrowIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M2 6h8M7 3l3 3-3 3" }) }));
}
//# sourceMappingURL=WorkflowVersionDiffViewer.js.map