@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormCreator.js

@@ -1,261 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import TextAlign from '@tiptap/extension-text-align';
-import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
-import { List, ListOrdered, Bold, Italic, AlignLeft, AlignCenter, AlignRight, TableIcon, Plus, Minus, Trash2, BookOpen, Eye, Pencil, CheckCircle2, PenLine, Info, MessageSquare, ImageIcon, } from 'lucide-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 { Switch } from '../../../../components/ui/switch';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
-import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
-import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
-import { useBasicQuestionGroup, getGroupNumberForIndex } from '../../_shared/hooks/useBasicQuestionGroup';
-// ─────────────────────────────────────────────────────────────────────────────
-// TipTap Toolbar
-// ─────────────────────────────────────────────────────────────────────────────
-const ToolbarBtn = ({ onClick, active, disabled, title, children, className = '', }) => (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, title: title, className: `inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-sm transition-colors disabled:opacity-30
-      ${active
-        ? 'bg-teal-100 text-teal-700'
-        : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'}
-      ${className}`, children: children }));
-const ToolbarSep = () => _jsx("div", { className: "mx-1 h-4 w-px bg-gray-200" });
-const EditorToolbar = ({ editor }) => {
-    if (!editor)
-        return null;
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-gray-100 bg-gray-50/70 px-2 py-1.5 rounded-t-lg", children: [_jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive('bold'), title: "\u0110\u1EADm", children: _jsx(Bold, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive('italic'), title: "Nghi\u00EAng", children: _jsx(Italic, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), active: editor.isActive('heading', { level: 2 }), className: "px-2 text-xs font-bold", children: "H2" }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), active: editor.isActive('heading', { level: 3 }), className: "px-2 text-xs font-bold", children: "H3" }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(), active: editor.isActive('heading', { level: 4 }), className: "px-2 text-xs font-bold", children: "H4" }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleBulletList().run(), active: editor.isActive('bulletList'), title: "Danh s\u00E1ch", children: _jsx(List, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleOrderedList().run(), active: editor.isActive('orderedList'), title: "Danh s\u00E1ch c\u00F3 s\u1ED1", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('left').run(), active: editor.isActive({ textAlign: 'left' }), title: "Tr\u00E1i", children: _jsx(AlignLeft, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('center').run(), active: editor.isActive({ textAlign: 'center' }), title: "Gi\u1EEFa", children: _jsx(AlignCenter, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('right').run(), active: editor.isActive({ textAlign: 'right' }), title: "Ph\u1EA3i", children: _jsx(AlignRight, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().insertTable({ rows: 5, cols: 2, withHeaderRow: false }).run(), title: "Ch\u00E8n b\u1EA3ng 2 c\u1ED9t \u00D7 5 h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(TableIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "B\u1EA3ng 2 c\u1ED9t" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().addRowAfter().run(), disabled: !editor.can().addRowAfter(), title: "Th\u00EAm h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "H\u00E0ng" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().deleteRow().run(), disabled: !editor.can().deleteRow(), title: "X\u00F3a h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(Minus, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "H\u00E0ng" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().deleteTable().run(), disabled: !editor.can().deleteTable(), title: "X\u00F3a b\u1EA3ng", className: "gap-1 px-2 text-xs text-red-400 hover:text-red-600", children: [_jsx(Trash2, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "B\u1EA3ng" })] })] }));
-};
-// ─────────────────────────────────────────────────────────────────────────────
-// Main Creator
-// ─────────────────────────────────────────────────────────────────────────────
-export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange: _onUnsavedChangesChange, validationRef, externalErrors, groupConfig, groupType, groups, questionIndexInPart = 0, partId = '', }) {
-    const [isPreviewMode, setIsPreviewMode] = useState(false);
-    const [points, setPoints] = useState(initialData?.points ?? 1);
-    const [caseSensitive, setCaseSensitive] = useState(initialData?.caseSensitive ?? false);
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // ── GROUP ──────────────────────────────────────────────────────────────────
-    const { isGrouped, isFirstInGroup, currentGroupNumber: hookGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, } = useBasicQuestionGroup({
-        partId,
-        groups,
-        questionIndexInPart,
-        initialData: {
-            title: initialData?.groupTitle || '',
-            subtitle: initialData?.groupSubtitle || '',
-            content: initialData?.groupContent || '',
-            imageUrl: initialData?.groupImageUrl || '',
-        },
-    });
-    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
-    const hasGroupConfig = groupConfig && groupConfig.length > 0;
-    const showContent = !hasGroupConfig || groupConfig.includes('content');
-    const currentGroupNumber = hookGroupNumber || getGroupNumberForIndex(questionIndexInPart, groups);
-    const [localTitle, setLocalTitle] = useState(initialData?.title || '');
-    const [localImageUrl, setLocalImageUrl] = useState(initialData?.imageUrl || '');
-    const effectiveTitle = localTitle;
-    const effectiveImageUrl = localImageUrl;
-    const setEffectiveTitle = setLocalTitle;
-    const setEffectiveImageUrl = setLocalImageUrl;
-    // Resolve presigned URL for image preview
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(effectiveImageUrl);
-    const displayImageUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // ── TipTap ─────────────────────────────────────────────────────────────────
-    const initialContent = initialData?.content || '<p></p>';
-    const [content, setContent] = useState(initialContent);
-    const [answers, setAnswers] = useState(initialData?.answers || {});
-    const previousPayloadRef = useRef('');
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const contentRef = useRef(content);
-    const onChangeRef = useRef(onChange);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Stable TipTap options: @tiptap/react calls `editor.setOptions` whenever the
-    // passed options object differs from the editor instance. Inline `extensions`
-    // / `editorProps` are new references every render → spurious `setOptions` →
-    // document update → `onUpdate` → payload change → question flips to "Chưa lưu"
-    // when an unrelated parent re-render happens (e.g. part audio upload).
-    const tiptapExtensions = useMemo(() => [
-        StarterKit.configure({ heading: { levels: [2, 3, 4] } }),
-        TextAlign.configure({ types: ['heading', 'paragraph'] }),
-        Table.configure({ resizable: true }),
-        TableRow,
-        TableCell,
-        TableHeader,
-    ], []);
-    const tiptapEditorProps = useMemo(() => ({
-        attributes: {
-            class: 'tiptap-editor prose prose-sm max-w-none p-4 focus:outline-none min-h-[400px]',
-        },
-    }), []);
-    const handleEditorUpdate = useCallback(({ editor: ed }) => {
-        const html = ed.getHTML();
-        if (html !== contentRef.current) {
-            contentRef.current = html;
-            setContent(html);
-        }
-    }, []);
-    const editor = useEditor({
-        immediatelyRender: false,
-        extensions: tiptapExtensions,
-        content,
-        editorProps: tiptapEditorProps,
-        onUpdate: handleEditorUpdate,
-    });
-    useEffect(() => {
-        contentRef.current = content;
-    }, [content]);
-    // Sync when initialData changes
-    useEffect(() => {
-        const changed = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!changed)
-            return;
-        previousInitialDataRef.current = initialData;
-        if (!initialData?.content || initialData.content === '<p></p>')
-            return;
-        isInitializingRef.current = true;
-        setLocalTitle(initialData?.title || '');
-        setLocalImageUrl(initialData?.imageUrl || '');
-        setPoints(initialData?.points ?? 1);
-        setCaseSensitive(initialData?.caseSensitive ?? false);
-        setExplanation(initialData?.explanation || '');
-        setAnswers(initialData?.answers || {});
-        const newContent = initialData.content;
-        if (newContent !== contentRef.current) {
-            contentRef.current = newContent;
-            setContent(newContent);
-            if (editor && !editor.isDestroyed)
-                editor.commands.setContent(newContent);
-        }
-        setTimeout(() => { isInitializingRef.current = false; }, 150);
-    }, [initialData, editor]);
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    const answersSerialized = JSON.stringify(answers);
-    // Derive expected blank keys from content
-    const expectedBlankKeys = useMemo(() => {
-        const keys = new Set();
-        const regex = /\{([\w\d]+)\}/g;
-        let match;
-        while ((match = regex.exec(content)) !== null)
-            keys.add(match[1]);
-        return Array.from(keys).sort((a, b) => {
-            const numA = parseInt(a), numB = parseInt(b);
-            if (!isNaN(numA) && !isNaN(numB))
-                return numA - numB;
-            return a.localeCompare(b);
-        });
-    }, [content]);
-    // Keep answers map in sync with blank keys
-    useEffect(() => {
-        setAnswers(prev => {
-            let changed = false;
-            const next = { ...prev };
-            Object.keys(next).forEach(k => { if (!expectedBlankKeys.includes(k)) {
-                delete next[k];
-                changed = true;
-            } });
-            expectedBlankKeys.forEach(k => { if (!(k in next)) {
-                next[k] = '';
-                changed = true;
-            } });
-            return changed ? next : prev;
-        });
-    }, [expectedBlankKeys]);
-    // Emit changes (unsaved status is driven only by `onChange` → ExamCreator, like ChooseTheCorrectAnswerCreator)
-    useEffect(() => {
-        const payload = {
-            title: effectiveTitle,
-            imageUrl: effectiveImageUrl,
-            content,
-            answers,
-            points,
-            caseSensitive,
-            explanation,
-            groupTitle,
-            groupSubtitle,
-            groupContent,
-            groupImageUrl,
-            groupNumber: currentGroupNumber,
-        };
-        if (isInitializingRef.current) {
-            previousPayloadRef.current = JSON.stringify(payload);
-            return;
-        }
-        const str = JSON.stringify(payload);
-        if (str !== previousPayloadRef.current) {
-            previousPayloadRef.current = str;
-            debouncedOnChange(payload);
-        }
-    }, [
-        effectiveTitle,
-        effectiveImageUrl,
-        content,
-        answersSerialized,
-        points,
-        caseSensitive,
-        explanation,
-        groupTitle,
-        groupSubtitle,
-        groupContent,
-        groupImageUrl,
-        currentGroupNumber,
-    ]);
-    // Expose validation
-    useEffect(() => {
-        if (!validationRef)
-            return;
-        validationRef.current = {
-            triggerValidation: async () => {
-                if (!content || content === '<p></p>')
-                    return false;
-                if (expectedBlankKeys.length === 0)
-                    return false;
-                for (const key of expectedBlankKeys) {
-                    if (!answers[key] || answers[key].trim() === '')
-                        return false;
-                }
-                return true;
-            },
-            getFormData: () => ({
-                title: effectiveTitle,
-                imageUrl: effectiveImageUrl,
-                content,
-                answers,
-                points,
-                caseSensitive,
-                explanation,
-                groupTitle,
-                groupSubtitle,
-                groupContent,
-                groupImageUrl,
-                groupNumber: currentGroupNumber,
-            }),
-        };
-    }, [validationRef, effectiveTitle, effectiveImageUrl, content, answers, points, caseSensitive, explanation, expectedBlankKeys, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber]);
-    // ── Preview mode ───────────────────────────────────────────────────────────
-    if (isPreviewMode) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-teal-500 to-cyan-600 shadow-sm", children: _jsx(Eye, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB \u2013 Xem tr\u01B0\u1EDBc" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc v\u1EDBi \u0111\u00E1p \u00E1n \u0111\u00FAng \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(false), className: "gap-2 border-teal-200 text-teal-700 hover:bg-teal-50", children: [_jsx(Pencil, { className: "h-4 w-4" }), "Quay l\u1EA1i Edit"] })] }) }) }), _jsx(WordFillStructuredFormClient, { questionData: { title: effectiveTitle, imageUrl: effectiveImageUrl, content, answers, points, caseSensitive }, isReviewMode: true, userAnswer: answers })] }));
-    }
-    // ── Edit mode ──────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _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-500 via-cyan-500 to-emerald-500" }), _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-gray-100", children: _jsx(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !answers[k]?.trim()), 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-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
-                                            setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
-                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
-                                            : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _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", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "wfsf-image", label: "", accept: "image/*", value: effectiveImageUrl || '', onChange: (url) => setEffectiveImageUrl(url), onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayImageUrl && (_jsx(ImagePreview, { src: displayImageUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), 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 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, i) => _jsx("li", { children: error }, i)) })] })] }))] })] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), expectedBlankKeys.length > 0 && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
-                                    const isEmpty = !answers[key] || answers[key].trim() === '';
-                                    return (_jsxs("div", { className: `rounded-xl border-2 p-3 transition-all duration-200 ${isEmpty
-                                            ? 'border-gray-200 bg-white'
-                                            : 'border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100'}`, children: [_jsxs(Label, { className: "mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700", children: [_jsxs("span", { children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-gray-100 px-1 text-teal-700", children: `{${key}}` })] }), isEmpty && (_jsx("span", { className: "text-[10px] font-normal italic text-red-500", children: "*B\u1EAFt bu\u1ED9c" }))] }), _jsx(Input, { value: answers[key] || '', onChange: e => setAnswers(prev => ({ ...prev, [key]: e.target.value })), placeholder: "\u0110\u00E1p \u00E1n \u0111\u00FAng...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 ${!isEmpty ? 'border-teal-200' : ''}` }), !isEmpty && (_jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "\u0110\u00E3 nh\u1EADp"] }))] }, key));
-                                }) }), expectedBlankKeys.some(k => !answers[k]?.trim()) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _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 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", 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, { 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] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as n,useEffect as r,useRef as a,useMemo as i,useCallback as l}from"react";import{useEditor as s,EditorContent as c}from"@tiptap/react";import o from"@tiptap/starter-kit";import d from"@tiptap/extension-text-align";import{Table as m,TableRow as h,TableCell as g,TableHeader as u}from"@tiptap/extension-table";import{List as p,ListOrdered as x,Bold as b,Italic as f,AlignLeft as N,AlignCenter as v,AlignRight as w,TableIcon as y,Plus as C,Minus as k,Trash2 as S,BookOpen as A,Eye as I,Pencil as U,CheckCircle2 as T,PenLine as j,Info as G,MessageSquare as H,ImageIcon as B}from"lucide-react";import{Button as D}from"../../../../components/ui/button";import{Label as R}from"../../../../components/ui/label";import{Input as O}from"../../../../components/ui/input";import{Textarea as P}from"../../../../components/ui/textarea";import{Switch as F}from"../../../../components/ui/switch";import{PointsInput as L}from"../../../../components/ui/points-input";import{Card as E,CardContent as z,CardHeader as J,CardTitle as $}from"../../../../components/ui/card";import{FileUpload as q}from"../../../../components/ui/file-upload";import{ImagePreview as X}from"../../../../components/ui/image-preview";import{WordFillStructuredFormClient as M}from"./WordFillStructuredFormClient";import{useDebouncedCallback as Q,usePresignedFileUrl as V}from"../../../../shared/lib/hooks";import{BasicQuestionGroupCard as K}from"../../groups/BasicQuestionGroupCard";import{DocumentGroupCard as W}from"../../groups/DocumentGroupCard";import{useBasicQuestionGroup as _,getGroupNumberForIndex as Y}from"../../_shared/hooks/useBasicQuestionGroup";const Z=({onClick:t,active:n,disabled:r,title:a,children:i,className:l=""})=>e("button",{type:"button",onClick:t,disabled:r,title:a,className:`inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-sm transition-colors disabled:opacity-30\n      ${n?"bg-teal-100 text-teal-700":"text-gray-500 hover:bg-gray-100 hover:text-gray-800"}\n      ${l}`,children:i}),ee=()=>e("div",{className:"mx-1 h-4 w-px bg-gray-200"}),te=({editor:n})=>n?t("div",{className:"flex flex-wrap items-center gap-0.5 border-b border-gray-100 bg-gray-50/70 px-2 py-1.5 rounded-t-lg",children:[e(Z,{onClick:()=>n.chain().focus().toggleBold().run(),active:n.isActive("bold"),title:"Đậm",children:e(b,{className:"h-3.5 w-3.5"})}),e(Z,{onClick:()=>n.chain().focus().toggleItalic().run(),active:n.isActive("italic"),title:"Nghiêng",children:e(f,{className:"h-3.5 w-3.5"})}),e(ee,{}),e(Z,{onClick:()=>n.chain().focus().toggleHeading({level:2}).run(),active:n.isActive("heading",{level:2}),className:"px-2 text-xs font-bold",children:"H2"}),e(Z,{onClick:()=>n.chain().focus().toggleHeading({level:3}).run(),active:n.isActive("heading",{level:3}),className:"px-2 text-xs font-bold",children:"H3"}),e(Z,{onClick:()=>n.chain().focus().toggleHeading({level:4}).run(),active:n.isActive("heading",{level:4}),className:"px-2 text-xs font-bold",children:"H4"}),e(ee,{}),e(Z,{onClick:()=>n.chain().focus().toggleBulletList().run(),active:n.isActive("bulletList"),title:"Danh sách",children:e(p,{className:"h-3.5 w-3.5"})}),e(Z,{onClick:()=>n.chain().focus().toggleOrderedList().run(),active:n.isActive("orderedList"),title:"Danh sách có số",children:e(x,{className:"h-3.5 w-3.5"})}),e(ee,{}),e(Z,{onClick:()=>n.chain().focus().setTextAlign("left").run(),active:n.isActive({textAlign:"left"}),title:"Trái",children:e(N,{className:"h-3.5 w-3.5"})}),e(Z,{onClick:()=>n.chain().focus().setTextAlign("center").run(),active:n.isActive({textAlign:"center"}),title:"Giữa",children:e(v,{className:"h-3.5 w-3.5"})}),e(Z,{onClick:()=>n.chain().focus().setTextAlign("right").run(),active:n.isActive({textAlign:"right"}),title:"Phải",children:e(w,{className:"h-3.5 w-3.5"})}),e(ee,{}),t(Z,{onClick:()=>n.chain().focus().insertTable({rows:5,cols:2,withHeaderRow:!1}).run(),title:"Chèn bảng 2 cột × 5 hàng",className:"gap-1 px-2 text-xs",children:[e(y,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Bảng 2 cột"})]}),t(Z,{onClick:()=>n.chain().focus().addRowAfter().run(),disabled:!n.can().addRowAfter(),title:"Thêm hàng",className:"gap-1 px-2 text-xs",children:[e(C,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Hàng"})]}),t(Z,{onClick:()=>n.chain().focus().deleteRow().run(),disabled:!n.can().deleteRow(),title:"Xóa hàng",className:"gap-1 px-2 text-xs",children:[e(k,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Hàng"})]}),t(Z,{onClick:()=>n.chain().focus().deleteTable().run(),disabled:!n.can().deleteTable(),title:"Xóa bảng",className:"gap-1 px-2 text-xs text-red-400 hover:text-red-600",children:[e(S,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Bảng"})]})]}):null;export function WordFillStructuredFormCreator({initialData:p,onSave:b,onCancel:f,onChange:N,onUnsavedChangesChange:v,validationRef:w,externalErrors:y,groupConfig:C,groupType:k,groups:S,questionIndexInPart:Z=0,partId:ee=""}){const[ne,re]=n(!1),[ae,ie]=n(p?.points??1),[le,se]=n(p?.caseSensitive??!1),[ce,oe]=n(p?.explanation||""),[de,me]=n(""),{isGrouped:he,isFirstInGroup:ge,currentGroupNumber:ue,groupTitle:pe,groupSubtitle:xe,groupContent:be,imageUrl:fe,setGroupTitle:Ne,setGroupSubtitle:ve,setGroupContent:we,setImageUrl:ye}=_({partId:ee,groups:S,questionIndexInPart:Z,initialData:{title:p?.groupTitle||"",subtitle:p?.groupSubtitle||"",content:p?.groupContent||"",imageUrl:p?.groupImageUrl||""}}),Ce=(k||"BASIC").toUpperCase(),ke=!(C&&C.length>0)||C.includes("content"),Se=ue||Y(Z,S),[Ae,Ie]=n(p?.title||""),[Ue,Te]=n(p?.imageUrl||""),je=Ae,Ge=Ue,He=Ie,Be=Te,{previewUrl:De}=V(Ge),Re=de||De||"",Oe=p?.content||"<p></p>",[Pe,Fe]=n(Oe),[Le,Ee]=n(p?.answers||{}),ze=a(""),Je=a(p),$e=a(!1),qe=a(Pe),Xe=a(N);r(()=>{Xe.current=N},[N]);const Me=i(()=>[o.configure({heading:{levels:[2,3,4]}}),d.configure({types:["heading","paragraph"]}),m.configure({resizable:!0}),h,g,u],[]),Qe=i(()=>({attributes:{class:"tiptap-editor prose prose-sm max-w-none p-4 focus:outline-none min-h-[400px]"}}),[]),Ve=l(({editor:e})=>{const t=e.getHTML();t!==qe.current&&(qe.current=t,Fe(t))},[]),Ke=s({immediatelyRender:!1,extensions:Me,content:Pe,editorProps:Qe,onUpdate:Ve});r(()=>{qe.current=Pe},[Pe]),r(()=>{if(!(JSON.stringify(Je.current)!==JSON.stringify(p)))return;if(Je.current=p,!p?.content||"<p></p>"===p.content)return;$e.current=!0,Ie(p?.title||""),Te(p?.imageUrl||""),ie(p?.points??1),se(p?.caseSensitive??!1),oe(p?.explanation||""),Ee(p?.answers||{});const e=p.content;e!==qe.current&&(qe.current=e,Fe(e),Ke&&!Ke.isDestroyed&&Ke.commands.setContent(e)),setTimeout(()=>{$e.current=!1},150)},[p,Ke]);const We=Q(e=>{Xe.current?.(e)},300),_e=JSON.stringify(Le),Ye=i(()=>{const e=new Set,t=/\{([\w\d]+)\}/g;let n;for(;null!==(n=t.exec(Pe));)e.add(n[1]);return Array.from(e).sort((e,t)=>{const n=parseInt(e),r=parseInt(t);return isNaN(n)||isNaN(r)?e.localeCompare(t):n-r})},[Pe]);return r(()=>{Ee(e=>{let t=!1;const n={...e};return Object.keys(n).forEach(e=>{Ye.includes(e)||(delete n[e],t=!0)}),Ye.forEach(e=>{e in n||(n[e]="",t=!0)}),t?n:e})},[Ye]),r(()=>{const e={title:je,imageUrl:Ge,content:Pe,answers:Le,points:ae,caseSensitive:le,explanation:ce,groupTitle:pe,groupSubtitle:xe,groupContent:be,groupImageUrl:fe,groupNumber:Se};if($e.current)return void(ze.current=JSON.stringify(e));const t=JSON.stringify(e);t!==ze.current&&(ze.current=t,We(e))},[je,Ge,Pe,_e,ae,le,ce,pe,xe,be,fe,Se]),r(()=>{w&&(w.current={triggerValidation:async()=>{if(!Pe||"<p></p>"===Pe)return!1;if(0===Ye.length)return!1;for(const e of Ye)if(!Le[e]||""===Le[e].trim())return!1;return!0},getFormData:()=>({title:je,imageUrl:Ge,content:Pe,answers:Le,points:ae,caseSensitive:le,explanation:ce,groupTitle:pe,groupSubtitle:xe,groupContent:be,groupImageUrl:fe,groupNumber:Se})})},[w,je,Ge,Pe,Le,ae,le,ce,Ye,pe,xe,be,fe,Se]),t("div",ne?{className:"space-y-4",children:[e(E,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:e(J,{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-teal-500 to-cyan-600 shadow-sm",children:e(I,{className:"h-4 w-4 text-white"})}),t("div",{children:[e($,{className:"text-base font-bold text-gray-900",children:"Điền từ – Xem trước"}),e("p",{className:"text-xs text-gray-500",children:"Chế độ xem trước với đáp án đúng đã được điền sẵn"})]})]}),t(D,{variant:"outline",size:"sm",onClick:()=>re(!1),className:"gap-2 border-teal-200 text-teal-700 hover:bg-teal-50",children:[e(U,{className:"h-4 w-4"}),"Quay lại Edit"]})]})})}),e(M,{questionData:{title:je,imageUrl:Ge,content:Pe,answers:Le,points:ae,caseSensitive:le},isReviewMode:!0,userAnswer:Le})]}:{className:"space-y-4",children:[he&&"BASIC"===Ce&&e(K,{groupNumber:Se,title:pe,subtitle:xe,content:be,imageUrl:fe,onTitleChange:Ne,onSubtitleChange:ve,onContentChange:we,onImageChange:ye,groupConfig:k?C:void 0,isReadOnly:!ge,uploadIdPrefix:`word-fill-structured-${ee??"group"}`}),he&&"DOCUMENT"===Ce&&e(W,{groupNumber:Se,title:pe,subtitle:xe,content:be,imageUrl:fe,onTitleChange:Ne,onSubtitleChange:ve,onContentChange:we,onImageChange:ye,groupConfig:k?C:void 0,isReadOnly:!ge,uploadIdPrefix:`word-fill-structured-${ee??"document"}`}),t(E,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500"}),e(J,{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-gray-100",children:e(j,{className:"h-4 w-4 text-teal-600"})}),t("div",{children:[e($,{className:"text-base font-bold text-gray-900",children:"Điền từ vào biểu mẫu có cấu trúc"}),t("p",{className:"text-xs text-gray-500",children:["Nhập nội dung, đặt chỗ trống bằng ","{0}"," ","{1}","… rồi điền đáp án bên dưới"]})]})]}),t(D,{variant:"outline",size:"sm",onClick:()=>re(!0),disabled:0===Ye.length||Ye.some(e=>!Le[e]?.trim()),className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(I,{className:"h-4 w-4"}),"Xem trước"]})]})}),t(z,{className:"space-y-4 px-4 pb-4",children:[t("div",{className:"flex flex-wrap items-center gap-3",children:[e(L,{value:ae,onChange:e=>ie(Number(e.target.value)||1)}),t("div",{role:"button",tabIndex:0,onClick:()=>se(!le),onKeyDown:e=>{" "!==e.key&&"Enter"!==e.key||se(!le)},style:{paddingBlock:"calc(var(--spacing) * 1)"},className:"inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none "+(le?"border-teal-300 bg-teal-50 text-teal-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"),children:[e(F,{checked:le,onCheckedChange:se,className:le?"data-[state=checked]:bg-teal-500 pointer-events-none":"pointer-events-none",tabIndex:-1}),"Phân biệt Hoa / thường"]})]}),t("div",{className:"space-y-2",children:[t(R,{htmlFor:"wfsf-title",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(H,{className:"h-4 w-4 text-teal-500"}),"Tiêu đề",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(O,{id:"wfsf-title",value:je,onChange:e=>He(e.target.value),placeholder:"Nhập tiêu đề câu hỏi...",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100"})]}),t("div",{className:"space-y-2",children:[t(R,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(B,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(q,{id:"wfsf-image",label:"",accept:"image/*",value:Ge||"",onChange:e=>Be(e),onPresignedUrlChange:me,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),Re&&e(X,{src:Re,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),y&&y.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 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:y.map((t,n)=>e("li",{children:t},n))})]})]})]})]}),ke&&t(E,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e(J,{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-6 w-6 items-center justify-center rounded-md bg-teal-100",children:e(x,{className:"h-3.5 w-3.5 text-teal-600"})}),e($,{className:"text-base font-semibold text-gray-800",children:"Nội dung cấu trúc"})]}),Ye.length>0&&t("span",{className:"inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700",children:[Ye.length," chỗ trống"]})]})}),t(z,{className:"space-y-3 px-4 pb-4",children:[t("div",{className:"overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100",children:[e(te,{editor:Ke}),e(c,{editor:Ke})]}),t("div",{className:"flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5",children:[e(G,{className:"mt-0.5 h-4 w-4 shrink-0 text-teal-500"}),t("p",{className:"text-xs text-teal-700",children:["Nhập ",e("strong",{children:"{0}"}),", ",e("strong",{children:"{1}"}),", ",e("strong",{children:"{2}"}),"… vào văn bản để tạo ô trống. Đáp án sẽ tự động xuất hiện bên dưới để bạn nhập."]})]})]})]}),Ye.length>0&&t(E,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e(J,{className:"px-4 py-3",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-teal-100",children:e(T,{className:"h-3.5 w-3.5 text-teal-600"})}),t($,{className:"text-base font-semibold text-gray-800",children:["Đáp án ",t("span",{className:"text-xs font-normal text-gray-500",children:["(",Ye.length," chỗ trống)"]})]})]})}),t(z,{className:"px-4 pb-4",children:[e("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",children:Ye.map(n=>{const r=!Le[n]||""===Le[n].trim();return t("div",{className:"rounded-xl border-2 p-3 transition-all duration-200 "+(r?"border-gray-200 bg-white":"border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100"),children:[t(R,{className:"mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700",children:[t("span",{children:["Chỗ trống ",e("code",{className:"rounded bg-gray-100 px-1 text-teal-700",children:`{${n}}`})]}),r&&e("span",{className:"text-[10px] font-normal italic text-red-500",children:"*Bắt buộc"})]}),e(O,{value:Le[n]||"",onChange:e=>Ee(t=>({...t,[n]:e.target.value})),placeholder:"Đáp án đúng...",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 "+(r?"":"border-teal-200")}),!r&&t("span",{className:"mt-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700",children:[e(T,{className:"h-3 w-3"}),"Đã nhập"]})]},n)})}),Ye.some(e=>!Le[e]?.trim())&&t("div",{className:"mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),t("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Còn chỗ trống chưa có đáp án"}),t("p",{className:"mt-0.5 text-amber-700",children:["Vui lòng điền đáp án đúng cho tất cả các ô được đánh dấu ",e("span",{className:"text-red-500 font-medium",children:"*Bắt buộc"}),"."]})]})]})]})]}),t(E,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(J,{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(A,{className:"h-3.5 w-3.5 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e($,{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 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"mt-0.5 text-xs text-gray-500",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(z,{className:"px-4 pb-4",children:e(P,{value:ce,onChange:e=>oe(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200"})})]})]})}

package/dist/components/questions/types/word-fill-structured-form/index.js

@@ -1,2 +1 @@
-export { WordFillStructuredFormCreator } from './WordFillStructuredFormCreator';
-export { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
+export{WordFillStructuredFormCreator}from"./WordFillStructuredFormCreator";export{WordFillStructuredFormClient}from"./WordFillStructuredFormClient";

package/dist/components/questions/types/word-fill-structured-form/register.js

@@ -1,67 +1 @@
-import { WordFillStructuredFormCreator } from './WordFillStructuredFormCreator';
-export const wordFillStructuredFormRegistration = {
-    component: WordFillStructuredFormCreator,
-    transformInitialData: (initialData) => {
-        const apiContent = initialData?.content || {};
-        const answer = initialData?.answer || {};
-        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (answer?.points || initialData?.points || 1);
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        // Resolve content: prefer single `content` string, fallback to merging old `blocks[]`
-        let content = apiContent?.content || answer?.content || '';
-        const blocks = apiContent?.blocks || answer?.blocks;
-        if (!content && blocks?.length) {
-            content = blocks.map((b) => {
-                const heading = b.heading ? `<h3>${b.heading}</h3>` : '';
-                return heading + (b.content || '');
-            }).join('');
-        }
-        // Group data from questionGroup payload
-        const groupPayload = initialData?.questionGroup?.payload;
-        return {
-            title: apiContent?.title || answer?.title || '',
-            imageUrl: apiContent?.imageUrl || answer?.imageUrl || '',
-            content,
-            answers: correctAnswer?.answers || answer?.answers || {},
-            caseSensitive: correctAnswer?.caseSensitive ?? answer?.caseSensitive ?? false,
-            explanation,
-            points,
-            // Group shared fields
-            groupTitle: groupPayload?.title || answer?.groupTitle || '',
-            groupSubtitle: groupPayload?.subtitle || answer?.groupSubtitle || '',
-            groupContent: groupPayload?.content || answer?.groupContent || '',
-            groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || '',
-        };
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        groupConfig: ctx.groupConfig,
-        groupType: ctx.groupType,
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-        explanation: data?.explanation || '',
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-        explanation: data?.explanation || '',
-    }),
-};
+import{WordFillStructuredFormCreator as t}from"./WordFillStructuredFormCreator";export const wordFillStructuredFormRegistration={component:t,transformInitialData:t=>{const e=t?.content||{},n=t?.answer||{},o=t?.correctAnswer||n?.correctAnswer||{},a=t?.total_points?parseFloat(t.total_points):n?.points||t?.points||1,i=t?.explanation||n?.explanation||"";let s=e?.content||n?.content||"";const r=e?.blocks||n?.blocks;!s&&r?.length&&(s=r.map(t=>(t.heading?`<h3>${t.heading}</h3>`:"")+(t.content||"")).join(""));const l=t?.questionGroup?.payload;return{title:e?.title||n?.title||"",imageUrl:e?.imageUrl||n?.imageUrl||"",content:s,answers:o?.answers||n?.answers||{},caseSensitive:o?.caseSensitive??n?.caseSensitive??!1,explanation:i,points:a,groupTitle:l?.title||n?.groupTitle||"",groupSubtitle:l?.subtitle||n?.groupSubtitle||"",groupContent:l?.content||n?.groupContent||"",groupImageUrl:l?.imageUrl||n?.groupImageUrl||""}},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef,groupConfig:t.groupConfig,groupType:t.groupType,groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""})};

package/dist/components/questions/types/word-fill-structured-form/transform.js

@@ -1,40 +1 @@
-/**
- * Transform WORD_FILL_STRUCTURED_FORM creator data → API format
- *
- * Creator (question.answer): { title, imageUrl, content, answers, caseSensitive, points, explanation }
- * API:
- *   content:       { title, imageUrl, content }
- *   correctAnswer: { answers, caseSensitive }
- */
-export const transformWordFillStructuredForm = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.content || !answerData?.answers) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    // Build basicGroupData when any group field is present
-    const hasGroupData = !!(answerData.groupTitle || answerData.groupSubtitle || answerData.groupContent || answerData.groupImageUrl);
-    // Per-question title/imageUrl are independent from group title/imageUrl — always include them
-    const apiContent = {
-        title: answerData.title || '',
-        imageUrl: answerData.imageUrl || '',
-        content: answerData.content,
-    };
-    const apiCorrectAnswer = {
-        answers: answerData.answers,
-        caseSensitive: answerData.caseSensitive ?? false,
-    };
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.groupTitle || '',
-            subtitle: answerData.groupSubtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.groupImageUrl || '',
-        }
-        : undefined;
-    return {
-        apiContent,
-        apiCorrectAnswer,
-        basicGroupData,
-        groupNumber: answerData.groupNumber || 1,
-    };
-};
+export const transformWordFillStructuredForm=t=>{const e=t.answer;if(!e?.content||!e?.answers)return{apiContent:{},apiCorrectAnswer:{}};const r=!!(e.groupTitle||e.groupSubtitle||e.groupContent||e.groupImageUrl);return{apiContent:{title:e.title||"",imageUrl:e.imageUrl||"",content:e.content},apiCorrectAnswer:{answers:e.answers,caseSensitive:e.caseSensitive??!1},basicGroupData:r?{title:e.groupTitle||"",subtitle:e.groupSubtitle||"",content:e.groupContent||"",imageUrl:e.groupImageUrl||""}:void 0,groupNumber:e.groupNumber||1}};

package/dist/components/questions/types/word-ordering/WordOrderingClient.js

@@ -1,84 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import { Check, X, ArrowUpDown, Lightbulb } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-export function WordOrderingClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
-    const { words = [], answer = [], isExample, imageUrl } = questionData;
-    // State: the user's current arrangement
-    const [selectedWords, setSelectedWords] = useState(userAnswer || (autoFillCorrectAnswers ? answer : []));
-    // Words remaining in the pool
-    const [availableWords, setAvailableWords] = useState(() => {
-        const initial = userAnswer || (autoFillCorrectAnswers ? answer : []);
-        if (initial.length > 0) {
-            // Remove used words from available pool
-            const remaining = [...words];
-            initial.forEach((w) => {
-                const idx = remaining.indexOf(w);
-                if (idx >= 0)
-                    remaining.splice(idx, 1);
-            });
-            return remaining;
-        }
-        return [...words];
-    });
-    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(imageUrl || '');
-    // Sync with userAnswer changes
-    useEffect(() => {
-        if (userAnswer) {
-            setSelectedWords(userAnswer);
-            const remaining = [...words];
-            userAnswer.forEach((w) => {
-                const idx = remaining.indexOf(w);
-                if (idx >= 0)
-                    remaining.splice(idx, 1);
-            });
-            setAvailableWords(remaining);
-        }
-    }, [userAnswer]);
-    // Reset when words change (question navigation)
-    useEffect(() => {
-        if (!userAnswer && !autoFillCorrectAnswers) {
-            setSelectedWords([]);
-            setAvailableWords([...words]);
-        }
-    }, [JSON.stringify(words)]);
-    const handleSelectWord = useCallback((word, poolIndex) => {
-        if (isReviewMode)
-            return;
-        const newSelected = [...selectedWords, word];
-        const newAvailable = [...availableWords];
-        newAvailable.splice(poolIndex, 1);
-        setSelectedWords(newSelected);
-        setAvailableWords(newAvailable);
-        onSubmit?.(newSelected);
-    }, [selectedWords, availableWords, isReviewMode, onSubmit]);
-    const handleRemoveWord = useCallback((index) => {
-        if (isReviewMode)
-            return;
-        const removed = selectedWords[index];
-        const newSelected = selectedWords.filter((_, i) => i !== index);
-        setSelectedWords(newSelected);
-        setAvailableWords([...availableWords, removed]);
-        onSubmit?.(newSelected);
-    }, [selectedWords, availableWords, isReviewMode, onSubmit]);
-    const isCorrect = isReviewMode && selectedWords.length === answer.length &&
-        selectedWords.every((w, i) => w === answer[i]);
-    const isWrong = isReviewMode && selectedWords.length > 0 && !isCorrect;
-    const isComplete = selectedWords.length === words.length;
-    const displayExplanation = explanation || questionData.explanation;
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-sm", children: _jsx(ArrowUpDown, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "S\u1EAFp x\u1EBFp t\u1EEB" }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "V\u00ED d\u1EE5"] }))] }), isReviewMode && isComplete && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi", className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("div", { className: "flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3", children: selectedWords.length === 0 ? (_jsx("span", { className: "text-sm text-gray-400 italic", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 s\u1EAFp x\u1EBFp..." })) : (selectedWords.map((word, index) => {
-                                        const isWordCorrect = isReviewMode && answer[index] === word;
-                                        const isWordWrong = isReviewMode && answer[index] !== word;
-                                        return (_jsxs("button", { type: "button", onClick: () => handleRemoveWord(index), disabled: isReviewMode, className: cn('inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
-                                                ? isWordCorrect
-                                                    ? 'bg-green-100 text-green-800 border border-green-300'
-                                                    : 'bg-red-100 text-red-800 border border-red-300'
-                                                : 'bg-amber-100 text-amber-800 border border-amber-300 hover:bg-amber-200 cursor-pointer'), children: [word, isReviewMode && (isWordCorrect
-                                                    ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
-                                                    : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }))] }, `selected-${index}`));
-                                    })) })] }), availableWords.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "T\u1EEB c\u00F3 s\u1EB5n" }), _jsx("div", { className: "flex flex-wrap gap-2", children: availableWords.map((word, index) => (_jsx("button", { type: "button", onClick: () => handleSelectWord(word, index), disabled: isReviewMode, className: cn('rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
-                                            ? 'border-gray-200 bg-gray-100 text-gray-500 cursor-default'
-                                            : 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md'), children: word }, `available-${index}`))) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-green-600 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answer.map((word, index) => (_jsx("span", { className: "rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300", children: word }, `correct-${index}`))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-blue-600 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as a,useCallback as s}from"react";import{Check as n,X as d,ArrowUpDown as i,Lightbulb as l}from"lucide-react";import{usePresignedFileUrl as o}from"../../../../shared/lib/hooks";import{cn as c}from"../../../../shared/lib/utils";export function WordOrderingClient({questionData:m,onSubmit:b,isReviewMode:g=!1,userAnswer:p,autoFillCorrectAnswers:h=!1,explanation:x}){const{words:u=[],answer:f=[],isExample:N,imageUrl:w}=m,[y,v]=t(p||(h?f:[])),[j,k]=t(()=>{const e=p||(h?f:[]);if(e.length>0){const r=[...u];return e.forEach(e=>{const t=r.indexOf(e);t>=0&&r.splice(t,1)}),r}return[...u]}),{previewUrl:C,isLoading:O}=o(w||"");a(()=>{if(p){v(p);const e=[...u];p.forEach(r=>{const t=e.indexOf(r);t>=0&&e.splice(t,1)}),k(e)}},[p]),a(()=>{p||h||(v([]),k([...u]))},[JSON.stringify(u)]);const S=s((e,r)=>{if(g)return;const t=[...y,e],a=[...j];a.splice(r,1),v(t),k(a),b?.(t)},[y,j,g,b]),E=s(e=>{if(g)return;const r=y[e],t=y.filter((r,t)=>t!==e);v(t),k([...j,r]),b?.(t)},[y,j,g,b]),$=g&&y.length===f.length&&y.every((e,r)=>e===f[r]),A=g&&y.length>0&&!$,U=y.length===u.length,q=x||m.explanation;return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-sm",children:e(i,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Sắp xếp từ"}),N&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700",children:[e(l,{className:"h-3 w-3"}),"Ví dụ"]})]}),g&&U&&r("div",{className:c("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",$?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e($?n:d,{className:"h-3.5 w-3.5"}),$?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-5",children:[(C||w)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:O?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500"})}):e("img",{src:C||w,alt:"Hình ảnh câu hỏi",className:"max-h-56 w-auto object-contain p-2"})})}),r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Đáp án của bạn"}),e("div",{className:"flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3",children:0===y.length?e("span",{className:"text-sm text-gray-400 italic",children:"Nhấn vào các từ bên dưới để sắp xếp..."}):y.map((t,a)=>{const s=g&&f[a]===t;g&&f[a];return r("button",{type:"button",onClick:()=>E(a),disabled:g,className:c("inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm",g?s?"bg-green-100 text-green-800 border border-green-300":"bg-red-100 text-red-800 border border-red-300":"bg-amber-100 text-amber-800 border border-amber-300 hover:bg-amber-200 cursor-pointer"),children:[t,g&&(s?e(n,{className:"h-3.5 w-3.5 text-green-600"}):e(d,{className:"h-3.5 w-3.5 text-red-600"}))]},`selected-${a}`)})})]}),j.length>0&&r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Từ có sẵn"}),e("div",{className:"flex flex-wrap gap-2",children:j.map((r,t)=>e("button",{type:"button",onClick:()=>S(r,t),disabled:g,className:c("rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm",g?"border-gray-200 bg-gray-100 text-gray-500 cursor-default":"border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md"),children:r},`available-${t}`))})]}),g&&A&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium text-green-600 uppercase tracking-wider",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:f.map((r,t)=>e("span",{className:"rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300",children:r},`correct-${t}`))})]}),g&&q&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium text-blue-600 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:q})]})]})]})})}