"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { create } from "@bufbuild/protobuf";
import { IamPolicySpecSchema } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/spec_pb";
import { ApiResourceRefSchema } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/spec_pb";
import { cn } from "@stigmer/theme";
import { getUserMessage, iamRoleToString } from "@stigmer/sdk";
import { useCreateIamPolicy } from "./useCreateIamPolicy";
import { RoleSelector } from "./RoleSelector";
/**
 * Form for granting a principal access to a resource.
 *
 * Collects a **principal ID** (identity account), lets the user pick
 * a **role** from the resource's grantable roles, and creates the IAM
 * policy binding.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <GrantAccessForm
 *   resourceKind={ApiResourceKind.organization}
 *   resourceKindString="organization"
 *   resourceId="org-abc123"
 *   onGranted={(policy) => refetchAccessList()}
 *   onCancel={() => setShowForm(false)}
 * />
 * ```
 */
export function GrantAccessForm({ resourceKind, resourceKindString, resourceId, onGranted, onCancel, className, }) {
    const { create: createPolicy, isCreating, error, clearError } = useCreateIamPolicy();
    const [principalId, setPrincipalId] = useState("");
    const [selectedRole, setSelectedRole] = useState(null);
    const trimmedPrincipalId = principalId.trim();
    const canSubmit = trimmedPrincipalId !== "" && selectedRole !== null && !isCreating;
    const handleSubmit = useCallback(async (e) => {
        e.preventDefault();
        if (!canSubmit || selectedRole === null)
            return;
        clearError();
        try {
            const spec = create(IamPolicySpecSchema, {
                principal: create(ApiResourceRefSchema, {
                    kind: "identity_account",
                    id: trimmedPrincipalId,
                }),
                resource: create(ApiResourceRefSchema, {
                    kind: resourceKindString,
                    id: resourceId,
                }),
                relation: iamRoleToString(selectedRole),
            });
            const policy = await createPolicy(spec);
            onGranted?.(policy);
        }
        catch {
            // error state is managed by useCreateIamPolicy
        }
    }, [
        canSubmit,
        selectedRole,
        trimmedPrincipalId,
        resourceKindString,
        resourceId,
        createPolicy,
        clearError,
        onGranted,
    ]);
    return (_jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-3", className), children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "stgm-grant-principal", className: "text-xs font-medium text-foreground", children: "Account ID" }), _jsx("input", { id: "stgm-grant-principal", type: "text", value: principalId, onChange: (e) => setPrincipalId(e.target.value), placeholder: "e.g. ia-01HQUSER123", disabled: isCreating, autoFocus: true, required: true, className: cn("w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50") })] }), _jsx(RoleSelector, { kind: resourceKind, selected: selectedRole, onSelect: setSelectedRole, disabled: isCreating })] }), error && (_jsx("p", { className: "text-destructive text-[0.65rem]", role: "alert", children: getUserMessage(error) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "submit", disabled: !canSubmit, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium", "bg-primary text-primary-foreground hover:bg-primary-hover", "disabled:pointer-events-none disabled:opacity-40"), children: [isCreating && _jsx(SpinnerIcon, {}), "Grant access"] }), onCancel && (_jsx("button", { type: "button", onClick: onCancel, disabled: isCreating, className: cn("rounded-md px-3 py-1.5 text-xs", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), children: "Cancel" }))] })] }));
}
function SpinnerIcon() {
    return (_jsx("svg", { width: "12", height: "12", 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=GrantAccessForm.js.map