"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
const COPIED_FEEDBACK_MS = 2000;
/**
 * One-time reveal component displayed after a platform client is
 * created or its secret is rotated.
 *
 * Shows both the `client_id` (read-only, for context) and the raw
 * `client_secret` with a **Copy** button. The secret is only
 * available once — the server never returns it again — so this
 * component prominently warns the user to copy it immediately.
 *
 * This is a standalone alert component, not a modal — the parent
 * decides how to present and position it.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <PlatformClientSecretAlert
 *   clientId="stgm_pc_abc123"
 *   clientSecret="stgm_secret_xyz..."
 *   context="created"
 *   onDismiss={() => setFlow({ phase: "idle" })}
 * />
 * ```
 */
export function PlatformClientSecretAlert({ clientId, clientSecret, context, onDismiss, className, }) {
    const [copiedField, setCopiedField] = useState(null);
    const handleCopy = useCallback(async (value, field) => {
        try {
            await navigator.clipboard.writeText(value);
            setCopiedField(field);
            setTimeout(() => setCopiedField(null), COPIED_FEEDBACK_MS);
        }
        catch {
            const el = document.getElementById(field === "secret"
                ? "stgm-pc-secret-reveal"
                : "stgm-pc-client-id-reveal");
            if (el) {
                const selection = window.getSelection();
                const range = document.createRange();
                range.selectNodeContents(el);
                selection?.removeAllRanges();
                selection?.addRange(range);
            }
        }
    }, []);
    const title = context === "created"
        ? "Platform client created"
        : "Client secret rotated";
    return (_jsxs("div", { role: "alert", className: cn("rounded-lg border border-primary/30 bg-primary-subtle p-4", className), children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: "Copy the client secret now. It will not be shown again." })] }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: cn("shrink-0 rounded p-1", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "transition-colors"), children: _jsx(CloseIcon, {}) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(CopyableField, { id: "stgm-pc-client-id-reveal", label: "Client ID", value: clientId, copied: copiedField === "id", onCopy: () => handleCopy(clientId, "id") }), _jsx(CopyableField, { id: "stgm-pc-secret-reveal", label: "Client secret", value: clientSecret, copied: copiedField === "secret", onCopy: () => handleCopy(clientSecret, "secret") })] }), _jsxs("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: [copiedField === "id" && "Client ID copied to clipboard", copiedField === "secret" && "Client secret copied to clipboard"] })] }));
}
// ---------------------------------------------------------------------------
// CopyableField (internal)
// ---------------------------------------------------------------------------
function CopyableField({ id, label, value, copied, onCopy, }) {
    return (_jsxs("div", { children: [_jsx("span", { className: "text-[0.65rem] font-medium text-muted-foreground", children: label }), _jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [_jsx("code", { id: id, className: cn("min-w-0 flex-1 select-all truncate rounded-md", "border border-input bg-background px-2.5 py-1.5", "font-mono text-xs text-foreground"), children: value }), _jsxs("button", { type: "button", onClick: onCopy, "aria-label": `Copy ${label}`, className: cn("inline-flex shrink-0 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", "transition-colors"), children: [copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}), copied ? "Copied" : "Copy"] })] })] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function CopyIcon() {
    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5" }), _jsx("path", { d: "M5 11H3.5A1.5 1.5 0 0 1 2 9.5V3.5A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V5" })] }));
}
function CheckIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 8.5l3.5 3.5L13 5" }) }));
}
function CloseIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
}
//# sourceMappingURL=PlatformClientSecretAlert.js.map