"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 { useExplainWorkflowFlow } from "./useExplainWorkflowFlow";
import { MessageThread } from "../execution/MessageThread";
/**
 * Modal dialog that generates a human-readable explanation of a workflow.
 *
 * Uses the `workflow-architect` agent in explain-only mode. The dialog
 * auto-starts the explanation when opened and streams the agent's
 * response in real-time.
 *
 * Uses the same `<dialog>` + `showModal()` pattern as `WorkflowArchitectDialog`.
 *
 * @since T14 (AI-Assisted Workflow Creation)
 */
export function WorkflowExplainDialog({ open, onOpenChange, org, currentYaml, }) {
    const dialogRef = useRef(null);
    const flow = useExplainWorkflowFlow({
        org,
        currentYaml,
        onError: () => {
            /* Error displayed inline */
        },
    });
    // Show/hide dialog
    useEffect(() => {
        const dialog = dialogRef.current;
        if (!dialog)
            return;
        if (open && !dialog.open) {
            flow.reset();
            dialog.showModal();
            flow.explain();
        }
        else if (!open && dialog.open) {
            dialog.close();
        }
    }, [open, flow.reset, flow.explain]);
    const handleDialogCancel = useCallback((e) => {
        e.preventDefault();
        onOpenChange(false);
    }, [onOpenChange]);
    const handleBackdropClick = useCallback((e) => {
        if (e.target === dialogRef.current) {
            onOpenChange(false);
        }
    }, [onOpenChange]);
    const handleCopy = useCallback(() => {
        if (flow.explanation) {
            navigator.clipboard.writeText(flow.explanation).catch(() => {
                /* Clipboard unavailable in some contexts */
            });
        }
    }, [flow.explanation]);
    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("fixed inset-0 z-50 m-auto w-full max-w-2xl 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 flex-col", children: [_jsxs("div", { className: "border-b border-border px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-base font-semibold text-foreground", children: "Workflow Explanation" }), flow.isStreaming && (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(SpinnerIcon, {}), "Analyzing\u2026"] }))] }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: "A plain-language walkthrough of what this workflow does" })] }), _jsxs("div", { className: "max-h-[60vh] overflow-y-auto px-6 py-4", children: [flow.phase === "starting" && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-8", children: [_jsx(SpinnerIcon, { size: 20 }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Starting Workflow Architect\u2026" })] })), flow.phase === "streaming" && flow.execution && (_jsx(MessageThread, { executions: [], activeStreamExecution: flow.execution, className: "min-h-[100px]" })), flow.phase === "complete" && flow.explanation && (_jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground", children: flow.explanation })), flow.phase === "complete" && !flow.explanation && flow.execution && (_jsx(MessageThread, { executions: [flow.execution], activeStreamExecution: null, className: "min-h-[100px]" })), flow.error && flow.phase === "error" && (_jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive", role: "alert", children: flow.error }))] }), _jsxs("div", { className: "flex justify-between border-t border-border px-6 py-3", children: [_jsx("button", { type: "button", onClick: () => onOpenChange(false), className: cn("rounded-md px-3 py-1.5 text-sm font-medium transition-colors", "border border-input bg-background text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: "Close" }), _jsxs("div", { className: "flex gap-2", children: [flow.phase === "error" && (_jsx("button", { type: "button", onClick: flow.explain, className: cn("rounded-md px-3 py-1.5 text-sm font-medium transition-colors", "border border-input bg-background text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: "Try Again" })), flow.phase === "complete" && flow.explanation && (_jsx("button", { type: "button", onClick: handleCopy, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors", "bg-primary text-primary-foreground hover:bg-primary/90", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: "Copy to clipboard" }))] })] })] }) }));
}
function SpinnerIcon({ size = 14 }) {
    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
}
//# sourceMappingURL=WorkflowExplainDialog.js.map