"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from "react";
import { cn } from "@stigmer/theme";
import { useSkillDiff } from "./useSkillDiff";
import { MultiFileDiffView } from "../version-history/MultiFileDiffView";
import { ErrorMessage } from "../error/ErrorMessage";
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
/**
 * Dialog that renders a multi-file diff between two skill versions.
 *
 * Uses native `<dialog>` with `showModal()` for built-in focus trapping,
 * Escape handling, and backdrop — consistent with `ConfirmDialog`.
 *
 * Internally composes `useSkillDiff` (data fetching) and
 * `MultiFileDiffView` (rendering). Handles loading, error, and
 * empty states.
 *
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const [diffState, setDiffState] = useState<SkillDiffDialogState | null>(null);
 *
 * <SkillDiffDialog state={diffState} onClose={() => setDiffState(null)} />
 * ```
 */
export function SkillDiffDialog({ state, onClose }) {
    const dialogRef = useRef(null);
    useEffect(() => {
        const dialog = dialogRef.current;
        if (!dialog)
            return;
        if (state && !dialog.open) {
            dialog.showModal();
        }
        else if (!state && dialog.open) {
            dialog.close();
        }
    }, [state]);
    const handleDialogCancel = useCallback((e) => {
        e.preventDefault();
        onClose();
    }, [onClose]);
    const handleBackdropClick = useCallback((e) => {
        if (e.target === e.currentTarget) {
            onClose();
        }
    }, [onClose]);
    const { diff, isLoading, error } = useSkillDiff(state?.fromArtifactKey ?? null, state?.toArtifactKey ?? null);
    if (!state)
        return null;
    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("fixed inset-0 z-50 m-auto h-[85vh] w-full max-w-4xl rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg", "backdrop:bg-black/50", "open:animate-in open:fade-in-0 open:zoom-in-95"), children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "font-medium text-foreground", children: "Comparing" }), _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground", children: state.fromLabel }), _jsx(ArrowIcon, { className: "size-3.5 text-muted-foreground-faint" }), _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground", children: state.toLabel })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close diff viewer", className: cn("rounded-md p-1.5 text-muted-foreground transition-colors", "hover:bg-accent-hover hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: _jsx(CloseIcon, { className: "size-4" }) })] }), _jsx("div", { className: "flex-1 overflow-auto p-4", children: isLoading ? (_jsx(DiffSkeleton, {})) : error ? (_jsx(ErrorMessage, { error: error })) : diff ? (_jsx(MultiFileDiffView, { diff: diff })) : null })] }) }));
}
// ---------------------------------------------------------------------------
// Loading skeleton
// ---------------------------------------------------------------------------
function DiffSkeleton() {
    return (_jsxs("div", { className: "flex flex-col gap-4", "aria-busy": "true", "aria-label": "Loading diff", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-36 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-muted" })] }), _jsx("div", { className: "h-6 w-full animate-pulse rounded bg-muted" }), [1, 2, 3, 4, 5, 6].map((i) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-10 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-10 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 flex-1 animate-pulse rounded bg-muted" })] }, i)))] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function ArrowIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 8h10M9 4l4 4-4 4" }) }));
}
function CloseIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
}
//# sourceMappingURL=SkillDiffDialog.js.map