import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useCallback } from "react";
import { Button } from "../../../components/ui/button";
import { setupWizardService } from "../../../setup/services/setupWizardService";
import { SetupStepError } from "../SetupStepError";
import { SetupStepBackButton, SetupStepFooter, SetupStepLayout, } from "../SetupStepLayout";
import { Database, RefreshCw, CheckCircle } from "lucide-react";
export function CreateSettingsStep({ onNext, onBack, }) {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(false);
    const handleCreateSettings = useCallback(async () => {
        try {
            setLoading(true);
            setError(null);
            await setupWizardService.createSettingsItem();
            setSuccess(true);
            // Automatically proceed after a short delay
            setTimeout(() => onNext(), 1200);
        }
        catch (e) {
            setError(e?.message || "Failed to create settings item");
        }
        finally {
            setLoading(false);
        }
    }, [onNext]);
    return (_jsxs(SetupStepLayout, { icon: Database, title: "Initialization", description: "Let's create the Parhelia Settings item in your Sitecore system to store your global configuration.", descriptionClassName: "max-w-md leading-relaxed", bodyClassName: "flex flex-col items-center text-center", footer: !success ? (_jsxs(SetupStepFooter, { children: [_jsx(SetupStepBackButton, { onClick: onBack, disabled: loading }), _jsx("div", { className: "flex-1" }), _jsx(Button, { size: "lg", onClick: handleCreateSettings, disabled: loading, className: "min-w-[200px]", children: loading ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4 animate-spin" }), "Initializing..."] })) : ("Initialize Now") })] })) : undefined, children: [error && _jsx(SetupStepError, { className: "mb-8", children: error }), success && (_jsxs("div", { className: "animate-in fade-in zoom-in text-feedback-green flex flex-col items-center gap-3 duration-500", children: [_jsx("div", { className: "bg-feedback-green-light rounded-full p-3", children: _jsx(CheckCircle, { className: "h-10 w-10", strokeWidth: 2 }) }), _jsx("span", { className: "text-lg font-medium", children: "System Initialized" })] }))] }));
}
//# sourceMappingURL=CreateSettingsStep.js.map