import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useState, useEffect, useId, useRef } from 'react';
import { Loader2, ArrowLeft, Sparkles, ChevronDown } from 'lucide-react';
import { apiClient } from '../../../lib/api-client';
import { ProviderLogo } from '../../common/ProviderLogo';
export const DefaultsStep = memo(function DefaultsStep({ authStatus, onComplete, onBack, hideHeader = false, }) {
    const [config, setConfig] = useState(null);
    const [allModels, setAllModels] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [isSaving, setIsSaving] = useState(false);
    const [selectedProvider, setSelectedProvider] = useState('setu');
    const [selectedModel, setSelectedModel] = useState('kimi-k2.5');
    const [selectedAgent, setSelectedAgent] = useState(authStatus.defaults.agent || 'build');
    const [selectedApproval, setSelectedApproval] = useState(authStatus.defaults.toolApproval || 'auto');
    const hasUserChangedProvider = useRef(false);
    const providerId = useId();
    const modelId = useId();
    const agentId = useId();
    const approvalId = useId();
    useEffect(() => {
        const loadConfig = async () => {
            try {
                const [configData, modelsData] = await Promise.all([
                    apiClient.getConfig(),
                    apiClient.getAllModels(),
                ]);
                setConfig(configData);
                setAllModels(modelsData);
            }
            catch {
            }
            finally {
                setIsLoading(false);
            }
        };
        loadConfig();
    }, []);
    useEffect(() => {
        if (config?.agents?.length) {
            const agents = config.agents;
            if (!selectedAgent || !agents.includes(selectedAgent)) {
                setSelectedAgent(agents.includes('build') ? 'build' : agents[0]);
            }
        }
    }, [config]);
    useEffect(() => {
        if (allModels?.[selectedProvider] && hasUserChangedProvider.current) {
            const providerModels = allModels[selectedProvider];
            if (!providerModels.models.some((m) => m.id === selectedModel)) {
                setSelectedModel(providerModels.models[0]?.id || '');
            }
        }
    }, [selectedProvider, allModels, selectedModel]);
    const handleFinish = async () => {
        setIsSaving(true);
        try {
            await apiClient.updateDefaults({
                provider: selectedProvider,
                model: selectedModel,
                agent: selectedAgent,
                toolApproval: selectedApproval,
                scope: 'global',
            });
            await onComplete();
        }
        catch {
        }
        finally {
            setIsSaving(false);
        }
    };
    if (isLoading) {
        return (_jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-muted-foreground" }) }));
    }
    const availableProviders = config?.providers.filter((p) => (authStatus.providers[p]?.configured || p === 'setu') &&
        allModels?.[p]?.models?.length > 0) || ['setu'];
    const currentProviderModels = allModels?.[selectedProvider]?.models || [];
    return (_jsxs("div", { className: "min-h-screen flex flex-col", children: [!hideHeader && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ProviderLogo, { provider: "setu", size: 24 }), _jsx("span", { className: "font-semibold text-foreground", children: "AGI" })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500" }), "Step 2 of 2"] })] })), _jsx("div", { className: `flex-1 px-4 sm:px-6 lg:px-12 pb-32 ${hideHeader ? 'pt-8 sm:pt-10 lg:pt-14' : 'pt-6 sm:pt-8 lg:pt-12'}`, children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "mb-10", children: [_jsx("h1", { className: "text-3xl lg:text-4xl font-semibold text-foreground mb-3", children: "Configure Defaults" }), _jsx("p", { className: "text-lg text-muted-foreground", children: "Set your preferences. You can change these anytime in settings." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "md:col-span-2", children: [_jsx("label", { htmlFor: providerId, className: "block text-sm font-medium text-muted-foreground mb-2", children: "Default Provider" }), _jsxs("div", { className: "relative", children: [_jsx("select", { id: providerId, value: selectedProvider, onChange: (e) => {
                                                        hasUserChangedProvider.current = true;
                                                        setSelectedProvider(e.target.value);
                                                    }, className: "w-full px-4 py-3 bg-card border border-border rounded-xl text-foreground appearance-none cursor-pointer focus:outline-none focus:border-ring transition-colors", children: availableProviders.map((p) => (_jsx("option", { value: p, children: authStatus.providers[p]?.label || p }, p))) }), _jsx(ChevronDown, { className: "absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" })] })] }), _jsxs("div", { className: "md:col-span-2", children: [_jsx("label", { htmlFor: modelId, className: "block text-sm font-medium text-muted-foreground mb-2", children: "Default Model" }), _jsxs("div", { className: "relative", children: [_jsx("select", { id: modelId, value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), className: "w-full px-4 py-3 bg-card border border-border rounded-xl text-foreground appearance-none cursor-pointer focus:outline-none focus:border-ring transition-colors", children: currentProviderModels.map((m) => (_jsx("option", { value: m.id, children: m.label || m.id }, m.id))) }), _jsx(ChevronDown, { className: "absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: agentId, className: "block text-sm font-medium text-muted-foreground mb-2", children: "Default Agent" }), _jsxs("div", { className: "relative", children: [_jsx("select", { id: agentId, value: selectedAgent, onChange: (e) => setSelectedAgent(e.target.value), className: "w-full px-4 py-3 bg-card border border-border rounded-xl text-foreground appearance-none cursor-pointer focus:outline-none focus:border-ring transition-colors", children: (config?.agents || ['build']).map((a) => (_jsx("option", { value: a, children: a }, a))) }), _jsx(ChevronDown, { className: "absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: approvalId, className: "block text-sm font-medium text-muted-foreground mb-2", children: "Tool Approval" }), _jsxs("div", { className: "relative", children: [_jsxs("select", { id: approvalId, value: selectedApproval, onChange: (e) => setSelectedApproval(e.target.value), className: "w-full px-4 py-3 bg-card border border-border rounded-xl text-foreground appearance-none cursor-pointer focus:outline-none focus:border-ring transition-colors", children: [_jsx("option", { value: "auto", children: "Auto - run without asking" }), _jsx("option", { value: "dangerous", children: "Dangerous - approve writes only" }), _jsx("option", { value: "all", children: "All - approve every tool" })] }), _jsx(ChevronDown, { className: "absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" })] }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Controls when tool executions need approval" })] })] })] }) }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 px-4 sm:px-6 py-4 border-t border-border bg-background", children: _jsxs("div", { className: "max-w-7xl mx-auto flex items-center justify-between", children: [_jsxs("button", { type: "button", onClick: onBack, className: "flex items-center gap-2 px-4 py-3 text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Back"] }), _jsx("button", { type: "button", onClick: handleFinish, disabled: isSaving, className: "flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors disabled:opacity-50", children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), "Setting up..."] })) : (_jsxs(_Fragment, { children: ["Start Using AGI", _jsx(Sparkles, { className: "w-4 h-4" })] })) })] }) })] }));
});
//# sourceMappingURL=DefaultsStep.js.map