@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/fill-in-blank/FillInBlankCreator.js

@@ -1,448 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { useState, useRef, useEffect, useMemo } 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 { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Switch } from '../../../../components/ui/switch';
-import { Pencil, Eye, Lightbulb, Type, MessageSquare, ToggleLeft, Plus, Trash2, ListChecks, ImageIcon, BookOpen } from 'lucide-react';
-import { FillInBlankClient } from './FillInBlankClient';
-import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
-import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
-// Helper: Extract placeholder indices from question text
-// e.g., "He {0} 10 years old and she {1} 12." -> [0, 1]
-function extractPlaceholderIndices(question) {
-    const regex = /\{(\d+)\}/g;
-    const indices = [];
-    let match;
-    while ((match = regex.exec(question)) !== null) {
-        const index = parseInt(match[1], 10);
-        if (!indices.includes(index)) {
-            indices.push(index);
-        }
-    }
-    return indices.sort((a, b) => a - b);
-}
-// Helper: Get the maximum placeholder index
-function getMaxPlaceholderIndex(question) {
-    const indices = extractPlaceholderIndices(question);
-    return indices.length > 0 ? Math.max(...indices) : -1;
-}
-// Helper: Determine which group a question belongs to based on its index in the part
-function getGroupNumberForIndex(questionIndexInPart, groups) {
-    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
-        return 1;
-    let cumulative = 0;
-    for (const group of groups) {
-        cumulative += group.questionCount;
-        if (questionIndexInPart < cumulative) {
-            return group.number;
-        }
-    }
-    return groups[groups.length - 1]?.number ?? 1;
-}
-function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, groups, questionIndexInPart, partId, headerExtra, }) {
-    // ============ GROUP (shared title / content / image) ============
-    const { isGrouped, currentGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl, } = useBasicQuestionGroup({
-        partId,
-        groups,
-        questionIndexInPart,
-        initialData: {
-            title: (() => {
-                if (initialData?.content?.passageTitle)
-                    return initialData.content.passageTitle;
-                const qgPayload = initialData?.questionGroup?.payload;
-                if (qgPayload?.title)
-                    return qgPayload.title;
-                if (initialData?.title)
-                    return initialData.title;
-                return '';
-            })(),
-            subtitle: (() => {
-                if (initialData?.content?.passageSubtitle)
-                    return initialData.content.passageSubtitle;
-                const qgPayload = initialData?.questionGroup?.payload;
-                if (qgPayload?.subtitle)
-                    return qgPayload.subtitle;
-                return '';
-            })(),
-            content: (() => {
-                if (initialData?.content?.passage)
-                    return initialData.content.passage;
-                const qgPayload = initialData?.questionGroup?.payload;
-                if (qgPayload?.content)
-                    return qgPayload.content;
-                if (initialData?.groupContent)
-                    return initialData.groupContent;
-                return '';
-            })(),
-            imageUrl: (() => {
-                if (initialData?.content?.imageUrl)
-                    return initialData.content.imageUrl;
-                const qgPayload = initialData?.questionGroup?.payload;
-                if (qgPayload?.imageUrl)
-                    return qgPayload.imageUrl;
-                if (initialData?.imageUrl)
-                    return initialData.imageUrl;
-                return '';
-            })(),
-        },
-    });
-    // ============ STATE ============
-    // Support NEW API format (content.question + correctAnswer.answers) and legacy formats
-    const getInitialQuestion = () => {
-        // NEW API format: content.question
-        if (initialData?.content?.question)
-            return initialData.content.question;
-        // Legacy format: question at root level
-        if (initialData?.question)
-            return initialData.question;
-        // Very old format: blanks[].text
-        if (initialData?.blanks?.[0]?.text)
-            return initialData.blanks[0].text;
-        return '';
-    };
-    const getInitialAnswers = () => {
-        // NEW API format: correctAnswer.answers
-        if (initialData?.correctAnswer?.answers && Array.isArray(initialData.correctAnswer.answers)) {
-            return initialData.correctAnswer.answers;
-        }
-        // Legacy format: answers at root level
-        if (initialData?.answers && initialData.answers.length > 0) {
-            return initialData.answers;
-        }
-        // Very old format: blanks[].correctAnswer
-        if (initialData?.blanks?.[0]?.correctAnswer) {
-            return [initialData.blanks[0].correctAnswer];
-        }
-        return [];
-    };
-    const getInitialCaseSensitive = () => {
-        // NEW API format: correctAnswer.caseSensitive
-        if (initialData?.correctAnswer?.caseSensitive !== undefined) {
-            return initialData.correctAnswer.caseSensitive;
-        }
-        // Legacy format: caseSensitive at root level
-        return initialData?.caseSensitive || false;
-    };
-    const getInitialShowHints = () => {
-        // NEW API format: content.showHints
-        if (initialData?.content?.showHints !== undefined) {
-            return Boolean(initialData.content.showHints);
-        }
-        // Flat format from answer or root level
-        if (initialData?.showHints !== undefined) {
-            return Boolean(initialData.showHints);
-        }
-        // Default: false
-        return false;
-    };
-    const getInitialHints = () => {
-        // NEW API format: content.hints
-        if (Array.isArray(initialData?.content?.hints)) {
-            return initialData.content.hints;
-        }
-        // Flat format from answer or root level
-        if (Array.isArray(initialData?.hints)) {
-            return initialData.hints;
-        }
-        // Default: empty array
-        return [];
-    };
-    const [question, setQuestion] = useState(getInitialQuestion());
-    const [answers, setAnswers] = useState(getInitialAnswers());
-    const [caseSensitive, setCaseSensitive] = useState(getInitialCaseSensitive());
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [points, setPoints] = useState(initialData?.points || 1);
-    const [showHints, setShowHints] = useState(getInitialShowHints());
-    const [hints, setHints] = useState(getInitialHints());
-    const [newHint, setNewHint] = useState('');
-    const [isExample, setIsExample] = useState(initialData?.isExample || false);
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // Presigned URL for per-question image preview (non-grouped only)
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // Inline validation errors
-    const [validationErrors, setValidationErrors] = useState({});
-    // Refs for initialization tracking
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage (exam_question_status_{id})
-    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
-    // Update refs
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Extract placeholder indices from question
-    const placeholderIndices = useMemo(() => extractPlaceholderIndices(question), [question]);
-    const maxIndex = useMemo(() => getMaxPlaceholderIndex(question), [question]);
-    // Ensure answers array has correct length when placeholders change
-    useEffect(() => {
-        if (maxIndex >= 0) {
-            const requiredLength = maxIndex + 1;
-            if (answers.length < requiredLength) {
-                // Extend array with empty strings
-                const newAnswers = [...answers];
-                while (newAnswers.length < requiredLength) {
-                    newAnswers.push('');
-                }
-                setAnswers(newAnswers);
-            }
-        }
-    }, [maxIndex, answers.length]);
-    // Expose validation function via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    return validateForm();
-                },
-                // BUGFIX: Expose getFormData to get fresh form data at save time
-                // This bypasses the debounced onChange race condition
-                getFormData: () => ({
-                    question,
-                    answers,
-                    caseSensitive,
-                    explanation,
-                    points,
-                    imageUrl,
-                    showHints,
-                    hints: showHints ? hints : [],
-                    isExample,
-                    title: groupTitle,
-                    subtitle: groupSubtitle,
-                    groupContent,
-                    groupNumber: currentGroupNumber,
-                    groups,
-                }),
-            };
-        }
-    }, [validationRef, question, answers, caseSensitive, explanation, points, imageUrl, showHints, hints, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups]);
-    // ============ SYNC INITIAL DATA ============
-    useEffect(() => {
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (initialDataChanged) {
-            isInitializingRef.current = true;
-            previousInitialDataRef.current = initialData;
-            if (initialData) {
-                setQuestion(getInitialQuestion());
-                setAnswers(getInitialAnswers());
-                setCaseSensitive(getInitialCaseSensitive());
-                // Explanation can be at root level or in initialData
-                setExplanation(initialData.explanation || '');
-                // Points can be at root level
-                setPoints(initialData.points || 1);
-                setShowHints(getInitialShowHints());
-                setHints(getInitialHints());
-                setIsExample(initialData.isExample || false);
-            }
-            else {
-                setQuestion('');
-                setAnswers([]);
-                setCaseSensitive(false);
-                setExplanation('');
-                setPoints(1);
-                setShowHints(false);
-                setHints([]);
-                setIsExample(false);
-            }
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData]);
-    // ============ ON CHANGE CALLBACK ============
-    useEffect(() => {
-        if (isInitializingRef.current) {
-            const currentPayload = JSON.stringify({
-                question,
-                answers,
-                caseSensitive,
-                explanation,
-                points,
-                imageUrl,
-                showHints,
-                hints,
-                isExample,
-                title: groupTitle,
-                subtitle: groupSubtitle,
-                groupContent,
-                groupNumber: currentGroupNumber,
-                groups,
-            });
-            previousPayloadRef.current = currentPayload;
-            return;
-        }
-        const payload = {
-            question,
-            answers,
-            caseSensitive,
-            explanation,
-            points,
-            imageUrl,
-            showHints,
-            hints: showHints ? hints : [],
-            isExample,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            groupContent,
-            groupNumber: currentGroupNumber,
-            groups,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [question, answers, caseSensitive, explanation, points, imageUrl, showHints, hints, isExample, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups]);
-    // ============ VALIDATION ============
-    const validateForm = () => {
-        const errors = {};
-        if (!question.trim()) {
-            errors.question = 'Vui lòng nhập câu hỏi!';
-        }
-        else if (placeholderIndices.length === 0) {
-            errors.question = 'Câu hỏi cần có ít nhất một chỗ trống {0}!';
-        }
-        // Check if placeholder indices are sequential starting from 0
-        const expectedIndices = Array.from({ length: placeholderIndices.length }, (_, i) => i);
-        const hasGaps = !placeholderIndices.every((idx, i) => idx === expectedIndices[i]);
-        if (hasGaps && placeholderIndices.length > 0) {
-            errors.question = 'Các chỗ trống phải đánh số liên tục từ {0}!';
-        }
-        // Validate each answer - use placeholderIndices or default [0]
-        errors.answers = {};
-        const indicesToValidate = placeholderIndices.length > 0 ? placeholderIndices : [0];
-        indicesToValidate.forEach((idx) => {
-            if (!answers[idx] || !answers[idx].trim()) {
-                errors.answers[idx] = 'Vui lòng nhập đáp án!';
-            }
-        });
-        // Clean up empty answers object
-        if (Object.keys(errors.answers).length === 0) {
-            delete errors.answers;
-        }
-        setValidationErrors(errors);
-        return !errors.question && !errors.answers;
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!validateForm()) {
-            return;
-        }
-        // NOTE: Save status is now managed by ExamCreator via localStorage
-        const saveData = {
-            question,
-            answers,
-            caseSensitive,
-            explanation,
-            points,
-            imageUrl,
-            showHints,
-            hints: showHints ? hints : [],
-            isExample,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            groupContent,
-            groupNumber: currentGroupNumber,
-            groups,
-        };
-        onSave?.(saveData);
-    };
-    // Update answer at specific index
-    const updateAnswer = (index, value) => {
-        const newAnswers = [...answers];
-        // Ensure array is long enough
-        while (newAnswers.length <= index) {
-            newAnswers.push('');
-        }
-        newAnswers[index] = value;
-        setAnswers(newAnswers);
-        // Clear validation error for this answer
-        if (validationErrors.answers?.[index]) {
-            setValidationErrors(prev => {
-                const newAnswerErrors = { ...prev.answers };
-                delete newAnswerErrors[index];
-                return {
-                    ...prev,
-                    answers: Object.keys(newAnswerErrors).length > 0 ? newAnswerErrors : undefined,
-                };
-            });
-        }
-    };
-    // Generate preview text with answers filled in
-    const getPreviewText = () => {
-        let preview = question;
-        placeholderIndices.forEach((idx) => {
-            const answer = answers[idx] || '_____';
-            preview = preview.replace(`{${idx}}`, `[${answer}]`);
-        });
-        return preview;
-    };
-    // ============ CLIENT MODE PREVIEW ============
-    if (isClientMode) {
-        const questionData = {
-            question,
-            answers,
-            caseSensitive,
-            explanation,
-            imageUrl: isGrouped ? '' : (displayPreviewUrl || imageUrl),
-            showHints,
-            hints: showHints ? hints : [],
-            isExample,
-            // Group fields for Client preview
-            isGroup: isGrouped,
-            groupTitle: isGrouped ? groupTitle : '',
-            groupSubtitle: isGrouped ? groupSubtitle : '',
-            groupContent: isGrouped ? groupContent : '',
-            groupImageUrl: isGrouped ? (displayPreviewUrl || imageUrl) : '',
-            groupNumber: isGrouped ? currentGroupNumber : undefined,
-        };
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Fill In Blank (Preview)" }), _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(FillInBlankClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: false, explanation: explanation })] }));
-    }
-    // ============ CREATOR UI ============
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: imageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setImageUrl, uploadIdPrefix: `fill-in-blank-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u1ED7 tr\u1EE3 nhi\u1EC1u ch\u1ED7 tr\u1ED1ng trong m\u1ED9t c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question?.trim() || placeholderIndices.length === 0, 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-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-suggested-words", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-suggested-words", className: "cursor-pointer text-sm font-medium text-gray-700", children: "Hi\u1EC3n th\u1ECB t\u1EEB g\u1EE3i \u00FD" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "isExample", checked: isExample, onCheckedChange: setIsExample }), _jsx(Label, { htmlFor: "isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _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}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{1}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{2}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u c\u00E1c 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" }), "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng t\u1EA1o \u00F4 nh\u1EADp \u0111\u00E1p \u00E1n cho m\u1ED7i 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: \u201CHe ", '{0}', " 10 years old and she ", '{1}', " 12.\u201D"] })] })] })] }) }), !isGrouped && (_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-sm font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "fill-in-blank-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
-                                            setImageUrl(url);
-                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), 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", value: question, onChange: (e) => {
-                                            setQuestion(e.target.value);
-                                            if (validationErrors.question) {
-                                                setValidationErrors(prev => ({ ...prev, question: undefined }));
-                                            }
-                                        }, placeholder: "V\u00ED d\u1EE5: He {0} 10 years old and she {1} 12.", rows: 3, className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question })), placeholderIndices.length > 0 && (_jsx("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2", children: _jsxs("span", { className: "text-sm text-green-700", children: ["\u2713 \u0110\u00E3 ph\u00E1t hi\u1EC7n ", _jsx("strong", { children: placeholderIndices.length }), " ch\u1ED7 tr\u1ED1ng: ", placeholderIndices.map(i => (_jsx("code", { className: "mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-mono text-green-800", children: `{${i}}` }, i)))] }) }))] }), _jsxs("div", { className: "space-y-4", 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(Type, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n cho c\u00E1c ch\u1ED7 tr\u1ED1ng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx("div", { className: "space-y-3", children: (placeholderIndices.length > 0 ? placeholderIndices : [0]).map((idx) => (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${answers[idx]
-                                                        ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
-                                                        : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-mono font-bold transition-all ${answers[idx]
-                                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                                        : 'bg-indigo-100 text-indigo-700'}`, children: `{${idx}}` }), _jsx(Input, { value: answers[idx] || '', onChange: (e) => updateAnswer(idx, e.target.value), placeholder: `Đáp án cho {${idx}}`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.answers?.[idx] ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })] }), validationErrors.answers?.[idx] && (_jsx("p", { className: "mt-2 ml-13 text-sm text-red-600", children: validationErrors.answers[idx] }))] }, idx))) }), showHints && (_jsxs("div", { className: "space-y-4 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", 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-purple-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["Danh s\u00E1ch t\u1EEB g\u1EE3i \u00FD ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", hints.length, " t\u1EEB)"] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: newHint, onChange: (e) => setNewHint(e.target.value), placeholder: "Nh\u1EADp t\u1EEB g\u1EE3i \u00FD m\u1EDBi...", className: "flex-1 border-gray-200 bg-white", onKeyDown: (e) => {
-                                                                    if (e.key === 'Enter' && newHint.trim()) {
-                                                                        e.preventDefault();
-                                                                        if (!hints.includes(newHint.trim())) {
-                                                                            setHints([...hints, newHint.trim()]);
-                                                                        }
-                                                                        setNewHint('');
-                                                                    }
-                                                                } }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
-                                                                    if (newHint.trim() && !hints.includes(newHint.trim())) {
-                                                                        setHints([...hints, newHint.trim()]);
-                                                                        setNewHint('');
-                                                                    }
-                                                                }, disabled: !newHint.trim(), 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"] })] }), hints.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: hints.map((word, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-3 py-2 shadow-sm transition-all hover:border-purple-300 hover:shadow", children: [_jsx("span", { className: "text-sm font-medium text-gray-700", children: word }), _jsx("button", { type: "button", onClick: () => {
-                                                                        setHints(hints.filter((_, i) => i !== index));
-                                                                    }, className: "rounded-full p-0.5 text-gray-400 transition-colors hover:bg-red-100 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, index))) })) : (_jsx("p", { className: "text-center text-sm text-gray-500 italic", children: "Ch\u01B0a c\u00F3 t\u1EEB g\u1EE3i \u00FD n\u00E0o. Th\u00EAm t\u1EEB \u0111\u1EC3 hi\u1EC3n th\u1ECB cho h\u1ECDc sinh." }))] }))] })] }), question && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u ho\u00E0n ch\u1EC9nh"] }), _jsx("p", { className: "text-sm text-gray-700", children: getPreviewText() })] })), _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-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base 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-xs 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, { className: "px-4 pb-4", 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 FillInBlankCreator(props) {
-    return _jsx(FillInBlankCreatorContent, { ...props });
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ImagePreview as n}from"../../../../components/ui/image-preview";import{useState as r,useRef as s,useEffect as i,useMemo as a}from"react";import{Button as l}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as h,CardContent as g,CardHeader as u,CardTitle as p}from"../../../../components/ui/card";import{Switch as x}from"../../../../components/ui/switch";import{Pencil as b,Eye as f,Lightbulb as N,Type as w,MessageSquare as v,ToggleLeft as y,Plus as C,Trash2 as k,ListChecks as q,ImageIcon as U,BookOpen as S}from"lucide-react";import{FillInBlankClient as j}from"./FillInBlankClient";import{useDebouncedCallback as A,usePresignedFileUrl as E}from"../../../../shared/lib/hooks";import{FileUpload as H}from"../../../../components/ui/file-upload";import{BasicQuestionGroupCard as G}from"../../groups/BasicQuestionGroupCard";import{useBasicQuestionGroup as I}from"../../_shared/hooks/useBasicQuestionGroup";function T(e){const t=/\{(\d+)\}/g,n=[];let r;for(;null!==(r=t.exec(e));){const e=parseInt(r[1],10);n.includes(e)||n.push(e)}return n.sort((e,t)=>e-t)}function F({initialData:F,onSave:B,onCancel:D,onChange:P,externalErrors:V,onUnsavedChangesChange:O,validationRef:$,groups:_,questionIndexInPart:z,partId:J,headerExtra:M}){const{isGrouped:Q,currentGroupNumber:R,groupTitle:K,groupSubtitle:L,groupContent:X,imageUrl:W,setGroupTitle:Y,setGroupSubtitle:Z,setGroupContent:ee,setImageUrl:te}=I({partId:J,groups:_,questionIndexInPart:z,initialData:{title:(()=>{if(F?.content?.passageTitle)return F.content.passageTitle;const e=F?.questionGroup?.payload;return e?.title?e.title:F?.title?F.title:""})(),subtitle:(()=>{if(F?.content?.passageSubtitle)return F.content.passageSubtitle;const e=F?.questionGroup?.payload;return e?.subtitle?e.subtitle:""})(),content:(()=>{if(F?.content?.passage)return F.content.passage;const e=F?.questionGroup?.payload;return e?.content?e.content:F?.groupContent?F.groupContent:""})(),imageUrl:(()=>{if(F?.content?.imageUrl)return F.content.imageUrl;const e=F?.questionGroup?.payload;return e?.imageUrl?e.imageUrl:F?.imageUrl?F.imageUrl:""})()}}),ne=()=>F?.content?.question?F.content.question:F?.question?F.question:F?.blanks?.[0]?.text?F.blanks[0].text:"",re=()=>F?.correctAnswer?.answers&&Array.isArray(F.correctAnswer.answers)?F.correctAnswer.answers:F?.answers&&F.answers.length>0?F.answers:F?.blanks?.[0]?.correctAnswer?[F.blanks[0].correctAnswer]:[],se=()=>void 0!==F?.correctAnswer?.caseSensitive?F.correctAnswer.caseSensitive:F?.caseSensitive||!1,ie=()=>void 0!==F?.content?.showHints?Boolean(F.content.showHints):void 0!==F?.showHints&&Boolean(F.showHints),ae=()=>Array.isArray(F?.content?.hints)?F.content.hints:Array.isArray(F?.hints)?F.hints:[],[le,oe]=r(ne()),[ce,de]=r(re()),[me,he]=r(se()),[ge,ue]=r(F?.explanation||""),[pe,xe]=r(F?.points||1),[be,fe]=r(ie()),[Ne,we]=r(ae()),[ve,ye]=r(""),[Ce,ke]=r(F?.isExample||!1),[qe,Ue]=r(!1),[Se,je]=r(""),{previewUrl:Ae}=E(W),Ee=Se||Ae||"",[He,Ge]=r({}),Ie=s(F),Te=s(!1),Fe=s(P),Be=s("");i(()=>{Fe.current=P},[P]);const De=A(e=>{Fe.current?.(e)},300),Pe=a(()=>T(le),[le]),Ve=a(()=>function(e){const t=T(e);return t.length>0?Math.max(...t):-1}(le),[le]);i(()=>{if(Ve>=0){const e=Ve+1;if(ce.length<e){const t=[...ce];for(;t.length<e;)t.push("");de(t)}}},[Ve,ce.length]),i(()=>{$&&($.current={triggerValidation:async()=>Oe(),getFormData:()=>({question:le,answers:ce,caseSensitive:me,explanation:ge,points:pe,imageUrl:W,showHints:be,hints:be?Ne:[],isExample:Ce,title:K,subtitle:L,groupContent:X,groupNumber:R,groups:_})})},[$,le,ce,me,ge,pe,W,be,Ne,K,L,X,R,_]),i(()=>{JSON.stringify(Ie.current)!==JSON.stringify(F)&&(Te.current=!0,Ie.current=F,F?(oe(ne()),de(re()),he(se()),ue(F.explanation||""),xe(F.points||1),fe(ie()),we(ae()),ke(F.isExample||!1)):(oe(""),de([]),he(!1),ue(""),xe(1),fe(!1),we([]),ke(!1)),setTimeout(()=>{Te.current=!1},150))},[F]),i(()=>{if(Te.current){const e=JSON.stringify({question:le,answers:ce,caseSensitive:me,explanation:ge,points:pe,imageUrl:W,showHints:be,hints:Ne,isExample:Ce,title:K,subtitle:L,groupContent:X,groupNumber:R,groups:_});return void(Be.current=e)}const e={question:le,answers:ce,caseSensitive:me,explanation:ge,points:pe,imageUrl:W,showHints:be,hints:be?Ne:[],isExample:Ce,title:K,subtitle:L,groupContent:X,groupNumber:R,groups:_},t=JSON.stringify(e);Be.current!==t&&(Be.current=t,De(e))},[le,ce,me,ge,pe,W,be,Ne,Ce,K,L,X,R,_]);const Oe=()=>{const e={};le.trim()?0===Pe.length&&(e.question="Câu hỏi cần có ít nhất một chỗ trống {0}!"):e.question="Vui lòng nhập câu hỏi!";const t=Array.from({length:Pe.length},(e,t)=>t);!Pe.every((e,n)=>e===t[n])&&Pe.length>0&&(e.question="Các chỗ trống phải đánh số liên tục từ {0}!"),e.answers={};return(Pe.length>0?Pe:[0]).forEach(t=>{ce[t]&&ce[t].trim()||(e.answers[t]="Vui lòng nhập đáp án!")}),0===Object.keys(e.answers).length&&delete e.answers,Ge(e),!e.question&&!e.answers};if(qe){const n={question:le,answers:ce,caseSensitive:me,explanation:ge,imageUrl:Q?"":Ee||W,showHints:be,hints:be?Ne:[],isExample:Ce,isGroup:Q,groupTitle:Q?K:"",groupSubtitle:Q?L:"",groupContent:Q?X:"",groupImageUrl:Q?Ee||W:"",groupNumber:Q?R:void 0};return t("div",{className:"space-y-4",children:[e(h,{children:e(u,{children:t("div",{className:"flex items-center justify-between",children:[e(p,{children:"Fill In Blank (Preview)"}),t(l,{variant:"outline",size:"sm",onClick:()=>Ue(!1),children:[e(b,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(j,{questionData:n,autoFillCorrectAnswers:!0,isReviewMode:!1,explanation:ge})]})}return t("div",{className:"space-y-4",children:[Q&&e(G,{groupNumber:R,title:K,subtitle:L,content:X,imageUrl:W,onTitleChange:Y,onSubtitleChange:Z,onContentChange:ee,onImageChange:te,uploadIdPrefix:`fill-in-blank-${J??"group"}`}),t(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(u,{className:"px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm",children:e(w,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(p,{className:"text-base font-bold text-gray-900",children:"Điền vào chỗ trống"}),e("p",{className:"text-xs text-gray-500",children:"Hỗ trợ nhiều chỗ trống trong một câu hỏi"})]})]}),t("div",{className:"flex items-center gap-2",children:[M,t(l,{variant:"outline",size:"sm",onClick:()=>Ue(!0),disabled:!le?.trim()||0===Pe.length,className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(f,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),t(g,{className:"space-y-4 px-4 pb-4",children:[t("div",{className:"flex flex-wrap items-center gap-6",children:[e(m,{defaultValue:pe,onChange:e=>xe(Number(e.target.value)||1)}),t("div",{className:"flex items-center gap-2",children:[e(x,{id:"show-suggested-words",checked:be,onCheckedChange:fe}),e(o,{htmlFor:"show-suggested-words",className:"cursor-pointer text-sm font-medium text-gray-700",children:"Hiển thị từ gợi ý"})]}),t("div",{className:"flex items-center gap-2",children:[e(x,{id:"isExample",checked:Ce,onCheckedChange:ke}),e(o,{htmlFor:"isExample",className:"cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-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-blue-100",children:e(N,{className:"h-4 w-4 text-blue-600"})}),t("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"}),t("ul",{className:"mt-2 space-y-1.5 text-blue-700",children:[t("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}"}),", ",e("code",{className:"mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800",children:"{1}"}),", ",e("code",{className:"mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800",children:"{2}"}),"... để đánh dấu các chỗ trống"]}),t("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Hệ thống sẽ tự động tạo ô nhập đáp án cho mỗi chỗ trống"]}),t("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Ví dụ: “He ","{0}"," 10 years old and she ","{1}"," 12.”"]})]})]})]})}),!Q&&t("div",{className:"space-y-2",children:[t(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(U,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh ",e("span",{className:"text-sm font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(H,{id:"fill-in-blank-image",label:"",accept:"image/*",value:W||"",onChange:e=>{te(e)},onPresignedUrlChange:je,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),Ee&&e(n,{src:Ee,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),t("div",{className:"space-y-2",children:[t(o,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-indigo-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(d,{id:"question",value:le,onChange:e=>{oe(e.target.value),He.question&&Ge(e=>({...e,question:void 0}))},placeholder:"Ví dụ: He {0} 10 years old and she {1} 12.",rows:3,className:"min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(He.question?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),He.question&&e("p",{className:"text-sm text-red-600",children:He.question}),Pe.length>0&&e("div",{className:"flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2",children:t("span",{className:"text-sm text-green-700",children:["✓ Đã phát hiện ",e("strong",{children:Pe.length})," chỗ trống: ",Pe.map(t=>e("code",{className:"mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-mono text-green-800",children:`{${t}}`},t))]})})]}),t("div",{className:"space-y-4",children:[t("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(w,{className:"h-3.5 w-3.5 text-indigo-600"})}),t(o,{className:"text-base font-semibold text-gray-800",children:["Đáp án cho các chỗ trống ",e("span",{className:"text-red-500",children:"*"})]})]}),t("div",{className:"grid gap-6 lg:grid-cols-2",children:[e("div",{className:"space-y-3",children:(Pe.length>0?Pe:[0]).map(n=>t("div",{className:"rounded-xl border-2 p-4 transition-all "+(ce[n]?"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50":"border-gray-200 bg-white"),children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-mono font-bold transition-all "+(ce[n]?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-indigo-100 text-indigo-700"),children:`{${n}}`}),e(c,{value:ce[n]||"",onChange:e=>((e,t)=>{const n=[...ce];for(;n.length<=e;)n.push("");n[e]=t,de(n),He.answers?.[e]&&Ge(t=>{const n={...t.answers};return delete n[e],{...t,answers:Object.keys(n).length>0?n:void 0}})})(n,e.target.value),placeholder:`Đáp án cho {${n}}`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(He.answers?.[n]?"border-red-400 focus:border-red-500 focus:ring-red-200":"")})]}),He.answers?.[n]&&e("p",{className:"mt-2 ml-13 text-sm text-red-600",children:He.answers[n]})]},n))}),be&&t("div",{className:"space-y-4 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-purple-100",children:e(q,{className:"h-3.5 w-3.5 text-purple-600"})}),t(o,{className:"text-base font-semibold text-gray-800",children:["Danh sách từ gợi ý ",t("span",{className:"text-sm font-normal text-gray-500",children:["(",Ne.length," từ)"]})]})]}),t("div",{className:"flex gap-2",children:[e(c,{value:ve,onChange:e=>ye(e.target.value),placeholder:"Nhập từ gợi ý mới...",className:"flex-1 border-gray-200 bg-white",onKeyDown:e=>{"Enter"===e.key&&ve.trim()&&(e.preventDefault(),Ne.includes(ve.trim())||we([...Ne,ve.trim()]),ye(""))}}),t(l,{type:"button",variant:"outline",size:"sm",onClick:()=>{ve.trim()&&!Ne.includes(ve.trim())&&(we([...Ne,ve.trim()]),ye(""))},disabled:!ve.trim(),className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(C,{className:"h-4 w-4"}),"Thêm"]})]}),Ne.length>0?e("div",{className:"flex flex-wrap gap-2",children:Ne.map((n,r)=>t("div",{className:"flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-3 py-2 shadow-sm transition-all hover:border-purple-300 hover:shadow",children:[e("span",{className:"text-sm font-medium text-gray-700",children:n}),e("button",{type:"button",onClick:()=>{we(Ne.filter((e,t)=>t!==r))},className:"rounded-full p-0.5 text-gray-400 transition-colors hover:bg-red-100 hover:text-red-500",children:e(k,{className:"h-3.5 w-3.5"})})]},r))}):e("p",{className:"text-center text-sm text-gray-500 italic",children:"Chưa có từ gợi ý nào. Thêm từ để hiển thị cho học sinh."})]})]})]}),le&&t("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[t("div",{className:"mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600",children:[e(f,{className:"h-3.5 w-3.5"}),"Xem trước câu hoàn chỉnh"]}),e("p",{className:"text-sm text-gray-700",children:(()=>{let e=le;return Pe.forEach(t=>{const n=ce[t]||"_____";e=e.replace(`{${t}}`,`[${n}]`)}),e})()})]}),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(y,{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(x,{id:"case-sensitive",checked:me,onCheckedChange:he})]}),V&&V.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:V.map((t,n)=>e("li",{children:t},n))})]})]})]})]}),t(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(u,{className:"px-4 py-3",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(S,{className:"h-3.5 w-3.5 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-base 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-xs 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(g,{className:"px-4 pb-4",children:e(d,{id:"explanation",value:ge,onChange:e=>ue(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 FillInBlankCreator(t){return e(F,{...t})}

package/dist/components/questions/types/fill-in-blank/index.js

@@ -1,2 +1 @@
-export * from './FillInBlankCreator';
-export * from './FillInBlankClient';
+export*from"./FillInBlankCreator";export*from"./FillInBlankClient";