"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { StepIndicator } from "./StepIndicator";
import { WizardNav } from "./WizardNav";
/**
 * Reusable multi-step wizard layout for resource creation flows.
 *
 * Renders three zones:
 * 1. **Step indicator sidebar** — vertical progress showing all steps
 * 2. **Content area** — the active step's form content (via `children`)
 * 3. **Navigation footer** — Back / Next / Create buttons
 *
 * This component is resource-agnostic. It accepts step definitions for
 * the indicator, delegates content rendering to the consumer, and
 * emits navigation events. The consumer (e.g., `AgentCreationWizard`)
 * manages form state via `useWizardState` and renders the appropriate
 * step component as `children`.
 *
 * Layout:
 * - **Desktop** (>= 640px): Sidebar (200px) + content (flex-1) side by side
 * - **Mobile** (< 640px): Step indicator as compact top bar, content below
 *
 * All visual properties via `--stgm-*` tokens. Zero Console or
 * framework dependencies — works in any React host.
 *
 * @example
 * ```tsx
 * <WizardShell
 *   steps={steps}
 *   currentStepIndex={wizard.currentStepIndex}
 *   submitLabel="Create agent"
 *   isSubmitting={isCreating}
 *   canGoNext={wizard.canGoNext}
 *   canGoBack={wizard.canGoBack}
 *   onNext={wizard.goNext}
 *   onBack={wizard.goBack}
 *   onCancel={handleCancel}
 * >
 *   {renderCurrentStep()}
 * </WizardShell>
 * ```
 */
export function WizardShell({ steps, currentStepIndex, children, submitLabel, isSubmitting, canGoNext = true, canGoBack = false, onNext, onBack, onGoToStep, onCancel, className, }) {
    const isLastStep = currentStepIndex === steps.length - 1;
    const nextLabel = isLastStep ? submitLabel : "Next";
    return (_jsxs("div", { className: cn("flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background", className), children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3 sm:hidden", children: [_jsx(MobileProgress, { current: currentStepIndex + 1, total: steps.length }), _jsx("span", { className: "text-sm font-medium text-foreground", children: steps[currentStepIndex]?.label })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("aside", { className: "hidden w-52 shrink-0 border-r border-border bg-muted-faint px-3 py-6 sm:block", children: _jsx(StepIndicator, { steps: steps, currentStepIndex: currentStepIndex, onStepClick: onGoToStep }) }), _jsx("main", { className: "flex-1 overflow-y-auto px-6 py-6 sm:px-8", children: children })] }), _jsx(WizardNav, { showBack: canGoBack, nextLabel: nextLabel, nextDisabled: !canGoNext, isSubmitting: isSubmitting, onBack: onBack, onNext: onNext, onCancel: onCancel })] }));
}
// ---------------------------------------------------------------------------
// Mobile progress (compact step display)
// ---------------------------------------------------------------------------
function MobileProgress({ current, total, }) {
    return (_jsxs("span", { className: "inline-flex items-center justify-center rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground", children: [current, "/", total] }));
}
//# sourceMappingURL=WizardShell.js.map