"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { cn } from "@stigmer/theme";
import { generateSlug } from "../../internal/slug";
const SLUG_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
/**
 * Wizard step 1: Agent identity and instructions.
 *
 * Collects: name (required), slug (auto-derived), description,
 * icon URL, visibility, and the instructions textarea.
 *
 * The slug auto-derives from the name until the user manually edits it.
 * Follows the same pattern as `CreateOrganizationForm`.
 */
export function IdentityStep({ data, updateData, validationError, }) {
    const handleNameChange = useCallback((value) => {
        if (!data.slugTouched) {
            updateData({ name: value, slug: generateSlug(value) });
        }
        else {
            updateData({ name: value });
        }
    }, [data.slugTouched, updateData]);
    const handleSlugChange = useCallback((value) => {
        updateData({ slug: value, slugTouched: true });
    }, [updateData]);
    const slugError = data.slug.length > 0 && !SLUG_PATTERN.test(data.slug)
        ? "Slug must be lowercase letters, numbers, and hyphens only"
        : null;
    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Identity & Instructions" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Define what this agent is and what it does." })] }), validationError && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: validationError })), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("label", { htmlFor: "stgm-wizard-agent-name", className: "text-sm font-medium text-foreground", children: ["Name ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "stgm-wizard-agent-name", type: "text", value: data.name, onChange: (e) => handleNameChange(e.target.value), placeholder: "e.g. PR Review Bot", autoFocus: true, className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-agent-slug", className: "text-sm font-medium text-foreground", children: "Slug" }), _jsx("input", { id: "stgm-wizard-agent-slug", type: "text", value: data.slug, onChange: (e) => handleSlugChange(e.target.value), placeholder: "auto-generated", className: cn("w-full rounded-md border px-3 py-2 font-mono text-sm text-foreground", slugError
                                    ? "border-destructive bg-input-bg"
                                    : "border-input bg-input-bg", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") }), slugError && (_jsx("p", { className: "text-xs text-destructive", children: slugError })), !slugError && data.slug && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Referenced as ", _jsx("code", { className: "font-mono", children: data.slug })] }))] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-agent-description", className: "text-sm font-medium text-foreground", children: "Description" }), _jsx("input", { id: "stgm-wizard-agent-description", type: "text", value: data.description, onChange: (e) => updateData({ description: e.target.value }), placeholder: "A brief description of what this agent does", maxLength: 200, className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-agent-icon", className: "text-sm font-medium text-foreground", children: "Icon URL" }), _jsx("input", { id: "stgm-wizard-agent-icon", type: "url", value: data.iconUrl, onChange: (e) => updateData({ iconUrl: e.target.value }), placeholder: "https://example.com/icon.png", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("fieldset", { className: "space-y-1.5", children: [_jsx("legend", { className: "text-sm font-medium text-foreground", children: "Visibility" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(VisibilityOption, { value: "private", label: "Private", checked: data.visibility === "private", onChange: () => updateData({ visibility: "private" }) }), _jsx(VisibilityOption, { value: "public", label: "Public", checked: data.visibility === "public", onChange: () => updateData({ visibility: "public" }) })] })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-agent-instructions", className: "text-sm font-medium text-foreground", children: "Instructions" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "The system prompt that defines this agent's behavior." }), _jsx("textarea", { id: "stgm-wizard-agent-instructions", value: data.instructions, onChange: (e) => updateData({ instructions: e.target.value }), placeholder: "You are a helpful assistant that...", rows: 12, className: cn("w-full resize-y rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] })] }));
}
// ---------------------------------------------------------------------------
// Visibility radio option
// ---------------------------------------------------------------------------
function VisibilityOption({ value, label, checked, onChange, }) {
    return (_jsxs("label", { className: cn("inline-flex cursor-pointer items-center rounded-md border px-3 py-1.5 text-sm transition-colors", checked
            ? "border-primary bg-primary-subtle text-primary font-medium"
            : "border-input bg-input-bg text-muted-foreground hover:border-border hover:text-foreground"), children: [_jsx("input", { type: "radio", name: "stgm-wizard-agent-visibility", value: value, checked: checked, onChange: onChange, className: "sr-only" }), label] }));
}
//# sourceMappingURL=IdentityStep.js.map