"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 { toast } from "../feedback/toast";
import { useImportResource } from "./useImportResource";
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
/**
 * Modal dialog for importing a Stigmer resource from a YAML or JSON file.
 *
 * Workflow:
 * 1. User selects a `.yaml`, `.yml`, or `.json` file via the file picker
 * 2. The file is validated and a preview card shows the detected resource
 * 3. User confirms the import, which calls `apply()` on the target org
 * 4. On success: toast notification and `onSuccess` callback
 * 5. On error: inline error message with guidance
 *
 * Uses the native `<dialog>` element for built-in focus trapping, Escape
 * key handling, and backdrop — consistent with {@link ConfirmDialog}.
 *
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const [open, setOpen] = useState(false);
 *
 * <ImportResourceDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   org={activeOrg}
 *   onSuccess={(result) => {
 *     router.push(`/library/${result.kind === "Agent" ? "agents" : "mcp-servers"}`);
 *   }}
 * />
 * ```
 */
export function ImportResourceDialog({ open, onOpenChange, org, onSuccess, }) {
    const dialogRef = useRef(null);
    const fileInputRef = useRef(null);
    const { readFile, preview, error, reset, apply, isApplying } = useImportResource();
    // Sync dialog open state with the native <dialog> element.
    useEffect(() => {
        const dialog = dialogRef.current;
        if (!dialog)
            return;
        if (open && !dialog.open) {
            dialog.showModal();
        }
        else if (!open && dialog.open) {
            dialog.close();
        }
    }, [open]);
    // Reset state when the dialog opens.
    useEffect(() => {
        if (open) {
            reset();
            if (fileInputRef.current) {
                fileInputRef.current.value = "";
            }
        }
    }, [open, reset]);
    const handleCancel = useCallback((e) => {
        e.preventDefault();
        onOpenChange(false);
    }, [onOpenChange]);
    const handleClose = useCallback(() => {
        onOpenChange(false);
    }, [onOpenChange]);
    const handleFileChange = useCallback((e) => {
        const file = e.target.files?.[0];
        if (file) {
            readFile(file);
        }
    }, [readFile]);
    const handleConfirm = useCallback(async () => {
        try {
            const result = await apply(org);
            toast.success(`${result.kind === "Agent" ? "Agent" : "MCP Server"} "${result.name}" imported successfully`);
            onOpenChange(false);
            onSuccess?.(result);
        }
        catch {
            // error is set by the hook
        }
    }, [apply, org, onOpenChange, onSuccess]);
    return (_jsx("dialog", { ref: dialogRef, onCancel: handleCancel, className: cn("fixed inset-0 z-50 m-auto w-full max-w-md 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 gap-5 p-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-base font-semibold text-foreground", children: "Import resource" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Select a YAML or JSON file containing a Stigmer Agent or MCP Server definition." })] }), _jsx("div", { children: _jsx("input", { ref: fileInputRef, type: "file", accept: ".yaml,.yml,.json", onChange: handleFileChange, className: cn("w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground", "file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-primary-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Select resource file" }) }), error && (_jsx("div", { role: "alert", className: "rounded-md border border-destructive bg-card px-3 py-2.5 text-sm text-destructive", children: error })), preview && !error && (_jsxs("div", { className: "rounded-md border border-border bg-card px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: preview.kind === "Agent" ? "Agent" : "MCP Server" }), _jsx("span", { className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground uppercase", children: preview.format })] }), _jsx("p", { className: "mt-1.5 text-sm font-medium text-foreground", children: preview.name }), preview.slug && preview.slug !== preview.name && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: preview.slug })), _jsxs("p", { className: "mt-1.5 text-xs text-muted-foreground", children: ["Will be applied to ", _jsx("span", { className: "font-medium text-foreground", children: org })] })] })), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { type: "button", onClick: handleClose, disabled: isApplying, 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" }), _jsx("button", { type: "button", onClick: handleConfirm, disabled: !preview || !!error || isApplying, className: cn("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-50"), children: isApplying ? "Importing\u2026" : "Import" })] })] }) }));
}
//# sourceMappingURL=ImportResourceDialog.js.map