@tinyweb_dev/oe-exam-sdk 0.1.0

package/dist/components/questions/types/look-picture-fill-word-hint/LookPictureFillWordHintCreator.js

@@ -0,0 +1,618 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Pencil, Eye, Lightbulb, ImageIcon, Type, ToggleLeft, BookOpen } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { LookPictureFillWordHintClient } from './LookPictureFillWordHintClient';
+import { Switch } from '../../../../components/ui/switch';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// Helper: Calculate group number for a question index based on groups config
+function getGroupNumberForIndex(questionIndex, groups) {
+    if (!groups || groups.length === 0) {
+        return 1; // Default to group 1 if no groups config
+    }
+    let currentIndex = 0;
+    for (const group of groups) {
+        if (questionIndex < currentIndex + group.questionCount) {
+            return group.number;
+        }
+        currentIndex += group.questionCount;
+    }
+    return groups[groups.length - 1]?.number || 1;
+}
+/**
+ * LookPictureFillWordHintCreator - Single Question Mode
+ *
+ * This component handles ONE question at a time. Navigation between questions
+ * is handled by the parent ExamCreator component.
+ *
+ * API Format (from questionGroup.payload.hintLetters):
+ * - hintLetters: ["a", "e", "i", "o", "u"]
+ */
+function LookPictureFillWordHintContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, externalErrors, groups, questionIndexInPart = 0, partId = '', validationRef, }) {
+    // Access exam question store to find and update shared hintLetters for questions in same group
+    const questionsState = useExamQuestionStore((state) => state.questions);
+    const currentQuestionIndex = useExamQuestionStore((state) => state.currentQuestionIndex);
+    const upsertQuestionData = useExamQuestionStore((state) => state.upsertQuestionData);
+    const getQuestionData = useExamQuestionStore((state) => state.getQuestionData);
+    // New: Use shared hintLetters by partId + groupNumber
+    const setSharedHintLetters = useExamQuestionStore((state) => state.setSharedHintLetters);
+    const getSharedHintLetters = useExamQuestionStore((state) => state.getSharedHintLetters);
+    // Get current question data from store (if exists) - this has priority over initialData
+    // because store contains the latest user input even if not saved yet
+    const getStoredQuestionData = () => {
+        const storedData = getQuestionData(currentQuestionIndex);
+        if (storedData?.answer) {
+            return storedData.answer;
+        }
+        return null;
+    };
+    // Find hintLetters from other questions in the same group (within same part)
+    // This allows sharing hintLetters across questions with same groupNumber
+    const findSharedHintLetters = (targetGroupNumber) => {
+        // Get the part info to find questions in same part
+        // Questions in same part share the same groups config
+        const allQuestions = Object.values(questionsState);
+        for (const entry of allQuestions) {
+            if (!entry?.data?.answer)
+                continue;
+            const answerData = entry.data.answer;
+            // Check if this question has hintLetters and same type
+            if (entry.data.type === 'LOOK_PICTURE_FILL_WORD_HINT') {
+                // Check hintLetters in answer data
+                if (answerData?.hintLetters && Array.isArray(answerData.hintLetters) && answerData.hintLetters.length > 0) {
+                    // Check if same groupNumber
+                    const subQuestion = answerData?.subQuestions?.[0];
+                    if (subQuestion?.groupNumber === targetGroupNumber) {
+                        return answerData.hintLetters;
+                    }
+                }
+            }
+        }
+        return [];
+    };
+    // Create a default sub-question
+    const createDefaultSubQuestion = () => {
+        // Get current question's group number based on position in part
+        const groupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+        return {
+            id: `sq-${Date.now()}-${Math.random()}`,
+            imageUrl: '',
+            word: '',
+            correctAnswer: '',
+            points: 1,
+            groupNumber,
+        };
+    };
+    // Initialize from initialData or create new
+    // Supports both:
+    // 1. New API format: content.imageUrl, content.word, answer.correctAnswer
+    // 2. Legacy format: subQuestions array (for backward compatibility)
+    const initializeData = () => {
+        // Check for new API format first (content has imageUrl and word directly)
+        // This is the format from question-reverse-transform.ts
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        if (content?.imageUrl || content?.word || answer?.correctAnswer) {
+            const pointsFromInitialData = initialData?.points || 1;
+            return {
+                id: `sq-${Date.now()}-imported`,
+                imageUrl: content?.imageUrl || '',
+                word: content?.word || '',
+                correctAnswer: answer?.correctAnswer || '',
+                points: pointsFromInitialData,
+                groupNumber: getGroupNumberForIndex(questionIndexInPart, groups),
+            };
+        }
+        // Legacy format: subQuestions array
+        if (initialData?.subQuestions && initialData.subQuestions.length > 0) {
+            console.log('⚠️ Using legacy format (subQuestions)');
+            const subQuestion = initialData.subQuestions[0];
+            const pointsFromInitialData = initialData?.points || subQuestion.points || 1;
+            return {
+                ...subQuestion,
+                points: pointsFromInitialData,
+                groupNumber: getGroupNumberForIndex(questionIndexInPart, groups),
+            };
+        }
+        return createDefaultSubQuestion();
+    };
+    // State for current question
+    const [currentQuestion, setCurrentQuestion] = useState(initializeData);
+    // Get current group number for initialization
+    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+    // hintLetters: Simple string input for hint letters (comma separated)
+    // API format: hintLetters is an array like ["a", "e", "i", "o", "u"]
+    const [hintLettersInput, setHintLettersInput] = useState(() => {
+        console.log('🔍 [useState init] Initializing hintLettersInput', {
+            partId,
+            initialGroupNum,
+            questionIndexInPart,
+        });
+        // Priority 1: Check shared hintLetters from store (by partId + groupNumber)
+        // This is the most reliable source as it's updated when any question in the group is saved
+        if (partId) {
+            const storedSharedHintLetters = getSharedHintLetters(partId, initialGroupNum);
+            console.log('🔍 [useState init] Store hintLetters:', {
+                key: `${partId}_${initialGroupNum}`,
+                value: storedSharedHintLetters,
+            });
+            if (storedSharedHintLetters && storedSharedHintLetters.length > 0) {
+                console.log('✅ [useState init] Using store hintLetters:', storedSharedHintLetters);
+                return storedSharedHintLetters.join(', ');
+            }
+        }
+        // Priority 2: New format - hintLetters in answer from question-reverse-transform.ts
+        const answerHintLetters = initialData?.answer?.hintLetters;
+        if (answerHintLetters && Array.isArray(answerHintLetters) && answerHintLetters.length > 0) {
+            console.log('✅ [useState init] Using answer.hintLetters:', answerHintLetters);
+            return answerHintLetters.join(', ');
+        }
+        // Priority 3: Handle hintLetters array directly (from API transform via dedicated-component-router)
+        if (initialData?.hintLetters && Array.isArray(initialData.hintLetters) && initialData.hintLetters.length > 0) {
+            console.log('✅ [useState init] Using initialData.hintLetters:', initialData.hintLetters);
+            return initialData.hintLetters.join(', ');
+        }
+        // Priority 4: Legacy - Handle hintLettersByGroup if present
+        if (initialData?.hintLettersByGroup) {
+            const letters = initialData.hintLettersByGroup[initialGroupNum];
+            if (letters && Array.isArray(letters)) {
+                console.log('✅ [useState init] Using hintLettersByGroup:', letters);
+                return letters.join(', ');
+            }
+        }
+        // Priority 5: Try to find shared hintLetters from other questions in same group (legacy fallback)
+        const sharedHintLetters = findSharedHintLetters(initialGroupNum);
+        if (sharedHintLetters.length > 0) {
+            console.log('✅ [useState init] Using findSharedHintLetters:', sharedHintLetters);
+            return sharedHintLetters.join(', ');
+        }
+        console.log('⚠️ [useState init] No hintLetters found, returning empty');
+        return '';
+    });
+    const [caseSensitive, setCaseSensitive] = useState(initialData?.caseSensitive || false);
+    const [explanation, setExplanation] = useState(initialData?.answer?.explanation || initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [addToQuestionBank, setAddToQuestionBank] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    // Inline validation errors
+    const [validationErrors, setValidationErrors] = useState({});
+    // Store the last saved state for comparison
+    const savedStateRef = useRef('');
+    // Track presigned URLs for images
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    // Refs for change tracking
+    const previousInitialDataRef = useRef(initialData);
+    const previousQuestionIndexRef = useRef(questionIndexInPart); // Track question index instead of ID
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false); // Track if component has been initialized
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Current group number
+    const currentGroupNumber = currentQuestion.groupNumber || 1;
+    // Ref for onUnsavedChangesChange callback
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
+    // Update onChange ref
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Helper function to create current state string for comparison
+    const getCurrentStateString = () => {
+        return JSON.stringify({
+            imageUrl: currentQuestion.imageUrl,
+            word: currentQuestion.word,
+            correctAnswer: currentQuestion.correctAnswer,
+            points: currentQuestion.points,
+            hintLetters: getHintLettersArray(),
+            caseSensitive,
+            explanation,
+        });
+    };
+    // Initialize saved state when initialData changes (navigation to new question)
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        // Set initial saved state after a short delay to allow state to settle
+        const timer = setTimeout(() => {
+            savedStateRef.current = getCurrentStateString();
+            setHasUnsavedChanges(false);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [questionIndexInPart]); // Reset when navigating to different question
+    // Detect unsaved changes by comparing current state with saved state
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        if (!savedStateRef.current)
+            return; // Skip if no saved state yet
+        const currentState = getCurrentStateString();
+        const hasChanges = currentState !== savedStateRef.current;
+        if (hasChanges !== hasUnsavedChanges) {
+            setHasUnsavedChanges(hasChanges);
+            onUnsavedChangesChangeRef.current?.(hasChanges);
+        }
+    }, [currentQuestion, hintLettersInput, caseSensitive, explanation, hasUnsavedChanges]);
+    // Debounced onChange callback
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Sync from initialData when:
+    // 1. First initialization with valid data (hasInitializedRef is false and initialData has valid content), OR
+    // 2. User navigated to a different question (questionIndexInPart changed)
+    // This prevents resetting state when parent updates initialData due to onChange callback
+    useEffect(() => {
+        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
+        // Check for valid data in both new format (content/answer) and legacy format (subQuestions)
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const hasNewFormatData = !!(content?.imageUrl || content?.word || answer?.correctAnswer);
+        const hasLegacyFormatData = !!(initialData?.subQuestions && initialData.subQuestions.length > 0);
+        const hasValidInitialData = hasNewFormatData || hasLegacyFormatData;
+        // Only sync if:
+        // 1. First initialization with valid data (and not already initialized), OR
+        // 2. User navigated to a different question (questionIndexInPart changed)
+        // IMPORTANT: Do NOT sync when parent updates initialData due to save/onChange callback
+        // This prevents resetting user input after save
+        const shouldSyncForFirstInit = !hasInitializedRef.current && hasValidInitialData;
+        const shouldSyncForNavigation = questionIndexChanged;
+        // Skip sync if we're already initialized and index didn't change
+        // This prevents the bug where "Đáp án đúng" input is cleared after save
+        if (!shouldSyncForFirstInit && !shouldSyncForNavigation) {
+            return;
+        }
+        if (shouldSyncForFirstInit || shouldSyncForNavigation) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            previousQuestionIndexRef.current = questionIndexInPart;
+            // Mark as initialized - either with valid data or as empty new question
+            // This prevents re-syncing when parent updates initialData after save
+            hasInitializedRef.current = true;
+            if (initialData) {
+                // Get the group number for current question
+                const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+                // Handle NEW API format: content.imageUrl, content.word, answer.correctAnswer
+                if (hasNewFormatData) {
+                    const pointsFromInitialData = initialData?.points || 1;
+                    setCurrentQuestion({
+                        id: `sq-${Date.now()}-synced`,
+                        imageUrl: content?.imageUrl || '',
+                        word: content?.word || '',
+                        correctAnswer: answer?.correctAnswer || '',
+                        points: pointsFromInitialData,
+                        groupNumber: groupNum,
+                    });
+                    // Handle hintLetters from answer (new format)
+                    const answerHintLetters = answer?.hintLetters;
+                    if (answerHintLetters && Array.isArray(answerHintLetters) && answerHintLetters.length > 0) {
+                        setHintLettersInput(answerHintLetters.join(', '));
+                    }
+                    // Handle caseSensitive from answer
+                    if (answer?.caseSensitive !== undefined) {
+                        setCaseSensitive(answer.caseSensitive);
+                    }
+                    // Handle explanation from answer (new format)
+                    if (answer?.explanation !== undefined) {
+                        setExplanation(answer.explanation);
+                    }
+                }
+                // Handle LEGACY format: subQuestions array
+                else if (hasLegacyFormatData) {
+                    console.log('⚠️ [sync effect] Using legacy format (subQuestions)');
+                    const pointsFromInitialData = initialData?.points || initialData.subQuestions[0].points || 1;
+                    setCurrentQuestion({
+                        ...initialData.subQuestions[0],
+                        points: pointsFromInitialData,
+                        groupNumber: groupNum,
+                    });
+                }
+                // Handle hintLetters from various sources (for both formats)
+                // Priority 1: Check shared hintLetters from store (by partId + groupNumber)
+                // This is the most reliable source as it's updated when any question in the group is saved
+                let hintLettersSet = false;
+                if (partId) {
+                    const storedSharedHintLetters = getSharedHintLetters(partId, groupNum);
+                    if (storedSharedHintLetters && storedSharedHintLetters.length > 0) {
+                        setHintLettersInput(storedSharedHintLetters.join(', '));
+                        hintLettersSet = true;
+                    }
+                }
+                // Priority 2: From initialData.hintLetters
+                if (!hintLettersSet && initialData.hintLetters && Array.isArray(initialData.hintLetters) && initialData.hintLetters.length > 0) {
+                    setHintLettersInput(initialData.hintLetters.join(', '));
+                    hintLettersSet = true;
+                }
+                // Priority 3: Legacy - hintLettersByGroup
+                if (!hintLettersSet && initialData.hintLettersByGroup) {
+                    const letters = initialData.hintLettersByGroup[groupNum];
+                    if (letters && Array.isArray(letters)) {
+                        setHintLettersInput(letters.join(', '));
+                        hintLettersSet = true;
+                    }
+                }
+                // Priority 4: Legacy fallback - find shared hintLetters from other questions
+                if (!hintLettersSet && !hasNewFormatData) {
+                    const sharedHintLetters = findSharedHintLetters(groupNum);
+                    if (sharedHintLetters.length > 0) {
+                        setHintLettersInput(sharedHintLetters.join(', '));
+                    }
+                }
+                if (initialData.caseSensitive !== undefined) {
+                    setCaseSensitive(initialData.caseSensitive);
+                }
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData, groups, questionIndexInPart]);
+    const { previewUrl: resolvedImagePreviewUrl } = usePresignedFileUrl(currentQuestion.imageUrl);
+    useEffect(() => {
+        setImagePreviewUrl(resolvedImagePreviewUrl || currentQuestion.imageUrl || '');
+    }, [currentQuestion.imageUrl, resolvedImagePreviewUrl]);
+    // Convert hintLettersInput string to array
+    const getHintLettersArray = () => {
+        return hintLettersInput
+            .split(',')
+            .map((l) => l.trim())
+            .filter((l) => l.length > 0);
+    };
+    // Call onChange when data changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const hintLettersArray = getHintLettersArray();
+        const payload = {
+            subQuestions: [currentQuestion],
+            hintLetters: hintLettersArray,
+            caseSensitive,
+            groups,
+        };
+        // Calculate total points
+        payload.points = currentQuestion.points || 1;
+        // Include explanation in payload
+        payload.explanation = explanation;
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            // IMPORTANT: Save hintLetters to shared store whenever they change
+            // This ensures hintLetters are available for other questions in the same group
+            // even before user clicks "Save" button
+            if (partId && hintLettersArray.length > 0) {
+                console.log('📤 [onChange effect] Saving hintLetters to store:', {
+                    partId,
+                    groupNumber: currentGroupNumber,
+                    hintLettersArray,
+                });
+                setSharedHintLetters(partId, currentGroupNumber, hintLettersArray);
+            }
+            debouncedOnChange(payload);
+        }
+    }, [currentQuestion, hintLettersInput, caseSensitive, explanation, groups, debouncedOnChange, partId, currentGroupNumber, setSharedHintLetters]);
+    // Update current question field
+    const updateCurrentQuestion = (field, value) => {
+        setCurrentQuestion((prev) => ({ ...prev, [field]: value }));
+    };
+    // Format hint letters input on blur
+    const formatHintLettersInput = () => {
+        const letters = getHintLettersArray();
+        if (letters.length > 0) {
+            setHintLettersInput(letters.join(', '));
+        }
+    };
+    // Preview mode
+    const handlePreview = () => {
+        setIsClientMode(true);
+    };
+    // Sync hintLetters to all questions in the same group
+    // This ensures when navigating back/next, all questions in same group show the latest hintLetters
+    const syncHintLettersToSameGroup = (newHintLetters) => {
+        const targetGroupNumber = currentGroupNumber;
+        // Find all questions in same group and update their hintLetters
+        Object.entries(questionsState).forEach(([indexStr, entry]) => {
+            const questionIndex = Number(indexStr);
+            // Skip current question (it will be saved by parent)
+            if (questionIndex === currentQuestionIndex)
+                return;
+            // Check if this question is same type and same group
+            if (!entry?.data)
+                return;
+            if (entry.data.type !== 'LOOK_PICTURE_FILL_WORD_HINT')
+                return;
+            const answerData = entry.data.answer;
+            const subQuestion = answerData?.subQuestions?.[0];
+            // Check if same group number
+            if (subQuestion?.groupNumber !== targetGroupNumber)
+                return;
+            // Update this question's hintLetters in store
+            const updatedAnswer = {
+                ...answerData,
+                hintLetters: newHintLetters,
+            };
+            upsertQuestionData(questionIndex, {
+                ...entry.data,
+                answer: updatedAnswer,
+            });
+        });
+    };
+    // Validate form data - returns errors object and sets inline errors
+    const validateForm = () => {
+        const hintLettersArray = getHintLettersArray();
+        const errors = {};
+        if (hintLettersArray.length === 0) {
+            errors.hintLetters = 'Vui lòng nhập chữ cái gợi ý!';
+        }
+        if (!currentQuestion.imageUrl) {
+            errors.imageUrl = 'Vui lòng upload hình ảnh!';
+        }
+        if (!currentQuestion.word) {
+            errors.word = 'Vui lòng nhập từ có chỗ trống!';
+        }
+        if (!currentQuestion.correctAnswer) {
+            errors.correctAnswer = 'Vui lòng nhập đáp án đúng!';
+        }
+        // Set validation errors for inline display
+        setValidationErrors(errors);
+        if (Object.keys(errors).length > 0) {
+            return { isValid: false };
+        }
+        const saveData = {
+            subQuestions: [currentQuestion],
+            hintLetters: hintLettersArray,
+            caseSensitive,
+            groups,
+        };
+        saveData.points = currentQuestion.points || 1;
+        saveData.explanation = explanation;
+        return { isValid: true, saveData };
+    };
+    // Expose validation function to parent via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const { isValid } = validateForm();
+                    return isValid;
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => {
+                    const hintLettersArray = getHintLettersArray();
+                    return {
+                        subQuestions: [currentQuestion],
+                        hintLetters: hintLettersArray,
+                        caseSensitive,
+                        groups,
+                        points: currentQuestion.points || 1,
+                        explanation,
+                    };
+                },
+            };
+        }
+    }, [validationRef, currentQuestion, hintLettersInput, caseSensitive, explanation, groups]);
+    // Save question only
+    const handleSave = () => {
+        const { isValid, saveData } = validateForm();
+        if (!isValid || !saveData)
+            return;
+        const hintLettersArray = getHintLettersArray();
+        console.log('💾 [handleSave] Saving hintLetters to store:', {
+            partId,
+            currentGroupNumber,
+            hintLettersArray,
+            storeKey: `${partId}_${currentGroupNumber}`,
+        });
+        // Save shared hintLetters to store by partId + groupNumber
+        // This is the primary sync mechanism - simple and reliable
+        if (partId) {
+            setSharedHintLetters(partId, currentGroupNumber, hintLettersArray);
+            console.log('✅ [handleSave] hintLetters saved to store');
+        }
+        else {
+            console.log('⚠️ [handleSave] partId is empty, skipping store save');
+        }
+        // Legacy: Also sync to other questions in same group (for backward compatibility)
+        syncHintLettersToSameGroup(hintLettersArray);
+        // Update saved state to current state (mark as saved)
+        savedStateRef.current = getCurrentStateString();
+        setHasUnsavedChanges(false);
+        onUnsavedChangesChangeRef.current?.(false);
+        onSave?.(saveData);
+    };
+    // Save and add to question bank
+    const handleSaveToQuestionBank = () => {
+        const { isValid, saveData } = validateForm();
+        if (!isValid || !saveData)
+            return;
+        const hintLettersArray = getHintLettersArray();
+        // Save shared hintLetters to store by partId + groupNumber
+        // This is the primary sync mechanism - simple and reliable
+        if (partId) {
+            setSharedHintLetters(partId, currentGroupNumber, hintLettersArray);
+        }
+        // Legacy: Also sync to other questions in same group (for backward compatibility)
+        syncHintLettersToSameGroup(hintLettersArray);
+        // Update saved state to current state (mark as saved)
+        savedStateRef.current = getCurrentStateString();
+        setHasUnsavedChanges(false);
+        onUnsavedChangesChangeRef.current?.(false);
+        onSaveToQuestionBank?.(saveData);
+    };
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            subQuestions: [{
+                    ...currentQuestion,
+                    imageUrl: imagePreviewUrl || currentQuestion.imageUrl,
+                }],
+            hintLetters: getHintLettersArray(),
+            caseSensitive,
+            groups,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nh\u00ECn tranh \u0111i\u1EC1n t\u1EEB g\u1EE3i \u00FD (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(LookPictureFillWordHintClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: true, explanation: explanation, onSubmit: () => { } })] }));
+    }
+    // Get display URL for current question image
+    const rawImageUrl = currentQuestion.imageUrl || '';
+    const isHttpUrl = rawImageUrl.startsWith('http');
+    const displayUrl = imagePreviewUrl || (isHttpUrl ? rawImageUrl : '');
+    const isLoadingImage = rawImageUrl && !isHttpUrl && !imagePreviewUrl;
+    // Preview word with answer
+    const renderWordPreview = () => {
+        if (!currentQuestion.word || !currentQuestion.correctAnswer)
+            return null;
+        const word = currentQuestion.word;
+        const answerStr = currentQuestion.correctAnswer;
+        const answers = answerStr
+            .split(',')
+            .map((a) => a.trim())
+            .filter((a) => a.length > 0);
+        const placeholderRegex = /\{(\d+)\}/g;
+        const matches = word.match(placeholderRegex);
+        const blankCount = matches ? matches.length : 0;
+        let result = word;
+        for (let i = 0; i < Math.min(answers.length, blankCount); i++) {
+            result = result.replace(`{${i}}`, `[${answers[i]}]`);
+        }
+        return (_jsxs("div", { className: "mt-3 rounded-lg border-2 border-blue-200 bg-blue-50 p-2", children: [_jsx("p", { className: "text-blue-800", children: result }), answers.length !== blankCount && (_jsxs("p", { className: "mt-1 text-xs text-amber-600", children: ["\u26A0\uFE0F S\u1ED1 \u0111\u00E1p \u00E1n (", answers.length, ") kh\u00F4ng kh\u1EDBp v\u1EDBi s\u1ED1 ch\u1ED7 tr\u1ED1ng (", blankCount, ")"] }))] }));
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 shadow-md", children: _jsx(ImageIcon, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00ECn tranh \u0111i\u1EC1n t\u1EEB g\u1EE3i \u00FD" }), _jsx("div", { className: "mt-1 inline-flex items-center gap-1.5 rounded-md bg-purple-100 px-2.5 py-1 text-sm font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10", children: _jsxs("span", { children: ["\uD83D\uDCDA Nh\u00F3m ", currentGroupNumber] }) })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePreview, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { id: "points-header", value: currentQuestion.points || 1, onChange: (e) => {
+                                        updateCurrentQuestion('points', Number(e.target.value) || 1);
+                                    } }) }), _jsx("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-purple-600" }) }), _jsxs("div", { className: "text-sm text-purple-900", children: [_jsx("p", { className: "font-semibold text-purple-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-purple-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "Nh\u1EADp c\u00E1c ch\u1EEF c\u00E1i g\u1EE3i \u00FD (ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y)"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800", children: '{0}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800", children: '{1}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "V\u00ED d\u1EE5 t\u1EEB: ", _jsxs("code", { className: "ml-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800 select-all cursor-pointer", title: "Click \u0111\u1EC3 copy", children: ["c", '{0}', '{1}'] }), " v\u1EDBi \u0111\u00E1p \u00E1n ", _jsx("code", { className: "rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800", children: "a, r" })] })] })] })] }) }), _jsxs("div", { className: `rounded-lg border-2 p-4 ${validationErrors.hintLetters ? 'border-red-300 bg-red-50' : 'border-amber-200 bg-amber-50'}`, children: [_jsxs(Label, { htmlFor: "hint-letters", className: validationErrors.hintLetters ? 'text-red-800' : 'text-amber-800', children: ["Ch\u1EEF c\u00E1i g\u1EE3i \u00FD ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "hint-letters", type: "text", value: hintLettersInput, onBlur: formatHintLettersInput, onChange: (e) => {
+                                            setHintLettersInput(e.target.value);
+                                            if (validationErrors.hintLetters) {
+                                                setValidationErrors(prev => ({ ...prev, hintLetters: undefined }));
+                                            }
+                                        }, placeholder: "V\u00ED d\u1EE5: a, e, i, o, u", className: `mt-1 bg-white ${validationErrors.hintLetters ? 'border-red-500 focus:ring-red-500' : ''}` }), validationErrors.hintLetters ? (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.hintLetters })) : (_jsx("p", { className: "mt-1 text-xs text-amber-700", children: "Nh\u1EADp c\u00E1c ch\u1EEF c\u00E1i g\u1EE3i \u00FD, ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y" }))] }), _jsxs("div", { className: "flex items-center justify-between rounded-xl border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(ToggleLeft, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "case-sensitive", className: "font-semibold text-gray-800", children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: "text-sm text-gray-500", children: "B\u1EADt n\u1EBFu \u0111\u00E1p \u00E1n c\u1EA7n ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }), _jsx(Switch, { id: "case-sensitive", checked: caseSensitive, onCheckedChange: setCaseSensitive })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-400 to-indigo-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-blue-100", children: _jsx(Type, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-md bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10", children: ["\uD83D\uDCDA Nh\u00F3m ", currentGroupNumber] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "image", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: currentQuestion.imageUrl || '', onChange: (url) => {
+                                            updateCurrentQuestion('imageUrl', url);
+                                            if (validationErrors.imageUrl) {
+                                                setValidationErrors(prev => ({ ...prev, imageUrl: undefined }));
+                                            }
+                                        }, onPresignedUrlChange: (presignedUrl) => {
+                                            setImagePreviewUrl(presignedUrl);
+                                        }, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), validationErrors.imageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.imageUrl })), isLoadingImage && (_jsx(ImagePreview, { src: displayUrl, alt: "Preview for question", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: "word", children: ["T\u1EEB c\u00F3 ch\u1ED7 tr\u1ED1ng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "word", value: currentQuestion.word || '', onChange: (e) => {
+                                            updateCurrentQuestion('word', e.target.value);
+                                            if (validationErrors.word) {
+                                                setValidationErrors(prev => ({ ...prev, word: undefined }));
+                                            }
+                                        }, placeholder: "V\u00ED d\u1EE5: c{0}r, B{0}{1}k, f{0}o{1}", className: `mt-1 ${validationErrors.word ? 'border-red-500 focus:ring-red-500' : ''}`, maxLength: 50 }), validationErrors.word ? (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.word })) : (_jsxs("div", { className: "mt-1 space-y-1", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["S\u1EED d\u1EE5ng ", '{0}', ", ", '{1}', ", ", '{2}', ",... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng c\u1EA7n \u0111i\u1EC1n"] }), _jsxs("p", { className: "text-xs text-gray-400", children: ["V\u00ED d\u1EE5: ", _jsxs("code", { className: "bg-gray-100 px-1 rounded select-all cursor-pointer", title: "Click \u0111\u1EC3 copy", children: ["c", '{0}', '{1}'] })] })] }))] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: "answer", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answer", value: currentQuestion.correctAnswer || '', onChange: (e) => {
+                                            updateCurrentQuestion('correctAnswer', e.target.value);
+                                            if (validationErrors.correctAnswer) {
+                                                setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
+                                            }
+                                        }, placeholder: "V\u00ED d\u1EE5: a ho\u1EB7c o,o (c\u00E1ch nhau b\u1EB1ng d\u1EA5u ph\u1EA9y)", className: `mt-1 ${validationErrors.correctAnswer ? 'border-red-500 focus:ring-red-500' : ''}` }), validationErrors.correctAnswer ? (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.correctAnswer })) : (_jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Nh\u1EADp c\u00E1c \u0111\u00E1p \u00E1n c\u00E1ch nhau b\u1EB1ng d\u1EA5u ph\u1EA9y. S\u1ED1 \u0111\u00E1p \u00E1n ph\u1EA3i kh\u1EDBp v\u1EDBi s\u1ED1 placeholder" })), renderWordPreview()] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function LookPictureFillWordHintCreator(props) {
+    return _jsx(LookPictureFillWordHintContent, { ...props });
+}
+// Legacy export for backward compatibility
+export const LookPictureFillWordHint = LookPictureFillWordHintCreator;
+//# sourceMappingURL=LookPictureFillWordHintCreator.js.map