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 text-center p-12", children: [_jsx("div", { className: "mb-8 rounded-2xl bg-amber-50 p-6 ring-1 ring-amber-100", children: _jsx(Database, { className: "h-16 w-12 text-amber-600", strokeWidth: 1.5 }) }), _jsx("h2", { className: "text-3xl font-bold text-gray-900 mb-4 tracking-tight", children: "Initialization" }), _jsx("p", { className: "text-gray-500 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: "mb-8 flex items-start gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-left", children: [_jsx(AlertCircle, { className: "h-5 w-5 shrink-0 text-red-600" }), _jsx("p", { className: "text-sm text-red-800", children: error })] })), success ? (_jsxs("div", { className: "flex flex-col items-center gap-3 text-green-600 animate-in fade-in zoom-in duration-500", children: [_jsx("div", { className: "rounded-full bg-green-100 p-3", children: _jsx(CheckCircle, { className: "h-10 w-10", strokeWidth: 2 }) }), _jsx("span", { className: "font-semibold text-lg", children: "System Initialized" })] })) : (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Button, { variant: "ghost", onClick: onBack, disabled: loading, className: "rounded-full h-10 px-6 text-xs font-bold uppercase tracking-widest text-gray-400", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back"] }), _jsx(Button, { onClick: handleCreateSettings, disabled: loading, className: "px-8 h-10 rounded-full shadow-lg shadow-blue-200 transition-all active:scale-95 min-w-[200px] text-xs font-black uppercase tracking-widest bg-blue-600 hover:bg-blue-700 text-white", children: loading ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4 animate-spin" }), "Initializing..."] })) : ("Initialize Now") })] }))] }));
}
//# sourceMappingURL=CreateSettingsStep.js.map