"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from "react";
import { cn } from "@stigmer/theme";
import { hasGrantableRoles } from "@stigmer/sdk";
import { PeopleWithAccess } from "../iam-policy/PeopleWithAccess.js";
import { ResourceVisibilityControl } from "../library/ResourceVisibilityControl.js";
/**
 * The one canonical "Manage access" dialog, mounted identically across every
 * resource with a detail surface. Composes the platform's two access axes into
 * a single Drive/GitHub-style modal: *General access* (visibility) over
 * *People with access* (explicit grants), plus an optional resource-specific
 * section.
 *
 * Each section renders only when it applies:
 * - **General access** — only when {@link ManageAccessDialogProps.visibility}
 *   is provided. Delegates to {@link ResourceVisibilityControl}, which owns
 *   level selection and the `can_edit` gate.
 * - **People with access** — only when the resource kind has grantable roles
 *   (`hasGrantableRoles`, proto-generated single source of truth). Delegates
 *   to {@link PeopleWithAccess}, which gates grant/revoke on `can_grant_access`.
 * - **Extra section** — only when provided.
 *
 * The body mounts lazily (only while `open`) so its access-list fetch never
 * fires on a closed dialog. Built on the native `<dialog>` element for focus
 * trapping and escape handling, matching the SDK's modal convention. All
 * visual properties flow through `--stgm-*` design tokens.
 *
 * Most hosts mount it indirectly via {@link ManageAccessButton} (a visible
 * trigger) or {@link useManageAccess} (a kebab-menu action). Render it directly
 * only when you own the open-state.
 *
 * @example
 * ```tsx
 * const [open, setOpen] = useState(false);
 *
 * // A blueprint has both axes: General access (visibility) over People.
 * <ManageAccessDialog
 *   open={open}
 *   onOpenChange={setOpen}
 *   resource={{ kind: ApiResourceKind.agent, kindString: "agent", id, org, name }}
 *   visibility={{ kind: "agent", current: visibility, org, onChanged: refetch }}
 * />
 * ```
 */
export function ManageAccessDialog({ open, onOpenChange, resource, visibility, extraSection, }) {
    const dialogRef = useRef(null);
    const handleClose = useCallback(() => {
        dialogRef.current?.close();
        onOpenChange(false);
    }, [onOpenChange]);
    // Sync native dialog open state (matches the SDK dialog convention).
    const prevOpenRef = useRef(false);
    if (open !== prevOpenRef.current) {
        prevOpenRef.current = open;
        if (open) {
            requestAnimationFrame(() => {
                if (dialogRef.current && !dialogRef.current.open) {
                    dialogRef.current.showModal();
                }
            });
        }
        else if (dialogRef.current?.open) {
            dialogRef.current.close();
        }
    }
    const showPeople = hasGrantableRoles(resource.kind);
    return (_jsx("dialog", { ref: dialogRef, onClose: handleClose, className: cn("fixed inset-0 m-auto w-full max-w-md rounded-xl border border-border bg-popover p-0 shadow-xl", "backdrop:bg-black/50"), "aria-labelledby": "manage-access-title", children: open && (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start justify-between border-b border-border px-6 py-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: "manage-access-title", className: "text-base font-semibold text-foreground", children: "Manage access" }), resource.name && (_jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: resource.name }))] }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: cn("rounded-md p-1 text-muted-foreground", "hover:text-foreground hover:bg-accent-hover", "focus:outline-none focus:ring-2 focus:ring-ring"), children: _jsx(CloseIcon, {}) })] }), _jsxs("div", { className: "flex flex-col divide-y divide-border", children: [visibility && (_jsx(AccessSection, { title: "General access", description: "Who can find and open this resource.", children: _jsx(ResourceVisibilityControl, { kind: visibility.kind, resourceId: resource.id, visibility: visibility.current, org: visibility.org, onChanged: visibility.onChanged }) })), showPeople && (_jsx(AccessSection, { title: "People with access", children: _jsx(PeopleWithAccess, { resource: {
                                    kind: resource.kindString,
                                    id: resource.id,
                                    resourceKind: resource.kind,
                                }, resourceKindString: resource.kindString, resourceKind: resource.kind, orgId: resource.org }) })), extraSection && (_jsx(AccessSection, { title: extraSection.title, description: extraSection.description, children: extraSection.content }))] }), _jsx("div", { className: "flex items-center justify-end border-t border-border px-6 py-3", children: _jsx("button", { type: "button", onClick: handleClose, className: cn("rounded-md px-3 py-1.5 text-sm font-medium", "bg-primary text-primary-foreground hover:bg-primary-hover", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"), children: "Done" }) })] })) }));
}
// ---------------------------------------------------------------------------
// Internal section chrome
// ---------------------------------------------------------------------------
function AccessSection({ title, description, children, }) {
    return (_jsxs("section", { className: "px-6 py-4", children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: title }), description && (_jsx("p", { className: "mt-0.5 text-[0.65rem] text-muted-foreground", children: description })), _jsx("div", { className: "mt-2.5", children: children })] }));
}
function CloseIcon() {
    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
}
//# sourceMappingURL=ManageAccessDialog.js.map