"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { getUserMessage } from "@stigmer/sdk";
import { timestampDate } from "@bufbuild/protobuf/wkt";
import { useOAuthAppList } from "./useOAuthAppList";
/**
 * Displays a list of {@link OAuthApp} resources owned by an
 * organization.
 *
 * Each row shows the provider name, client ID (non-secret), and
 * creation date. When `onEdit` is provided, rows include a pencil
 * icon that fires the callback with the selected app — enabling
 * navigation to a detail/edit view.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <OAuthAppListPanel org="acme" />
 * ```
 *
 * @example
 * ```tsx
 * <OAuthAppListPanel
 *   org="acme"
 *   onEdit={(app) => setFlow({ phase: "editing", oauthApp: app })}
 *   onRefetchRef={(refetch) => { listRefetchRef.current = refetch; }}
 * />
 * ```
 */
export function OAuthAppListPanel({ org, onEdit, onRefetchRef, className, }) {
    const { oauthApps, isLoading, error, refetch } = useOAuthAppList(org);
    if (onRefetchRef) {
        onRefetchRef(refetch);
    }
    if (isLoading) {
        return (_jsx("div", { className: cn("space-y-2", className), "aria-busy": "true", "aria-label": "Loading OAuth apps", 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 (oauthApps.length === 0) {
        return (_jsx("p", { className: cn("text-muted-foreground py-4 text-center text-xs", className), children: "No OAuth apps configured yet." }));
    }
    return (_jsx("div", { className: cn("space-y-2", className), role: "list", "aria-label": "OAuth apps", children: oauthApps.map((app) => (_jsx(OAuthAppRow, { oauthApp: app, onEdit: onEdit ? () => onEdit(app) : undefined }, app.metadata?.id ?? ""))) }));
}
// ---------------------------------------------------------------------------
// OAuthAppRow (internal)
// ---------------------------------------------------------------------------
function OAuthAppRow({ oauthApp, onEdit, }) {
    const provider = oauthApp.spec?.provider || "OAuth App";
    const clientId = oauthApp.spec?.clientId;
    const createdAt = oauthApp.status?.audit?.specAudit?.createdAt;
    return (_jsxs("div", { role: "listitem", className: "flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 transition-colors hover:border-border", children: [_jsx(OAuthIcon, {}), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: provider }), clientId && (_jsx("span", { className: "block truncate text-xs font-mono text-muted-foreground", children: clientId }))] }), _jsx("div", { className: "hidden shrink-0 items-center gap-4 text-xs text-muted-foreground sm:flex", children: createdAt && (_jsx("span", { title: `Created ${timestampDate(createdAt).toISOString()}`, children: formatShortDate(timestampDate(createdAt)) })) }), onEdit && (_jsx("button", { type: "button", onClick: onEdit, "aria-label": `Edit ${provider}`, className: cn("shrink-0 rounded p-1", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "transition-colors"), children: _jsx(PencilIcon, {}) }))] }));
}
// ---------------------------------------------------------------------------
// Icons (edit action)
// ---------------------------------------------------------------------------
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" }) }));
}
// ---------------------------------------------------------------------------
// Formatting helpers
// ---------------------------------------------------------------------------
function formatShortDate(date) {
    return date.toLocaleDateString(undefined, {
        month: "short",
        day: "numeric",
        year: "numeric",
    });
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function OAuthIcon() {
    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", className: "shrink-0 text-muted-foreground", children: [_jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "2" }), _jsx("path", { d: "M8 7v2" }), _jsx("circle", { cx: "8", cy: "9.5", r: "0.5", fill: "currentColor", stroke: "none" })] }));
}
//# sourceMappingURL=OAuthAppListPanel.js.map