"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { TemplateGallery } from "./TemplateGallery.js";
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
/**
 * "Step 0" landing screen for resource creation flows.
 *
 * Presents three creation entry points as large option cards:
 * 1. **Start from scratch** — blank wizard
 * 2. **Browse templates** — opens the template gallery inline
 * 3. **Import from file** — triggers the import dialog
 *
 * When the user clicks "Browse templates", the picker transitions
 * to show the `TemplateGallery` inline with a back button. Selecting
 * a template emits `onSelect({ kind: "template", data })`.
 *
 * This component is SDK-first with zero Console dependencies. The
 * consumer (e.g. `AgentNewPage`) handles routing, the import dialog,
 * and mounting the wizard.
 *
 * @typeParam TData - The wizard data shape (e.g. `AgentWizardData`).
 *
 * @example
 * ```tsx
 * <CreationPicker
 *   resourceLabel="agent"
 *   templates={AGENT_TEMPLATES}
 *   onSelect={(path) => {
 *     if (path.kind === "scratch") startWizard();
 *     if (path.kind === "template") startWizard(path.data);
 *     if (path.kind === "import") openImportDialog();
 *   }}
 * />
 * ```
 */
export function CreationPicker({ resourceLabel, templates, onSelect, className, }) {
    const [view, setView] = useState("options");
    const handleTemplateSelect = useCallback((template) => {
        onSelect({ kind: "template", data: template.data });
    }, [onSelect]);
    const handleBackToOptions = useCallback(() => {
        setView("options");
    }, []);
    if (view === "gallery") {
        return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: handleBackToOptions, "aria-label": "Back to creation options", className: cn("inline-flex items-center justify-center rounded-md p-1.5", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: _jsx(BackArrowIcon, {}) }), _jsx("h2", { className: "text-base font-semibold text-foreground", children: "Choose a template" })] }), _jsx(TemplateGallery, { templates: templates, onSelect: handleTemplateSelect })] }));
    }
    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-semibold text-foreground", children: ["Create a new ", resourceLabel] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Choose how you'd like to get started." })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [_jsx(OptionCard, { title: "Start from scratch", description: `Create a blank ${resourceLabel} and configure it step by step.`, icon: _jsx(BlankPageIcon, {}), onClick: () => onSelect({ kind: "scratch" }) }), templates.length > 0 && (_jsx(OptionCard, { title: "Browse templates", description: `Start with a pre-built ${resourceLabel} configuration.`, icon: _jsx(GridIcon, {}), onClick: () => setView("gallery"), badge: `${templates.length} available` })), _jsx(OptionCard, { title: "Import from file", description: "Upload a YAML or JSON configuration file.", icon: _jsx(UploadIcon, {}), onClick: () => onSelect({ kind: "import" }) })] })] }));
}
// ---------------------------------------------------------------------------
// Internal components
// ---------------------------------------------------------------------------
function OptionCard({ title, description, icon, onClick, badge, }) {
    return (_jsxs("button", { type: "button", onClick: onClick, className: cn("group flex flex-col items-center gap-3 rounded-lg border border-border bg-card p-6 text-center", "transition-colors hover:border-primary hover:bg-accent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [_jsx("span", { className: "text-muted-foreground transition-colors group-hover:text-foreground", children: icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: title }), _jsx("span", { className: "text-xs text-muted-foreground", children: description })] }), badge && (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: badge }))] }));
}
// ---------------------------------------------------------------------------
// Icons (inline SVGs — no external dependency)
// ---------------------------------------------------------------------------
function BlankPageIcon() {
    return (_jsxs("svg", { className: "size-8", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), _jsx("polyline", { points: "14 2 14 8 20 8" })] }));
}
function GridIcon() {
    return (_jsxs("svg", { className: "size-8", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }), _jsx("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }), _jsx("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }), _jsx("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })] }));
}
function UploadIcon() {
    return (_jsxs("svg", { className: "size-8", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17 8 12 3 7 8" }), _jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })] }));
}
function BackArrowIcon() {
    return (_jsxs("svg", { className: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "m12 19-7-7 7-7" }), _jsx("path", { d: "M19 12H5" })] }));
}
//# sourceMappingURL=CreationPicker.js.map