@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

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