"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { getUserMessage } from "@stigmer/sdk";
import { useShareFlow } from "./useShareFlow";
import { GrantAccessForm } from "./GrantAccessForm";
/**
 * Self-contained sharing panel that displays who has access to a
 * resource and allows granting/revoking access.
 *
 * Combines the access list (from {@link useShareFlow}) with the
 * {@link GrantAccessForm} in a single panel suitable for embedding
 * in a popover, sidebar, or dialog.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <SharePanel
 *   resource={{ kind: "session", id: sessionId, resourceKind: ApiResourceKind.session }}
 *   resourceKindString="session"
 *   resourceKind={ApiResourceKind.session}
 *   onClose={() => setOpen(false)}
 * />
 * ```
 */
export function SharePanel({ resource, resourceKindString, resourceKind, onClose, className, }) {
    const { accessList, isLoading, fetchError, revokeAccess, isRevoking, revokeError, refetch, hasGrantableRoles, } = useShareFlow(resource);
    const [showGrantForm, setShowGrantForm] = useState(false);
    return (_jsxs("div", { className: cn("flex flex-col gap-4 p-4", className), role: "region", "aria-label": "Resource access management", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Share access" }), onClose && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close share panel", className: cn("rounded-md p-1 text-muted-foreground", "hover:text-foreground hover:bg-accent-hover"), children: _jsx(CloseIcon, {}) }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: isLoading
                            ? "Loading access list..."
                            : `${accessList.length} ${accessList.length === 1 ? "person" : "people"} with access` }), fetchError && (_jsx("p", { className: "text-destructive text-[0.65rem]", role: "alert", children: getUserMessage(fetchError) })), !isLoading && accessList.length > 0 && (_jsx("ul", { className: "space-y-1 mt-2", "aria-label": "People with access", children: accessList.map((entry) => (_jsx(AccessEntry, { entry: entry, resourceKindString: resourceKindString, resourceId: resource.id, onRevoke: revokeAccess, isRevoking: isRevoking }, entry.principal?.id ?? "unknown"))) })), revokeError && (_jsx("p", { className: "text-destructive text-[0.65rem]", role: "alert", children: getUserMessage(revokeError) }))] }), hasGrantableRoles && (_jsx("div", { className: "border-t border-border pt-3", children: showGrantForm ? (_jsx(GrantAccessForm, { resourceKind: resourceKind, resourceKindString: resourceKindString, resourceId: resource.id, onGranted: () => {
                        setShowGrantForm(false);
                        refetch();
                    }, onCancel: () => setShowGrantForm(false) })) : (_jsx("button", { type: "button", onClick: () => setShowGrantForm(true), className: cn("w-full rounded-md px-3 py-1.5 text-xs font-medium text-center", "border border-dashed border-border", "text-muted-foreground hover:text-foreground hover:border-foreground/30", "hover:bg-accent-hover transition-colors"), children: "+ Add people" })) }))] }));
}
// ---------------------------------------------------------------------------
// Internal subcomponents
// ---------------------------------------------------------------------------
function AccessEntry({ entry, resourceKindString, resourceId, onRevoke, isRevoking, }) {
    const principal = entry.principal;
    const roles = entry.roles;
    const displayName = principal?.name || principal?.email || principal?.id || "Unknown";
    const primaryRole = roles[0]?.role;
    const handleRevoke = useCallback(async () => {
        if (!principal?.id || !primaryRole?.code)
            return;
        await onRevoke(principal.id, primaryRole.code);
    }, [principal?.id, primaryRole?.code, onRevoke]);
    return (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-accent-hover group", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("div", { className: "h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[0.6rem] font-medium text-muted-foreground shrink-0", "aria-hidden": "true", children: (principal?.name?.[0] ?? principal?.email?.[0] ?? "?").toUpperCase() }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs text-foreground truncate", children: displayName }), principal?.email && principal.name && (_jsx("p", { className: "text-[0.6rem] text-muted-foreground truncate", children: principal.email }))] })] }), _jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx("span", { className: "text-[0.6rem] text-muted-foreground capitalize", children: primaryRole?.name ?? primaryRole?.code ?? "—" }), _jsx("button", { type: "button", onClick: handleRevoke, disabled: isRevoking, "aria-label": `Remove ${displayName}'s access`, className: cn("rounded p-0.5 text-muted-foreground opacity-0 group-hover:opacity-100", "hover:text-destructive hover:bg-destructive/10", "disabled:pointer-events-none disabled:opacity-50", "transition-opacity"), children: _jsx(RemoveIcon, {}) })] })] }));
}
function CloseIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
}
function RemoveIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
}
//# sourceMappingURL=SharePanel.js.map