'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useTransition, useRef, useEffect } from 'react';
import { Terminal, Check } from 'lucide-react';
import { toast } from 'sonner';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
import { Label } from '../../ui/label.js';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
import { updateSettingsAction } from '../../../app/actions/update-settings.js';
import { EditorType, TerminalType } from '../../../../../../packages/core/src/domain/generated/output.js';
const EDITOR_OPTIONS = [
    { value: EditorType.VsCode, label: 'VS Code' },
    { value: EditorType.Cursor, label: 'Cursor' },
    { value: EditorType.Windsurf, label: 'Windsurf' },
    { value: EditorType.Zed, label: 'Zed' },
    { value: EditorType.Antigravity, label: 'Antigravity' },
];
const SHELL_OPTIONS = [
    { value: 'bash', label: 'Bash' },
    { value: 'zsh', label: 'Zsh' },
    { value: 'fish', label: 'Fish' },
];
export function EnvironmentSettingsSection({ environment, availableTerminals, }) {
    const [editor, setEditor] = useState(environment.defaultEditor);
    const [shell, setShell] = useState(environment.shellPreference);
    const [terminal, setTerminal] = useState(environment.terminalPreference ?? TerminalType.System);
    const [isPending, startTransition] = useTransition();
    const [showSaved, setShowSaved] = useState(false);
    const prevPendingRef = useRef(false);
    useEffect(() => {
        if (prevPendingRef.current && !isPending) {
            setShowSaved(true);
            const timer = setTimeout(() => setShowSaved(false), 2000);
            return () => clearTimeout(timer);
        }
        prevPendingRef.current = isPending;
    }, [isPending]);
    function save(payload) {
        startTransition(async () => {
            const result = await updateSettingsAction(payload);
            if (!result.success) {
                toast.error(result.error ?? 'Failed to save IDE & Terminal settings');
            }
        });
    }
    function handleEditorChange(value) {
        setEditor(value);
        save({
            environment: {
                defaultEditor: value,
                shellPreference: shell,
                terminalPreference: terminal,
            },
        });
    }
    function handleShellChange(value) {
        setShell(value);
        save({
            environment: {
                defaultEditor: editor,
                shellPreference: value,
                terminalPreference: terminal,
            },
        });
    }
    function handleTerminalChange(value) {
        setTerminal(value);
        save({
            environment: {
                defaultEditor: editor,
                shellPreference: shell,
                terminalPreference: value,
            },
        });
    }
    // Filter to only show installed terminals
    const terminalOptions = availableTerminals
        ? availableTerminals.filter((t) => t.available)
        : [{ id: TerminalType.System, name: 'System Terminal', available: true }];
    return (_jsxs(Card, { id: "environment", className: "scroll-mt-6", "data-testid": "environment-settings-section", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Terminal, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "IDE & Terminal" })] }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsx(CardDescription, { children: "Configure your default editor, shell, and terminal preferences" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "default-editor", children: "Default Editor" }), _jsxs(Select, { value: editor, onValueChange: handleEditorChange, children: [_jsx(SelectTrigger, { id: "default-editor", "data-testid": "editor-select", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: EDITOR_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "shell-preference", children: "Shell Preference" }), _jsxs(Select, { value: shell, onValueChange: handleShellChange, children: [_jsx(SelectTrigger, { id: "shell-preference", "data-testid": "shell-select", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SHELL_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "terminal-preference", children: "Terminal Emulator" }), _jsxs(Select, { value: terminal, onValueChange: handleTerminalChange, children: [_jsx(SelectTrigger, { id: "terminal-preference", "data-testid": "terminal-select", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: terminalOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, children: opt.name }, opt.id))) })] })] })] })] }));
}
