@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

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

@@ -1,617 +1 @@
-'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;
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useRef as n,useEffect as i}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as a}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{Card as c,CardContent as d,CardHeader as h,CardTitle as m}from"../../../../components/ui/card";import{PointsInput as u}from"../../../../components/ui/points-input";import{Pencil as p,Eye as g,Lightbulb as x,ImageIcon as b,Type as f,ToggleLeft as N,BookOpen as w}from"lucide-react";import{FileUpload as v}from"../../../../components/ui/file-upload";import{ImagePreview as y}from"../../../../components/ui/image-preview";import{LookPictureFillWordHintClient as L}from"./LookPictureFillWordHintClient";import{Switch as U}from"../../../../components/ui/switch";import{useDebouncedCallback as A,usePresignedFileUrl as S}from"../../../../shared/lib/hooks";import{useExamQuestionStore as C}from"../../../../shared/lib/stores/examQuestionStore";function j(e,t){if(!t||0===t.length)return 1;let r=0;for(const n of t){if(e<r+n.questionCount)return n.number;r+=n.questionCount}return t[t.length-1]?.number||1}function k({initialData:k,onSave:Q,onSaveToQuestionBank:V,onCancel:I,onChange:q,onUnsavedChangesChange:D,externalErrors:F,groups:H,questionIndexInPart:P=0,partId:B="",validationRef:G}){const $=C(e=>e.questions),O=(C(e=>e.currentQuestionIndex),C(e=>e.upsertQuestionData),C(e=>e.getQuestionData),C(e=>e.setSharedHintLetters)),T=C(e=>e.getSharedHintLetters),W=e=>{const t=Object.values($);for(const r of t){if(!r?.data?.answer)continue;const t=r.data.answer;if("LOOK_PICTURE_FILL_WORD_HINT"===r.data.type&&t?.hintLetters&&Array.isArray(t.hintLetters)&&t.hintLetters.length>0){const r=t?.subQuestions?.[0];if(r?.groupNumber===e)return t.hintLetters}}return[]},[z,R]=r(()=>{const e=k?.content,t=k?.answer;if(e?.imageUrl||e?.word||t?.correctAnswer){const r=k?.points||1;return{id:`sq-${Date.now()}-imported`,imageUrl:e?.imageUrl||"",word:e?.word||"",correctAnswer:t?.correctAnswer||"",points:r,groupNumber:j(P,H)}}if(k?.subQuestions&&k.subQuestions.length>0){console.log("⚠️ Using legacy format (subQuestions)");const e=k.subQuestions[0],t=k?.points||e.points||1;return{...e,points:t,groupNumber:j(P,H)}}return(()=>{const e=j(P,H);return{id:`sq-${Date.now()}-${Math.random()}`,imageUrl:"",word:"",correctAnswer:"",points:1,groupNumber:e}})()}),_=j(P,H),[M,E]=r(()=>{if(console.log("🔍 [useState init] Initializing hintLettersInput",{partId:B,initialGroupNum:_,questionIndexInPart:P}),B){const e=T(B,_);if(console.log("🔍 [useState init] Store hintLetters:",{key:`${B}_${_}`,value:e}),e&&e.length>0)return console.log("✅ [useState init] Using store hintLetters:",e),e.join(", ")}const e=k?.answer?.hintLetters;if(e&&Array.isArray(e)&&e.length>0)return console.log("✅ [useState init] Using answer.hintLetters:",e),e.join(", ");if(k?.hintLetters&&Array.isArray(k.hintLetters)&&k.hintLetters.length>0)return console.log("✅ [useState init] Using initialData.hintLetters:",k.hintLetters),k.hintLetters.join(", ");if(k?.hintLettersByGroup){const e=k.hintLettersByGroup[_];if(e&&Array.isArray(e))return console.log("✅ [useState init] Using hintLettersByGroup:",e),e.join(", ")}const t=W(_);return t.length>0?(console.log("✅ [useState init] Using findSharedHintLetters:",t),t.join(", ")):(console.log("⚠️ [useState init] No hintLetters found, returning empty"),"")}),[J,K]=r(k?.caseSensitive||!1),[X,Y]=r(k?.answer?.explanation||k?.explanation||""),[Z,ee]=r(!1),[te,re]=r(!1),[ne,ie]=r(!1),[se,oe]=r({}),ae=n(""),[le,ce]=r(""),de=n(k),he=n(P),me=n(!1),ue=n(!1),pe=n(q),ge=n(""),xe=z.groupNumber||1,be=n(D);i(()=>{be.current=D},[D]),i(()=>{pe.current=q},[q]);const fe=()=>JSON.stringify({imageUrl:z.imageUrl,word:z.word,correctAnswer:z.correctAnswer,points:z.points,hintLetters:ve(),caseSensitive:J,explanation:X});i(()=>{if(me.current)return;const e=setTimeout(()=>{ae.current=fe(),ie(!1)},150);return()=>clearTimeout(e)},[P]),i(()=>{if(me.current)return;if(!ae.current)return;const e=fe()!==ae.current;e!==ne&&(ie(e),be.current?.(e))},[z,M,J,X,ne]);const Ne=A(e=>{pe.current?.(e)},300);i(()=>{const e=P!==he.current,t=k?.content,r=k?.answer,n=!!(t?.imageUrl||t?.word||r?.correctAnswer),i=!!(k?.subQuestions&&k.subQuestions.length>0),s=n||i,o=!ue.current&&s;if((o||e)&&(o||e)){if(me.current=!0,de.current=k,he.current=P,ue.current=!0,k){const e=j(P,H);if(n){const n=k?.points||1;R({id:`sq-${Date.now()}-synced`,imageUrl:t?.imageUrl||"",word:t?.word||"",correctAnswer:r?.correctAnswer||"",points:n,groupNumber:e});const i=r?.hintLetters;i&&Array.isArray(i)&&i.length>0&&E(i.join(", ")),void 0!==r?.caseSensitive&&K(r.caseSensitive),void 0!==r?.explanation&&Y(r.explanation)}else if(i){console.log("⚠️ [sync effect] Using legacy format (subQuestions)");const t=k?.points||k.subQuestions[0].points||1;R({...k.subQuestions[0],points:t,groupNumber:e})}let s=!1;if(B){const t=T(B,e);t&&t.length>0&&(E(t.join(", ")),s=!0)}if(!s&&k.hintLetters&&Array.isArray(k.hintLetters)&&k.hintLetters.length>0&&(E(k.hintLetters.join(", ")),s=!0),!s&&k.hintLettersByGroup){const t=k.hintLettersByGroup[e];t&&Array.isArray(t)&&(E(t.join(", ")),s=!0)}if(!s&&!n){const t=W(e);t.length>0&&E(t.join(", "))}void 0!==k.caseSensitive&&K(k.caseSensitive)}setTimeout(()=>{me.current=!1},100)}},[k,H,P]);const{previewUrl:we}=S(z.imageUrl);i(()=>{ce(we||z.imageUrl||"")},[z.imageUrl,we]);const ve=()=>M.split(",").map(e=>e.trim()).filter(e=>e.length>0);i(()=>{if(me.current)return;const e=ve(),t={subQuestions:[z],hintLetters:e,caseSensitive:J,groups:H};t.points=z.points||1,t.explanation=X;const r=JSON.stringify(t);ge.current!==r&&(ge.current=r,B&&e.length>0&&(console.log("📤 [onChange effect] Saving hintLetters to store:",{partId:B,groupNumber:xe,hintLettersArray:e}),O(B,xe,e)),Ne(t))},[z,M,J,X,H,Ne,B,xe,O]);const ye=(e,t)=>{R(r=>({...r,[e]:t}))},Le=()=>{const e=ve(),t={};if(0===e.length&&(t.hintLetters="Vui lòng nhập chữ cái gợi ý!"),z.imageUrl||(t.imageUrl="Vui lòng upload hình ảnh!"),z.word||(t.word="Vui lòng nhập từ có chỗ trống!"),z.correctAnswer||(t.correctAnswer="Vui lòng nhập đáp án đúng!"),oe(t),Object.keys(t).length>0)return{isValid:!1};const r={subQuestions:[z],hintLetters:e,caseSensitive:J,groups:H};return r.points=z.points||1,r.explanation=X,{isValid:!0,saveData:r}};i(()=>{G&&(G.current={triggerValidation:async()=>{const{isValid:e}=Le();return e},getFormData:()=>{const e=ve();return{subQuestions:[z],hintLetters:e,caseSensitive:J,groups:H,points:z.points||1,explanation:X}}})},[G,z,M,J,X,H]);if(Z){const r={subQuestions:[{...z,imageUrl:le||z.imageUrl}],hintLetters:ve(),caseSensitive:J,groups:H};return t("div",{className:"space-y-6",children:[e(c,{children:e(h,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(m,{children:"Nhìn tranh điền từ gợi ý (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),t(s,{variant:"outline",size:"sm",onClick:()=>ee(!1),children:[e(p,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(L,{questionData:r,autoFillCorrectAnswers:!0,isReviewMode:!0,explanation:X,onSubmit:()=>{}})]})}const Ue=z.imageUrl||"",Ae=Ue.startsWith("http"),Se=le||(Ae?Ue:""),Ce=Ue&&!Ae&&!le;return t("div",{className:"space-y-6",children:[t(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500"}),e(h,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("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:e(b,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(m,{className:"text-xl font-bold text-gray-900",children:"Nhìn tranh điền từ gợi ý"}),e("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:t("span",{children:["📚 Nhóm ",xe]})})]})]}),t(s,{variant:"outline",size:"sm",onClick:()=>{ee(!0)},className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(g,{className:"h-4 w-4"}),"Xem trước"]})]})}),t(d,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(u,{id:"points-header",value:z.points||1,onChange:e=>{ye("points",Number(e.target.value)||1)}})}),e("div",{className:"rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-5 shadow-sm",children:t("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100",children:e(x,{className:"h-4 w-4 text-purple-600"})}),t("div",{className:"text-sm text-purple-900",children:[e("p",{className:"font-semibold text-purple-800",children:"Hướng dẫn tạo câu hỏi"}),t("ul",{className:"mt-2 space-y-1.5 text-purple-700",children:[t("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Nhập các chữ cái gợi ý (phân cách bằng dấu phẩy)"]}),t("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Sử dụng ",e("code",{className:"mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800",children:"{0}"}),", ",e("code",{className:"mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800",children:"{1}"}),"... để đánh dấu chỗ trống"]}),t("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Ví dụ từ: ",t("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 để copy",children:["c","{0}","{1}"]})," với đáp án ",e("code",{className:"rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800",children:"a, r"})]})]})]})]})}),t("div",{className:"rounded-lg border-2 p-4 "+(se.hintLetters?"border-red-300 bg-red-50":"border-amber-200 bg-amber-50"),children:[t(o,{htmlFor:"hint-letters",className:se.hintLetters?"text-red-800":"text-amber-800",children:["Chữ cái gợi ý ",e("span",{className:"text-red-500",children:"*"})]}),e(a,{id:"hint-letters",type:"text",value:M,onBlur:()=>{const e=ve();e.length>0&&E(e.join(", "))},onChange:e=>{E(e.target.value),se.hintLetters&&oe(e=>({...e,hintLetters:void 0}))},placeholder:"Ví dụ: a, e, i, o, u",className:"mt-1 bg-white "+(se.hintLetters?"border-red-500 focus:ring-red-500":"")}),se.hintLetters?e("p",{className:"mt-1 text-sm text-red-600",children:se.hintLetters}):e("p",{className:"mt-1 text-xs text-amber-700",children:"Nhập các chữ cái gợi ý, phân cách bằng dấu phẩy"})]}),t("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:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(N,{className:"h-4 w-4 text-gray-600"})}),t("div",{className:"space-y-0.5",children:[e(o,{htmlFor:"case-sensitive",className:"font-semibold text-gray-800",children:"Phân biệt hoa/thường"}),e("p",{className:"text-sm text-gray-500",children:"Bật nếu đáp án cần phân biệt chữ hoa/thường"})]})]}),e(U,{id:"case-sensitive",checked:J,onCheckedChange:K})]}),F&&F.length>0&&t("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:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),t("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:F.map((t,r)=>e("li",{children:t},r))})]})]})]})]}),t(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-blue-400 to-indigo-400"}),e(h,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-blue-100",children:e(f,{className:"h-3.5 w-3.5 text-blue-600"})}),e(m,{className:"text-lg font-semibold text-gray-800",children:"Nội dung câu hỏi"}),t("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:["📚 Nhóm ",xe]})]})}),t(d,{className:"space-y-4",children:[t("div",{className:"space-y-2",children:[t(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(b,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh ",e("span",{className:"text-red-500",children:"*"})]}),e(v,{id:"image",label:"Hình ảnh",accept:"image/*",value:z.imageUrl||"",onChange:e=>{ye("imageUrl",e),se.imageUrl&&oe(e=>({...e,imageUrl:void 0}))},onPresignedUrlChange:e=>{ce(e)},maxSize:5,placeholder:"Upload ảnh hoặc paste URL",required:!0,autoUpload:!0,prefix:"questions"}),se.imageUrl&&e("p",{className:"mt-1 text-sm text-red-600",children:se.imageUrl}),Ce&&e(y,{src:Se,alt:"Preview for question",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),t("div",{children:[t(o,{htmlFor:"word",children:["Từ có chỗ trống ",e("span",{className:"text-red-500",children:"*"})]}),e(a,{id:"word",value:z.word||"",onChange:e=>{ye("word",e.target.value),se.word&&oe(e=>({...e,word:void 0}))},placeholder:"Ví dụ: c{0}r, B{0}{1}k, f{0}o{1}",className:"mt-1 "+(se.word?"border-red-500 focus:ring-red-500":""),maxLength:50}),se.word?e("p",{className:"mt-1 text-sm text-red-600",children:se.word}):t("div",{className:"mt-1 space-y-1",children:[t("p",{className:"text-xs text-gray-500",children:["Sử dụng ","{0}",", ","{1}",", ","{2}",",... để đánh dấu chỗ trống cần điền"]}),t("p",{className:"text-xs text-gray-400",children:["Ví dụ: ",t("code",{className:"bg-gray-100 px-1 rounded select-all cursor-pointer",title:"Click để copy",children:["c","{0}","{1}"]})]})]})]}),t("div",{children:[t(o,{htmlFor:"answer",children:["Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),e(a,{id:"answer",value:z.correctAnswer||"",onChange:e=>{ye("correctAnswer",e.target.value),se.correctAnswer&&oe(e=>({...e,correctAnswer:void 0}))},placeholder:"Ví dụ: a hoặc o,o (cách nhau bằng dấu phẩy)",className:"mt-1 "+(se.correctAnswer?"border-red-500 focus:ring-red-500":"")}),se.correctAnswer?e("p",{className:"mt-1 text-sm text-red-600",children:se.correctAnswer}):e("p",{className:"mt-1 text-xs text-gray-500",children:"Nhập các đáp án cách nhau bằng dấu phẩy. Số đáp án phải khớp với số placeholder"}),(()=>{if(!z.word||!z.correctAnswer)return null;const r=z.word,n=z.correctAnswer.split(",").map(e=>e.trim()).filter(e=>e.length>0),i=r.match(/\{(\d+)\}/g),s=i?i.length:0;let o=r;for(let e=0;e<Math.min(n.length,s);e++)o=o.replace(`{${e}}`,`[${n[e]}]`);return t("div",{className:"mt-3 rounded-lg border-2 border-blue-200 bg-blue-50 p-2",children:[e("p",{className:"text-blue-800",children:o}),n.length!==s&&t("p",{className:"mt-1 text-xs text-amber-600",children:["⚠️ Số đáp án (",n.length,") không khớp với số chỗ trống (",s,")"]})]})})()]})]})]}),t(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(h,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("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:e(w,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(m,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("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ông bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(d,{children:e(l,{id:"explanation",value:X,onChange:e=>Y(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",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(t){return e(k,{...t})}export const LookPictureFillWordHint=LookPictureFillWordHintCreator;