"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 { useCreateApiKey } from "./useCreateApiKey";
/**
 * Compact form for creating a new API key.
 *
 * Collects a **name** (required) and an **expiry** choice (30 / 60 /
 * 90 days or never), then creates the key via {@link useCreateApiKey}.
 * On success it fires `onCreated` with the full {@link ApiKey}
 * response, which includes the raw key in `spec.keyHash`.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <CreateApiKeyForm
 *   org="acme"
 *   onCreated={(key) => setRevealedKey(key)}
 *   onCancel={() => setShowForm(false)}
 * />
 * ```
 */
export function CreateApiKeyForm({ org, onCreated, onCancel, className, }) {
    const { create, isCreating, error, clearError } = useCreateApiKey();
    const [name, setName] = useState("");
    const [expiry, setExpiry] = useState("never");
    const trimmedName = name.trim();
    const canSubmit = trimmedName !== "" && !isCreating;
    const handleSubmit = useCallback(async (e) => {
        e.preventDefault();
        if (!canSubmit)
            return;
        clearError();
        try {
            const apiKey = await create({
                name: trimmedName,
                org,
                ...(expiry === "never"
                    ? { neverExpires: true }
                    : { expiresAt: daysFromNow(Number(expiry)) }),
            });
            onCreated?.(apiKey);
        }
        catch {
            // error state is managed by useCreateApiKey
        }
    }, [canSubmit, trimmedName, org, expiry, create, clearError, onCreated]);
    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-new-apikey-name", className: "text-xs font-medium text-foreground", children: "Name" }), _jsx("input", { id: "stgm-new-apikey-name", type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "e.g. ci-deploy-key", 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") })] }), _jsxs("fieldset", { className: "space-y-1.5", children: [_jsx("legend", { className: "text-xs font-medium text-foreground", children: "Expiration" }), _jsx("div", { className: "flex flex-wrap gap-2", children: EXPIRY_OPTIONS.map(({ value, label }) => (_jsx(ExpiryRadio, { value: value, label: label, checked: expiry === value, disabled: isCreating, onChange: setExpiry }, value))) })] })] }), 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, {}), "Create API key"] }), 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" }))] })] }));
}
// ---------------------------------------------------------------------------
// Expiry helpers
// ---------------------------------------------------------------------------
const EXPIRY_OPTIONS = [
    { value: "30", label: "30 days" },
    { value: "60", label: "60 days" },
    { value: "90", label: "90 days" },
    { value: "never", label: "Never" },
];
function daysFromNow(days) {
    const date = new Date();
    date.setDate(date.getDate() + days);
    return date;
}
// ---------------------------------------------------------------------------
// ExpiryRadio (internal)
// ---------------------------------------------------------------------------
function ExpiryRadio({ value, label, checked, disabled, onChange, }) {
    return (_jsxs("label", { className: cn("inline-flex cursor-pointer items-center rounded-md border px-2.5 py-1 text-xs transition-colors", checked
            ? "border-primary bg-primary-subtle text-primary font-medium"
            : "border-input bg-background text-muted-foreground hover:border-border hover:text-foreground", disabled && "pointer-events-none opacity-50"), children: [_jsx("input", { type: "radio", name: "stgm-apikey-expiry", value: value, checked: checked, disabled: disabled, onChange: () => onChange(value), className: "sr-only" }), label] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
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=CreateApiKeyForm.js.map