@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/choose-the-correct-answer/ChooseTheCorrectAnswerCreator.js

@@ -1 +1,568 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as s,useRef as n,useEffect as a,useMemo as o}from"react";import{Button as i}from"../../../../components/ui/button";import{Label as l}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as g,CardContent as p,CardHeader as u,CardTitle as h}from"../../../../components/ui/card";import{RadioGroup as x}from"../../../../components/ui/radio-group";import{Switch as f}from"../../../../components/ui/switch";import{usePresignedFileUrl as b,useDebouncedCallback as w}from"../../../../shared/lib/hooks";import{useReactHookForm as N}from"../../../../shared/lib/hooks/useReactHookForm";import{Pencil as y,Eye as v,Plus as A,Trash2 as C,HelpCircle as V,CheckCircle2 as U,Lightbulb as k,MessageSquare as T,ImageIcon as S,Type as E,Users as q,BookOpen as I,Star as G,ListChecks as O}from"lucide-react";import{FileUpload as $}from"../../../../components/ui/file-upload";import{ChooseTheCorrectAnswerClient as j}from"./ChooseTheCorrectAnswerClient";import{normalizeChooseAnswerCorrectAnswer as R,normalizeChooseAnswerOptions as z,pickRawChooseAnswer as B}from"./normalize";import{chooseCorrectAnswerFormSchema as F}from"../../../../shared/lib/validation/choose-correct-answer.validation";import{BasicQuestionGroupCard as J}from"../../groups/BasicQuestionGroupCard";import{ArticlesGroupCard as P}from"../../groups/ArticlesGroupCard";import{DocumentGroupCard as D}from"../../groups/DocumentGroupCard";import{useBasicQuestionGroup as L}from"../../_shared/hooks/useBasicQuestionGroup";import{z as M}from"zod";function Q({src:r,alt:t}){const{previewUrl:s,isLoading:n}=b(r);return e("div",n?{className:"flex h-24 w-full max-w-[200px] items-center justify-center rounded-lg border border-gray-200 bg-gray-50",children:e("div",{className:"h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500"})}:{className:"relative h-24 w-full max-w-[200px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:e("img",{src:s||r,alt:t,className:"h-full w-full object-contain",onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})})}function H(e,r){const{optionCount:t,defaultValue:s,defaultQuestion:n,multipleAnswers:a}=r,o=e?.content?.options||e?.options,i=o?.length>0?z(o):s&&s.length>0?s:Array.from({length:t},()=>""),l=R(B(e?.correctAnswer),o),c=Boolean(e?.multipleAnswers??e?.content?.multipleAnswers??e?.questionGroup?.payload?.multipleAnswers??Array.isArray(l))||Boolean(a);return{question:e?.content?.question||e?.question||n||"",optionType:e?.content?.optionType||e?.optionType||"text",options:i,correctAnswer:c?Array.isArray(l)?l:-1===l?[]:[l]:Array.isArray(l)?l[0]??-1:l,multipleAnswers:c,imageUrl:e?.content?.imageUrl||e?.imageUrl||"",explanation:e?.explanation||"",askerName:e?.content?.askerName||e?.askerName||"",answererName:e?.content?.answererName||e?.answererName||"",isExample:e?.isExample||!1,points:e?.points??1}}function Z({initialData:R,onSave:z,onCancel:B,onChange:Z,externalErrors:K,optionCount:X=4,optionMode:_,defaultValue:W,defaultQuestion:Y,viewMode:ee,onUnsavedChangesChange:re,validationRef:te,groups:se,questionIndexInPart:ne=0,partId:ae="",questionConfig:oe,groupType:ie,groupConfig:le,articleCount:ce=0,multipleAnswers:de,headerExtra:me}){const ge=R,pe=o(()=>F.superRefine((e,r)=>{"CONVERSATION"===ee&&(e.askerName?.trim()||r.addIssue({code:M.ZodIssueCode.custom,message:"Vui lòng nhập tên người hỏi!",path:["askerName"]}),e.answererName?.trim()||r.addIssue({code:M.ZodIssueCode.custom,message:"Vui lòng nhập tên người trả lời!",path:["answererName"]}))}),[ee]),ue=o(()=>({optionCount:X,defaultValue:W,defaultQuestion:Y,multipleAnswers:de}),[X,W,Y,de]),he=N({defaultValues:H(ge,ue),zodSchema:pe,mode:"onBlur"}),[xe,fe]=s(!1),[be,we]=s(""),[Ne,ye]=s({}),{isGrouped:ve,currentGroupNumber:Ae,isFirstInGroup:Ce,groupTitle:Ve,groupSubtitle:Ue,groupContent:ke,imageUrl:Te,articles:Se,setGroupTitle:Ee,setGroupSubtitle:qe,setGroupContent:Ie,setImageUrl:Ge,setArticles:Oe}=L({partId:ae,groups:se,questionIndexInPart:ne,initialData:{title:R?.groupTitle||R?.questionGroup?.payload?.title||R?.title||"",subtitle:R?.groupSubtitle||R?.questionGroup?.payload?.subtitle||"",content:R?.groupContent||R?.questionGroup?.payload?.content||"",imageUrl:R?.groupImageUrl||R?.questionGroup?.payload?.imageUrl||"",articles:R?.articles||R?.questionGroup?.payload?.articles||void 0},articleCount:ce}),$e=n(null),je=n(null),Re=n(R),ze=n(!1),Be=n(Z),Fe=n("");a(()=>{Be.current=Z},[Z]);const Je=w(e=>{Be.current?.(e)},300),Pe=he.watch("question"),De=he.watch("optionType"),Le=he.watch("options"),Me=he.watch("correctAnswer"),Qe=he.watch("multipleAnswers"),He=he.watch("imageUrl"),Ze=he.watch("explanation"),Ke=he.watch("askerName"),Xe=he.watch("answererName"),_e=he.watch("isExample"),We=he.watch("points"),Ye="image"===_?.toLowerCase()?"image":"text",er=(ie||"BASIC").toUpperCase(),rr=!oe||0===oe.length||oe.includes("imageUrl"),tr=!le||0===le.length||le.includes("imageUrl");a(()=>{Ye&&De!==Ye&&he.setValue("optionType",Ye)},[Ye,De,he]);const{previewUrl:sr}=b(He),nr=be||sr||"";a(()=>{te&&(te.current={triggerValidation:async()=>await he.trigger(),getFormData:()=>({question:Pe,optionType:De,options:Le,correctAnswer:Me,multipleAnswers:Qe,imageUrl:rr?He:"",explanation:Ze,askerName:Ke,answererName:Xe,isExample:_e,points:We,groupTitle:Ve,groupSubtitle:Ue,groupContent:ke,groupImageUrl:tr?Te:"",groupNumber:Ae,..."ARTICLES"===er?{articles:Se}:{}})})},[te,he,Me,Qe,Pe,De,Le,He,Ze,Ke,Xe,_e,We,Ve,Ue,ke,Te,Ae,ie,Se]),a(()=>{const e=R,r={...H(e,ue),groupTitle:e?.groupTitle||e?.questionGroup?.payload?.title||"",groupContent:e?.groupContent||e?.questionGroup?.payload?.content||"",groupImageUrl:e?.groupImageUrl||e?.questionGroup?.payload?.imageUrl||""};if(!(JSON.stringify(Re.current)!==JSON.stringify(R)))return;Re.current=R;const t={question:Pe,optionType:De,options:Le,correctAnswer:Me,multipleAnswers:Qe,imageUrl:He,explanation:Ze,askerName:Ke,answererName:Xe,isExample:_e,points:We},s=t.question===r.question&&t.optionType===r.optionType&&JSON.stringify(t.correctAnswer)===JSON.stringify(r.correctAnswer)&&t.multipleAnswers===r.multipleAnswers&&t.points===r.points&&t.explanation===r.explanation&&t.imageUrl===r.imageUrl&&JSON.stringify(t.options)===JSON.stringify(r.options);if(s&&!0===R?.isCompleted)return;const n=!s&&(JSON.stringify(r.correctAnswer)!==JSON.stringify(t.correctAnswer)||r.multipleAnswers!==t.multipleAnswers||r.question!==t.question||r.imageUrl!==t.imageUrl),a=Array.isArray(r.correctAnswer)?r.correctAnswer.length>0:-1!==r.correctAnswer;n&&a&&(ze.current=!0,he.reset(r),setTimeout(()=>{ze.current=!1},150))},[R,X,de,he,Pe,De,Le,Me,Qe,He,Ze,Ke,Xe,_e,We,ue]);const ar=JSON.stringify(Le);a(()=>{if(ze.current){const e=JSON.stringify({question:Pe,optionType:De,options:Le,correctAnswer:Me,multipleAnswers:Qe,imageUrl:He,explanation:Ze,askerName:Ke,answererName:Xe,isExample:_e,points:We,groupTitle:Ve,groupSubtitle:Ue,groupContent:ke,groupImageUrl:Te,groupNumber:Ae,..."ARTICLES"===er?{articles:Se}:{}});return void(Fe.current=e)}const e={question:Pe,optionType:De,options:Le,correctAnswer:Me,multipleAnswers:Qe,imageUrl:rr?He:"",explanation:Ze,askerName:Ke,answererName:Xe,isExample:_e,points:We,groupTitle:Ve,groupSubtitle:Ue,groupContent:ke,groupImageUrl:tr?Te:"",groupNumber:Ae,..."ARTICLES"===er?{articles:Se}:{}},r=JSON.stringify(e);Fe.current!==r&&(Fe.current=r,Je(e))},[Pe,De,ar,Me,Qe,He,Ze,Ke,Xe,_e,We,Ve,Ue,ke,Te,Ae,ie,Se]);he.handleSubmit(e=>{if(e.multipleAnswers){if((Array.isArray(e.correctAnswer)?e.correctAnswer:-1===e.correctAnswer?[]:[e.correctAnswer]).some(r=>r<0||r>=e.options.length))return void he.setError("correctAnswer",{message:"Đáp án đúng không hợp lệ!"})}else{const r="number"==typeof e.correctAnswer?e.correctAnswer:-1;if(-1!==r&&r>=e.options.length)return void he.setError("correctAnswer",{message:"Đáp án đúng không hợp lệ!"})}$e.current=null,je.current=null,z?.(e)});if(xe){const t={question:Pe||"",optionType:De,options:Le,correctAnswer:Me,multipleAnswers:Qe,imageUrl:nr||He,explanation:Ze,askerName:Ke,answererName:Xe,isExample:_e,isGroup:ve,groupTitle:Ve,groupSubtitle:Ue,groupContent:ke,groupImageUrl:Te,groupNumber:Ae,..."ARTICLES"===er?{articles:Se}:{}};return r("div",{className:"space-y-4",children:[e(g,{children:e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Choose the correct answer (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>fe(!1),children:[e(y,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(j,{questionData:t,questionConfig:oe,isReviewMode:!0,userAnswer:Qe||-1!==Me?Me:void 0})]})}return r("div",{className:"space-y-4",children:[ve&&"ARTICLES"===er&&e(P,{groupNumber:Ae,articleCount:ce,articles:Se,onArticlesChange:Oe,title:Ve,onTitleChange:Ee,isReadOnly:!Ce,uploadIdPrefix:`choose-correct-answer-${ae??"articles"}`}),ve&&"BASIC"===er&&e(J,{groupNumber:Ae,title:Ve,subtitle:Ue,content:ke,imageUrl:Te,onTitleChange:Ee,onSubtitleChange:qe,onContentChange:Ie,onImageChange:Ge,groupConfig:ie?le:void 0,isReadOnly:!Ce,uploadIdPrefix:`choose-correct-answer-${ae??"group"}`}),ve&&"DOCUMENT"===er&&e(D,{groupNumber:Ae,title:Ve,subtitle:Ue,content:ke,imageUrl:Te,onTitleChange:Ee,onSubtitleChange:qe,onContentChange:Ie,onImageChange:Ge,groupConfig:ie?le:void 0,isReadOnly:!Ce,uploadIdPrefix:`choose-correct-answer-${ae??"document"}`}),r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",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-gray-100",children:e(V,{className:"h-4 w-4 text-gray-600"})}),r("div",{children:[e(h,{className:"text-base font-bold text-gray-900",children:"Chọn đáp án đúng"}),e("p",{className:"text-xs text-gray-500",children:"Tạo câu hỏi trắc nghiệm với nhiều lựa chọn"})]})]}),r("div",{className:"flex items-center gap-2",children:[me,r(i,{variant:"outline",size:"sm",onClick:()=>fe(!0),disabled:Le.filter(e=>"string"==typeof e&&e.trim()).length<2,className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(v,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(p,{className:"space-y-3 px-4 pb-4",children:[r("div",{className:"flex flex-wrap items-center justify-between gap-y-2",children:[e(m,{...he.register("points",{valueAsNumber:!0}),error:he.hasError("points")?he.getFieldError("points"):void 0}),r("div",{className:"flex items-center gap-2",children:[r("button",{type:"button",style:{paddingBlock:"calc(var(--spacing) * 1)"},onClick:()=>he.setValue("isExample",!_e),className:"inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none "+(_e?"border-amber-300 bg-amber-50 text-amber-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"),children:[e(G,{className:"h-4 w-4 "+(_e?"fill-amber-400 text-amber-400":"")}),"Example"]}),r("button",{type:"button",style:{paddingBlock:"calc(var(--spacing) * 1)"},disabled:Boolean(de),onClick:()=>{const e=!Qe,r=he.getValues("correctAnswer"),t=Array.isArray(r)?r:-1===r?[]:[r];he.setValue("multipleAnswers",e,{shouldValidate:!0}),he.setValue("correctAnswer",e?t:t[0]??-1,{shouldValidate:!0})},className:`inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${Qe?"border-violet-300 bg-violet-50 text-violet-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"} ${Boolean(de)?"cursor-not-allowed opacity-50":""}`,children:[e(O,{className:"h-4 w-4"}),"Nhiều đáp án"]})]})]}),"CONVERSATION"===ee&&r("div",{className:"space-y-3",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(q,{className:"h-4 w-4 text-indigo-500"}),"Hội thoại ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn - dùng cho câu hỏi dạng hội thoại)"})]}),r("div",{className:"grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[r("div",{className:"space-y-1.5",children:[r(l,{htmlFor:"askerName",className:"flex items-center gap-1 text-sm font-medium text-gray-600",children:["Tên người hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:"askerName",...he.register("askerName"),placeholder:"VD: John, Mary, Teacher...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(he.hasError("askerName")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),he.hasError("askerName")&&e("p",{className:"text-sm text-red-600",children:he.getFieldError("askerName")})]}),r("div",{className:"space-y-1.5",children:[r(l,{htmlFor:"answererName",className:"flex items-center gap-1 text-sm font-medium text-gray-600",children:["Tên người trả lời ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:"answererName",...he.register("answererName"),placeholder:"VD: Tom, Anna, Student...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(he.hasError("answererName")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),he.hasError("answererName")&&e("p",{className:"text-sm text-red-600",children:he.getFieldError("answererName")})]})]})]}),(!oe||0===oe.length||oe.includes("question"))&&r("div",{className:"space-y-2",children:[r(l,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(T,{className:"h-4 w-4 text-indigo-500"}),e("span",{className:"flex items-center gap-1",children:"Câu hỏi"}),e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(d,{id:"question",...he.register("question"),placeholder:"Nhập câu hỏi...",className:"min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(he.hasError("question")?"border-red-400 focus:border-red-500 focus:ring-red-200":""),rows:3}),he.hasError("question")&&e("p",{className:"text-sm text-red-600",children:he.getFieldError("question")})]}),(!oe||0===oe.length||oe.includes("imageUrl")||oe.includes("imageUrl "))&&r("div",{className:"space-y-2",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(S,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh ",e("span",{className:"text-sm font-normal text-gray-500"})]}),e($,{id:"question-image",label:"",accept:"image/*",value:He||"",onChange:e=>{he.setValue("imageUrl",e,{shouldValidate:!0})},onPresignedUrlChange:we,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),he.hasError("imageUrl")&&e("p",{className:"mt-1 text-sm text-red-600",children:he.getFieldError("imageUrl")}),nr&&e(t,{src:nr,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),K&&K.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:K.map((r,t)=>e("li",{children:r},t))})]})]}),he.formState.errors.options?.message&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:he.formState.errors.options.message})})]})]}),(!oe||0===oe.length||oe.includes("options"))&&r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e(u,{className:"px-4 py-3",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-indigo-100",children:e(k,{className:"h-3.5 w-3.5 text-indigo-600"})}),r(h,{className:"text-base font-semibold text-gray-800",children:["Các lựa chọn ",r("span",{className:"text-xs font-normal text-gray-500",children:["(",Le.length," đáp án)"]})]})]}),r("div",{className:"flex items-center gap-3",children:[r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5",children:[e(E,{className:"h-3.5 w-3.5 "+("text"===De?"text-indigo-600":"text-gray-400")}),e("span",{className:"text-xs font-medium "+("text"===De?"text-indigo-600":"text-gray-400"),children:"Text"}),e(f,{checked:"image"===De,disabled:!0,className:"!bg-indigo-600 !opacity-100",onCheckedChange:e=>{const r=e?"image":"text",t=he.getValues("options"),s=he.getValues("correctAnswer");"text"===De?$e.current={options:t,correctAnswer:s}:je.current={options:t,correctAnswer:s};const n="text"===r?$e.current:je.current;if(n)he.setValue("options",n.options),he.setValue("correctAnswer",n.correctAnswer);else{const e=Array.from({length:t.length},()=>"");he.setValue("options",e),he.setValue("correctAnswer",-1)}he.setValue("optionType",r),he.clearErrors(),ye({})}}),e(S,{className:"h-3.5 w-3.5 "+("image"===De?"text-indigo-600":"text-gray-400")}),e("span",{className:"text-xs font-medium "+("image"===De?"text-indigo-600":"text-gray-400"),children:"Ảnh"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>{const e=he.getValues("options");he.setValue("options",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(A,{className:"h-4 w-4"}),"Thêm đáp án"]})]})]})}),r(p,{className:"space-y-3 px-4 pb-4",children:[Qe?e("div",{className:"space-y-3",children:Le.map((t,s)=>{const n=he.formState.errors.options?.[s],a=(Array.isArray(Me)?Me:-1===Me?[]:[Me]).includes(s),o=String.fromCharCode(65+s);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(a?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(a?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"),onClick:()=>{if(Qe){const e=Array.isArray(he.getValues("correctAnswer"))?he.getValues("correctAnswer"):[],r=e.includes(s)?e.filter(e=>e!==s):[...e,s].sort((e,r)=>e-r);return void he.setValue("correctAnswer",r,{shouldValidate:!0})}he.setValue("correctAnswer",s,{shouldValidate:!0})},children:o}),r("div",{className:"flex-1 space-y-2",children:["image"===De?r("div",{className:"space-y-2",children:[e($,{id:`option-image-${s}`,label:"",accept:"image/*",value:t||"",onChange:e=>{const r=[...Le];r[s]=e,he.setValue("options",r,{shouldValidate:!0})},onPresignedUrlChange:e=>{ye(r=>({...r,[s]:e}))},maxSize:5,placeholder:`Upload ảnh đáp án ${o}...`,autoUpload:!0,prefix:"questions/options"}),(Ne[s]||t)&&e(Q,{src:Ne[s]||t,alt:`Đáp án ${o}`})]}):e(c,{id:`option-input-${s}`,...he.register(`options.${s}`),placeholder:`Nhập đáp án ${o}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(n?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),n&&e("p",{className:"text-sm text-red-600",children:n.message}),a&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(U,{className:"h-3.5 w-3.5"}),Qe?"Đáp án đúng đã chọn":"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>{if(Qe){const e=Array.isArray(he.getValues("correctAnswer"))?he.getValues("correctAnswer"):[],r=e.includes(s)?e.filter(e=>e!==s):[...e,s].sort((e,r)=>e-r);return void he.setValue("correctAnswer",r,{shouldValidate:!0})}he.setValue("correctAnswer",s,{shouldValidate:!0})},className:a?"text-green-600 hover:text-green-700":"text-gray-400 hover:text-green-600",title:Qe?a?"Bỏ chọn đáp án đúng":"Chọn thêm đáp án đúng":"Chọn làm đáp án đúng",children:e(U,{className:"h-4 w-4"})}),Le.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>{const e=he.getValues("options").filter((e,r)=>r!==s);he.setValue("options",e);const r=he.getValues("correctAnswer");if(Array.isArray(r)){const e=r.filter(e=>e!==s).map(e=>e>s?e-1:e);he.setValue("correctAnswer",e,{shouldValidate:!0})}else r===s?he.setValue("correctAnswer",-1,{shouldValidate:!0}):"number"==typeof r&&r>s&&he.setValue("correctAnswer",r-1,{shouldValidate:!0})},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(C,{className:"h-4 w-4"})})]})]})},s)})}):e(x,{value:-1===Me?"":Me.toString(),onValueChange:e=>{he.setValue("correctAnswer",Number(e),{shouldValidate:!0})},children:Le.map((t,s)=>{const n=he.formState.errors.options?.[s],a=Me===s,o=String.fromCharCode(65+s);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(a?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(a?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"),onClick:()=>{he.setValue("correctAnswer",s,{shouldValidate:!0})},children:o}),r("div",{className:"flex-1 space-y-2",children:["image"===De?r("div",{className:"space-y-2",children:[e($,{id:`option-image-${s}`,label:"",accept:"image/*",value:t||"",onChange:e=>{const r=[...Le];r[s]=e,he.setValue("options",r,{shouldValidate:!0})},onPresignedUrlChange:e=>{ye(r=>({...r,[s]:e}))},maxSize:5,placeholder:`Upload ảnh đáp án ${o}...`,autoUpload:!0,prefix:"questions/options"}),(Ne[s]||t)&&e(Q,{src:Ne[s]||t,alt:`Đáp án ${o}`})]}):e(c,{id:`option-input-${s}`,...he.register(`options.${s}`),placeholder:`Nhập đáp án ${o}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(n?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),n&&e("p",{className:"text-sm text-red-600",children:n.message}),a&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(U,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>{he.setValue("correctAnswer",s,{shouldValidate:!0})},className:a?"text-green-600 hover:text-green-700":"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(U,{className:"h-4 w-4"})}),Le.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>{const e=he.getValues("options").filter((e,r)=>r!==s);he.setValue("options",e);const r=he.getValues("correctAnswer");"number"==typeof r&&r===s?he.setValue("correctAnswer",-1,{shouldValidate:!0}):"number"==typeof r&&r>s&&he.setValue("correctAnswer",r-1,{shouldValidate:!0})},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(C,{className:"h-4 w-4"})})]})]})},s)})}),(Array.isArray(Me)&&0===Me.length||!Array.isArray(Me)&&-1===Me)&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),r("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:Qe?"Click vào ô chữ cái hoặc icon ✓ để chọn một hoặc nhiều đáp án đúng":"Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng"})]})]}),he.hasError("correctAnswer")&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:he.getFieldError("correctAnswer")})})]})]}),r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(I,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(p,{className:"px-4 pb-4",children:e(d,{...he.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"})})]})]})}export function ChooseTheCorrectAnswerCreator(r){return e(Z,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { RadioGroup } from '../../../../components/ui/radio-group';
+import { Switch } from '../../../../components/ui/switch';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Pencil, Eye, Plus, Trash2, HelpCircle, CheckCircle2, Lightbulb, MessageSquare, ImageIcon, Type, Users, BookOpen, Star, ListChecks } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ChooseTheCorrectAnswerClient } from './ChooseTheCorrectAnswerClient';
+import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, pickRawChooseAnswer, } from './normalize';
+import { chooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/choose-correct-answer.validation';
+import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { ArticlesGroupCard } from '../../groups/ArticlesGroupCard';
+import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
+import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
+import { z } from 'zod';
+// Helper component to resolve presigned URL for option image preview (same pattern as Client's OptionImage)
+function OptionImagePreview({ src, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(src);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-24 w-full max-w-[200px] items-center justify-center rounded-lg border border-gray-200 bg-gray-50", children: _jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" }) }));
+    }
+    return (_jsx("div", { className: "relative h-24 w-full max-w-[200px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: _jsx("img", { src: previewUrl || src, alt: alt, className: "h-full w-full object-contain", onError: (e) => {
+                const target = e.target;
+                target.onerror = null;
+                target.src = '/images/placeholder-image.svg';
+            } }) }));
+}
+/**
+ * Build the form values from initialData, which can arrive in API format
+ * (content.question, correctAnswer.answer) or flat format.
+ *
+ * API options may be string[] or { id, text }[], and the correct answer may be
+ * an index or an option ID - both are normalized to string[] + index here so the
+ * rest of the component only ever deals with the flat form shape.
+ */
+function buildNormalizedFormData(apiData, opts) {
+    const { optionCount, defaultValue, defaultQuestion, multipleAnswers } = opts;
+    const rawOptions = apiData?.content?.options || apiData?.options;
+    const options = rawOptions?.length > 0
+        ? normalizeChooseAnswerOptions(rawOptions)
+        : defaultValue && defaultValue.length > 0
+            ? defaultValue
+            : Array.from({ length: optionCount }, () => '');
+    const normalizedCorrectAnswer = normalizeChooseAnswerCorrectAnswer(pickRawChooseAnswer(apiData?.correctAnswer), rawOptions);
+    const isMultipleAnswers = Boolean(apiData?.multipleAnswers
+        ?? apiData?.content?.multipleAnswers
+        ?? apiData?.questionGroup?.payload?.multipleAnswers
+        ?? Array.isArray(normalizedCorrectAnswer)) || Boolean(multipleAnswers);
+    return {
+        // Support both API format (content.question) and flat format (question)
+        question: apiData?.content?.question || apiData?.question || defaultQuestion || '',
+        optionType: (apiData?.content?.optionType || apiData?.optionType || 'text'),
+        options,
+        correctAnswer: isMultipleAnswers
+            ? (Array.isArray(normalizedCorrectAnswer)
+                ? normalizedCorrectAnswer
+                : normalizedCorrectAnswer === -1
+                    ? []
+                    : [normalizedCorrectAnswer])
+            : (Array.isArray(normalizedCorrectAnswer)
+                ? (normalizedCorrectAnswer[0] ?? -1)
+                : normalizedCorrectAnswer),
+        multipleAnswers: isMultipleAnswers,
+        imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
+        explanation: apiData?.explanation || '',
+        askerName: apiData?.content?.askerName || apiData?.askerName || '',
+        answererName: apiData?.content?.answererName || apiData?.answererName || '',
+        isExample: apiData?.isExample || false,
+        points: apiData?.points ?? 1,
+    };
+}
+function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, optionCount = 4, optionMode, defaultValue, defaultQuestion, viewMode, onUnsavedChangesChange, validationRef, groups, questionIndexInPart = 0, partId = '', questionConfig, groupType, groupConfig, articleCount = 0, multipleAnswers, headerExtra, }) {
+    // Use react-hook-form with Zod validation
+    // initialData can be in API format (content.question, correctAnswer.answer) or flat format
+    // Cast to any to support both formats
+    const apiData = initialData;
+    const formSchema = useMemo(() => {
+        return chooseCorrectAnswerFormSchema.superRefine((data, ctx) => {
+            if (viewMode === 'CONVERSATION') {
+                if (!data.askerName?.trim()) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Vui lòng nhập tên người hỏi!',
+                        path: ['askerName'],
+                    });
+                }
+                if (!data.answererName?.trim()) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Vui lòng nhập tên người trả lời!',
+                        path: ['answererName'],
+                    });
+                }
+            }
+        });
+    }, [viewMode]);
+    const normalizeArgs = useMemo(() => ({ optionCount, defaultValue, defaultQuestion, multipleAnswers }), [optionCount, defaultValue, defaultQuestion, multipleAnswers]);
+    const form = useReactHookForm({
+        defaultValues: buildNormalizedFormData(apiData, normalizeArgs),
+        zodSchema: formSchema,
+        mode: 'onBlur',
+    });
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    const [optionPreviewUrls, setOptionPreviewUrls] = useState({});
+    // ============ GROUP (shared title / content / image) ============
+    const { isGrouped, currentGroupNumber, isFirstInGroup, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, articles, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, setArticles, } = useBasicQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            title: initialData?.groupTitle || initialData?.questionGroup?.payload?.title || initialData?.title || '',
+            subtitle: initialData?.groupSubtitle || initialData?.questionGroup?.payload?.subtitle || '',
+            content: initialData?.groupContent || initialData?.questionGroup?.payload?.content || '',
+            imageUrl: initialData?.groupImageUrl || initialData?.questionGroup?.payload?.imageUrl || '',
+            articles: initialData?.articles || initialData?.questionGroup?.payload?.articles || undefined,
+        },
+        articleCount,
+    });
+    // Cache options for each mode to preserve values when switching
+    const textOptionsCacheRef = useRef(null);
+    const imageOptionsCacheRef = useRef(null);
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange callback to prevent excessive re-renders
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Watch form values - MUST be declared before useEffects that use them
+    const watchedQuestion = form.watch('question');
+    const watchedOptionType = form.watch('optionType');
+    const watchedOptions = form.watch('options');
+    const watchedCorrectAnswer = form.watch('correctAnswer');
+    const watchedMultipleAnswers = form.watch('multipleAnswers');
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedExplanation = form.watch('explanation');
+    const watchedAskerName = form.watch('askerName');
+    const watchedAnswererName = form.watch('answererName');
+    const watchedIsExample = form.watch('isExample');
+    const watchedPoints = form.watch('points');
+    // Normalize optionMode from template (handle uppercase 'IMAGE', 'TEXT')
+    // If optionMode is null or undefined, default to 'text' as explicitly requested
+    const normalizedOptionMode = (optionMode?.toLowerCase() === 'image' ? 'image' : 'text');
+    // Default group type to 'BASIC' when template does not set group.type
+    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
+    // Whether per-question imageUrl is part of this part's questionConfig.
+    // When false, per-question image input is hidden and must NOT be saved to content.imageUrl.
+    const includesImageUrl = !questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl');
+    // Whether group-level imageUrl is part of this part's groupConfig.
+    // When false, DocumentGroupCard/BasicQuestionGroupCard hide the group image input and
+    // must NOT be saved to questionGroup.payload.imageUrl.
+    const includesGroupImageUrl = !groupConfig || groupConfig.length === 0 || groupConfig.includes('imageUrl');
+    // Force optionMode from template if provided
+    useEffect(() => {
+        if (normalizedOptionMode && watchedOptionType !== normalizedOptionMode) {
+            form.setValue('optionType', normalizedOptionMode);
+        }
+    }, [normalizedOptionMode, watchedOptionType, form]);
+    // Custom hooks for presigned URL
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage
+    // No need to track originalSavedData in Creator component
+    // NOTE: Unsaved changes tracking has been REMOVED from Creator component
+    // Status is now managed entirely by ExamCreator via localStorage (exam_question_status_{id})
+    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
+    // Expose validation function and getFormData via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const result = await form.trigger();
+                    return result;
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => ({
+                    question: watchedQuestion,
+                    optionType: watchedOptionType,
+                    options: watchedOptions,
+                    correctAnswer: watchedCorrectAnswer,
+                    multipleAnswers: watchedMultipleAnswers,
+                    imageUrl: includesImageUrl ? watchedImageUrl : '',
+                    explanation: watchedExplanation,
+                    askerName: watchedAskerName,
+                    answererName: watchedAnswererName,
+                    isExample: watchedIsExample,
+                    points: watchedPoints,
+                    groupTitle,
+                    groupSubtitle,
+                    groupContent,
+                    groupImageUrl: includesGroupImageUrl ? groupImageUrl : '',
+                    groupNumber: currentGroupNumber,
+                    ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+                }),
+            };
+        }
+    }, [validationRef, form, watchedCorrectAnswer, watchedMultipleAnswers, watchedQuestion, watchedOptionType, watchedOptions, watchedImageUrl, watchedExplanation, watchedAskerName, watchedAnswererName, watchedIsExample, watchedPoints, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, groupType, articles]);
+    // Sync state from initialData when it changes from EXTERNAL sources only
+    // We compare incoming initialData with current FORM values to detect true external changes
+    useEffect(() => {
+        // Cast to any to support both API format and flat format
+        const apiData = initialData;
+        // Normalize initialData for comparison - support both API and flat format
+        const normalizedInitialData = {
+            ...buildNormalizedFormData(apiData, normalizeArgs),
+            groupTitle: apiData?.groupTitle || apiData?.questionGroup?.payload?.title || '',
+            groupContent: apiData?.groupContent || apiData?.questionGroup?.payload?.content || '',
+            groupImageUrl: apiData?.groupImageUrl || apiData?.questionGroup?.payload?.imageUrl || '',
+        };
+        // Check if initialData actually changed from previous prop
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return; // No change, nothing to do
+        }
+        // Update ref to track latest prop value
+        previousInitialDataRef.current = initialData;
+        // Get current form data to compare
+        const currentFormData = {
+            question: watchedQuestion,
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: watchedImageUrl,
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            points: watchedPoints,
+        };
+        // Check if this is truly new external data (not echoed from our own onChange)
+        // IMPORTANT: Must check ALL fields including points, explanation, and imageUrl
+        const isEchoFromOnChange = currentFormData.question === normalizedInitialData.question &&
+            currentFormData.optionType === normalizedInitialData.optionType &&
+            JSON.stringify(currentFormData.correctAnswer) === JSON.stringify(normalizedInitialData.correctAnswer) &&
+            currentFormData.multipleAnswers === normalizedInitialData.multipleAnswers &&
+            currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.imageUrl === normalizedInitialData.imageUrl &&
+            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
+        // IMPORTANT: If initialData changed and matches current form AND isCompleted is true,
+        // this means the question was just saved. Update originalSavedDataRef to the new baseline.
+        // The isCompleted check is crucial - it differentiates actual save from user typing echo.
+        const wasJustSaved = initialData?.isCompleted === true;
+        // If echo from save, just skip the reset (no need to update old refs anymore)
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        // Only reset if external data has different values than current form
+        // This prevents resetting when user just edits the question text
+        const shouldReset = !isEchoFromOnChange &&
+            (JSON.stringify(normalizedInitialData.correctAnswer) !== JSON.stringify(currentFormData.correctAnswer) ||
+                normalizedInitialData.multipleAnswers !== currentFormData.multipleAnswers ||
+                normalizedInitialData.question !== currentFormData.question ||
+                normalizedInitialData.imageUrl !== currentFormData.imageUrl);
+        const hasInitialCorrectAnswer = Array.isArray(normalizedInitialData.correctAnswer)
+            ? normalizedInitialData.correctAnswer.length > 0
+            : normalizedInitialData.correctAnswer !== -1;
+        if (shouldReset && hasInitialCorrectAnswer) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, optionCount, multipleAnswers, form, watchedQuestion, watchedOptionType, watchedOptions, watchedCorrectAnswer, watchedMultipleAnswers, watchedImageUrl, watchedExplanation, watchedAskerName, watchedAnswererName, watchedIsExample, watchedPoints, normalizeArgs]);
+    // Convert to payload format and call onChange
+    // NOTE: We need to stringify options for proper change detection since array reference doesn't change
+    const watchedOptionsString = JSON.stringify(watchedOptions);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                question: watchedQuestion,
+                optionType: watchedOptionType,
+                options: watchedOptions,
+                correctAnswer: watchedCorrectAnswer,
+                multipleAnswers: watchedMultipleAnswers,
+                imageUrl: watchedImageUrl,
+                explanation: watchedExplanation,
+                askerName: watchedAskerName,
+                answererName: watchedAnswererName,
+                isExample: watchedIsExample,
+                points: watchedPoints,
+                groupTitle,
+                groupSubtitle,
+                groupContent,
+                groupImageUrl,
+                groupNumber: currentGroupNumber,
+                ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            question: watchedQuestion,
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: includesImageUrl ? watchedImageUrl : '',
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            points: watchedPoints,
+            groupTitle,
+            groupSubtitle,
+            groupContent,
+            groupImageUrl: includesGroupImageUrl ? groupImageUrl : '',
+            groupNumber: currentGroupNumber,
+            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedQuestion,
+        watchedOptionType,
+        watchedOptionsString, // Use stringified version for proper change detection
+        watchedCorrectAnswer,
+        watchedMultipleAnswers,
+        watchedImageUrl,
+        watchedExplanation,
+        watchedAskerName,
+        watchedAnswererName,
+        watchedIsExample,
+        watchedPoints,
+        groupTitle,
+        groupSubtitle,
+        groupContent,
+        groupImageUrl,
+        currentGroupNumber,
+        groupType,
+        articles,
+    ]);
+    // Handle save with validation
+    const handleSave = form.handleSubmit((data) => {
+        if (data.multipleAnswers) {
+            const correctAnswers = Array.isArray(data.correctAnswer)
+                ? data.correctAnswer
+                : data.correctAnswer === -1
+                    ? []
+                    : [data.correctAnswer];
+            const hasInvalidAnswer = correctAnswers.some((answer) => answer < 0 || answer >= data.options.length);
+            if (hasInvalidAnswer) {
+                form.setError('correctAnswer', { message: 'Đáp án đúng không hợp lệ!' });
+                return;
+            }
+        }
+        else {
+            // Validate correctAnswer is within bounds (but allow -1 = not selected)
+            const correctAnswer = typeof data.correctAnswer === 'number' ? data.correctAnswer : -1;
+            if (correctAnswer !== -1 && correctAnswer >= data.options.length) {
+                form.setError('correctAnswer', { message: 'Đáp án đúng không hợp lệ!' });
+                return;
+            }
+        }
+        // NOTE: Save status is now managed by ExamCreator via localStorage
+        // No need to update old tracking refs here
+        // Clear cached options for the non-active mode after saving
+        textOptionsCacheRef.current = null;
+        imageOptionsCacheRef.current = null;
+        onSave?.(data);
+        // Note: Toast is shown by parent ExamCreator with question number
+    });
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            question: watchedQuestion || '',
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: displayPreviewUrl || watchedImageUrl,
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            isGroup: isGrouped,
+            groupTitle,
+            groupSubtitle,
+            groupContent,
+            groupImageUrl,
+            groupNumber: currentGroupNumber,
+            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Choose the correct answer (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - 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 Edit Mode"] })] }) }) }), _jsx(ChooseTheCorrectAnswerClient, { questionData: questionData, questionConfig: questionConfig, isReviewMode: true, userAnswer: watchedMultipleAnswers
+                        ? watchedCorrectAnswer
+                        : watchedCorrectAnswer !== -1
+                            ? watchedCorrectAnswer
+                            : undefined })] }));
+    }
+    // Creator UI
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'ARTICLES' && (_jsx(ArticlesGroupCard, { groupNumber: currentGroupNumber, articleCount: articleCount, articles: articles, onArticlesChange: setArticles, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'articles'}` })), isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(HelpCircle, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi tr\u1EAFc nghi\u1EC7m v\u1EDBi nhi\u1EC1u l\u1EF1a ch\u1ECDn" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: watchedOptions.filter((o) => typeof o === 'string' && o.trim()).length < 2, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-y-2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => form.setValue('isExample', !watchedIsExample), className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedIsExample
+                                                    ? 'border-amber-300 bg-amber-50 text-amber-700'
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Star, { className: `h-4 w-4 ${watchedIsExample ? 'fill-amber-400 text-amber-400' : ''}` }), "Example"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, disabled: Boolean(multipleAnswers), onClick: () => {
+                                                    const enabled = !watchedMultipleAnswers;
+                                                    const currentValue = form.getValues('correctAnswer');
+                                                    const normalized = Array.isArray(currentValue)
+                                                        ? currentValue
+                                                        : currentValue === -1 ? [] : [currentValue];
+                                                    form.setValue('multipleAnswers', enabled, { shouldValidate: true });
+                                                    form.setValue('correctAnswer', enabled ? normalized : (normalized[0] ?? -1), { shouldValidate: true });
+                                                }, className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedMultipleAnswers
+                                                    ? 'border-violet-300 bg-violet-50 text-violet-700'
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Textarea, { id: "question", ...form.register('question'), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('question') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 3 }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
+                                            form.setValue('imageUrl', url, { shouldValidate: true });
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 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))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {
+                                                        const newType = checked ? 'image' : 'text';
+                                                        const currentOptions = form.getValues('options');
+                                                        const currentCorrectAnswer = form.getValues('correctAnswer');
+                                                        // Save current mode's options to cache
+                                                        if (watchedOptionType === 'text') {
+                                                            textOptionsCacheRef.current = { options: currentOptions, correctAnswer: currentCorrectAnswer };
+                                                        }
+                                                        else {
+                                                            imageOptionsCacheRef.current = { options: currentOptions, correctAnswer: currentCorrectAnswer };
+                                                        }
+                                                        // Restore cached values for the target mode, or use empty defaults
+                                                        const targetCache = newType === 'text' ? textOptionsCacheRef.current : imageOptionsCacheRef.current;
+                                                        if (targetCache) {
+                                                            form.setValue('options', targetCache.options);
+                                                            form.setValue('correctAnswer', targetCache.correctAnswer);
+                                                        }
+                                                        else {
+                                                            const emptyOptions = Array.from({ length: currentOptions.length }, () => '');
+                                                            form.setValue('options', emptyOptions);
+                                                            form.setValue('correctAnswer', -1);
+                                                        }
+                                                        form.setValue('optionType', newType);
+                                                        // Clear all validation errors from previous mode
+                                                        form.clearErrors();
+                                                        setOptionPreviewUrls({});
+                                                    } }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${watchedOptionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                                const currentOptions = form.getValues('options');
+                                                form.setValue('options', [...currentOptions, '']);
+                                            }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [watchedMultipleAnswers ? (_jsx("div", { className: "space-y-3", children: watchedOptions.map((option, index) => {
+                                    const optionError = form.formState.errors.options?.[index];
+                                    const selectedAnswers = Array.isArray(watchedCorrectAnswer)
+                                        ? watchedCorrectAnswer
+                                        : watchedCorrectAnswer === -1
+                                            ? []
+                                            : [watchedCorrectAnswer];
+                                    const isCorrect = selectedAnswers.includes(index);
+                                    const optionLetter = String.fromCharCode(65 + index);
+                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
+                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
+                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => {
+                                                        if (watchedMultipleAnswers) {
+                                                            const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
+                                                                ? form.getValues('correctAnswer')
+                                                                : [];
+                                                            const nextAnswers = currentAnswers.includes(index)
+                                                                ? currentAnswers.filter((answer) => answer !== index)
+                                                                : [...currentAnswers, index].sort((a, b) => a - b);
+                                                            form.setValue('correctAnswer', nextAnswers, { shouldValidate: true });
+                                                            return;
+                                                        }
+                                                        form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                    }, children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [watchedOptionType === 'image' ? (
+                                                        /* Image Upload Mode */
+                                                        _jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option || '', onChange: (url) => {
+                                                                        const newOptions = [...watchedOptions];
+                                                                        newOptions[index] = url;
+                                                                        form.setValue('options', newOptions, { shouldValidate: true });
+                                                                    }, onPresignedUrlChange: (presignedUrl) => {
+                                                                        setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
+                                                                    }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
+                                                        /* Text Input Mode */
+                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                                if (watchedMultipleAnswers) {
+                                                                    const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
+                                                                        ? form.getValues('correctAnswer')
+                                                                        : [];
+                                                                    const nextAnswers = currentAnswers.includes(index)
+                                                                        ? currentAnswers.filter((answer) => answer !== index)
+                                                                        : [...currentAnswers, index].sort((a, b) => a - b);
+                                                                    form.setValue('correctAnswer', nextAnswers, { shouldValidate: true });
+                                                                    return;
+                                                                }
+                                                                form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                            }, className: isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600', title: watchedMultipleAnswers
+                                                                ? (isCorrect ? 'Bỏ chọn đáp án đúng' : 'Chọn thêm đáp án đúng')
+                                                                : 'Chọn làm đáp án đúng', children: _jsx(CheckCircle2, { className: "h-4 w-4" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                const currentOptions = form.getValues('options');
+                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
+                                                                form.setValue('options', newOptions);
+                                                                // Adjust correctAnswer if needed
+                                                                const currentCorrect = form.getValues('correctAnswer');
+                                                                if (Array.isArray(currentCorrect)) {
+                                                                    const nextCorrect = currentCorrect
+                                                                        .filter((answer) => answer !== index)
+                                                                        .map((answer) => (answer > index ? answer - 1 : answer));
+                                                                    form.setValue('correctAnswer', nextCorrect, { shouldValidate: true });
+                                                                }
+                                                                else if (currentCorrect === index) {
+                                                                    form.setValue('correctAnswer', -1, { shouldValidate: true });
+                                                                }
+                                                                else if (typeof currentCorrect === 'number' && currentCorrect > index) {
+                                                                    form.setValue('correctAnswer', currentCorrect - 1, { shouldValidate: true });
+                                                                }
+                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
+                                }) })) : (_jsx(RadioGroup, { value: watchedCorrectAnswer === -1 ? '' : watchedCorrectAnswer.toString(), onValueChange: (value) => {
+                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
+                                }, children: watchedOptions.map((option, index) => {
+                                    const optionError = form.formState.errors.options?.[index];
+                                    const isCorrect = watchedCorrectAnswer === index;
+                                    const optionLetter = String.fromCharCode(65 + index);
+                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
+                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
+                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => {
+                                                        form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                    }, children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [watchedOptionType === 'image' ? (
+                                                        /* Image Upload Mode */
+                                                        _jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option || '', onChange: (url) => {
+                                                                        const newOptions = [...watchedOptions];
+                                                                        newOptions[index] = url;
+                                                                        form.setValue('options', newOptions, { shouldValidate: true });
+                                                                    }, onPresignedUrlChange: (presignedUrl) => {
+                                                                        setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
+                                                                    }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
+                                                        /* Text Input Mode */
+                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                                form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                            }, className: isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600', title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                const currentOptions = form.getValues('options');
+                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
+                                                                form.setValue('options', newOptions);
+                                                                // Adjust correctAnswer if needed
+                                                                const currentCorrect = form.getValues('correctAnswer');
+                                                                if (typeof currentCorrect === 'number' && currentCorrect === index) {
+                                                                    form.setValue('correctAnswer', -1, { shouldValidate: true });
+                                                                }
+                                                                else if (typeof currentCorrect === 'number' && currentCorrect > index) {
+                                                                    form.setValue('correctAnswer', currentCorrect - 1, { shouldValidate: true });
+                                                                }
+                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
+                                }) })), ((Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer.length === 0)
+                                || (!Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer === -1)) && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: watchedMultipleAnswers
+                                                    ? 'Click vào ô chữ cái hoặc icon ✓ để chọn một hoặc nhiều đáp án đúng'
+                                                    : 'Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng' })] })] })), form.hasError('correctAnswer') && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('correctAnswer') }) }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { ...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" }) })] })] }));
+}
+export function ChooseTheCorrectAnswerCreator(props) {
+    return _jsx(ChooseTheCorrectAnswerCreatorContent, { ...props });
+}