"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from "react";
import { cn } from "@stigmer/theme";
import { useRunWorkflowFlow } from "./useRunWorkflowFlow";
import { WorkflowRunForm } from "./WorkflowRunForm";
/**
 * Dialog for running a workflow execution.
 *
 * Composes {@link useRunWorkflowFlow} with {@link WorkflowRunForm}
 * inside a native `<dialog>` element. Manages the full lifecycle:
 * form fields, validation, submission, error display, and close.
 *
 * Uses the same `<dialog>` + `showModal()` pattern as
 * {@link ConfirmDialog} — built-in focus trapping, Escape key
 * handling, and backdrop. Styled via `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <WorkflowRunDialog
 *   open={showRunDialog}
 *   onOpenChange={setShowRunDialog}
 *   org="acme"
 *   workflow={workflow}
 *   instances={instances}
 *   onSuccess={(id) => router.push(`/workflows/executions/${id}`)}
 *   onError={(msg) => toast.error(msg)}
 * />
 * ```
 */
export function WorkflowRunDialog({ open, onOpenChange, org, workflow, instances, defaultInstanceId, onSuccess, onError, }) {
    const dialogRef = useRef(null);
    const handleSuccess = useCallback((executionId) => {
        onOpenChange(false);
        onSuccess(executionId);
    }, [onOpenChange, onSuccess]);
    const flow = useRunWorkflowFlow({
        org,
        workflow,
        instances,
        onSuccess: handleSuccess,
        onError,
    });
    // Sync open state with the native dialog
    useEffect(() => {
        const dialog = dialogRef.current;
        if (!dialog)
            return;
        if (open && !dialog.open) {
            flow.reset();
            dialog.showModal();
        }
        else if (!open && dialog.open) {
            dialog.close();
        }
    }, [open, flow.reset]);
    const handleDialogCancel = useCallback((e) => {
        e.preventDefault();
        onOpenChange(false);
    }, [onOpenChange]);
    const handleBackdropClick = useCallback((e) => {
        if (e.target === dialogRef.current) {
            onOpenChange(false);
        }
    }, [onOpenChange]);
    const workflowName = workflow.metadata?.name || workflow.metadata?.slug || "Workflow";
    return (_jsx("dialog", { ref: dialogRef, onCancel: handleDialogCancel, onClick: handleBackdropClick, className: cn("fixed inset-0 z-50 m-auto w-full max-w-lg 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("h3", { className: "text-base font-semibold text-foreground", children: ["Run ", workflowName] }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: "Configure inputs and start a new execution" })] }), _jsxs("div", { className: "max-h-[60vh] overflow-y-auto px-6 py-4", children: [flow.error && (_jsx("div", { className: "mb-4 rounded-md border border-destructive bg-destructive-muted px-3 py-2 text-sm text-destructive", role: "alert", children: flow.error })), _jsx(WorkflowRunForm, { triggerMessage: flow.triggerMessage, onTriggerMessageChange: flow.setTriggerMessage, envDeclarations: flow.envDeclarations, runtimeEnv: flow.runtimeEnv, onEnvVarChange: flow.setEnvVar, instances: instances, selectedInstanceId: flow.selectedInstanceId, onInstanceChange: flow.setSelectedInstanceId, defaultInstanceId: defaultInstanceId, instanceEnvKeys: flow.instanceEnvKeys, showTriggerMessage: flow.showTriggerMessage, onShowTriggerMessageChange: flow.setShowTriggerMessage, errors: flow.fieldErrors, disabled: flow.isSubmitting })] }), _jsxs("div", { className: "flex justify-end gap-2 border-t border-border px-6 py-3", children: [_jsx("button", { type: "button", onClick: () => onOpenChange(false), disabled: flow.isSubmitting, 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", "disabled:pointer-events-none disabled:opacity-50"), children: "Cancel" }), _jsxs("button", { type: "button", onClick: flow.submit, disabled: flow.isSubmitting, 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-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-40"), children: [flow.isSubmitting && _jsx(SpinnerIcon, {}), flow.isSubmitting ? "Starting…" : "Run Workflow"] })] })] }) }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function SpinnerIcon() {
    return (_jsx("svg", { width: "14", height: "14", 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=WorkflowRunDialog.js.map