"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 { timestampDate } from "@bufbuild/protobuf/wkt";
import { useIdentityProviderList } from "./useIdentityProviderList";
import { useDeleteIdentityProvider } from "./useDeleteIdentityProvider";
/**
 * Displays a list of {@link IdentityProvider} resources for an
 * organization with inline delete confirmation.
 *
 * Each provider is rendered as a row showing name, slug, SSO badge
 * (when `is_sso_provider` is true), and creation date. A delete
 * button triggers an inline confirmation flow.
 *
 * Identity providers are admin-level resources with small cardinality
 * (typically 1–3 per org), so the list is rendered without pagination.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <IdentityProviderListPanel org="acme" />
 * ```
 *
 * @example
 * ```tsx
 * <IdentityProviderListPanel
 *   org="acme"
 *   onEdit={(idp) => navigate(`/settings/idp/${idp.metadata?.id}`)}
 *   onRefetchRef={(refetch) => { listRefetchRef.current = refetch; }}
 * />
 * ```
 */
export function IdentityProviderListPanel({ org, onEdit, onRefetchRef, className, }) {
    const { identityProviders, isLoading, error, refetch } = useIdentityProviderList(org);
    const [confirmingId, setConfirmingId] = useState(null);
    if (onRefetchRef) {
        onRefetchRef(refetch);
    }
    if (isLoading) {
        return (_jsx("div", { className: cn("space-y-2", className), "aria-busy": "true", "aria-label": "Loading identity providers", children: Array.from({ length: 2 }, (_, i) => (_jsx("div", { className: "bg-muted-subtle h-14 animate-pulse rounded-lg" }, i))) }));
    }
    if (error) {
        return (_jsx("p", { className: cn("text-destructive text-xs", className), role: "alert", children: getUserMessage(error) }));
    }
    if (identityProviders.length === 0) {
        return (_jsx("p", { className: cn("text-muted-foreground py-4 text-center text-xs", className), children: "No identity providers configured." }));
    }
    return (_jsx("div", { className: cn("space-y-2", className), role: "list", "aria-label": "Identity providers", children: identityProviders.map((idp) => {
            const id = idp.metadata?.id ?? "";
            return (_jsx(IdpRow, { identityProvider: idp, isConfirming: confirmingId === id, onEdit: onEdit ? () => onEdit(idp) : undefined, onConfirmDelete: () => setConfirmingId(id), onCancelDelete: () => setConfirmingId(null), onDeleted: () => {
                    setConfirmingId(null);
                    refetch();
                } }, id));
        }) }));
}
// ---------------------------------------------------------------------------
// IdpRow (internal)
// ---------------------------------------------------------------------------
function IdpRow({ identityProvider, isConfirming, onEdit, onConfirmDelete, onCancelDelete, onDeleted, }) {
    const { deleteProvider, isDeleting, error } = useDeleteIdentityProvider();
    const id = identityProvider.metadata?.id ?? "";
    const spec = identityProvider.spec;
    const name = spec?.displayName ||
        identityProvider.metadata?.name ||
        "Unnamed provider";
    const slug = identityProvider.metadata?.slug;
    const isSso = spec?.isSsoProvider;
    const isJit = !isSso && spec?.autoProvisionAccounts;
    const createdAt = identityProvider.status?.audit?.specAudit?.createdAt;
    const handleDelete = useCallback(async () => {
        try {
            await deleteProvider({ resourceId: id });
            onDeleted();
        }
        catch {
            // error state is surfaced via the hook
        }
    }, [id, deleteProvider, onDeleted]);
    if (isConfirming) {
        return (_jsxs("div", { role: "listitem", className: "flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-xs text-foreground", children: ["Delete ", _jsx("span", { className: "font-medium", children: name }), "?"] }), error && (_jsx("p", { className: "mt-0.5 text-[0.65rem] text-destructive", children: getUserMessage(error) }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsxs("button", { type: "button", onClick: handleDelete, disabled: isDeleting, className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium", "bg-destructive text-destructive-foreground hover:bg-destructive-hover", "disabled:pointer-events-none disabled:opacity-50"), children: [isDeleting && _jsx(SpinnerIcon, {}), "Delete"] }), _jsx("button", { type: "button", onClick: onCancelDelete, disabled: isDeleting, className: cn("rounded-md px-2.5 py-1 text-xs", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), children: "Cancel" })] })] }));
    }
    return (_jsxs("div", { role: "listitem", className: "flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors", children: [_jsx(ShieldIcon, {}), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: name }), slug && (_jsx("span", { className: "block text-xs text-muted-foreground font-mono", children: slug }))] }), _jsxs("div", { className: "hidden sm:flex shrink-0 items-center gap-3 text-xs text-muted-foreground", children: [isSso && (_jsx("span", { className: "inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary", children: "SSO" })), isJit && (_jsx("span", { className: "inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary", children: "JIT" })), createdAt && (_jsx("span", { title: `Created ${timestampDate(createdAt).toISOString()}`, children: formatShortDate(timestampDate(createdAt)) }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [onEdit && (_jsx("button", { type: "button", onClick: onEdit, "aria-label": `Edit ${name}`, className: cn("shrink-0 rounded p-1", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "transition-colors"), children: _jsx(PencilIcon, {}) })), _jsx("button", { type: "button", onClick: onConfirmDelete, "aria-label": `Delete ${name}`, className: cn("shrink-0 rounded p-1", "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle", "transition-colors"), children: _jsx(TrashIcon, {}) })] })] }));
}
// ---------------------------------------------------------------------------
// Formatting helpers
// ---------------------------------------------------------------------------
function formatShortDate(date) {
    return date.toLocaleDateString(undefined, {
        month: "short",
        day: "numeric",
        year: "numeric",
    });
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function ShieldIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-muted-foreground", children: _jsx("path", { d: "M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" }) }));
}
function PencilIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M11 2.5l2.5 2.5L5 13.5H2.5V11L11 2.5z" }) }));
}
function TrashIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2.5 4h11M5.5 4V2.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V4" }), _jsx("path", { d: "M12.5 4v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4" }), _jsx("line", { x1: "6.5", y1: "7", x2: "6.5", y2: "11" }), _jsx("line", { x1: "9.5", y1: "7", x2: "9.5", y2: "11" })] }));
}
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=IdentityProviderListPanel.js.map