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 { Database, RefreshCw, AlertCircle, CheckCircle, ArrowLeft, } 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("div", { className: "flex flex-col items-center p-12 text-center", children: [_jsx("div", { className: "bg-feedback-orange-light ring-feedback-orange mb-8 rounded-2xl p-6 ring-1", children: _jsx(Database, { className: "text-feedback-orange h-16 w-12", strokeWidth: 1.5 }) }), _jsx("h2", { className: "text-neutral-grey-100 mb-4 text-3xl font-bold tracking-tight", children: "Initialization" }), _jsx("p", { className: "text-neutral-grey-50 mb-10 max-w-md leading-relaxed", children: "Let's create the Parhelia Settings item in your Sitecore system to store your global configuration." }), error && (_jsxs("div", { className: "border-feedback-red bg-feedback-red-light mb-8 flex items-start gap-3 rounded-xl border p-4 text-left", children: [_jsx(AlertCircle, { className: "text-feedback-red h-5 w-5 shrink-0" }), _jsx("p", { className: "text-feedback-red text-sm", 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-semibold", children: "System Initialized" })] })) : (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Button, { variant: "ghost", size: "lg", onClick: onBack, disabled: loading, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back"] }), _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") })] }))] }));
}
//# sourceMappingURL=CreateSettingsStep.js.map