"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 { WorkflowOverviewGraph } from "./WorkflowOverviewGraph";
/**
 * Near-full-viewport dialog for exploring the workflow task flow graph.
 *
 * Uses native `<dialog>` with `showModal()` for built-in focus trapping,
 * Escape key handling, and backdrop — matching the pattern established by
 * `ArtifactPreviewModal` and `ConfirmDialog`.
 *
 * Mounts a fresh `WorkflowOverviewGraph` instance when open, which
 * auto-fits to the larger viewport via its internal `fitView` effect.
 * Pan, zoom, minimap, and node-click inspection all work identically
 * to the inline overview graph.
 */
export function WorkflowGraphFullscreenDialog({ workflow, open, onClose, onOpenInEditor, }) {
    const dialogRef = useRef(null);
    useEffect(() => {
        const dialog = dialogRef.current;
        if (!dialog)
            return;
        if (open && !dialog.open) {
            dialog.showModal();
        }
        else if (!open && dialog.open) {
            dialog.close();
        }
    }, [open]);
    const handleCancel = useCallback((e) => {
        e.preventDefault();
        onClose();
    }, [onClose]);
    const workflowName = workflow?.metadata?.name || "Task Flow";
    return (_jsx("dialog", { ref: dialogRef, onCancel: handleCancel, "aria-label": `${workflowName} — full view`, className: cn("fixed inset-0 z-50 m-auto h-[90vh] w-[95vw] rounded-lg border border-border bg-background p-0 text-foreground shadow-2xl outline-none", "[&::backdrop]:bg-black/60"), children: open && (_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: [_jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: workflowName }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close full view", className: cn("inline-flex size-7 items-center justify-center rounded-md text-muted-foreground", "hover:bg-accent-hover hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors"), children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(WorkflowOverviewGraph, { workflow: workflow, onOpenInEditor: onOpenInEditor, nodesDraggable: true, className: "h-full w-full bg-[var(--stgm-muted-subtle,#fafafa)]" }) })] })) }));
}
function CloseIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M3 3L11 11" }), _jsx("path", { d: "M11 3L3 11" })] }));
}
//# sourceMappingURL=WorkflowGraphFullscreenDialog.js.map