@tinyweb_dev/oe-exam-sdk 0.1.0

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphCreator.js

@@ -0,0 +1,632 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Checkbox } from '../../../../components/ui/checkbox';
+import { Switch } from '../../../../components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../../components/ui/select';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Pencil, Eye, BookOpen, ImageIcon, Lightbulb, FileText, Library, ToggleLeft, Plus, Trash2, ListChecks, CheckCircle2, Mail, Star, } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { WordFillParagraphClient } from './WordFillParagraphClient';
+import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
+import { wordFillParagraphFormSchema, } from '../../../../shared/lib/validation/word-fill-paragraph.validation';
+import { wordFillParagraphWithOptionsFormSchema, } from '../../../../shared/lib/validation/word-fill-paragraph-with-options.validation';
+import { wordFillParagraphDefaultFormSchema, } from '../../../../shared/lib/validation/word-fill-paragraph-default.validation';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Parse {0}, {1}, ... from paragraph and return sorted unique indices */
+function parsePlaceholders(paragraph) {
+    const regex = /\{(\d+)\}/g;
+    const indices = new Set();
+    let match;
+    while ((match = regex.exec(paragraph)) !== null) {
+        indices.add(parseInt(match[1], 10));
+    }
+    return Array.from(indices).sort((a, b) => a - b);
+}
+/** Small component so we can call usePresignedFileUrl per word-bank item */
+function WordBankImagePreview({ imageUrl, localPreviewUrl, index, }) {
+    const { previewUrl: presignedUrl } = usePresignedFileUrl(imageUrl || '');
+    const src = localPreviewUrl || presignedUrl || '';
+    if (!src)
+        return null;
+    return (_jsx(ImagePreview, { src: src, alt: `Word bank ${index} preview`, className: "mt-2 h-32 w-full rounded-lg border border-gray-200 bg-gray-50 object-contain" }));
+}
+// ---------------------------------------------------------------------------
+// Shared header / paragraph / image / points fields
+// ---------------------------------------------------------------------------
+function CommonFields({ form, displayPreviewUrl, setImagePreviewUrl, watchedImageUrl, watchedParagraph, blankCount, externalErrors, showCaseSensitive, watchedCaseSensitive, afterPoints, }) {
+    return (_jsxs(_Fragment, { children: [showCaseSensitive ? (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("div", { className: "flex-1 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 }) }), _jsxs("div", { className: `flex items-center gap-3 rounded-xl border-2 px-4 py-3 transition-all ${watchedCaseSensitive
+                            ? 'border-teal-400 bg-teal-50'
+                            : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${watchedCaseSensitive ? 'bg-teal-100' : 'bg-gray-100'}`, children: _jsx(ToggleLeft, { className: `h-4 w-4 transition-colors ${watchedCaseSensitive ? 'text-teal-600' : 'text-gray-400'}` }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "case-sensitive", className: `font-semibold transition-colors ${watchedCaseSensitive ? 'text-teal-800' : 'text-gray-800'}`, children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: `text-sm transition-colors ${watchedCaseSensitive ? 'text-teal-600' : 'text-gray-500'}`, children: watchedCaseSensitive
+                                            ? 'Đang bật — đáp án phân biệt chữ hoa/thường'
+                                            : 'Đang tắt — không phân biệt chữ hoa/thường' })] }), _jsx(Switch, { id: "case-sensitive", checked: watchedCaseSensitive || false, onCheckedChange: (checked) => form.setValue('caseSensitive', !!checked), className: watchedCaseSensitive
+                                    ? 'data-[state=checked]:bg-teal-500'
+                                    : 'data-[state=unchecked]:bg-gray-300' })] })] })) : (_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 }) })), afterPoints, _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(FileText, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: "title", ...form.register('title'), placeholder: "V\u00ED d\u1EE5: Dogs, My Family...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('title') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('title') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('title') }))] }), _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-teal-500" }), "H\u00ECnh \u1EA3nh minh h\u1ECDa"] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh ho\u1EB7c d\u00E1n 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: "paragraph", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Library, { className: "h-4 w-4 text-teal-500" }), "\u0110o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" }), _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(S\u1EED d\u1EE5ng ", '{0}', ", ", '{1}', ", ... cho ch\u1ED7 tr\u1ED1ng \u2014 T\u00ECm th\u1EA5y ", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }), _jsx(Textarea, { id: "paragraph", ...form.register('paragraph'), placeholder: "Monkeys live in the {0} with their family. They can run with their long {1} ...", rows: 5, className: `border-gray-200 bg-white text-sm transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('paragraph') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('paragraph') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('paragraph') }))] }), 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))) })] })] }))] }));
+}
+// ---------------------------------------------------------------------------
+// Unified WordFillParagraphCreator
+// ---------------------------------------------------------------------------
+export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, viewMode, groupConfig, groups, questionIndexInPart = 0, partId = '', }) {
+    const apiData = initialData;
+    // ============ GROUP (shared title / content / image) via useBasicQuestionGroup ============
+    const { isGrouped, currentGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, } = useBasicQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            title: apiData?.groupTitle || '',
+            subtitle: apiData?.groupSubtitle || '',
+            content: apiData?.groupContent || '',
+            imageUrl: apiData?.groupImageUrl || '',
+        },
+    });
+    // Determine which group fields to show based on groupConfig
+    const hasGroupConfig = groupConfig && groupConfig.length > 0;
+    const showGroupTitle = !hasGroupConfig || groupConfig.includes('title');
+    const showGroupSubtitle = !hasGroupConfig || groupConfig.includes('subtitle');
+    const showGroupContent = !hasGroupConfig || groupConfig.includes('content');
+    const showGroupImage = !hasGroupConfig || groupConfig.includes('imageUrl');
+    // ── Form — schema adapts to viewMode ──────────────────────────────────────
+    const isWithOptions = viewMode === 'WITH_OPTIONS';
+    const isWithWordBank = viewMode === 'WITH_WORD_BANK';
+    const isEmail = viewMode === 'EMAIL';
+    const isDefault = viewMode === 'DEFAULT' || isEmail;
+    const formWithOptions = useReactHookForm({
+        defaultValues: {
+            title: apiData?.title || '',
+            imageUrl: apiData?.imageUrl || '',
+            paragraph: apiData?.paragraph || '',
+            wordBank: apiData?.wordBank?.length > 0 ? apiData.wordBank : [],
+            answers: apiData?.answers?.length > 0 ? apiData.answers : [],
+            caseSensitive: apiData?.caseSensitive || false,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: wordFillParagraphWithOptionsFormSchema,
+        mode: 'onBlur',
+    });
+    const formWithWordBank = useReactHookForm({
+        defaultValues: {
+            title: apiData?.title || '',
+            imageUrl: apiData?.imageUrl || '',
+            paragraph: apiData?.paragraph || '',
+            wordBank: apiData?.wordBank?.length > 0 ? apiData.wordBank : [],
+            answers: apiData?.answers?.length > 0 ? apiData.answers : [],
+            exampleAnswer: apiData?.exampleAnswer?.length > 0 ? apiData.exampleAnswer : [],
+            isExample: apiData?.isExample || false,
+            caseSensitive: apiData?.caseSensitive || false,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: wordFillParagraphFormSchema,
+        mode: 'onBlur',
+    });
+    const formDefault = useReactHookForm({
+        defaultValues: {
+            title: apiData?.title || '',
+            imageUrl: apiData?.imageUrl || '',
+            paragraph: apiData?.paragraph || '',
+            answers: apiData?.answers?.length > 0 ? apiData.answers : [],
+            exampleAnswer: apiData?.exampleAnswer?.length > 0 ? apiData.exampleAnswer
+                : apiData?.content?.exampleAnswer?.length > 0 ? apiData.content.exampleAnswer
+                    : apiData?.answer?.example?.length > 0 ? apiData.answer.example
+                        : apiData?.correctAnswer?.example?.length > 0 ? apiData.correctAnswer.example
+                            : [],
+            caseSensitive: apiData?.caseSensitive || false,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: wordFillParagraphDefaultFormSchema,
+        mode: 'onBlur',
+    });
+    // Active form — typed as `any` to avoid union-overload TS errors when calling
+    // shared methods like .register(), .watch(), .reset(), .trigger(), .setValue().
+    // Field-specific watches always use the concrete form instance directly.
+    const form = isWithOptions ? formWithOptions : isDefault ? formDefault : formWithWordBank;
+    // ── State ──────────────────────────────────────────────────────────────────
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    const [wordBankImagePreviews, setWordBankImagePreviews] = useState({});
+    // ── Email fields (only for EMAIL viewMode) ─────────────────────────────────
+    const [emailFrom, setEmailFrom] = useState(apiData?.emailFrom || '');
+    const [emailTo, setEmailTo] = useState(apiData?.emailTo || '');
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const sentOnChangeRef = useRef(false);
+    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        sentOnChangeRef.current = true;
+        onChangeRef.current?.(data);
+    }, 300);
+    // ── Watch values ───────────────────────────────────────────────────────────
+    const watchedTitle = form.watch('title');
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedParagraph = form.watch('paragraph');
+    const watchedWordBank = (isDefault ? [] : form.watch('wordBank'));
+    const watchedAnswers = form.watch('answers');
+    const watchedCaseSensitive = form.watch('caseSensitive');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    // WITH_WORD_BANK or DEFAULT — both carry exampleAnswer (list of answer texts marked as example)
+    const watchedExampleAnswer = isWithWordBank
+        ? formWithWordBank.watch('exampleAnswer')
+        : isDefault
+            ? (formDefault.watch('exampleAnswer') || [])
+            : [];
+    const watchedIsExample = isWithWordBank
+        ? formWithWordBank.watch('isExample')
+        : false;
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl || '');
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    const placeholderIndices = useMemo(() => parsePlaceholders(watchedParagraph), [watchedParagraph]);
+    const blankCount = placeholderIndices.length;
+    const availableWords = useMemo(() => isWithWordBank
+        ? watchedWordBank.map((item) => item.word).filter((w) => w.trim().length > 0)
+        : [], [isWithWordBank, watchedWordBank]);
+    // ── Auto-sync arrays when blankCount changes ───────────────────────────────
+    useEffect(() => {
+        if (isInitializingRef.current || blankCount === 0)
+            return;
+        if (isWithOptions) {
+            const currentWordBank = formWithOptions.getValues('wordBank');
+            const currentAnswers = formWithOptions.getValues('answers');
+            if (currentWordBank.length !== blankCount) {
+                formWithOptions.setValue('wordBank', Array.from({ length: blankCount }, (_, i) => i < currentWordBank.length ? currentWordBank[i] : { options: ['', '', ''] }));
+            }
+            if (currentAnswers.length !== blankCount) {
+                formWithOptions.setValue('answers', Array.from({ length: blankCount }, (_, i) => i < currentAnswers.length ? currentAnswers[i] : ''));
+            }
+        }
+        else if (isDefault) {
+            const currentAnswers = formDefault.getValues('answers');
+            if (currentAnswers.length !== blankCount) {
+                formDefault.setValue('answers', Array.from({ length: blankCount }, (_, i) => i < currentAnswers.length ? currentAnswers[i] : ''));
+            }
+        }
+        else if (isWithWordBank) {
+            const currentAnswers = formWithWordBank.getValues('answers');
+            if (currentAnswers.length !== blankCount) {
+                formWithWordBank.setValue('answers', Array.from({ length: blankCount }, (_, i) => i < currentAnswers.length ? currentAnswers[i] : ''));
+            }
+        }
+    }, [blankCount, isWithOptions, isWithWordBank, isDefault, formWithOptions, formWithWordBank, formDefault]);
+    // Secondary guard: keep WITH_OPTIONS wordBank length in sync
+    useEffect(() => {
+        if (!isWithOptions || isInitializingRef.current || blankCount === watchedWordBank.length)
+            return;
+        const newWordBank = [...watchedWordBank];
+        let changed = false;
+        while (newWordBank.length < blankCount) {
+            newWordBank.push({ options: ['', '', ''] });
+            changed = true;
+        }
+        if (newWordBank.length > blankCount) {
+            newWordBank.length = blankCount;
+            changed = true;
+        }
+        if (changed) {
+            formWithOptions.setValue('wordBank', newWordBank, { shouldValidate: true });
+            if (watchedAnswers.length > blankCount) {
+                const a = [...watchedAnswers];
+                a.length = blankCount;
+                formWithOptions.setValue('answers', a, { shouldValidate: true });
+            }
+        }
+    }, [blankCount, watchedWordBank.length, isWithOptions, formWithOptions, watchedAnswers]);
+    // ── Expose validation ref ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => {
+                const isValid = await form.trigger();
+                console.log('[WordFillParagraphCreator] triggerValidation:', isValid, form.formState.errors);
+                return isValid;
+            },
+            getFormData: () => {
+                const base = {
+                    title: watchedTitle,
+                    imageUrl: watchedImageUrl,
+                    paragraph: watchedParagraph,
+                    wordBank: isDefault ? [] : watchedWordBank,
+                    answers: watchedAnswers,
+                    caseSensitive: watchedCaseSensitive,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                    viewMode,
+                    groupTitle,
+                    groupSubtitle,
+                    groupContent,
+                    groupImageUrl,
+                    groupNumber: currentGroupNumber,
+                };
+                if (isEmail) {
+                    base.emailFrom = emailFrom;
+                    base.emailTo = emailTo;
+                }
+                console.log('[WordFillParagraphCreator] getFormData returning:', base);
+                if (isWithWordBank) {
+                    return { ...base, exampleAnswer: watchedExampleAnswer, isExample: watchedIsExample };
+                }
+                if (isDefault) {
+                    return { ...base, exampleAnswer: watchedExampleAnswer };
+                }
+                return base;
+            },
+        };
+    }, [
+        validationRef, form, viewMode,
+        watchedTitle, watchedImageUrl, watchedParagraph, watchedWordBank, watchedAnswers,
+        watchedCaseSensitive, watchedExplanation, watchedPoints,
+        watchedExampleAnswer, watchedIsExample, isWithWordBank, isDefault,
+        isEmail, emailFrom, emailTo,
+        groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber,
+    ]);
+    // ── Sync from initialData changes ─────────────────────────────────────────
+    useEffect(() => {
+        const d = initialData;
+        const normalised = {
+            title: d?.title || '',
+            imageUrl: d?.imageUrl || '',
+            paragraph: d?.paragraph || '',
+            wordBank: d?.wordBank?.length > 0 ? d.wordBank : [],
+            answers: d?.answers?.length > 0 ? d.answers : [],
+            caseSensitive: d?.caseSensitive || false,
+            explanation: d?.explanation || '',
+            points: d?.points ?? 1,
+            ...(isWithWordBank && {
+                exampleAnswer: d?.exampleAnswer?.length > 0 ? d.exampleAnswer : [],
+                isExample: d?.isExample || false,
+            }),
+            ...(isDefault && {
+                exampleAnswer: d?.exampleAnswer?.length > 0 ? d.exampleAnswer
+                    : d?.content?.exampleAnswer?.length > 0 ? d.content.exampleAnswer
+                        : d?.answer?.example?.length > 0 ? d.answer.example
+                            : d?.correctAnswer?.example?.length > 0 ? d.correctAnswer.example
+                                : [],
+            }),
+        };
+        const changed = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!changed)
+            return;
+        previousInitialDataRef.current = initialData;
+        // FIX: When sentOnChangeRef is true, it means our own onChange fired.
+        // However, if the incoming data has meaningfully different content (e.g., from
+        // question bank selection), we must NOT skip the reset. Only skip if the incoming
+        // data matches what the form already has (a true echo).
+        if (sentOnChangeRef.current) {
+            sentOnChangeRef.current = false;
+            const hasNewContent = normalised.paragraph && normalised.paragraph !== watchedParagraph;
+            const hasNewTitle = normalised.title && normalised.title !== watchedTitle;
+            if (!hasNewContent && !hasNewTitle)
+                return;
+        }
+        const isEcho = watchedTitle === normalised.title &&
+            watchedParagraph === normalised.paragraph &&
+            watchedImageUrl === normalised.imageUrl &&
+            watchedPoints === normalised.points;
+        if (isEcho && initialData?.isCompleted === true)
+            return;
+        const shouldReset = !isEcho &&
+            (normalised.title !== watchedTitle ||
+                normalised.paragraph !== watchedParagraph ||
+                normalised.imageUrl !== watchedImageUrl);
+        if (shouldReset && normalised.paragraph) {
+            isInitializingRef.current = true;
+            form.reset(normalised);
+            if (isEmail) {
+                setEmailFrom(d?.emailFrom || '');
+                setEmailTo(d?.emailTo || '');
+            }
+            setTimeout(() => { isInitializingRef.current = false; }, 150);
+        }
+    }, [
+        initialData, form, isWithWordBank,
+        watchedTitle, watchedImageUrl, watchedParagraph, watchedPoints,
+    ]);
+    // ── onChange effect ────────────────────────────────────────────────────────
+    const watchedWordBankStr = JSON.stringify(watchedWordBank);
+    const watchedAnswersStr = JSON.stringify(watchedAnswers);
+    useEffect(() => {
+        const payload = {
+            title: watchedTitle, imageUrl: watchedImageUrl, paragraph: watchedParagraph,
+            wordBank: isDefault ? [] : watchedWordBank, answers: watchedAnswers,
+            caseSensitive: watchedCaseSensitive, explanation: watchedExplanation,
+            points: watchedPoints, viewMode,
+            groupTitle, groupSubtitle, groupContent, groupImageUrl,
+            groupNumber: currentGroupNumber,
+        };
+        if (isWithWordBank) {
+            payload.exampleAnswer = watchedExampleAnswer;
+            payload.isExample = watchedIsExample;
+        }
+        if (isDefault) {
+            payload.exampleAnswer = watchedExampleAnswer;
+        }
+        if (isEmail) {
+            payload.emailFrom = emailFrom;
+            payload.emailTo = emailTo;
+        }
+        if (isInitializingRef.current) {
+            previousPayloadRef.current = JSON.stringify(payload);
+            return;
+        }
+        const str = JSON.stringify(payload);
+        if (previousPayloadRef.current !== str) {
+            previousPayloadRef.current = str;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedTitle, watchedImageUrl, watchedParagraph,
+        watchedWordBankStr, watchedAnswersStr,
+        watchedCaseSensitive, watchedExplanation, watchedPoints,
+        watchedExampleAnswer, watchedIsExample,
+        emailFrom, emailTo,
+        groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber,
+    ]);
+    // ── WITH_OPTIONS handlers ──────────────────────────────────────────────────
+    const handleOptionChange = (blankIndex, optionIndex, value) => {
+        const newWordBank = [...watchedWordBank];
+        const newOptions = [...(newWordBank[blankIndex]?.options || [])];
+        const old = newOptions[optionIndex];
+        newOptions[optionIndex] = value;
+        newWordBank[blankIndex] = { ...newWordBank[blankIndex], options: newOptions };
+        formWithOptions.setValue('wordBank', newWordBank, { shouldValidate: true });
+        if (old) {
+            const ans = [...watchedAnswers];
+            if (ans[blankIndex] === old) {
+                ans[blankIndex] = value;
+                formWithOptions.setValue('answers', ans);
+            }
+        }
+    };
+    const handleAddOption = (blankIndex) => {
+        const newWordBank = [...watchedWordBank];
+        newWordBank[blankIndex] = { ...newWordBank[blankIndex], options: [...(newWordBank[blankIndex]?.options || []), ''] };
+        formWithOptions.setValue('wordBank', newWordBank);
+    };
+    const handleRemoveOption = (blankIndex, optionIndex) => {
+        const newWordBank = [...watchedWordBank];
+        const removed = newWordBank[blankIndex]?.options?.[optionIndex];
+        newWordBank[blankIndex] = {
+            ...newWordBank[blankIndex],
+            options: (newWordBank[blankIndex]?.options || []).filter((_, i) => i !== optionIndex),
+        };
+        formWithOptions.setValue('wordBank', newWordBank, { shouldValidate: true });
+        if (removed) {
+            const ans = [...watchedAnswers];
+            if (ans[blankIndex] === removed) {
+                ans[blankIndex] = '';
+                formWithOptions.setValue('answers', ans);
+            }
+        }
+    };
+    const handleSelectAnswerOptions = (blankIndex, option) => {
+        const ans = [...watchedAnswers];
+        while (ans.length <= blankIndex)
+            ans.push('');
+        ans[blankIndex] = option;
+        formWithOptions.setValue('answers', ans);
+    };
+    const handleToggleExampleOptions = (blankIndex, checked) => {
+        const newWordBank = [...watchedWordBank];
+        newWordBank[blankIndex] = { ...newWordBank[blankIndex], isExample: checked };
+        formWithOptions.setValue('wordBank', newWordBank);
+    };
+    // ── WITH_WORD_BANK handlers ────────────────────────────────────────────────
+    const handleAddWord = () => {
+        formWithWordBank.setValue('wordBank', [...watchedWordBank, { word: '', imageUrl: '' }]);
+    };
+    const handleRemoveWord = (index) => {
+        const removedWord = watchedWordBank[index]?.word;
+        const newWordBank = watchedWordBank.filter((_, i) => i !== index);
+        formWithWordBank.setValue('wordBank', newWordBank);
+        const newPreviews = { ...wordBankImagePreviews };
+        delete newPreviews[index];
+        const reindexed = {};
+        Object.entries(newPreviews).forEach(([key, val]) => {
+            const k = parseInt(key);
+            reindexed[k > index ? k - 1 : k] = val;
+        });
+        setWordBankImagePreviews(reindexed);
+        if (removedWord) {
+            formWithWordBank.setValue('answers', watchedAnswers.map((a) => (a === removedWord ? '' : a)));
+            formWithWordBank.setValue('exampleAnswer', (watchedExampleAnswer || []).filter((e) => e !== removedWord));
+        }
+    };
+    const handleWordChange = (index, newWord) => {
+        const oldWord = watchedWordBank[index]?.word;
+        const newWordBank = [...watchedWordBank];
+        newWordBank[index] = { ...newWordBank[index], word: newWord };
+        formWithWordBank.setValue('wordBank', newWordBank, { shouldValidate: true });
+        if (oldWord && oldWord !== newWord) {
+            formWithWordBank.setValue('answers', watchedAnswers.map((a) => (a === oldWord ? newWord : a)));
+            formWithWordBank.setValue('exampleAnswer', (watchedExampleAnswer || []).map((e) => (e === oldWord ? newWord : e)));
+        }
+    };
+    const handleExampleToggle = (index, checked) => {
+        const newWordBank = [...watchedWordBank];
+        newWordBank[index] = { ...newWordBank[index], isExample: checked };
+        formWithWordBank.setValue('wordBank', newWordBank);
+        formWithWordBank.setValue('exampleAnswer', newWordBank.filter((w) => w.isExample).map((w) => w.word));
+    };
+    const handleAnswerSelect = (blankIndex, word) => {
+        const ans = [...watchedAnswers];
+        ans[blankIndex] = word;
+        formWithWordBank.setValue('answers', ans);
+    };
+    // ── DEFAULT mode handlers ────────────────────────────────────────────────
+    const handleDefaultAnswerChange = (index, value) => {
+        const ans = [...watchedAnswers];
+        const oldValue = ans[index];
+        ans[index] = value;
+        formDefault.setValue('answers', ans, { shouldValidate: true });
+        // Keep exampleAnswer in sync when the answer text of an example blank changes
+        const currentExamples = formDefault.getValues('exampleAnswer') || [];
+        if (oldValue && currentExamples.includes(oldValue)) {
+            const updated = currentExamples.map((e) => (e === oldValue ? value : e)).filter((e) => e);
+            formDefault.setValue('exampleAnswer', updated);
+        }
+    };
+    const handleDefaultToggleExample = (index) => {
+        const answerText = (watchedAnswers[index] || '').trim();
+        if (!answerText)
+            return;
+        const current = (formDefault.getValues('exampleAnswer') || []).filter((e) => e);
+        const next = current.includes(answerText)
+            ? current.filter((e) => e !== answerText)
+            : [...current, answerText];
+        formDefault.setValue('exampleAnswer', next, { shouldValidate: true });
+    };
+    // ── Preview mode ───────────────────────────────────────────────────────────
+    if (isClientMode) {
+        const baseQuestionData = {
+            title: watchedTitle,
+            imageUrl: displayPreviewUrl || watchedImageUrl,
+            paragraph: watchedParagraph,
+            wordBank: watchedWordBank,
+            answers: watchedAnswers,
+            caseSensitive: watchedCaseSensitive,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            viewMode,
+            emailFrom: isEmail ? emailFrom : undefined,
+            emailTo: isEmail ? emailTo : undefined,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: isWithOptions ? 'Điền từ vào đoạn văn - Có lựa chọn (Preview)' : isDefault ? 'Điền từ vào đoạn văn - Mặc định (Xem trước)' : 'Điền từ vào đoạn văn (Xem trước)' }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc \u2014 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 ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(WordFillParagraphClient, { questionData: isWithOptions
+                        ? baseQuestionData
+                        : isDefault
+                            ? { ...baseQuestionData, exampleAnswer: watchedExampleAnswer }
+                            : { ...baseQuestionData, exampleAnswer: watchedExampleAnswer, isExample: watchedIsExample }, isReviewMode: true, autoFillCorrectAnswers: isWithOptions ? true : undefined, userAnswer: isWithOptions ? undefined : watchedAnswers })] }));
+    }
+    // ── Header bar label / icon / instructions based on viewMode ──────────────
+    const headerTitle = isWithOptions
+        ? 'Điền từ vào đoạn văn - Có lựa chọn'
+        : isDefault
+            ? 'Điền từ vào đoạn văn - Mặc định'
+            : isWithWordBank
+                ? 'Điền từ vào đoạn văn'
+                : 'Điền từ vào đoạn văn';
+    const headerSubtitle = isWithOptions
+        ? 'Đọc đoạn văn, chọn từ đúng từ các lựa chọn và viết vào chỗ trống'
+        : isDefault
+            ? 'Đọc đoạn văn và nhập đáp án trực tiếp cho từng chỗ trống'
+            : isWithWordBank
+                ? 'Đọc đoạn văn và chọn từ đúng từ word bank'
+                : 'Đọc đoạn văn và điền từ vào chỗ trống';
+    const instructionItems = isWithOptions
+        ? [
+            _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ", '{2}', "..."] }),
+            _jsxs(_Fragment, { children: ["H\u1EC7 th\u1ED1ng t\u1EF1 t\u1EA1o ", _jsx("strong", { children: "l\u1EF1a ch\u1ECDn" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng (th\u01B0\u1EDDng 3 l\u1EF1a ch\u1ECDn m\u1ED7i ch\u1ED7)"] }),
+            _jsxs(_Fragment, { children: ["Nh\u1EA5n ", _jsx("strong", { children: "\u00F4 ch\u1EEF c\u00E1i" }), " (A, B, C) b\u00EAn tr\u00E1i \u0111\u1EC3 ch\u1ECDn ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng"] }),
+            _jsxs(_Fragment, { children: ["\u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho ch\u1ED7 tr\u1ED1ng m\u1EABu (s\u1EBD \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n cho h\u1ECDc sinh)"] }),
+        ]
+        : isDefault
+            ? [
+                _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
+                _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " tr\u1EF1c ti\u1EBFp cho t\u1EEBng ch\u1ED7 tr\u1ED1ng b\u00EAn d\u01B0\u1EDBi"] }),
+            ]
+            : isWithWordBank
+                ? [
+                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
+                    _jsxs(_Fragment, { children: ["Th\u00EAm c\u00E1c t\u1EEB v\u00E0o ", _jsx("strong", { children: "Word Bank" }), " (bao g\u1ED3m c\u1EA3 \u0111\u00E1p \u00E1n \u0111\u00FAng v\u00E0 t\u1EEB nhi\u1EC5u)"] }),
+                    _jsxs(_Fragment, { children: ["Ch\u1ECDn ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng t\u1EEB danh s\u00E1ch Word Bank"] }),
+                    _jsxs(_Fragment, { children: ["\u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho t\u1EEB m\u1EABu (s\u1EBD \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n cho h\u1ECDc sinh)"] }),
+                ]
+                : [
+                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
+                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng"] }),
+                ];
+    const canPreview = isWithOptions
+        ? !!watchedParagraph && watchedWordBank.length > 0
+        : !!watchedParagraph && blankCount > 0;
+    const gradientBar = isWithOptions
+        ? 'bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500'
+        : isDefault
+            ? 'bg-gradient-to-r from-indigo-500 via-blue-500 to-cyan-500'
+            : 'bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500';
+    const iconBg = isWithOptions
+        ? 'bg-gradient-to-br from-emerald-500 to-teal-600'
+        : isDefault
+            ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
+            : 'bg-gradient-to-br from-teal-500 to-cyan-600';
+    const IconComponent = isWithOptions ? BookOpen : isDefault ? FileText : FileText;
+    // ── Creator UI ─────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-6", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupConfig, uploadIdPrefix: `word-fill-paragraph-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: `h-1.5 ${gradientBar}` }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl ${iconBg} shadow-md`, children: _jsx(IconComponent, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: headerTitle }), _jsx("p", { className: "text-sm text-gray-500", children: headerSubtitle })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !canPreview, className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-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-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" }), _jsx("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: instructionItems.map((item, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), item] }, i))) })] })] }) }), _jsx(CommonFields, { form: form, displayPreviewUrl: displayPreviewUrl, setImagePreviewUrl: setImagePreviewUrl, watchedImageUrl: watchedImageUrl, watchedParagraph: watchedParagraph, blankCount: blankCount, externalErrors: externalErrors, showCaseSensitive: isWithWordBank, watchedCaseSensitive: watchedCaseSensitive, afterPoints: isEmail ? (_jsxs("div", { className: "space-y-4 rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Mail, { className: "h-4 w-4 text-blue-500" }), "Email"] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailFrom", className: "text-sm font-medium text-gray-700", children: "From" }), _jsx(Input, { id: "emailFrom", value: emailFrom, onChange: (e) => setEmailFrom(e.target.value), placeholder: "V\u00ED d\u1EE5: Brenda", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailTo", className: "text-sm font-medium text-gray-700", children: "To" }), _jsx(Input, { id: "emailTo", value: emailTo, onChange: (e) => setEmailTo(e.target.value), placeholder: "V\u00ED d\u1EE5: Ewan", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] })] })] })) : undefined })] })] }), isWithOptions && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-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-teal-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["L\u1EF1a ch\u1ECDn cho t\u1EEBng ch\u1ED7 tr\u1ED1ng (", watchedWordBank.length, ")"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [watchedWordBank.length === 0 && (_jsx("div", { className: "rounded-lg border-2 border-dashed border-gray-200 p-8 text-center", children: _jsxs("p", { className: "text-sm text-gray-500", children: ["Ch\u01B0a c\u00F3 ch\u1ED7 tr\u1ED1ng n\u00E0o. Nh\u1EADp \u0111o\u1EA1n v\u0103n v\u1EDBi ", '{0}', ", ", '{1}', "... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng."] }) })), watchedWordBank.map((blank, blankIndex) => {
+                                const selectedAnswer = watchedAnswers[blankIndex] || '';
+                                const isExampleItem = blank.isExample || false;
+                                return (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${isExampleItem
+                                        ? 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50'
+                                        : 'border-gray-200 bg-white hover:border-teal-200'}`, children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white ${isExampleItem
+                                                                ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                                                : 'bg-gradient-to-br from-teal-500 to-cyan-600'}`, children: blankIndex }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: isExampleItem ? `Chỗ trống ${blankIndex} (Example)` : `Chỗ trống ${blankIndex}` }), selectedAnswer && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), selectedAnswer] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Checkbox, { checked: isExampleItem, onCheckedChange: (checked) => handleToggleExampleOptions(blankIndex, checked === true) }), "Example"] })] }), _jsxs("div", { className: "space-y-2", children: [(blank.options || []).map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => option.trim() && handleSelectAnswerOptions(blankIndex, option), className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold transition-all ${selectedAnswer === option && option.trim()
+                                                                ? 'bg-green-500 text-white shadow-sm'
+                                                                : 'bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-600'}`, title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: String.fromCharCode(65 + optionIndex) }), _jsx(Input, { value: option, onChange: (e) => handleOptionChange(blankIndex, optionIndex, e.target.value), placeholder: `Lựa chọn ${String.fromCharCode(65 + optionIndex)}`, className: "flex-1 border-gray-200 text-sm" }), (blank.options || []).length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleRemoveOption(blankIndex, optionIndex), className: "h-8 w-8 p-0 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, optionIndex))), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => handleAddOption(blankIndex), className: "mt-1 gap-1 text-xs text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm l\u1EF1a ch\u1ECDn"] })] }), form.formState.errors.answers?.[blankIndex] && (_jsx("p", { className: "mt-2 text-xs font-medium text-red-500", children: form.formState.errors.answers[blankIndex]?.message }))] }, blankIndex));
+                            })] })] })), isWithWordBank && (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-pink-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-purple-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Word Bank (", watchedWordBank.length, " t\u1EEB)"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Th\u00EAm t\u1EA5t c\u1EA3 c\u00E1c t\u1EEB g\u1EE3i \u00FD cho h\u1ECDc sinh (bao g\u1ED3m ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " v\u00E0", ' ', _jsx("strong", { children: "t\u1EEB nhi\u1EC5u" }), "). \u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho t\u1EEB m\u1EABu \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n."] }), watchedWordBank.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: watchedWordBank.map((item, index) => (_jsxs("div", { className: `space-y-3 rounded-lg border p-4 transition-all ${item.isExample
+                                                ? 'border-amber-300 bg-amber-50/50'
+                                                : 'border-gray-200 bg-gray-50/50 hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm ${item.isExample
+                                                                        ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                                                        : 'bg-gradient-to-br from-purple-500 to-pink-600'}`, children: index + 1 }), item.isExample && (_jsx("span", { className: "rounded-full border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-700", children: "EXAMPLE" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Checkbox, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => handleExampleToggle(index, !!checked) }), _jsx(Label, { htmlFor: `example-${index}`, className: "cursor-pointer text-xs font-medium text-gray-600", children: "Example" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleRemoveWord(index), className: "h-7 w-7 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { children: [_jsxs(Label, { className: "text-xs text-gray-500", children: ["T\u1EEB ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: item.word, onChange: (e) => handleWordChange(index, e.target.value), placeholder: "Nh\u1EADp t\u1EEB...", className: `${item.isExample ? 'bg-amber-50' : ''} ${formWithWordBank.formState.errors.wordBank?.[index]?.word
+                                                                ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+                                                                : 'border-gray-200'}` }), formWithWordBank.formState.errors.wordBank?.[index]?.word?.message && (_jsx("p", { className: "mt-1 text-xs text-red-500", children: formWithWordBank.formState.errors.wordBank[index].word.message }))] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs text-gray-500", children: "N\u1ED9i dung (tu\u1EF3 ch\u1ECDn)" }), _jsx(Textarea, { value: item.content || '', onChange: (e) => {
+                                                                const nb = [...watchedWordBank];
+                                                                nb[index] = { ...nb[index], content: e.target.value };
+                                                                formWithWordBank.setValue('wordBank', nb);
+                                                            }, placeholder: "Nh\u1EADp n\u1ED9i dung...", className: `${item.isExample ? 'bg-amber-50' : ''} min-h-[88px] border-gray-200` })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs text-gray-500", children: "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)" }), _jsx(FileUpload, { id: `word-bank-image-${index}`, label: "", accept: "image/*", value: item.imageUrl || '', onChange: (url) => {
+                                                                const nb = [...watchedWordBank];
+                                                                nb[index] = { ...nb[index], imageUrl: url };
+                                                                formWithWordBank.setValue('wordBank', nb);
+                                                            }, onPresignedUrlChange: (url) => setWordBankImagePreviews((prev) => ({ ...prev, [index]: url })), maxSize: 5, placeholder: "Upload h\u00ECnh", autoUpload: true, prefix: "questions" }), _jsx(WordBankImagePreview, { imageUrl: item.imageUrl || '', localPreviewUrl: wordBankImagePreviews[index], index: index })] })] }, index))) })) : (_jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: [_jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o trong Word Bank" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB \u0111\u1EA7u ti\u00EAn"] })] })), formWithWordBank.formState.errors.wordBank?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.wordBank.message }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-400" }), _jsx(CardHeader, { className: "pb-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-green-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng (", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Ch\u1ECDn t\u1EEB \u0111\u00FAng t\u1EEB ", _jsx("strong", { children: "Word Bank" }), " cho m\u1ED7i ch\u1ED7 tr\u1ED1ng trong \u0111o\u1EA1n v\u0103n."] }), _jsx("div", { className: "space-y-3", children: placeholderIndices.map((placeholderIdx) => {
+                                                    const currentAnswer = watchedAnswers[placeholderIdx] || '';
+                                                    const isExampleBlank = watchedWordBank.some((w) => w.isExample && w.word === currentAnswer);
+                                                    return (_jsxs("div", { className: `flex items-center gap-4 rounded-lg border p-4 transition-all ${currentAnswer
+                                                            ? isExampleBlank
+                                                                ? 'border-amber-300 bg-amber-50/50'
+                                                                : 'border-green-300 bg-green-50/50'
+                                                            : 'border-gray-200 bg-gray-50/50'}`, children: [_jsxs("div", { className: "flex min-w-[140px] items-center gap-3", children: [_jsx("div", { className: `flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm ${currentAnswer
+                                                                            ? isExampleBlank
+                                                                                ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                                                                : 'bg-gradient-to-br from-green-500 to-emerald-600'
+                                                                            : 'bg-gradient-to-br from-gray-400 to-gray-500'}`, children: '{' + placeholderIdx + '}' }), _jsxs("div", { children: [_jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["Ch\u1ED7 tr\u1ED1ng (", placeholderIdx + 1, ")"] }), isExampleBlank && (_jsx("span", { className: "block text-[10px] font-medium text-amber-600", children: "Example - \u0110i\u1EC1n s\u1EB5n" }))] })] }), _jsx("div", { className: "flex-1", children: _jsxs(Select, { value: currentAnswer || undefined, onValueChange: (value) => handleAnswerSelect(placeholderIdx, value), children: [_jsx(SelectTrigger, { className: `w-full ${formWithWordBank.formState.errors.answers?.[placeholderIdx]
+                                                                                ? 'border-red-300 ring-1 ring-red-200'
+                                                                                : currentAnswer
+                                                                                    ? 'border-green-300 bg-white'
+                                                                                    : 'border-gray-200'}`, children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn t\u1EEB \u0111\u00FAng t\u1EEB Word Bank..." }) }), _jsx(SelectContent, { children: availableWords.length > 0 ? (availableWords.map((word, wordIdx) => {
+                                                                                const isUsedElsewhere = watchedAnswers.some((ans, ansIdx) => ans === word && ansIdx !== placeholderIdx);
+                                                                                const isExampleWord = watchedWordBank.find((w) => w.word === word)?.isExample;
+                                                                                return (_jsx(SelectItem, { value: word, disabled: isUsedElsewhere, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: isUsedElsewhere ? 'text-gray-400' : '', children: word }), isExampleWord && (_jsx("span", { className: "rounded bg-amber-100 px-1 py-0.5 text-[10px] font-medium text-amber-600", children: "example" })), isUsedElsewhere && (_jsx("span", { className: "text-[10px] text-gray-400", children: "(\u0111\u00E3 d\u00F9ng)" }))] }) }, `${word}-${wordIdx}`));
+                                                                            })) : (_jsx("div", { className: "py-4 text-center text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o trong Word Bank" })) })] }) }), _jsx("div", { className: "flex-shrink-0", children: currentAnswer ? (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(ListChecks, { className: "h-4 w-4 text-green-600" }) })) : formWithWordBank.formState.errors.answers?.[placeholderIdx] ? (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-red-100", children: _jsx("span", { className: "text-xs font-bold text-red-500", children: "!" }) })) : (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-100", children: _jsx("span", { className: "text-xs text-gray-400", children: "?" }) })) })] }, placeholderIdx));
+                                                }) }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-gray-600", children: ["\u0110\u00E3 ch\u1ECDn \u0111\u00E1p \u00E1n: ", _jsx("strong", { children: watchedAnswers.filter((a) => a).length }), " / ", blankCount] }), _jsxs("span", { className: "text-gray-600", children: ["T\u1EEB nhi\u1EC5u:", ' ', _jsx("strong", { children: watchedWordBank.length - watchedAnswers.filter((a) => a).length }), " t\u1EEB"] })] }) })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formWithWordBank.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.answers.message }))] })] })] })), isDefault && (_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 via-blue-500 to-cyan-500" }), _jsx(CardHeader, { className: "pb-4", 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-indigo-500 to-blue-600 shadow-md", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n cho t\u1EEBng ch\u1ED7 tr\u1ED1ng" })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3", children: placeholderIndices.map((idx) => {
+                                            const answerText = (watchedAnswers[idx] || '').trim();
+                                            const isExampleAnswer = !!answerText && watchedExampleAnswer.includes(answerText);
+                                            return (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${isExampleAnswer
+                                                    ? 'border-amber-300 bg-gradient-to-r from-amber-50 to-yellow-50'
+                                                    : watchedAnswers[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-bold transition-all ${isExampleAnswer
+                                                                    ? 'bg-gradient-to-br from-amber-500 to-orange-500 text-white shadow-md'
+                                                                    : watchedAnswers[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: watchedAnswers[idx] || '', onChange: (e) => handleDefaultAnswerChange(idx, e.target.value), placeholder: `Đáp án cho {${idx}}`, className: `transition-all ${isExampleAnswer
+                                                                    ? 'border-amber-300 bg-white focus:border-amber-400 focus:ring-amber-200'
+                                                                    : watchedAnswers[idx]
+                                                                        ? 'border-green-300 bg-white focus:border-green-400 focus:ring-green-200'
+                                                                        : 'border-gray-200 focus:border-indigo-400 focus:ring-indigo-200'}` }), _jsxs("button", { type: "button", disabled: !answerText, onClick: () => handleDefaultToggleExample(idx), title: isExampleAnswer ? 'Bỏ đánh dấu Example' : 'Đánh dấu làm Example', className: `inline-flex h-10 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium transition-colors select-none ${isExampleAnswer
+                                                                    ? 'border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100'
+                                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${!answerText ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(Star, { className: `h-4 w-4 ${isExampleAnswer ? 'fill-amber-400 text-amber-400' : ''}` }), "Example"] })] }), formDefault.formState.errors.answers?.[idx] && (_jsx("p", { className: "mt-1.5 ml-13 text-xs text-red-500", children: formDefault.formState.errors.answers[idx]?.message }))] }, idx));
+                                        }) }), _jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-indigo-50/50 px-3 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-indigo-500" }), _jsxs("span", { className: "text-xs text-indigo-700", children: [watchedAnswers.filter((a) => a?.trim()).length, " / ", blankCount, " \u0111\u00E1p \u00E1n \u0111\u00E3 \u0111i\u1EC1n"] })] })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formDefault.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formDefault.formState.errors.answers.message }))] })] })), _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" }) })] })] }));
+}
+//# sourceMappingURL=WordFillParagraphCreator.js.map