'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useTransition, useRef, useEffect } from 'react';
import { Globe, Check } from 'lucide-react';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
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 { Language } from '../../../../../../packages/core/src/domain/generated/output.js';
const LANGUAGE_OPTIONS = [
    { value: Language.English, label: 'English', nativeName: 'English' },
    { value: Language.Ukrainian, label: 'Українська', nativeName: 'Українська' },
    { value: Language.Russian, label: 'Русский', nativeName: 'Русский' },
    { value: Language.Portuguese, label: 'Português', nativeName: 'Português' },
    { value: Language.Spanish, label: 'Español', nativeName: 'Español' },
    { value: Language.Arabic, label: 'العربية', nativeName: 'العربية' },
    { value: Language.Hebrew, label: 'עברית', nativeName: 'עברית' },
    { value: Language.French, label: 'Français', nativeName: 'Français' },
    { value: Language.German, label: 'Deutsch', nativeName: 'Deutsch' },
];
export function LanguageSettingsSection({ language: initialLanguage, }) {
    const { t, i18n } = useTranslation('web');
    const [language, setLanguage] = useState(initialLanguage);
    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 handleLanguageChange(value) {
        setLanguage(value);
        // Update i18n language immediately for instant UI feedback
        i18n.changeLanguage(value);
        // Update document direction for RTL languages
        const dir = value === 'ar' || value === 'he' ? 'rtl' : 'ltr';
        document.documentElement.lang = value;
        document.documentElement.dir = dir;
        startTransition(async () => {
            const result = await updateSettingsAction({
                user: { preferredLanguage: value },
            });
            if (!result.success) {
                toast.error(result.error ?? t('settings.language.failedToSave', 'Failed to save language settings'));
            }
        });
    }
    return (_jsxs(Card, { id: "language", className: "scroll-mt-6", "data-testid": "language-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(Globe, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: t('settings.language.title') })] }), isPending ? (_jsx("span", { className: "text-muted-foreground text-xs", children: t('common:labels.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" }), t('common:labels.saved')] })) : null] }), _jsx(CardDescription, { children: t('settings.language.description') })] }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "display-language", children: t('settings.language.label') }), _jsxs(Select, { value: language, onValueChange: handleLanguageChange, children: [_jsx(SelectTrigger, { id: "display-language", "data-testid": "language-select", children: _jsx(SelectValue, { placeholder: t('settings.language.placeholder') }) }), _jsx(SelectContent, { children: LANGUAGE_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.nativeName }, opt.value))) })] })] }) })] }));
}
