@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerCreator.js

@@ -1,238 +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 { RadioGroup } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, ImageIcon, CheckCircle2, Lightbulb, MessageSquare, BookOpen } from 'lucide-react';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { LookPictureFillBlankChooseAnswerClient } from './LookPictureFillBlankChooseAnswerClient';
-import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { lookPictureFillBlankChooseAnswerFormSchema, } from '../../../../shared/lib/validation/look-picture-fill-blank-choose-answer.validation';
-function LookPictureFillBlankChooseAnswerContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, optionCount = 4, validationRef, }) {
-    // Helper to normalize options - ensure they are always string[]
-    const normalizeOptions = (opts, defaultCount) => {
-        if (!opts || opts.length === 0) {
-            return Array.from({ length: defaultCount }, () => '');
-        }
-        // Options should always be string[] - convert each to string for safety
-        return opts.map((opt) => String(opt || ''));
-    };
-    // Use react-hook-form with Zod validation
-    // initialData comes from the router in flat format:
-    // { imageUrl, question, options: ["A", "B", "C"], correctAnswer: 1, explanation, points }
-    const apiData = initialData;
-    const rawOptions = apiData?.options || [];
-    const defaultValues = {
-        imageUrl: apiData?.imageUrl || '',
-        question: apiData?.question || '',
-        options: normalizeOptions(rawOptions, optionCount),
-        correctAnswer: apiData?.correctAnswer ?? -1,
-        explanation: apiData?.explanation || '',
-        points: apiData?.points ?? 1,
-    };
-    const form = useReactHookForm({
-        defaultValues,
-        zodSchema: lookPictureFillBlankChooseAnswerFormSchema,
-        mode: 'onBlur',
-    });
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // Track previous initialData to detect changes
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // Update onChange ref when it changes
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback to prevent excessive re-renders
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Watch form values - MUST be declared before useEffects that use them
-    const watchedImageUrl = form.watch('imageUrl');
-    const watchedQuestion = form.watch('question');
-    const watchedOptions = form.watch('options');
-    const watchedCorrectAnswer = form.watch('correctAnswer');
-    const watchedExplanation = form.watch('explanation');
-    const watchedPoints = form.watch('points');
-    // Custom hooks for presigned URL
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage
-    // No need to track originalSavedData in Creator component
-    // NOTE: Unsaved changes tracking has been REMOVED from Creator component
-    // Status is now managed entirely by ExamCreator via localStorage (exam_question_status_{id})
-    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
-    // Expose validation function and getFormData via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const result = await form.trigger();
-                    // Also check correctAnswer
-                    if (watchedCorrectAnswer === -1) {
-                        form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-                        return false;
-                    }
-                    return result;
-                },
-                // Return current form data immediately (not debounced)
-                // This allows parent to get fresh data at save time
-                getFormData: () => ({
-                    imageUrl: watchedImageUrl,
-                    question: watchedQuestion,
-                    options: watchedOptions,
-                    correctAnswer: watchedCorrectAnswer,
-                    explanation: watchedExplanation,
-                    points: watchedPoints,
-                }),
-            };
-        }
-    }, [validationRef, form, watchedCorrectAnswer, watchedImageUrl, watchedQuestion, watchedOptions, watchedExplanation, watchedPoints]);
-    // Sync state from initialData when it changes from EXTERNAL sources only
-    // initialData comes from the router already in flat format
-    useEffect(() => {
-        const apiData = initialData;
-        const normalizedInitialData = {
-            imageUrl: apiData?.imageUrl || '',
-            question: apiData?.question || '',
-            options: normalizeOptions(apiData?.options || [], optionCount),
-            correctAnswer: apiData?.correctAnswer ?? -1,
-            explanation: apiData?.explanation || '',
-            points: apiData?.points ?? 1,
-        };
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!initialDataChanged) {
-            return;
-        }
-        previousInitialDataRef.current = initialData;
-        const currentFormData = {
-            imageUrl: watchedImageUrl,
-            question: watchedQuestion,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const isEchoFromOnChange = currentFormData.imageUrl === normalizedInitialData.imageUrl &&
-            currentFormData.question === normalizedInitialData.question &&
-            currentFormData.correctAnswer === normalizedInitialData.correctAnswer &&
-            currentFormData.points === normalizedInitialData.points &&
-            currentFormData.explanation === normalizedInitialData.explanation &&
-            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
-        const wasJustSaved = initialData?.isCompleted === true;
-        if (isEchoFromOnChange && wasJustSaved) {
-            return;
-        }
-        const shouldReset = !isEchoFromOnChange &&
-            normalizedInitialData.correctAnswer !== currentFormData.correctAnswer;
-        if (shouldReset && normalizedInitialData.correctAnswer !== -1) {
-            isInitializingRef.current = true;
-            form.reset(normalizedInitialData);
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData, optionCount, form, watchedImageUrl, watchedQuestion, watchedOptions, watchedCorrectAnswer, watchedExplanation, watchedPoints]);
-    // Convert to payload format and call onChange
-    // NOTE: We need to stringify options for proper change detection since array reference doesn't change
-    const watchedOptionsString = JSON.stringify(watchedOptions);
-    useEffect(() => {
-        if (isInitializingRef.current) {
-            const currentPayload = JSON.stringify({
-                imageUrl: watchedImageUrl,
-                question: watchedQuestion,
-                options: watchedOptions,
-                correctAnswer: watchedCorrectAnswer,
-                explanation: watchedExplanation,
-                points: watchedPoints,
-            });
-            previousPayloadRef.current = currentPayload;
-            return;
-        }
-        const payload = {
-            imageUrl: watchedImageUrl,
-            question: watchedQuestion,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [
-        watchedImageUrl,
-        watchedQuestion,
-        watchedOptionsString, // Use stringified version for proper change detection
-        watchedCorrectAnswer,
-        watchedExplanation,
-        watchedPoints,
-    ]);
-    // Handle save with validation
-    const handleSave = form.handleSubmit((data) => {
-        // Additional validation for correctAnswer
-        if (data.correctAnswer === -1 || data.correctAnswer >= data.options.length) {
-            form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-            return;
-        }
-        // NOTE: Save status is now managed by ExamCreator via localStorage
-        onSave?.(data);
-    });
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            imageUrl: displayPreviewUrl || watchedImageUrl,
-            question: watchedQuestion,
-            options: watchedOptions.map((text, index) => ({ id: `opt-${index}`, text })),
-        };
-        return (_jsx("div", { className: "space-y-6", children: _jsxs(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 ch\u1ED7 tr\u1ED1ng (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _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(CardContent, { children: _jsx(LookPictureFillBlankChooseAnswerClient, { questionData: questionData, isReviewMode: true, userAnswer: watchedCorrectAnswer !== -1 ? `opt-${watchedCorrectAnswer}` : undefined, correctAnswer: watchedCorrectAnswer !== -1 ? `opt-${watchedCorrectAnswer}` : undefined, explanation: watchedExplanation }) })] }) }));
-    }
-    // Creator UI
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "space-y-1", 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-blue-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 ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi v\u1EDBi h\u00ECnh \u1EA3nh v\u00E0 c\u00E1c l\u1EF1a ch\u1ECDn \u0111\u00E1p \u00E1n" })] })] }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedQuestion || watchedOptions.filter((o) => typeof o === 'string' && o.trim()).length < 2, 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, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-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-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{0}' }), " \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-blue-400" }), "V\u00ED d\u1EE5: \u201CThe cat is ", '{0}', " the chair.\u201D v\u1EDBi \u0111\u00E1p \u00E1n \u201Cunder\u201D"] })] })] })] }) }), _jsxs("div", { children: [_jsx(FileUpload, { id: "question-image", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: watchedImageUrl, onChange: (url) => {
-                                            form.setValue('imageUrl', url, { shouldValidate: true });
-                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "question", ...form.register('question'), placeholder: "V\u00ED d\u1EE5: The cat is {0} the chair.", rows: 2, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('question') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('question') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('question') })), _jsxs("p", { className: "mt-1 text-xs text-gray-500", children: ["S\u1EED d\u1EE5ng ", '{0}', " \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng"] })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                                        const currentOptions = form.getValues('options');
-                                        form.setValue('options', [...currentOptions, '']);
-                                    }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(RadioGroup, { value: watchedCorrectAnswer.toString(), onValueChange: (value) => {
-                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
-                                }, children: watchedOptions.map((option, index) => {
-                                    const optionError = form.formState.errors.options?.[index];
-                                    const isCorrect = watchedCorrectAnswer === index;
-                                    const optionLetter = String.fromCharCode(65 + index);
-                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
-                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
-                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
-                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] })), isCorrect && option && watchedQuestion.includes('{0}') && (_jsxs("div", { className: "mt-2 rounded-lg border border-blue-200 bg-blue-50/50 px-4 py-3", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-1.5 text-xs font-semibold text-blue-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u ho\u00E0n ch\u1EC9nh"] }), _jsx("div", { className: "text-sm text-gray-700", children: watchedQuestion.split('{0}').map((part, idx, array) => (_jsxs("span", { children: [part, idx < array.length - 1 && (_jsx("span", { className: "mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-semibold text-green-700", children: option }))] }, idx))) })] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                                                                const currentOptions = form.getValues('options');
-                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
-                                                                form.setValue('options', newOptions);
-                                                                // Adjust correctAnswer if needed
-                                                                const currentCorrect = form.getValues('correctAnswer');
-                                                                if (currentCorrect === index) {
-                                                                    form.setValue('correctAnswer', -1);
-                                                                }
-                                                                else if (currentCorrect > index) {
-                                                                    form.setValue('correctAnswer', currentCorrect - 1);
-                                                                }
-                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
-                                }) }), watchedCorrectAnswer === -1 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), form.hasError('correctAnswer') && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('correctAnswer') }) }))] })] }), _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, { ...form.register('explanation'), 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 LookPictureFillBlankChooseAnswerCreator(props) {
-    return _jsx(LookPictureFillBlankChooseAnswerContent, { ...props });
-}
-// Legacy export for backward compatibility
-export const LookPictureFillBlankChooseAnswer = LookPictureFillBlankChooseAnswerCreator;
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,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 m,CardTitle as h}from"../../../../components/ui/card";import{PointsInput as g}from"../../../../components/ui/points-input";import{RadioGroup as p}from"../../../../components/ui/radio-group";import{Pencil as u,Eye as x,Plus as b,Trash2 as f,ImageIcon as N,CheckCircle2 as w,Lightbulb as v,MessageSquare as y,BookOpen as A}from"lucide-react";import{FileUpload as C}from"../../../../components/ui/file-upload";import{ImagePreview as k}from"../../../../components/ui/image-preview";import{usePresignedFileUrl as V,useDebouncedCallback as q}from"../../../../shared/lib/hooks";import{LookPictureFillBlankChooseAnswerClient as U}from"./LookPictureFillBlankChooseAnswerClient";import{useReactHookForm as S}from"../../../../shared/lib/hooks/useReactHookForm";import{lookPictureFillBlankChooseAnswerFormSchema as j}from"../../../../shared/lib/validation/look-picture-fill-blank-choose-answer.validation";function E({initialData:E,onSave:F,onCancel:z,onChange:J,onUnsavedChangesChange:O,optionCount:P=4,validationRef:$}){const B=(e,r)=>e&&0!==e.length?e.map(e=>String(e||"")):Array.from({length:r},()=>""),L=E,T=L?.options||[],D={imageUrl:L?.imageUrl||"",question:L?.question||"",options:B(T,P),correctAnswer:L?.correctAnswer??-1,explanation:L?.explanation||"",points:L?.points??1},H=S({defaultValues:D,zodSchema:j,mode:"onBlur"}),[R,G]=t(!1),[M,X]=t(""),K=n(E),Q=n(!1),I=n(J),W=n("");i(()=>{I.current=J},[J]);const Y=q(e=>{I.current?.(e)},300),Z=H.watch("imageUrl"),_=H.watch("question"),ee=H.watch("options"),re=H.watch("correctAnswer"),te=H.watch("explanation"),ne=H.watch("points"),{previewUrl:ie}=V(Z),se=M||ie||"";i(()=>{$&&($.current={triggerValidation:async()=>{const e=await H.trigger();return-1===re?(H.setError("correctAnswer",{message:"Vui lòng chọn đáp án đúng!"}),!1):e},getFormData:()=>({imageUrl:Z,question:_,options:ee,correctAnswer:re,explanation:te,points:ne})})},[$,H,re,Z,_,ee,te,ne]),i(()=>{const e=E,r={imageUrl:e?.imageUrl||"",question:e?.question||"",options:B(e?.options||[],P),correctAnswer:e?.correctAnswer??-1,explanation:e?.explanation||"",points:e?.points??1};if(!(JSON.stringify(K.current)!==JSON.stringify(E)))return;K.current=E;const t={imageUrl:Z,question:_,options:ee,correctAnswer:re,explanation:te,points:ne},n=t.imageUrl===r.imageUrl&&t.question===r.question&&t.correctAnswer===r.correctAnswer&&t.points===r.points&&t.explanation===r.explanation&&JSON.stringify(t.options)===JSON.stringify(r.options);if(n&&!0===E?.isCompleted)return;!n&&r.correctAnswer!==t.correctAnswer&&-1!==r.correctAnswer&&(Q.current=!0,H.reset(r),setTimeout(()=>{Q.current=!1},150))},[E,P,H,Z,_,ee,re,te,ne]);const oe=JSON.stringify(ee);i(()=>{if(Q.current){const e=JSON.stringify({imageUrl:Z,question:_,options:ee,correctAnswer:re,explanation:te,points:ne});return void(W.current=e)}const e={imageUrl:Z,question:_,options:ee,correctAnswer:re,explanation:te,points:ne},r=JSON.stringify(e);W.current!==r&&(W.current=r,Y(e))},[Z,_,oe,re,te,ne]);H.handleSubmit(e=>{-1===e.correctAnswer||e.correctAnswer>=e.options.length?H.setError("correctAnswer",{message:"Vui lòng chọn đáp án đúng!"}):F?.(e)});if(R){const t={imageUrl:se||Z,question:_,options:ee.map((e,r)=>({id:`opt-${r}`,text:e}))};return e("div",{className:"space-y-6",children:r(c,{children:[e(m,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Nhìn tranh, điền chỗ trống (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(s,{variant:"outline",size:"sm",onClick:()=>G(!1),children:[e(u,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})}),e(d,{children:e(U,{questionData:t,isReviewMode:!0,userAnswer:-1!==re?`opt-${re}`:void 0,correctAnswer:-1!==re?`opt-${re}`:void 0,explanation:te})})]})})}return r("div",{className:"space-y-6",children:[r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[e("div",{className:"space-y-1",children:r("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-blue-500 to-indigo-600 shadow-md",children:e(N,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(h,{className:"text-xl font-bold text-gray-900",children:"Nhìn tranh, điền chỗ trống"}),e("p",{className:"text-sm text-gray-500",children:"Tạo câu hỏi với hình ảnh và các lựa chọn đáp án"})]})]})}),r(s,{variant:"outline",size:"sm",onClick:()=>G(!0),disabled:!_||ee.filter(e=>"string"==typeof e&&e.trim()).length<2,className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(x,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(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(g,{...H.register("points",{valueAsNumber:!0}),error:H.hasError("points")?H.getFieldError("points"):void 0})}),e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm",children:r("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-blue-100",children:e(v,{className:"h-4 w-4 text-blue-600"})}),r("div",{className:"text-sm text-blue-900",children:[e("p",{className:"font-semibold text-blue-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-blue-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Sử dụng ",e("code",{className:"mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800",children:"{0}"})," để đánh dấu chỗ trống"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Ví dụ: “The cat is ","{0}"," the chair.” với đáp án “under”"]})]})]})]})}),r("div",{children:[e(C,{id:"question-image",label:"Hình ảnh",accept:"image/*",value:Z,onChange:e=>{H.setValue("imageUrl",e,{shouldValidate:!0})},onPresignedUrlChange:X,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",required:!0,autoUpload:!0,prefix:"questions"}),H.hasError("imageUrl")&&e("p",{className:"mt-1 text-sm text-red-600",children:H.getFieldError("imageUrl")}),se&&e(k,{src:se,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),r("div",{className:"space-y-2",children:[r(o,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-indigo-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(l,{id:"question",...H.register("question"),placeholder:"Ví dụ: The cat is {0} the chair.",rows:2,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(H.hasError("question")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),H.hasError("question")&&e("p",{className:"mt-1 text-sm text-red-600",children:H.getFieldError("question")}),r("p",{className:"mt-1 text-xs text-gray-500",children:["Sử dụng ","{0}"," để đánh dấu chỗ trống"]})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-400"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(v,{className:"h-3.5 w-3.5 text-indigo-600"})}),r(h,{className:"text-lg font-semibold text-gray-800",children:["Các lựa chọn ",r("span",{className:"text-sm font-normal text-gray-500",children:["(",ee.length," đáp án)"]})]})]}),r(s,{variant:"outline",size:"sm",onClick:()=>{const e=H.getValues("options");H.setValue("options",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(d,{className:"space-y-4",children:[e(p,{value:re.toString(),onValueChange:e=>{H.setValue("correctAnswer",Number(e),{shouldValidate:!0})},children:ee.map((t,n)=>{const i=H.formState.errors.options?.[n],o=re===n,l=String.fromCharCode(65+n);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(o?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(o?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"),onClick:()=>H.setValue("correctAnswer",n,{shouldValidate:!0}),children:l}),r("div",{className:"flex-1 space-y-2",children:[e(a,{id:`option-input-${n}`,...H.register(`options.${n}`),placeholder:`Nhập đáp án ${l}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(i?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),i&&e("p",{className:"text-sm text-red-600",children:i.message}),o&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(w,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]}),o&&t&&_.includes("{0}")&&r("div",{className:"mt-2 rounded-lg border border-blue-200 bg-blue-50/50 px-4 py-3",children:[r("div",{className:"mb-1.5 flex items-center gap-1.5 text-xs font-semibold text-blue-600",children:[e(x,{className:"h-3.5 w-3.5"}),"Xem trước câu hoàn chỉnh"]}),e("div",{className:"text-sm text-gray-700",children:_.split("{0}").map((n,i,s)=>r("span",{children:[n,i<s.length-1&&e("span",{className:"mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-semibold text-green-700",children:t})]},i))})]})]}),r("div",{className:"flex items-center gap-2",children:[!o&&e(s,{type:"button",variant:"ghost",size:"sm",onClick:()=>H.setValue("correctAnswer",n,{shouldValidate:!0}),className:"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(w,{className:"h-4 w-4"})}),ee.length>2&&e(s,{variant:"ghost",size:"sm",onClick:()=>{const e=H.getValues("options").filter((e,r)=>r!==n);H.setValue("options",e);const r=H.getValues("correctAnswer");r===n?H.setValue("correctAnswer",-1):r>n&&H.setValue("correctAnswer",r-1)},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(f,{className:"h-4 w-4"})})]})]})},n)})}),-1===re&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),r("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:"Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng"})]})]}),H.hasError("correctAnswer")&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:H.getFieldError("correctAnswer")})})]})]}),r(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(m,{className:"pb-4",children:r("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(A,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{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,{...H.register("explanation"),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 LookPictureFillBlankChooseAnswerCreator(r){return e(E,{...r})}export const LookPictureFillBlankChooseAnswer=LookPictureFillBlankChooseAnswerCreator;

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/index.js

@@ -1,2 +1 @@
-export * from './LookPictureFillBlankChooseAnswerCreator';
-export * from './LookPictureFillBlankChooseAnswerClient';
+export*from"./LookPictureFillBlankChooseAnswerCreator";export*from"./LookPictureFillBlankChooseAnswerClient";

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/register.js

@@ -1,76 +1 @@
-import { LookPictureFillBlankChooseAnswer } from './LookPictureFillBlankChooseAnswerCreator';
-export const lookPictureFillBlankChooseAnswerRegistration = {
-    component: LookPictureFillBlankChooseAnswer,
-    transformInitialData: (initialData) => {
-        let creatorData = undefined;
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const apiPoints = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || answer?.points || 1);
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        const normalizeOptions = (opts) => {
-            if (!Array.isArray(opts) || opts.length === 0)
-                return [];
-            return opts.map((opt) => String(opt || ''));
-        };
-        const extractCorrectAnswer = () => {
-            if (typeof answer?.correctAnswer === 'number')
-                return answer.correctAnswer;
-            if (typeof initialData?.correctAnswer === 'object' && initialData?.correctAnswer?.answer !== undefined)
-                return initialData.correctAnswer.answer;
-            if (typeof initialData?.correct_answer?.answer === 'number')
-                return initialData.correct_answer.answer;
-            if (typeof answer?.answer === 'number')
-                return answer.answer;
-            return -1;
-        };
-        // Priority 1: Data from store
-        const hasStoreData = answer?.imageUrl !== undefined || answer?.question !== undefined || answer?.options;
-        if (hasStoreData) {
-            creatorData = {
-                imageUrl: answer.imageUrl || '',
-                question: answer.question || '',
-                options: normalizeOptions(answer.options || []),
-                correctAnswer: extractCorrectAnswer(),
-                explanation,
-                points: answer.points || apiPoints,
-            };
-        }
-        // Priority 2: Raw API content format
-        else if (content && (content.imageUrl !== undefined || content.question !== undefined || content.options)) {
-            creatorData = {
-                imageUrl: content.imageUrl || '',
-                question: content.question || '',
-                options: normalizeOptions(content.options || []),
-                correctAnswer: extractCorrectAnswer(),
-                explanation,
-                points: apiPoints,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        optionCount: ctx.optionCount ?? undefined,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-};
+import{LookPictureFillBlankChooseAnswer as t}from"./LookPictureFillBlankChooseAnswerCreator";export const lookPictureFillBlankChooseAnswerRegistration={component:t,transformInitialData:t=>{let e;const n=t?.content,o=t?.answer,s=t?.total_points?parseFloat(t.total_points):t?.points||o?.points||1,i=t?.explanation||o?.explanation||"",r=t=>Array.isArray(t)&&0!==t.length?t.map(t=>String(t||"")):[],a=()=>"number"==typeof o?.correctAnswer?o.correctAnswer:"object"==typeof t?.correctAnswer&&void 0!==t?.correctAnswer?.answer?t.correctAnswer.answer:"number"==typeof t?.correct_answer?.answer?t.correct_answer.answer:"number"==typeof o?.answer?o.answer:-1;return void 0!==o?.imageUrl||void 0!==o?.question||o?.options?e={imageUrl:o.imageUrl||"",question:o.question||"",options:r(o.options||[]),correctAnswer:a(),explanation:i,points:o.points||s}:n&&(void 0!==n.imageUrl||void 0!==n.question||n.options)&&(e={imageUrl:n.imageUrl||"",question:n.question||"",options:r(n.options||[]),correctAnswer:a(),explanation:i,points:s}),e},getExtraProps:t=>({optionCount:t.optionCount??void 0,onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t})};

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/transform.js

@@ -1,19 +1 @@
-// LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER - single question format (same as ChooseTheCorrectAnswer but with image)
-// API format: content { imageUrl, question, options: string[] }, correct_answer { answer: number }
-export const transformLookPictureFillBlankChooseAnswer = (question) => {
-    const answerData = question.answer;
-    if (answerData?.imageUrl !== undefined || answerData?.question !== undefined || answerData?.options) {
-        const apiContent = {
-            imageUrl: answerData.imageUrl || '',
-            question: answerData.question || '',
-            options: answerData.options || [],
-        };
-        return {
-            apiContent,
-            apiCorrectAnswer: {
-                answer: answerData.correctAnswer ?? -1,
-            },
-        };
-    }
-    return { apiContent: {}, apiCorrectAnswer: {} };
-};
+export const transformLookPictureFillBlankChooseAnswer=o=>{const r=o.answer;if(void 0!==r?.imageUrl||void 0!==r?.question||r?.options){return{apiContent:{imageUrl:r.imageUrl||"",question:r.question||"",options:r.options||[]},apiCorrectAnswer:{answer:r.correctAnswer??-1}}}return{apiContent:{},apiCorrectAnswer:{}}};

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

@@ -1,134 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { cn } from '../../../../shared/lib/utils';
-import { Input } from '../../../../components/ui/input';
-import { Check, X, Lightbulb, Pencil } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-export function LookPictureFillWordHintClient({ questionData, userAnswer = {}, isReviewMode = false, autoFillCorrectAnswers = false, explanation, onSubmit, }) {
-    // Build correct answers map
-    const correctAnswersMap = useMemo(() => {
-        return questionData.subQuestions.reduce((acc, sq) => {
-            acc[sq.id] = sq.correctAnswer;
-            return acc;
-        }, {});
-    }, [questionData.subQuestions]);
-    const initialAnswers = autoFillCorrectAnswers ? correctAnswersMap : (userAnswer || {});
-    const [answers, setAnswers] = useState(initialAnswers);
-    useEffect(() => {
-        if (autoFillCorrectAnswers) {
-            setAnswers(correctAnswersMap);
-        }
-        else if (userAnswer) {
-            setAnswers(userAnswer);
-        }
-    }, [userAnswer, autoFillCorrectAnswers, correctAnswersMap]);
-    const handleAnswerChange = (subQuestionId, blankIndex, value) => {
-        if (isReviewMode)
-            return;
-        const currentAnswer = answers[subQuestionId] || '';
-        const currentParts = currentAnswer.split(',').map(a => a.trim());
-        const subQuestion = questionData.subQuestions.find(sq => sq.id === subQuestionId);
-        if (!subQuestion)
-            return;
-        const matches = subQuestion.word.match(/\{(\d+)\}/g);
-        const blankCount = matches ? matches.length : 0;
-        while (currentParts.length < blankCount) {
-            currentParts.push('');
-        }
-        currentParts[blankIndex] = value.replace(/[^a-zA-Z]/g, '');
-        const newAnswers = { ...answers, [subQuestionId]: currentParts.join(',') };
-        setAnswers(newAnswers);
-        onSubmit?.(newAnswers);
-    };
-    const hintLetters = questionData.hintLetters || [];
-    const isSingleQuestion = questionData.subQuestions.length === 1;
-    // For single question, use the card layout similar to LookPictureFillBlankChooseAnswer
-    if (isSingleQuestion) {
-        const subQuestion = questionData.subQuestions[0];
-        const userAnswerValue = answers[subQuestion.id] || '';
-        return (_jsx(SingleQuestionLayout, { subQuestion: subQuestion, userAnswerValue: userAnswerValue, isReviewMode: isReviewMode, hintLetters: hintLetters, explanation: explanation, onAnswerChange: (blankIdx, value) => handleAnswerChange(subQuestion.id, blankIdx, value) }));
-    }
-    // Multiple questions - grid layout
-    return (_jsxs("div", { className: "space-y-4", children: [hintLetters.length > 0 && (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3", children: [_jsx(Lightbulb, { className: "h-5 w-5 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium text-amber-700", children: "G\u1EE3i \u00FD:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: hintLetters.map((letter, i) => (_jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-amber-300 bg-white text-sm font-bold text-amber-700", children: letter.toUpperCase() }, i))) })] })), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: questionData.subQuestions.map((subQuestion, index) => (_jsx(MultiQuestionCard, { subQuestion: subQuestion, index: index, userAnswerValue: answers[subQuestion.id] || '', isReviewMode: isReviewMode, onAnswerChange: (blankIdx, value) => handleAnswerChange(subQuestion.id, blankIdx, value) }, subQuestion.id))) })] }));
-}
-// Parse word into segments
-function parseWord(word, answerParts, correctParts, isReviewMode) {
-    const segments = [];
-    let lastIdx = 0;
-    const regex = /\{(\d+)\}/g;
-    let match;
-    while ((match = regex.exec(word)) !== null) {
-        if (match.index > lastIdx) {
-            segments.push({ type: 'text', value: word.substring(lastIdx, match.index) });
-        }
-        const blankIdx = parseInt(match[1], 10);
-        const userVal = answerParts[blankIdx] || '';
-        const correctVal = correctParts[blankIdx] || '';
-        const isCorrect = userVal.toLowerCase() === correctVal.toLowerCase();
-        segments.push({
-            type: 'blank',
-            value: userVal,
-            index: blankIdx,
-            isCorrect: isReviewMode ? isCorrect : undefined,
-            correctValue: correctVal,
-        });
-        lastIdx = match.index + match[0].length;
-    }
-    if (lastIdx < word.length) {
-        segments.push({ type: 'text', value: word.substring(lastIdx) });
-    }
-    return segments;
-}
-// Single question layout - similar to LookPictureFillBlankChooseAnswer
-function SingleQuestionLayout({ subQuestion, userAnswerValue, isReviewMode, hintLetters, explanation, onAnswerChange, }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(subQuestion.imageUrl);
-    const correctAnswer = subQuestion.correctAnswer.trim();
-    const matches = subQuestion.word.match(/\{(\d+)\}/g);
-    const blankCount = matches ? matches.length : 0;
-    const userParts = userAnswerValue.split(',').map(a => a.trim());
-    const correctParts = correctAnswer.split(',').map(a => a.trim());
-    const isComplete = userParts.filter(p => p.length > 0).length === blankCount;
-    const isAllCorrect = isReviewMode && isComplete && userAnswerValue.trim().toLowerCase() === correctAnswer.toLowerCase();
-    const isWrong = isReviewMode && isComplete && !isAllCorrect;
-    const hasAnswered = userParts.some(p => p.length > 0);
-    const segments = parseWord(subQuestion.word, userParts, correctParts, isReviewMode);
-    const imageSrc = previewUrl || (subQuestion.imageUrl?.startsWith('http') ? subQuestion.imageUrl : null);
-    // Build complete word for preview
-    const renderWordWithAnswer = (parts) => {
-        let result = subQuestion.word;
-        for (let i = 0; i < parts.length; i++) {
-            result = result.replace(`{${i}}`, parts[i]?.toUpperCase() || '?');
-        }
-        return result;
-    };
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", 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-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, \u0111i\u1EC1n ch\u1EEF c\u00E1i c\u00F2n thi\u1EBFu" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : isWrong ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'), children: [isAllCorrect && _jsx(Check, { className: "h-3.5 w-3.5" }), isWrong && _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : isWrong ? 'Sai' : 'Chưa hoàn thành'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imageSrc || subQuestion.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imageSrc || subQuestion.imageUrl, alt: "Question", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
-                                        e.target.src = '/images/placeholder-image.svg';
-                                    } })) })] })), hintLetters.length > 0 && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3", children: [_jsx(Lightbulb, { className: "h-5 w-5 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium text-amber-700", children: "G\u1EE3i \u00FD ch\u1EEF c\u00E1i:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: hintLetters.map((letter, i) => (_jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-lg border-2 border-amber-300 bg-white text-sm font-bold text-amber-700 shadow-sm", children: letter.toUpperCase() }, i))) })] })), _jsx("div", { className: "rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-teal-100 text-teal-600", children: _jsx("span", { className: "text-xs font-bold", children: "?" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110i\u1EC1n ch\u1EEF c\u00E1i c\u00F2n thi\u1EBFu" }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-1", children: segments.map((seg, i) => {
-                                                if (seg.type === 'text') {
-                                                    return (_jsx("span", { className: "text-2xl font-bold text-gray-800 font-mono tracking-wide", children: seg.value }, i));
-                                                }
-                                                // Blank input
-                                                return (_jsxs("div", { className: "relative inline-flex flex-col items-center mx-0.5", children: [_jsx(Input, { type: "text", value: seg.value.toUpperCase(), onChange: (e) => onAnswerChange(seg.index, e.target.value), disabled: isReviewMode, maxLength: 2, placeholder: "?", className: cn('h-11 w-11 rounded-lg border-2 text-center font-mono font-bold text-xl uppercase transition-all', seg.isCorrect === true && 'border-green-400 bg-green-50 text-green-700', seg.isCorrect === false && 'border-red-400 bg-red-50 text-red-700', seg.isCorrect === undefined && 'border-teal-300 bg-teal-50 text-teal-700 focus:border-teal-500 focus:ring-2 focus:ring-teal-200') }), seg.isCorrect === false && (_jsx("span", { className: "absolute -bottom-5 text-xs font-bold text-green-600", children: seg.correctValue?.toUpperCase() }))] }, i));
-                                            }) }), isWrong && _jsx("div", { className: "h-4" })] })] }) }), hasAnswered && !isReviewMode && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-teal-50 to-cyan-50 p-4 border border-teal-100", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-teal-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-teal-700 uppercase tracking-wider", children: "Preview t\u1EEB ho\u00E0n ch\u1EC9nh" })] }), _jsx("p", { className: "text-lg font-mono font-bold text-gray-800 tracking-wide", children: renderWordWithAnswer(userParts) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-green-700 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-lg font-mono font-bold text-gray-800 tracking-wide", children: renderWordWithAnswer(correctParts) })] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n ch\u1EEF c\u00E1i v\u00E0o c\u00E1c \u00F4 tr\u1ED1ng" })] })), isReviewMode && explanation && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] })] }));
-}
-// Multiple questions - compact card for grid
-function MultiQuestionCard({ subQuestion, index, userAnswerValue, isReviewMode, onAnswerChange, }) {
-    const { previewUrl } = usePresignedFileUrl(subQuestion.imageUrl);
-    const correctAnswer = subQuestion.correctAnswer.trim();
-    const matches = subQuestion.word.match(/\{(\d+)\}/g);
-    const blankCount = matches ? matches.length : 0;
-    const userParts = userAnswerValue.split(',').map(a => a.trim());
-    const correctParts = correctAnswer.split(',').map(a => a.trim());
-    const isComplete = userParts.filter(p => p.length > 0).length === blankCount;
-    const isAllCorrect = isReviewMode && isComplete && userAnswerValue.trim().toLowerCase() === correctAnswer.toLowerCase();
-    const isWrong = isReviewMode && isComplete && !isAllCorrect;
-    const segments = parseWord(subQuestion.word, userParts, correctParts, isReviewMode);
-    const imageSrc = previewUrl || (subQuestion.imageUrl?.startsWith('http') ? subQuestion.imageUrl : null);
-    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border-2 bg-white transition-all', isAllCorrect && 'border-green-400', isWrong && 'border-red-400', !isReviewMode && 'border-gray-200 hover:shadow-md'), children: [_jsxs("div", { className: "relative h-36 bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center", children: [imageSrc ? (_jsx("img", { src: imageSrc, alt: "Question", className: "h-full w-full object-contain p-3" })) : (_jsx("svg", { className: "h-10 w-10 text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })), _jsx("div", { className: "absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-xs font-bold text-white", children: index + 1 }), isReviewMode && (isAllCorrect || isWrong) && (_jsx("div", { className: cn('absolute right-2 top-2 rounded-full p-1', isAllCorrect && 'bg-green-500 text-white', isWrong && 'bg-red-500 text-white'), children: isAllCorrect ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(X, { className: "h-3 w-3" }) }))] }), _jsxs("div", { className: "p-3", children: [_jsx("div", { className: "flex flex-wrap items-center justify-center gap-0.5", children: segments.map((seg, i) => {
-                            if (seg.type === 'text') {
-                                return _jsx("span", { className: "text-lg font-bold text-gray-800 font-mono", children: seg.value }, i);
-                            }
-                            return (_jsx(Input, { type: "text", value: seg.value.toUpperCase(), onChange: (e) => onAnswerChange(seg.index, e.target.value), disabled: isReviewMode, maxLength: 2, placeholder: "?", className: cn('h-8 w-8 rounded border-2 text-center font-mono font-bold text-lg uppercase outline-none transition-all', seg.isCorrect === true && 'border-green-400 bg-green-50 text-green-700', seg.isCorrect === false && 'border-red-400 bg-red-50 text-red-700', seg.isCorrect === undefined && 'border-gray-300 focus:border-teal-400') }, i));
-                        }) }), isWrong && (_jsxs("p", { className: "text-center text-xs text-green-600 font-medium mt-2", children: ["\u0110\u00E1p \u00E1n: ", subQuestion.word.replace(/\{(\d+)\}/g, (_, idx) => correctParts[parseInt(idx)]?.toUpperCase() || '')] }))] })] }));
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useEffect as a,useMemo as s}from"react";import{cn as n}from"../../../../shared/lib/utils";import{Input as l}from"../../../../components/ui/input";import{Check as i,X as o,Lightbulb as d,Pencil as c}from"lucide-react";import{usePresignedFileUrl as m}from"../../../../shared/lib/hooks";export function LookPictureFillWordHintClient({questionData:n,userAnswer:l={},isReviewMode:i=!1,autoFillCorrectAnswers:o=!1,explanation:c,onSubmit:m}){const h=s(()=>n.subQuestions.reduce((e,t)=>(e[t.id]=t.correctAnswer,e),{}),[n.subQuestions]),x=o?h:l||{},[b,p]=r(x);a(()=>{o?p(h):l&&p(l)},[l,o,h]);const f=(e,t,r)=>{if(i)return;const a=(b[e]||"").split(",").map(e=>e.trim()),s=n.subQuestions.find(t=>t.id===e);if(!s)return;const l=s.word.match(/\{(\d+)\}/g),o=l?l.length:0;for(;a.length<o;)a.push("");a[t]=r.replace(/[^a-zA-Z]/g,"");const d={...b,[e]:a.join(",")};p(d),m?.(d)},w=n.hintLetters||[];if(1===n.subQuestions.length){const t=n.subQuestions[0],r=b[t.id]||"";return e(g,{subQuestion:t,userAnswerValue:r,isReviewMode:i,hintLetters:w,explanation:c,onAnswerChange:(e,r)=>f(t.id,e,r)})}return t("div",{className:"space-y-4",children:[w.length>0&&t("div",{className:"flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3",children:[e(d,{className:"h-5 w-5 text-amber-500 flex-shrink-0"}),e("span",{className:"text-sm font-medium text-amber-700",children:"Gợi ý:"}),e("div",{className:"flex flex-wrap gap-1.5",children:w.map((t,r)=>e("span",{className:"inline-flex h-7 w-7 items-center justify-center rounded-md border border-amber-300 bg-white text-sm font-bold text-amber-700",children:t.toUpperCase()},r))})]}),e("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:n.subQuestions.map((t,r)=>e(u,{subQuestion:t,index:r,userAnswerValue:b[t.id]||"",isReviewMode:i,onAnswerChange:(e,r)=>f(t.id,e,r)},t.id))})]})}function h(e,t,r,a){const s=[];let n=0;const l=/\{(\d+)\}/g;let i;for(;null!==(i=l.exec(e));){i.index>n&&s.push({type:"text",value:e.substring(n,i.index)});const l=parseInt(i[1],10),o=t[l]||"",d=r[l]||"",c=o.toLowerCase()===d.toLowerCase();s.push({type:"blank",value:o,index:l,isCorrect:a?c:void 0,correctValue:d}),n=i.index+i[0].length}return n<e.length&&s.push({type:"text",value:e.substring(n)}),s}function g({subQuestion:r,userAnswerValue:a,isReviewMode:s,hintLetters:g,explanation:u,onAnswerChange:x}){const{previewUrl:b,isLoading:p}=m(r.imageUrl),f=r.correctAnswer.trim(),w=r.word.match(/\{(\d+)\}/g),N=w?w.length:0,v=a.split(",").map(e=>e.trim()),y=f.split(",").map(e=>e.trim()),C=v.filter(e=>e.length>0).length===N,j=s&&C&&a.trim().toLowerCase()===f.toLowerCase(),k=s&&C&&!j,L=v.some(e=>e.length>0),U=h(r.word,v,y,s),A=b||(r.imageUrl?.startsWith("http")?r.imageUrl:null),Q=e=>{let t=r.word;for(let r=0;r<e.length;r++)t=t.replace(`{${r}}`,e[r]?.toUpperCase()||"?");return t};return t("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",children:[t("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",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-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm",children:e(c,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nhìn tranh, điền chữ cái còn thiếu"})]}),s&&L&&t("div",{className:n("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",j?"bg-green-100 text-green-700":k?"bg-red-100 text-red-700":"bg-gray-100 text-gray-600"),children:[j&&e(i,{className:"h-3.5 w-3.5"}),k&&e(o,{className:"h-3.5 w-3.5"}),j?"Đúng":k?"Sai":"Chưa hoàn thành"]})]}),t("div",{className:"p-5 space-y-5",children:[(A||r.imageUrl)&&t("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:t("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex items-center justify-center p-4",children:p?e("div",{className:"flex h-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500"})}):e("img",{src:A||r.imageUrl,alt:"Question",className:"max-h-56 w-auto object-contain rounded-md",onError:e=>{e.target.src="/images/placeholder-image.svg"}})})]}),g.length>0&&t("div",{className:"flex items-center gap-3 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3",children:[e(d,{className:"h-5 w-5 text-amber-500 flex-shrink-0"}),e("span",{className:"text-sm font-medium text-amber-700",children:"Gợi ý chữ cái:"}),e("div",{className:"flex flex-wrap gap-1.5",children:g.map((t,r)=>e("span",{className:"inline-flex h-8 w-8 items-center justify-center rounded-lg border-2 border-amber-300 bg-white text-sm font-bold text-amber-700 shadow-sm",children:t.toUpperCase()},r))})]}),e("div",{className:"rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100",children:t("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-teal-100 text-teal-600",children:e("span",{className:"text-xs font-bold",children:"?"})}),t("div",{className:"flex-1",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Điền chữ cái còn thiếu"}),e("div",{className:"mt-3 flex flex-wrap items-center gap-1",children:U.map((r,a)=>"text"===r.type?e("span",{className:"text-2xl font-bold text-gray-800 font-mono tracking-wide",children:r.value},a):t("div",{className:"relative inline-flex flex-col items-center mx-0.5",children:[e(l,{type:"text",value:r.value.toUpperCase(),onChange:e=>x(r.index,e.target.value),disabled:s,maxLength:2,placeholder:"?",className:n("h-11 w-11 rounded-lg border-2 text-center font-mono font-bold text-xl uppercase transition-all",!0===r.isCorrect&&"border-green-400 bg-green-50 text-green-700",!1===r.isCorrect&&"border-red-400 bg-red-50 text-red-700",void 0===r.isCorrect&&"border-teal-300 bg-teal-50 text-teal-700 focus:border-teal-500 focus:ring-2 focus:ring-teal-200")}),!1===r.isCorrect&&e("span",{className:"absolute -bottom-5 text-xs font-bold text-green-600",children:r.correctValue?.toUpperCase()})]},a))}),k&&e("div",{className:"h-4"})]})]})}),L&&!s&&t("div",{className:"rounded-lg bg-gradient-to-r from-teal-50 to-cyan-50 p-4 border border-teal-100",children:[t("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-teal-500 text-white",children:e(i,{className:"h-3 w-3"})}),e("span",{className:"text-xs font-semibold text-teal-700 uppercase tracking-wider",children:"Preview từ hoàn chỉnh"})]}),e("p",{className:"text-lg font-mono font-bold text-gray-800 tracking-wide",children:Q(v)})]}),s&&k&&t("div",{className:"rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200",children:[t("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white",children:e(i,{className:"h-3 w-3"})}),e("span",{className:"text-xs font-semibold text-green-700 uppercase tracking-wider",children:"Đáp án đúng"})]}),e("p",{className:"text-lg font-mono font-bold text-gray-800 tracking-wide",children:Q(y)})]}),!s&&!L&&t("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng điền chữ cái vào các ô trống"})]}),s&&u&&e("div",{className:"rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:t("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(d,{className:"h-3.5 w-3.5"})}),t("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:u})]})]})})]})]})}function u({subQuestion:r,index:a,userAnswerValue:s,isReviewMode:d,onAnswerChange:c}){const{previewUrl:g}=m(r.imageUrl),u=r.correctAnswer.trim(),x=r.word.match(/\{(\d+)\}/g),b=x?x.length:0,p=s.split(",").map(e=>e.trim()),f=u.split(",").map(e=>e.trim()),w=p.filter(e=>e.length>0).length===b,N=d&&w&&s.trim().toLowerCase()===u.toLowerCase(),v=d&&w&&!N,y=h(r.word,p,f,d),C=g||(r.imageUrl?.startsWith("http")?r.imageUrl:null);return t("div",{className:n("overflow-hidden rounded-xl border-2 bg-white transition-all",N&&"border-green-400",v&&"border-red-400",!d&&"border-gray-200 hover:shadow-md"),children:[t("div",{className:"relative h-36 bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center",children:[C?e("img",{src:C,alt:"Question",className:"h-full w-full object-contain p-3"}):e("svg",{className:"h-10 w-10 text-gray-300",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})}),e("div",{className:"absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-xs font-bold text-white",children:a+1}),d&&(N||v)&&e("div",{className:n("absolute right-2 top-2 rounded-full p-1",N&&"bg-green-500 text-white",v&&"bg-red-500 text-white"),children:e(N?i:o,{className:"h-3 w-3"})})]}),t("div",{className:"p-3",children:[e("div",{className:"flex flex-wrap items-center justify-center gap-0.5",children:y.map((t,r)=>"text"===t.type?e("span",{className:"text-lg font-bold text-gray-800 font-mono",children:t.value},r):e(l,{type:"text",value:t.value.toUpperCase(),onChange:e=>c(t.index,e.target.value),disabled:d,maxLength:2,placeholder:"?",className:n("h-8 w-8 rounded border-2 text-center font-mono font-bold text-lg uppercase outline-none transition-all",!0===t.isCorrect&&"border-green-400 bg-green-50 text-green-700",!1===t.isCorrect&&"border-red-400 bg-red-50 text-red-700",void 0===t.isCorrect&&"border-gray-300 focus:border-teal-400")},r))}),v&&t("p",{className:"text-center text-xs text-green-600 font-medium mt-2",children:["Đáp án: ",r.word.replace(/\{(\d+)\}/g,(e,t)=>f[parseInt(t)]?.toUpperCase()||"")]})]})]})}