@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

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

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

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