@parhelia/page-wizard 0.1.10745

package/dist/steps/TranslateStep.js

@@ -0,0 +1,613 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from "react";
+import { Card, Textarea, ActionButton, LanguageSelector, SimpleRichTextEditor, useEditContext, executePrompt } from "@parhelia/core";
+import { createWizardAiContext } from "../service";
+import { Languages, Upload, Wand2, CheckCircle, AlertCircle, Sparkles, RefreshCw, Edit, Save, X, } from "lucide-react";
+export function TranslateStep({ step, data, setData, setStepCompleted, internalState, setInternalState, parentItem, }) {
+    const editContext = useEditContext();
+    const [translatableFields, setTranslatableFields] = useState({});
+    const [translatedFields, setTranslatedFields] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    const [isTranslating, setIsTranslating] = useState(false);
+    const [isDetectingLanguage, setIsDetectingLanguage] = useState(false);
+    const [translatingFields, setTranslatingFields] = useState(new Set());
+    const [checkingFields, setCheckingFields] = useState(new Set());
+    const [targetLanguage, setTargetLanguage] = useState(data.targetLanguage || null);
+    const [detectedLanguageName, setDetectedLanguageName] = useState(data.detectedLanguageName || "");
+    const [componentNames, setComponentNames] = useState({});
+    const [editingFields, setEditingFields] = useState(new Set());
+    // Get the current item from data (set by previous wizard steps)
+    const currentItem = data.currentItem || parentItem;
+    // Add source language state - initialize from current item's language
+    const [sourceLanguage, setSourceLanguage] = useState(data.sourceLanguage || currentItem?.language || "en");
+    // Get document content from previous wizard step
+    const documentContent = data.document;
+    const [isSaving, setIsSaving] = useState(false);
+    const [saveResults, setSaveResults] = useState({ success: [], errors: [] });
+    const fetchComponentNames = useCallback(async (itemIds, sourceLanguageParam) => {
+        if (!editContext || itemIds.length === 0)
+            return;
+        const names = {};
+        for (const itemId of itemIds) {
+            try {
+                const item = await editContext.itemsRepository.getItem({
+                    id: itemId,
+                    language: sourceLanguageParam,
+                    version: 0,
+                });
+                if (item?.name) {
+                    names[itemId] = item.name;
+                }
+                else {
+                    names[itemId] = itemId; // Fallback to ID if name not found
+                }
+            }
+            catch (error) {
+                console.error(`Error fetching item ${itemId}:`, error);
+                names[itemId] = itemId; // Fallback to ID on error
+            }
+        }
+        setComponentNames(names);
+    }, [editContext]);
+    const fetchTranslatableFields = useCallback(async (sourceLanguageParam) => {
+        if (!currentItem || !editContext)
+            return;
+        setIsLoading(true);
+        try {
+            const response = await fetch("/parhelia/page-wizard/getTranslatableFields", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    id: currentItem.id,
+                    language: sourceLanguageParam,
+                    version: currentItem.version,
+                }),
+            });
+            if (response.ok) {
+                const fieldsData = await response.json();
+                setTranslatableFields(fieldsData);
+                // Initialize translated fields structure
+                const initialTranslatedFields = {};
+                Object.keys(fieldsData).forEach((itemId) => {
+                    if (fieldsData[itemId]) {
+                        initialTranslatedFields[itemId] = fieldsData[itemId].map((field) => ({
+                            fieldId: field.fieldId,
+                            translatedValue: "",
+                            isComplete: undefined,
+                            missingSuggestions: undefined,
+                        }));
+                    }
+                });
+                setTranslatedFields(initialTranslatedFields);
+                // Fetch component names for all item IDs
+                const itemIds = Object.keys(fieldsData);
+                if (itemIds.length > 0) {
+                    fetchComponentNames(itemIds, sourceLanguageParam);
+                }
+            }
+            else {
+                console.error("Failed to fetch translatable fields");
+            }
+        }
+        catch (error) {
+            console.error("Error fetching translatable fields:", error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [currentItem, editContext, fetchComponentNames]);
+    // Track the last source language we fetched for to prevent unnecessary re-fetching
+    const [lastFetchedSourceLanguage, setLastFetchedSourceLanguage] = useState("");
+    // Reset the last fetched source language when the current item changes
+    useEffect(() => {
+        setLastFetchedSourceLanguage("");
+    }, [currentItem]);
+    useEffect(() => {
+        // Only fetch translatable fields if:
+        // 1. We have a source language
+        // 2. It's different from the last one we fetched for
+        // 3. We're not currently saving (to avoid conflicts)
+        // 4. We're not currently loading or translating
+        if (sourceLanguage &&
+            sourceLanguage !== lastFetchedSourceLanguage &&
+            !isSaving &&
+            !isLoading &&
+            !isTranslating) {
+            fetchTranslatableFields(sourceLanguage);
+            setLastFetchedSourceLanguage(sourceLanguage);
+        }
+    }, [
+        fetchTranslatableFields,
+        sourceLanguage,
+        lastFetchedSourceLanguage,
+        isSaving,
+        isLoading,
+        isTranslating,
+    ]);
+    const detectLanguage = async () => {
+        if (!editContext) {
+            console.warn("Edit context not available for language detection");
+            return;
+        }
+        setIsDetectingLanguage(true);
+        try {
+            const prompt = `Analyze the following text and identify the language it is written in. Return only the language name in English (e.g., "Spanish", "French", "German", "Italian", etc.). Do not include any other text or explanation.
+
+Text to analyze:
+${documentContent.substring(0, 1000)}`;
+            const abortController = new AbortController();
+            const result = await executePrompt([
+                {
+                    content: prompt,
+                    role: "user",
+                    name: "user",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined }, { signal: abortController.signal }, (response) => {
+                try {
+                    const content = response.content ||
+                        response.messages?.[response.messages.length - 1]?.content;
+                    if (content) {
+                        const languageName = content.trim();
+                        setDetectedLanguageName(languageName);
+                        // Try to find matching Language object from available languages
+                        const availableLanguages = editContext?.itemLanguages || [];
+                        const matchingLanguage = availableLanguages.find((lang) => lang.name.toLowerCase().includes(languageName.toLowerCase()));
+                        if (matchingLanguage) {
+                            setTargetLanguage(matchingLanguage);
+                        }
+                    }
+                }
+                catch (parseError) {
+                    console.error("Error parsing language detection response:", parseError);
+                }
+            });
+            if (result && result.messages && result.messages.length > 0) {
+                const lastMessage = result.messages[result.messages.length - 1];
+                if (lastMessage && lastMessage.content) {
+                    const languageName = lastMessage.content.trim();
+                    setDetectedLanguageName(languageName);
+                    // Try to find matching Language object from available languages
+                    const availableLanguages = editContext?.itemLanguages || [];
+                    const matchingLanguage = availableLanguages.find((lang) => lang.name.toLowerCase().includes(languageName.toLowerCase()));
+                    if (matchingLanguage) {
+                        setTargetLanguage(matchingLanguage);
+                    }
+                    console.log(`Detected target language: ${languageName}`);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Language detection error:", error);
+        }
+        finally {
+            setIsDetectingLanguage(false);
+        }
+    };
+    // Keep track of the last document content we detected for
+    const [lastDetectedDocument, setLastDetectedDocument] = useState("");
+    // Auto-detect language when document content is available or changes
+    useEffect(() => {
+        if (documentContent &&
+            !isDetectingLanguage &&
+            documentContent !== lastDetectedDocument) {
+            // Reset detected language when document changes, then detect again
+            if (detectedLanguageName && lastDetectedDocument) {
+                setDetectedLanguageName("");
+                setTargetLanguage(null);
+            }
+            setLastDetectedDocument(documentContent);
+            detectLanguage();
+        }
+    }, [documentContent]);
+    const handleTranslate = async () => {
+        if (!targetLanguage?.languageCode) {
+            console.warn("Missing target language");
+            return;
+        }
+        if (!editContext) {
+            console.error("Edit context not available");
+            return;
+        }
+        setIsTranslating(true);
+        try {
+            // Prepare the fields data for the AI prompt
+            const fieldsForTranslation = Object.entries(translatableFields).flatMap(([itemId, fields]) => fields.map((field) => ({
+                itemId,
+                fieldId: field.fieldId,
+                fieldName: field.fieldName,
+                originalValue: field.value,
+            })));
+            const prompt = `You are a translation assistant. You have been given a document in ${targetLanguage.name} and a list of fields that need to be translated from ${sourceLanguage} to ${targetLanguage.name}.
+
+Your task is to:
+1. Match the content from the provided document to the fields that need translation
+2. Return ONLY the translated text from the document - do not change, modify, or create any new text
+3. If you cannot find a suitable translation in the document for a field, leave the translatedValue empty
+
+Document content:
+${documentContent}
+
+Fields to translate:
+${JSON.stringify(fieldsForTranslation, null, 2)}
+
+Return your response as a JSON object in this exact format:
+{
+  "translations": [
+    {
+      "itemId": "item-id",
+      "fieldId": "field-id", 
+      "translatedValue": "exact text from document"
+    }
+  ]
+}`;
+            const abortController = new AbortController();
+            const result = await executePrompt([
+                {
+                    content: prompt,
+                    role: "user",
+                    name: "user",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined, stream: false }, { signal: abortController.signal });
+            if (result && result.messages && result.messages.length > 0) {
+                const lastMessage = result.messages[result.messages.length - 1];
+                if (lastMessage && lastMessage.content) {
+                    try {
+                        const parsedResponse = JSON.parse(lastMessage.content);
+                        const translations = parsedResponse.translations || [];
+                        // Update translated fields with AI response
+                        const updatedTranslatedFields = {
+                            ...translatedFields,
+                        };
+                        translations.forEach((translation) => {
+                            const { itemId, fieldId, translatedValue } = translation;
+                            if (updatedTranslatedFields[itemId]) {
+                                const fieldIndex = updatedTranslatedFields[itemId].findIndex((f) => f.fieldId === fieldId);
+                                if (fieldIndex !== -1 &&
+                                    updatedTranslatedFields[itemId][fieldIndex]) {
+                                    updatedTranslatedFields[itemId][fieldIndex].translatedValue =
+                                        translatedValue || "";
+                                    updatedTranslatedFields[itemId][fieldIndex].missingSuggestions = undefined;
+                                }
+                            }
+                        });
+                        setTranslatedFields(updatedTranslatedFields);
+                        console.log(`Translation complete: ${translations.length} fields translated`);
+                        // Check translation completeness for all translated fields
+                        translations.forEach((translation) => {
+                            const { itemId, fieldId, translatedValue } = translation;
+                            if (translatedValue && translatedValue.trim()) {
+                                const originalField = fieldsForTranslation.find((f) => f.itemId === itemId && f.fieldId === fieldId);
+                                if (originalField) {
+                                    checkTranslationCompleteness(itemId, fieldId, originalField.originalValue, translatedValue, originalField.fieldName);
+                                }
+                            }
+                        });
+                    }
+                    catch (parseError) {
+                        console.error("Failed to parse AI response:", parseError);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error("Translation error:", error);
+        }
+        finally {
+            setIsTranslating(false);
+        }
+    };
+    const handleSingleFieldTranslation = async (itemId, fieldId, field) => {
+        if (!targetLanguage?.languageCode || !editContext) {
+            console.warn("Missing target language or edit context");
+            return;
+        }
+        const fieldKey = `${itemId}-${fieldId}`;
+        setTranslatingFields((prev) => new Set(prev).add(fieldKey));
+        try {
+            // Create a prompt for this specific field
+            const prompt = `You are a translation assistant. You have been given a document in ${targetLanguage.name} and a single field that needs to be translated from ${sourceLanguage} to ${targetLanguage.name}.
+
+Your task is to:
+1. Find content from the provided document that matches this field
+2. Return ONLY the translated text from the document - do not change, modify, or create any new text
+3. If you cannot find a suitable translation in the document for this field, return an empty string
+
+Document content:
+${documentContent}
+
+Field to translate:
+- Field Name: ${field.fieldName}
+- Value (${sourceLanguage}): ${field.value}
+
+Return your response as a JSON object in this exact format:
+{
+  "translatedValue": "exact text from document or empty string if no match found"
+}`;
+            const abortController = new AbortController();
+            const result = await executePrompt([
+                {
+                    content: prompt,
+                    role: "user",
+                    name: "user",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined, stream: false }, { signal: abortController.signal });
+            if (result && result.messages && result.messages.length > 0) {
+                const lastMessage = result.messages[result.messages.length - 1];
+                if (lastMessage && lastMessage.content) {
+                    try {
+                        const parsedResponse = JSON.parse(lastMessage.content);
+                        const translatedValue = parsedResponse.translatedValue || "";
+                        // Update this specific field's translation
+                        setTranslatedFields((prev) => ({
+                            ...prev,
+                            [itemId]: prev[itemId]?.map((f) => f.fieldId === fieldId
+                                ? { ...f, translatedValue, missingSuggestions: undefined }
+                                : f) || [],
+                        }));
+                        console.log(`Single field translation complete for ${field.fieldName}`);
+                        // Check translation completeness after translation
+                        if (translatedValue.trim()) {
+                            checkTranslationCompleteness(itemId, fieldId, field.value, translatedValue, field.fieldName);
+                        }
+                    }
+                    catch (parseError) {
+                        console.error("Failed to parse AI response:", parseError);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error("Single field translation error:", error);
+        }
+        finally {
+            setTranslatingFields((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(fieldKey);
+                return newSet;
+            });
+        }
+    };
+    const checkTranslationCompleteness = async (itemId, fieldId, originalText, translatedText, fieldName) => {
+        if (!editContext || !translatedText.trim()) {
+            return false;
+        }
+        const fieldKey = `${itemId}-${fieldId}`;
+        setCheckingFields((prev) => new Set(prev).add(fieldKey));
+        try {
+            const prompt = `You are a translation quality checker. Your task is to evaluate if a translation is complete and accurate.
+
+Original text (${sourceLanguage}):
+${originalText}
+
+Translated text (${targetLanguage?.name || "target language"}):
+${translatedText}
+
+Field context: ${fieldName}
+
+Is the translation complete (no missing content)? Do not assess the quality of the translation, just if it is complete. Only report missing sentences missing completely.
+ Do not report missing words, phrases, or content that is present in the original text.  We just want to make sure we copied all content from the translation document.
+
+If the translation is incomplete, identify specific content, phrases, or meaning that exists in the original but is missing in the translation, and suggest the exact text that should be added to make the translation complete.
+
+Return your response as a JSON object in this exact format:
+{
+  "isComplete": true/false,
+  "reason": "Brief explanation of your assessment",
+  "missingSuggestions": "If isComplete is false, provide specific suggestions for what needs to be added to complete the translation. Include the actual text that should be added. If isComplete is true, leave this empty."
+}`;
+            const abortController = new AbortController();
+            const result = await executePrompt([
+                {
+                    content: prompt,
+                    role: "user",
+                    name: "user",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined, stream: false }, { signal: abortController.signal });
+            if (result && result.messages && result.messages.length > 0) {
+                const lastMessage = result.messages[result.messages.length - 1];
+                if (lastMessage && lastMessage.content) {
+                    try {
+                        const parsedResponse = JSON.parse(lastMessage.content);
+                        const isComplete = parsedResponse.isComplete || false;
+                        const missingSuggestions = parsedResponse.missingSuggestions || "";
+                        // Update the field's completeness status and missing suggestions
+                        setTranslatedFields((prev) => ({
+                            ...prev,
+                            [itemId]: prev[itemId]?.map((f) => f.fieldId === fieldId
+                                ? {
+                                    ...f,
+                                    isComplete,
+                                    missingSuggestions: isComplete
+                                        ? undefined
+                                        : missingSuggestions,
+                                }
+                                : f) || [],
+                        }));
+                        console.log(`Translation completeness check for ${fieldName}: ${isComplete ? "Complete" : "Incomplete"} - ${parsedResponse.reason}`);
+                        if (!isComplete && missingSuggestions) {
+                            console.log(`Missing content suggestions for ${fieldName}: ${missingSuggestions}`);
+                        }
+                        return isComplete;
+                    }
+                    catch (parseError) {
+                        console.error("Failed to parse completeness check response:", parseError);
+                        return false;
+                    }
+                }
+            }
+            return false;
+        }
+        catch (error) {
+            console.error("Translation completeness check error:", error);
+            return false;
+        }
+        finally {
+            setCheckingFields((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(fieldKey);
+                return newSet;
+            });
+        }
+    };
+    const isRichTextField = (fieldType) => {
+        return (fieldType?.toLowerCase() === "rich text" ||
+            fieldType?.toLowerCase() === "html");
+    };
+    const toggleFieldEdit = (itemId, fieldId) => {
+        const fieldKey = `${itemId}-${fieldId}`;
+        setEditingFields((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(fieldKey)) {
+                newSet.delete(fieldKey);
+            }
+            else {
+                newSet.add(fieldKey);
+            }
+            return newSet;
+        });
+    };
+    const handleFieldChange = (itemId, fieldId, value) => {
+        setTranslatedFields((prev) => ({
+            ...prev,
+            [itemId]: prev[itemId]?.map((field) => field.fieldId === fieldId
+                ? {
+                    ...field,
+                    translatedValue: value,
+                    isComplete: undefined,
+                    missingSuggestions: undefined,
+                }
+                : field) || [],
+        }));
+    };
+    const handleSaveTranslations = async () => {
+        if (!editContext || !currentItem || !targetLanguage?.languageCode) {
+            console.error("Missing required data for saving translations");
+            return;
+        }
+        setIsSaving(true);
+        setSaveResults({ success: [], errors: [] });
+        try {
+            // Get all items that have translations
+            const itemsToTranslate = Object.entries(translatedFields).filter(([itemId, fields]) => fields.some((field) => field.translatedValue.trim() !== ""));
+            console.log(`Saving translations for ${itemsToTranslate.length} items to language: ${targetLanguage.languageCode}`);
+            for (const [itemId, translatedFieldsList] of itemsToTranslate) {
+                try {
+                    // Create ItemDescriptor for the component item
+                    const componentItemDescriptor = {
+                        id: itemId,
+                        language: targetLanguage.languageCode,
+                        version: 0,
+                    };
+                    // Pre-flight version creation removed; server-side or subsequent flows will ensure version existence as needed
+                    // Update field values with translations
+                    const fieldsWithTranslations = translatedFieldsList.filter((field) => field.translatedValue.trim() !== "");
+                    for (const translatedField of fieldsWithTranslations) {
+                        const fieldDescriptor = {
+                            fieldId: translatedField.fieldId,
+                            item: {
+                                id: itemId,
+                                language: targetLanguage.languageCode,
+                                version: 0,
+                            },
+                        };
+                        console.log(`Updating field ${translatedField.fieldId} for item ${itemId}`);
+                        await editContext.operations.editField({
+                            field: fieldDescriptor,
+                            value: translatedField.translatedValue,
+                            rawValue: translatedField.translatedValue,
+                            refresh: "none",
+                        });
+                    }
+                    setSaveResults((prev) => ({
+                        ...prev,
+                        success: [
+                            ...prev.success,
+                            `${itemId} (${fieldsWithTranslations.length} fields)`,
+                        ],
+                    }));
+                }
+                catch (error) {
+                    console.error(`Error translating item ${itemId}:`, error);
+                    setSaveResults((prev) => ({
+                        ...prev,
+                        errors: [
+                            ...prev.errors,
+                            `${itemId}: ${error instanceof Error ? error.message : "Unknown error"}`,
+                        ],
+                    }));
+                }
+            }
+            console.log("Translation saving completed");
+        }
+        catch (error) {
+            console.error("Error during translation saving:", error);
+            setSaveResults((prev) => ({
+                ...prev,
+                errors: [
+                    ...prev.errors,
+                    `General error: ${error instanceof Error ? error.message : "Unknown error"}`,
+                ],
+            }));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    // Check if step is completed (has translations and they've been saved successfully)
+    useEffect(() => {
+        const hasTranslations = Object.values(translatedFields).some((fields) => fields.some((field) => field.translatedValue.trim() !== ""));
+        const hasSuccessfulSave = saveResults.success.length > 0;
+        // Step is completed if we have translations and at least some have been saved successfully
+        setStepCompleted(hasTranslations && hasSuccessfulSave);
+    }, [translatedFields, saveResults, setStepCompleted]);
+    // Save translated fields and save results to wizard data
+    useEffect(() => {
+        setData((prev) => ({
+            ...prev,
+            translatedFields,
+            saveResults,
+            targetLanguage,
+            detectedLanguageName,
+            sourceLanguage,
+        }));
+    }, [
+        translatedFields,
+        saveResults,
+        targetLanguage,
+        detectedLanguageName,
+        sourceLanguage,
+        setData,
+    ]);
+    const totalFields = Object.values(translatableFields).reduce((total, fields) => total + fields.length, 0);
+    const translatedCount = Object.values(translatedFields).reduce((total, fields) => total +
+        fields.filter((field) => field.translatedValue.trim() !== "").length, 0);
+    return (_jsxs("div", { className: "mx-auto flex flex-col gap-6 p-6", children: [_jsxs(Card, { title: "Translation Setup", description: "Select source and target languages, target language will be auto-detected from the document", icon: _jsx(Languages, { className: "h-5 w-5" }), children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-sm font-medium", children: "Source Language" }), _jsx(LanguageSelector, { selectedLanguage: sourceLanguage, onLanguageSelected: (language) => setSourceLanguage(language.languageCode), disabled: false, showAllLanguagesSwitch: false, showAllLanguages: true }), _jsx("p", { className: "mt-1 text-xs text-gray-600", children: "Select the language of the content to translate from" })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "block text-sm font-medium", children: "Target Language" }), isDetectingLanguage && (_jsxs("div", { className: "flex items-center gap-1 text-xs text-blue-600", children: [_jsx(RefreshCw, { className: "h-3 w-3 animate-spin" }), "Detecting..."] })), detectedLanguageName && !isDetectingLanguage && (_jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "Auto-detected"] }))] }), _jsxs("div", { className: "relative", children: [_jsx(LanguageSelector, { selectedLanguage: targetLanguage?.languageCode || "", onLanguageSelected: (language) => setTargetLanguage(language), disabled: false, showAllLanguagesSwitch: false, showAllLanguages: true }), detectedLanguageName && (_jsx("button", { type: "button", onClick: detectLanguage, className: "absolute top-1/2 right-2 -translate-y-1/2 transform text-blue-600 hover:text-blue-800", title: "Re-detect language", children: _jsx(RefreshCw, { className: "h-4 w-4" }) }))] }), detectedLanguageName && (_jsxs("p", { className: "mt-1 text-xs text-green-600", children: ["Detected: ", detectedLanguageName, targetLanguage && ` → Selected: ${targetLanguage.name}`] }))] })] }), _jsxs(ActionButton, { onClick: handleTranslate, isLoading: isTranslating, disabled: !targetLanguage?.languageCode, className: "mt-4", variant: "outline", children: [_jsx(Wand2, { className: "mr-2 h-4 w-4" }), "Translate Fields"] })] }), _jsx(Card, { title: "Translation Progress", description: `${translatedCount} of ${totalFields} fields translated`, icon: _jsx(Upload, { className: "h-5 w-5" }), children: isLoading ? (_jsx("div", { className: "py-8 text-center", children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }), "Loading translatable fields..."] }) })) : isTranslating ? (_jsx("div", { className: "py-8 text-center", children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }), "Translating fields..."] }) })) : isSaving ? (_jsx("div", { className: "py-8 text-center", children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }), "Saving translations..."] }) })) : saveResults.success.length > 0 || saveResults.errors.length > 0 ? (_jsxs("div", { className: "space-y-4", children: [saveResults.success.length > 0 && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 font-medium text-green-800", children: [_jsx(CheckCircle, { className: "h-4 w-4" }), "Successfully Saved (", saveResults.success.length, " items)"] }), _jsx("ul", { className: "list-inside list-disc text-sm text-green-700", children: saveResults.success.map((item, index) => (_jsx("li", { children: item }, index))) })] })), saveResults.errors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 font-medium text-red-800", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), "Errors (", saveResults.errors.length, ")"] }), _jsx("ul", { className: "list-inside list-disc text-sm text-red-700", children: saveResults.errors.map((error, index) => (_jsx("li", { children: error }, index))) })] }))] })) : translatedCount > 0 ? (_jsx("div", { className: "space-y-6", children: Object.entries(translatableFields).map(([itemId, fields]) => (_jsxs("div", { className: "rounded-lg p-4", children: [_jsx("h4", { className: "mb-4 font-medium", children: componentNames[itemId] || "Component" }), _jsx("div", { className: "space-y-4", children: fields.map((field) => {
+                                    const translatedField = translatedFields[itemId]?.find((f) => f.fieldId === field.fieldId);
+                                    return (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("div", { children: _jsxs("label", { className: "block text-xs font-medium", children: [field.fieldName, " (", field.fieldType, ")"] }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "block text-xs font-medium", children: field.fieldName }), translatedField?.translatedValue && (_jsx("div", { className: "flex items-center", children: checkingFields.has(`${itemId}-${field.fieldId}`) ? (_jsx(RefreshCw, { className: "h-3 w-3 animate-spin text-gray-500" })) : translatedField.isComplete === true ? (_jsx("span", { title: "Translation is complete", children: _jsx(CheckCircle, { className: "h-3 w-3 text-green-600" }) })) : translatedField.isComplete === false ? (_jsx("span", { title: "Translation may be incomplete", children: _jsx(AlertCircle, { className: "h-3 w-3 text-red-600" }) })) : (_jsx("div", { className: "h-3 w-3" })) }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [!editingFields.has(`${itemId}-${field.fieldId}`) &&
+                                                                        translatedField?.translatedValue && (_jsxs("button", { type: "button", onClick: () => checkTranslationCompleteness(itemId, field.fieldId, field.value, translatedField.translatedValue, field.fieldName), disabled: checkingFields.has(`${itemId}-${field.fieldId}`) ||
+                                                                            !translatedField.translatedValue.trim(), className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:bg-transparent", title: "Check translation completeness", children: [checkingFields.has(`${itemId}-${field.fieldId}`) ? (_jsx(RefreshCw, { className: "h-3 w-3 animate-spin" })) : (_jsx(CheckCircle, { className: "h-3 w-3" })), "Check"] })), !editingFields.has(`${itemId}-${field.fieldId}`) && (_jsxs("button", { type: "button", onClick: () => handleSingleFieldTranslation(itemId, field.fieldId, field), disabled: !targetLanguage?.languageCode ||
+                                                                            translatingFields.has(`${itemId}-${field.fieldId}`) ||
+                                                                            isTranslating, className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-blue-600 hover:bg-blue-50 hover:text-blue-800 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:bg-transparent", title: "Retranslate this field", children: [translatingFields.has(`${itemId}-${field.fieldId}`) ? (_jsx(RefreshCw, { className: "h-3 w-3 animate-spin" })) : (_jsx(Wand2, { className: "h-3 w-3" })), "Retranslate"] })), editingFields.has(`${itemId}-${field.fieldId}`) ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => toggleFieldEdit(itemId, field.fieldId), className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-green-600 hover:bg-green-50 hover:text-green-800", title: "Save changes", children: [_jsx(Save, { className: "h-3 w-3", strokeWidth: 1 }), "Save"] }), _jsxs("button", { type: "button", onClick: () => toggleFieldEdit(itemId, field.fieldId), className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800", title: "Cancel edit", children: [_jsx(X, { className: "h-3 w-3", strokeWidth: 1 }), "Cancel"] })] })) : (_jsxs("button", { type: "button", onClick: () => toggleFieldEdit(itemId, field.fieldId), className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 hover:text-gray-800", title: "Edit translation", children: [_jsx(Edit, { className: "h-3 w-3", strokeWidth: 1 }), "Edit"] }))] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx("div", { className: "rounded border bg-gray-50 p-1 text-xs", children: isRichTextField(field.fieldType) ? (_jsx("div", { className: "rich-text-content", dangerouslySetInnerHTML: {
+                                                                __html: field.value,
+                                                            } })) : (field.value) }), _jsxs("div", { className: "space-y-2", children: [translatedField?.isComplete === false &&
+                                                                translatedField?.missingSuggestions && (_jsxs("div", { className: "rounded border border-orange-200 bg-orange-50 p-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-medium text-orange-800", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI Suggestions for Missing Content:"] }), _jsx("p", { className: "text-xs text-orange-700 select-text", children: translatedField.missingSuggestions })] })), editingFields.has(`${itemId}-${field.fieldId}`) ? (_jsx("div", { children: isRichTextField(field.fieldType) ? (_jsx(SimpleRichTextEditor, { value: translatedField?.translatedValue || "", onChange: (value) => handleFieldChange(itemId, field.fieldId, value), readOnly: false, placeholder: "Enter translation here...", className: "min-h-[70px] text-xs" })) : (_jsx(Textarea, { value: translatedField?.translatedValue || "", onChange: (e) => handleFieldChange(itemId, field.fieldId, e.target.value), placeholder: "Enter translation here...", rows: 4, className: "h-full min-h-[70px] w-full text-xs" })) })) : (_jsx("div", { className: "h-full min-h-[70px] rounded border bg-gray-50 p-1 text-xs", children: translatedField?.translatedValue ? (isRichTextField(field.fieldType) ? (_jsx("div", { className: "rich-text-content", dangerouslySetInnerHTML: {
+                                                                        __html: translatedField.translatedValue,
+                                                                    } })) : (translatedField.translatedValue)) : (_jsx("span", { className: "text-gray-400", children: "Translation will appear here..." })) }))] })] })] }, field.fieldId));
+                                }) })] }, itemId))) })) : (_jsx("div", { className: "py-8 text-center text-sm text-gray-500", children: Object.keys(translatableFields).length > 0
+                        ? "Click 'Translate Fields' to start the translation process."
+                        : "No translatable fields found." })) }), translatedCount > 0 &&
+                saveResults.success.length === 0 &&
+                saveResults.errors.length === 0 && (_jsx(Card, { title: "Save Translations", description: "Create language versions and apply translations", icon: _jsx(CheckCircle, { className: "h-5 w-5" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx("h4", { className: "mb-2 font-medium text-blue-900", children: "Ready to Save" }), _jsxs("p", { className: "text-sm text-blue-800", children: [translatedCount, " fields ready to be saved to", " ", _jsx("strong", { children: targetLanguage?.name }), " language", detectedLanguageName &&
+                                            targetLanguage?.name
+                                                ?.toLowerCase()
+                                                .includes(detectedLanguageName.toLowerCase()) && (_jsx("span", { className: "text-green-700", children: " (auto-detected)" })), ". This will update translated field values for all selected items."] })] }), _jsxs(ActionButton, { onClick: handleSaveTranslations, isLoading: isSaving, disabled: translatedCount === 0 || !targetLanguage?.languageCode, className: "w-full", variant: "outline", children: [_jsx(CheckCircle, { className: "mr-2 h-4 w-4" }), isSaving
+                                    ? "Saving Translations..."
+                                    : `Save ${translatedCount} Translations to ${targetLanguage?.name || "Target Language"}`] })] }) }))] }));
+}
+//# sourceMappingURL=TranslateStep.js.map