@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/listen-and-drag-objects-into-scene/ListenAndDragObjectsIntoSceneCreator.js

@@ -1 +1,457 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as a,useEffect as n,useCallback as l}from"react";import{Button as i}from"../../../../components/ui/button";import{Label as s}from"../../../../components/ui/label";import{Input as o}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{Card as c,CardContent as m,CardHeader as h,CardTitle as g}from"../../../../components/ui/card";import{PointsInput as u}from"../../../../components/ui/points-input";import{RadioGroup as b,RadioGroupItem as p}from"../../../../components/ui/radio-group";import{Pencil as x,Eye as f,Plus as N,Trash2 as v,Image as w,Volume2 as y,Lightbulb as j,GripVertical as k,Target as I,Move as U,ChevronDown as C,ChevronUp as S,MapPin as Z,ArrowRight as D,AlertTriangle as z,ListChecks as V,BookOpen as E}from"lucide-react";import{FileUpload as O}from"../../../../components/ui/file-upload";import{usePresignedFileUrl as M,useDebouncedCallback as P}from"../../../../shared/lib/hooks";import{useReactHookForm as R}from"../../../../shared/lib/hooks/useReactHookForm";import{listenAndDragObjectsIntoSceneFormSchema as T}from"../../../../shared/lib/validation/listen-and-drag-objects-into-scene.validation";import{ListenAndDragObjectsIntoSceneClient as $}from"./ListenAndDragObjectsIntoSceneClient";import{useSceneQuestionGroup as B}from"../../_shared/hooks/useSceneQuestionGroup";import{generateObjectId as A}from"../../_shared/utils/id-generator";import{CreatorGuide as X}from"../../components/CreatorGuide";import{useExamQuestionStore as q}from"../../../../shared/lib/stores/examQuestionStore";const F=[{bg:"bg-blue-500",border:"border-blue-400",light:"bg-blue-100",text:"text-blue-700",dot:"bg-blue-500"},{bg:"bg-emerald-500",border:"border-emerald-400",light:"bg-emerald-100",text:"text-emerald-700",dot:"bg-emerald-500"},{bg:"bg-purple-500",border:"border-purple-400",light:"bg-purple-100",text:"text-purple-700",dot:"bg-purple-500"},{bg:"bg-rose-500",border:"border-rose-400",light:"bg-rose-100",text:"text-rose-700",dot:"bg-rose-500"},{bg:"bg-amber-500",border:"border-amber-400",light:"bg-amber-100",text:"text-amber-700",dot:"bg-amber-500"},{bg:"bg-cyan-500",border:"border-cyan-400",light:"bg-cyan-100",text:"text-cyan-700",dot:"bg-cyan-500"}];function G(e){return F[e%F.length]}function L({groupNumber:t}){return r("span",{className:"inline-flex items-center gap-1 rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700",children:[e("span",{children:"🔗"}),"Nhóm ",t," — Dùng chung"]})}function H({url:r,alt:t}){const{previewUrl:a}=M(r);return a?e("img",{src:a,alt:t,className:"h-full w-full object-contain pointer-events-none",draggable:!1}):e(w,{className:"h-4 w-4 text-gray-400"})}function Y({node:a,index:l,onUpdate:d,onRemove:c}){const[m,h]=t(""),[g,u]=t(!1),{previewUrl:b}=M(a.imageUrl||"");n(()=>{b&&h(b)},[b]);return e("div",{className:"rounded-lg border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[r("div",{className:"flex flex-col items-center gap-1 pt-1",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-sm font-bold text-white shadow-sm",children:l+1}),e(k,{className:"h-4 w-4 text-gray-400"})]}),e("div",{className:"flex-shrink-0",children:e("div",m?{className:"h-20 w-20 overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-50 transition-all hover:border-orange-300",children:e("img",{src:m,alt:a.label||"Object",className:"h-full w-full object-contain p-1"})}:{className:"flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50",children:e(w,{className:"h-6 w-6 text-gray-300"})})}),r("div",{className:"flex-1 space-y-3",children:[r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Tên đối tượng"}),e(o,{value:a.label,onChange:e=>d(a.id,{label:e.target.value}),placeholder:"Ví dụ: lemon, kite, car...",className:"mt-1 border-gray-200"})]}),r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Hình ảnh đối tượng"}),e("div",{className:"mt-1",children:e(O,{id:`drag-object-image-${a.id}`,label:"",accept:"image/*",value:a.imageUrl||"",onChange:e=>d(a.id,{imageUrl:e}),onPresignedUrlChange:h,maxSize:5,placeholder:"Upload hình ảnh đối tượng",autoUpload:!0,prefix:"questions/objects"})})]})]}),r("div",{className:"flex flex-col items-center gap-1 pt-1",children:[e(i,{variant:"ghost",size:"sm",onClick:()=>{g?(c(a.id),u(!1)):(u(!0),setTimeout(()=>u(!1),3e3))},className:"transition-all "+(g?"bg-red-100 text-red-600 hover:bg-red-200 hover:text-red-700 ring-1 ring-red-300":"text-red-400 hover:bg-red-50 hover:text-red-600"),title:g?"Nhấn lần nữa để xác nhận xóa":"Xóa đối tượng",children:e(v,{className:"h-4 w-4"})}),g&&e("span",{className:"text-[10px] font-medium text-red-500 whitespace-nowrap",children:"Nhấn lại?"})]})]})})}function Q({zone:a,index:n,onUpdate:l,onRemove:d,isActive:c,onSelect:m}){const[h,g]=t(!1),u=G(n);return e("div",{className:"rounded-lg border-2 border-dashed p-3 transition-all cursor-pointer "+(c?"border-blue-400 bg-blue-50/50 shadow-sm ring-1 ring-blue-200":"border-gray-200 bg-white hover:border-blue-200 hover:bg-blue-50/20"),onClick:()=>m?.(a.id),children:r("div",{className:"flex items-start gap-2.5",children:[e("div",{className:"flex flex-col items-center gap-1 pt-1.5",children:e("div",{className:`h-6 w-6 rounded-md ${u.dot} flex items-center justify-center text-[10px] font-bold text-white shadow-sm`,children:n+1})}),r("div",{className:"flex-1 space-y-2",children:[e(o,{value:a.label,onChange:e=>l(a.id,{label:e.target.value}),placeholder:"Ví dụ: near the pond, on the tree...",className:"h-8 border-gray-200 text-sm",onClick:e=>e.stopPropagation()}),r("div",{className:"grid grid-cols-4 gap-1.5",children:[r("div",{children:[e(s,{className:"text-[10px] font-medium text-gray-400",children:"X%"}),e(o,{type:"number",min:0,max:100,value:a.x,onChange:e=>l(a.id,{x:parseFloat(e.target.value)||0}),className:"h-7 border-gray-200 text-xs px-1 text-center",onClick:e=>e.stopPropagation()})]}),r("div",{children:[e(s,{className:"text-[10px] font-medium text-gray-400",children:"Y%"}),e(o,{type:"number",min:0,max:100,value:a.y,onChange:e=>l(a.id,{y:parseFloat(e.target.value)||0}),className:"h-7 border-gray-200 text-xs px-1 text-center",onClick:e=>e.stopPropagation()})]}),r("div",{children:[e(s,{className:"text-[10px] font-medium text-gray-400",children:"W%"}),e(o,{type:"number",min:1,max:100,value:a.width,onChange:e=>l(a.id,{width:parseFloat(e.target.value)||10}),className:"h-7 border-gray-200 text-xs px-1 text-center",onClick:e=>e.stopPropagation()})]}),r("div",{children:[e(s,{className:"text-[10px] font-medium text-gray-400",children:"H%"}),e(o,{type:"number",min:1,max:100,value:a.height,onChange:e=>l(a.id,{height:parseFloat(e.target.value)||10}),className:"h-7 border-gray-200 text-xs px-1 text-center",onClick:e=>e.stopPropagation()})]})]})]}),r("div",{className:"flex flex-col items-center pt-1",children:[e(i,{variant:"ghost",size:"sm",onClick:e=>{e.stopPropagation(),h?(d(a.id),g(!1)):(g(!0),setTimeout(()=>g(!1),3e3))},className:"h-7 w-7 p-0 transition-all "+(h?"bg-red-100 text-red-600 hover:bg-red-200 ring-1 ring-red-300":"text-red-400 hover:bg-red-50 hover:text-red-600"),title:h?"Nhấn lần nữa để xác nhận xóa":"Xóa vị trí",children:e(v,{className:"h-3.5 w-3.5"})}),h&&e("span",{className:"text-[9px] font-medium text-red-500 mt-0.5",children:"Xóa?"})]})]})})}function _({backgroundUrl:i,dropZones:s,onZoneDrag:o,onZoneResize:d,activeZoneId:c,onSelectZone:m}){const h=a(null),[g,u]=t(null),[b,p]=t({x:0,y:0}),[x,f]=t(null),[N,v]=t(null),[w,y]=t({x:0,y:0}),[j,k]=t({width:0,height:0}),U=(e,r,t,a,n)=>{n.preventDefault(),n.stopPropagation(),f(e),v(r),y({x:n.clientX,y:n.clientY}),k({width:t,height:a})},C=l(e=>{if(h.current)if(g){const r=h.current.getBoundingClientRect(),t=(e.clientX-r.left)/r.width*100,a=(e.clientY-r.top)/r.height*100,n=Math.max(0,Math.min(100,t-b.x)),l=Math.max(0,Math.min(100,a-b.y));o(g,Math.round(10*n)/10,Math.round(10*l)/10)}else if(x&&N){const r=h.current.getBoundingClientRect(),t=(e.clientX-w.x)/r.width*100,a=(e.clientY-w.y)/r.height*100;let n=j.width,l=j.height;"e"!==N&&"se"!==N||(n=Math.max(1,j.width+t)),"s"!==N&&"se"!==N||(l=Math.max(1,j.height+a)),d(x,Math.round(10*n)/10,Math.round(10*l)/10)}},[g,x,N,w,j,b,o,d]),S=l(()=>{u(null),f(null),v(null)},[]);return n(()=>{if(g||x)return window.addEventListener("mousemove",C),window.addEventListener("mouseup",S),()=>{window.removeEventListener("mousemove",C),window.removeEventListener("mouseup",S)}},[g,x,C,S]),r("div",{ref:h,className:"relative w-full select-none",children:[e("img",{src:i,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),s.map((t,a)=>{const n=g===t.id||x===t.id||c===t.id,l=G(a);return r("div",{className:"absolute cursor-move rounded-md border-2 border-dashed transition-colors group "+(n?`${l.border} bg-blue-200/30 shadow-lg z-20`:`${l.border} bg-blue-100/20 hover:bg-blue-200/30 z-10`),style:{left:`${t.x}%`,top:`${t.y}%`,width:`${t.width}%`,height:`${t.height}%`},onMouseDown:e=>((e,r,t,a)=>{if(a.preventDefault(),!a.target.dataset.resizeHandle&&(u(e),m?.(e),h.current)){const e=h.current.getBoundingClientRect(),n=(a.clientX-e.left)/e.width*100,l=(a.clientY-e.top)/e.height*100;p({x:n-r,y:l-t})}})(t.id,t.x,t.y,e),children:[r("div",{className:`absolute -top-5 left-0 rounded ${l.dot} px-1.5 py-0.5 text-[10px] font-medium text-white whitespace-nowrap shadow-sm`,children:[a+1,". ",t.label||`Zone ${a+1}`]}),e("div",{className:"flex h-full w-full items-center justify-center",children:e(I,{className:"h-4 w-4 text-blue-400/60"})}),e("div",{"data-resize-handle":"true",className:"absolute -right-1.5 top-1/2 h-3 w-3 -translate-y-1/2 cursor-e-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100",style:{opacity:n?1:void 0},onMouseDown:e=>U(t.id,"e",t.width,t.height,e)}),e("div",{"data-resize-handle":"true",className:"absolute -bottom-1.5 left-1/2 h-3 w-3 -translate-x-1/2 cursor-s-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100",style:{opacity:n?1:void 0},onMouseDown:e=>U(t.id,"s",t.width,t.height,e)}),e("div",{"data-resize-handle":"true",className:"absolute -bottom-1.5 -right-1.5 h-3 w-3 cursor-se-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100",style:{opacity:n?1:void 0},onMouseDown:e=>U(t.id,"se",t.width,t.height,e)})]},t.id)})]})}function J({initialData:o,onSave:v,onSaveToQuestionBank:k,onCancel:F,onChange:J,onUnsavedChangesChange:K,validationRef:W,externalErrors:ee,groups:re,questionIndexInPart:te=0,partId:ae=""}){console.log("[ListenAndDragObjectsIntoScene_Creator] RENDER",{initialData:o,questionIndexInPart:te,partId:ae,groups:re});const ne=q(e=>e.examId),le={backgroundImageUrl:o?.backgroundImageUrl||"",objectNodes:o?.objectNodes||[],dropZones:o?.dropZones||[]},{isGrouped:ie,currentGroupNumber:se,backgroundImageUrl:oe,setBackgroundImageUrl:de,objectNodes:ce,setObjectNodes:me,dropZones:he,setDropZones:ge}=B({partId:ae,groups:re,questionIndexInPart:te,initialData:le}),[ue,be]=t(o?.audioUrl||""),[pe,xe]=t(null!=o?.correctObjectId?String(o.correctObjectId):""),[fe,Ne]=t(null!=o?.correctDropZoneId?String(o.correctDropZoneId):""),[ve,we]=t(o?.points),[ye,je]=t(o?.explanation||""),[ke,Ie]=t(o?.isBackup||!1),[Ue,Ce]=t(!1),[Se,Ze]=t(""),[De,ze]=t(""),[Ve,Ee]=t(null),[Oe,Me]=t(!1),Pe=R({defaultValues:{audioUrl:ue,backgroundImageUrl:oe,objectNodes:ce,dropZones:he,correctObjectId:pe,correctDropZoneId:fe,isBackup:ke},zodSchema:T,mode:"onBlur"}),Re=a(o),Te=a(!0),$e=a(J),Be=a(!1),{previewUrl:Ae}=M(oe),{previewUrl:Xe}=M(ue);n(()=>{Ae&&Ze(Ae)},[Ae]),n(()=>{Xe&&ze(Xe)},[Xe]),n(()=>{$e.current=J},[J]);const qe=P(e=>{$e.current?.(e)},300);n(()=>{W&&(W.current={triggerValidation:async()=>Fe(),getFormData:()=>({audioUrl:ue,backgroundImageUrl:oe,objectNodes:ce,dropZones:he,correctObjectId:pe,correctDropZoneId:fe,points:ve,explanation:ye,isBackup:ke})})},[W,ue,oe,ce,he,pe,fe,ve,ye,ke]),n(()=>{if(!o)return void(Be.current||(Be.current=!0,Te.current=!1));if(!(JSON.stringify(Re.current)!==JSON.stringify(o))&&Be.current)return;Re.current=o;const e=o?.audioUrl||"",r=null!=o?.correctObjectId?String(o.correctObjectId):"",t=null!=o?.correctDropZoneId?String(o.correctDropZoneId):"",a=o?.points||1,n=o?.explanation||"",l=o?.isBackup||!1;Te.current=!0,Be.current=!0,be(e),xe(r),Ne(t),we(a),je(n),Ie(l),setTimeout(()=>{Te.current=!1},150)},[o]),n(()=>{if(Te.current||!Be.current)return;qe({audioUrl:ue,backgroundImageUrl:oe,objectNodes:ce,dropZones:he,correctObjectId:pe,correctDropZoneId:fe,points:ve,explanation:ye,isBackup:ke,groups:re,groupNumber:se})},[ue,oe,ce,he,pe,fe,ve,ye,ke,re,se,qe]);const Fe=async()=>{Pe.setValue("audioUrl",ue),Pe.setValue("backgroundImageUrl",oe),Pe.setValue("objectNodes",ce),Pe.setValue("dropZones",he),Pe.setValue("correctObjectId",String(pe)),Pe.setValue("correctDropZoneId",String(fe)),Pe.setValue("isBackup",ke);return await Pe.trigger()},Ge=(e,r)=>{me(ce.map(t=>t.id===e?{...t,...r}:t)),Pe.clearErrors()},Le=e=>{me(ce.filter(r=>r.id!==e)),pe===e&&xe(""),Pe.clearErrors()},He=(e,r)=>{ge(he.map(t=>t.id===e?{...t,...r}:t)),Pe.clearErrors()},Ye=e=>{ge(he.filter(r=>r.id!==e)),fe===e&&Ne(""),Ve===e&&Ee(null),Pe.clearErrors()},Qe=l((e,r,t)=>{ge(a=>a.map(a=>a.id===e?{...a,x:r,y:t}:a))},[]),_e=l((e,r,t)=>{ge(a=>a.map(a=>a.id===e?{...a,width:r,height:t}:a))},[]),Je=ce.find(e=>e.id===pe),Ke=he.find(e=>e.id===fe),We=he.findIndex(e=>e.id===fe);return r("div",Ue?{className:"space-y-6",children:[e(c,{children:e(h,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(g,{children:"Nghe và kéo thả đối tượng (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:()=>Ce(!1),children:[e(x,{className:"mr-2 h-4 w-4"}),"Quay lại chỉnh sửa"]})]})})}),e($,{questionData:{audioUrl:De||ue,backgroundImageUrl:Se||oe,objectNodes:ce,dropZones:he},isReviewMode:!0,userAnswer:pe&&fe?{objectId:pe,dropZoneId:fe}:void 0,correctAnswer:pe&&fe?{objectId:pe,dropZoneId:fe}:void 0,explanation:ye})]}:{className:"space-y-6",children:[e(X,{colorScheme:"rose",steps:[{text:"Upload hình nền (Scene) chung cho nhóm câu hỏi"},{text:"Thêm các đối tượng kéo-thả (draggable objects) với hình ảnh và tên"},{text:"Thiết lập vùng thả (drop zones) trên hình nền — vị trí mà học sinh cần kéo đối tượng vào"},{text:"Upload audio hướng dẫn cho từng câu"},{text:"Ghép đúng đối tượng với vùng thả tương ứng",highlight:!0}],tips:["Vùng thả nên đủ lớn và rõ ràng, tránh chồng chéo"]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-rose-500 via-pink-500 to-fuchsia-500"}),e(h,{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 bg-gradient-to-br from-rose-500 to-pink-600 shadow-md",children:e(V,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:"Nhóm đáp án"}),r("div",{className:"mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-rose-100 px-3 py-1 text-sm font-medium text-rose-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",se]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(i,{variant:"outline",size:"sm",onClick:()=>Ce(!0),disabled:!oe||ce.length<2||he.length<1,className:"gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700",children:[e(f,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-rose-400 to-pink-400"}),e(h,{className:"pb-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-rose-100",children:e(w,{className:"h-3.5 w-3.5 text-rose-600"})}),e(g,{className:"text-lg font-semibold text-gray-800",children:"Ảnh nền & Đối tượng kéo thả"})]}),r(i,{variant:"ghost",size:"sm",onClick:()=>Me(!Oe),className:"gap-1 text-gray-500 hover:text-gray-700",children:[e(Oe?C:S,{className:"h-4 w-4"}),Oe?"Mở rộng":"Thu gọn"]})]})}),!Oe&&r(m,{className:"space-y-6",children:[e("div",{className:"rounded-xl border-2 p-5 bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200",children:r("div",{className:"space-y-2",children:[r(s,{className:"flex items-center gap-2 text-base font-semibold text-orange-800",children:[e(w,{className:"h-4 w-4 text-orange-600"}),"Ảnh nền (Scene) ",e("span",{className:"text-red-500",children:"*"})]}),e(O,{id:"drag-scene-background",label:"",accept:"image/*",value:oe,onChange:e=>{de(e),Pe.clearErrors()},onPresignedUrlChange:Ze,maxSize:10,placeholder:"Upload hình ảnh nền hình ảnh nền",autoUpload:!0,prefix:"questions/scenes"}),Pe.formState.errors.backgroundImageUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:Pe.formState.errors.backgroundImageUrl.message})]})}),Se&&r("div",{className:"rounded-xl border border-gray-200 bg-gray-50 overflow-hidden isolate",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 px-4 py-2.5 bg-white",children:[r("div",{className:"flex items-center gap-2",children:[e(w,{className:"h-4 w-4 text-blue-600"}),e("span",{className:"text-sm font-semibold text-gray-700",children:"Hình ảnh nền"}),e(L,{groupNumber:se})]}),e("div",{className:"text-xs text-gray-500 font-medium",children:"Kéo thả vị trí để định vị trên ảnh nền"})]}),e("div",{className:"p-3 w-full",children:e(_,{backgroundUrl:Se,dropZones:he,onZoneDrag:Qe,onZoneResize:_e,activeZoneId:Ve,onSelectZone:Ee})})]}),!Se&&e("div",{className:"rounded-xl border border-gray-200 bg-gray-50/50 p-6",children:r("div",{className:"flex flex-col items-center gap-2 text-center",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-full bg-gray-100",children:e(I,{className:"h-5 w-5 text-gray-400"})}),e("p",{className:"text-sm text-gray-500",children:"Upload ảnh nền trước để thiết lập vị trí trên hình ảnh nền."})]})}),Se&&r("div",{className:"pt-4 border-t border-gray-100",children:[r("div",{className:"flex items-center justify-between mb-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-blue-100",children:e(I,{className:"h-3.5 w-3.5 text-blue-600"})}),r("h3",{className:"text-base font-semibold text-gray-800",children:["Vị trí (",he.length," items)"]}),e(L,{groupNumber:se})]}),r(i,{variant:"outline",size:"sm",onClick:()=>{const e={id:A(),label:"",x:20+20*he.length%60,y:30+15*he.length%40,width:12,height:12};ge([...he,e]),Pe.clearErrors()},className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(N,{className:"h-4 w-4"}),"Thêm vị trí"]})]}),e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-3",children:0===he.length?r("div",{className:"col-span-full flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10",children:[e("div",{className:"flex h-12 w-12 items-center justify-center rounded-full bg-gray-100",children:e(I,{className:"h-6 w-6 text-gray-400"})}),e("p",{className:"text-sm text-gray-500",children:"Chưa có vị trí nào. Nhấn “Thêm vị trí” để bắt đầu."})]}):he.map((r,t)=>e(Q,{zone:r,index:t,onUpdate:He,onRemove:Ye,isActive:Ve===r.id,onSelect:Ee},r.id))}),Pe.formState.errors.dropZones&&e("div",{className:"col-span-full mt-2 rounded-lg border border-red-200 bg-red-50 p-3",children:e("p",{className:"text-sm text-red-500",children:Pe.formState.errors.dropZones.message||"Vui lòng nhập đầy đủ thông tin cho các vị trí."})})]}),r("div",{className:"pt-4 border-t border-gray-100",children:[r("div",{className:"flex items-center justify-between mb-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-amber-100",children:e(U,{className:"h-3.5 w-3.5 text-amber-600"})}),r("h3",{className:"text-base font-semibold text-gray-800",children:["Đối tượng (",ce.length," items)"]}),e(L,{groupNumber:se})]}),r(i,{variant:"outline",size:"sm",onClick:()=>{const e={id:A(),imageUrl:"",label:""};me([...ce,e]),Pe.clearErrors()},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(N,{className:"h-4 w-4"}),"Thêm đối tượng"]})]}),r("div",{className:"space-y-3",children:[0===ce.length?r("div",{className:"flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10",children:[e("div",{className:"flex h-12 w-12 items-center justify-center rounded-full bg-gray-100",children:e(w,{className:"h-6 w-6 text-gray-400"})}),e("p",{className:"text-sm text-gray-500",children:"Chưa có đối tượng nào. Nhấn “Thêm đối tượng” để tạo các đối tượng ở sidebar."})]}):ce.map((r,t)=>e(Y,{node:r,index:t,onUpdate:Ge,onRemove:Le},r.id)),Pe.formState.errors.objectNodes&&e("p",{className:"mt-2 text-sm text-red-500",children:Pe.formState.errors.objectNodes.message||"Vui lòng nhập đầy đủ thông tin cho các đối tượng."})]})]})]})]}),r(c,{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(h,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-green-100",children:e(y,{className:"h-4 w-4 text-green-600"})}),e(g,{className:"text-lg font-semibold text-gray-800",children:"Thông tin câu hỏi"})]})}),r(m,{className:"space-y-6 pt-2",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:r("div",{className:"flex flex-col md:flex-row gap-6",children:[e("div",{className:"flex-1",children:e(u,{value:ve,onChange:e=>we(parseFloat(e.target.value)||1)})}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),r("div",{className:"space-y-2",children:[r(s,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-indigo-500"}),"Audio câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(O,{id:"drag-scene-audio",label:"",accept:"audio/*",value:ue,onChange:e=>{be(e),Pe.clearErrors()},onPresignedUrlChange:ze,maxSize:10,placeholder:"Upload file audio câu hỏi",autoUpload:!0,prefix:"questions/audio",examId:ne||void 0,partId:ae||void 0}),Pe.formState.errors.audioUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:Pe.formState.errors.audioUrl.message}),De&&e("audio",{controls:!0,className:"mt-2 w-full",src:De,children:"Trình duyệt không hỗ trợ audio."})]}),r("div",{className:"space-y-3",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(j,{className:"h-3.5 w-3.5 text-green-600"})}),r(s,{className:"text-base font-semibold text-gray-800",children:["Đối tượng đúng ",e("span",{className:"text-red-500",children:"*"})]})]}),0===ce.length?e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng thêm đối tượng ở phần dữ liệu nhóm trước khi chọn đáp án."}):e(b,{value:pe,onValueChange:e=>{xe(e),Pe.clearErrors()},className:"grid gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",children:ce.map((t,a)=>r("label",{className:"flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all "+(pe===t.id?"border-green-500 bg-green-50 ring-1 ring-green-500 shadow-sm":"border-gray-200 hover:border-green-300 hover:bg-green-50/50"),children:[e(p,{value:t.id,id:`correct-obj-${t.id}`,className:"flex-shrink-0"}),e("div",{className:"h-12 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white",children:t.imageUrl?e(H,{url:t.imageUrl,alt:t.label}):e("div",{className:"flex h-full w-full items-center justify-center",children:e(w,{className:"h-4 w-4 text-gray-300"})})}),e("div",{className:"min-w-0 flex-1",children:r("p",{className:"font-medium text-gray-900 text-sm line-clamp-2 break-all",children:[a+1,". ",t.label||"(Chưa đặt tên)"]})})]},t.id))}),Pe.formState.errors.correctObjectId&&e("div",{className:"rounded-lg border border-red-200 bg-red-50 p-3 mt-2",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",Pe.formState.errors.correctObjectId.message]})})]}),r("div",{className:"space-y-3",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-blue-100",children:e(I,{className:"h-3.5 w-3.5 text-blue-600"})}),r(s,{className:"text-base font-semibold text-gray-800",children:["Vị trí đúng ",e("span",{className:"text-red-500",children:"*"})]})]}),0===he.length?e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng thêm vị trí ở phần dữ liệu nhóm trước khi chọn đáp án."}):e(b,{value:fe,onValueChange:e=>{Ne(e),Pe.clearErrors()},className:"grid gap-3 sm:grid-cols-2 md:grid-cols-3",children:he.map((t,a)=>{const n=G(a);return r("label",{className:"flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all "+(fe===t.id?"border-blue-500 bg-blue-50 ring-1 ring-blue-500 shadow-sm":"border-gray-200 hover:border-blue-300 hover:bg-blue-50/50"),children:[e(p,{value:t.id,id:`correct-dz-${t.id}`,className:"flex-shrink-0"}),e("div",{className:`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md ${n.dot} text-white shadow-sm`,children:e(Z,{className:"h-4 w-4"})}),r("div",{className:"min-w-0 flex-1",children:[r("p",{className:"font-medium text-gray-900 text-sm line-clamp-1 break-all",children:[a+1,". ",t.label||"(Chưa đặt nhãn)"]}),r("p",{className:"text-[11px] text-gray-400 mt-0.5",children:["Vị trí: (",t.x,"%, ",t.y,"%) — ",t.width,"×",t.height,"%"]})]})]},t.id)})}),Pe.formState.errors.correctDropZoneId&&e("div",{className:"rounded-lg border border-red-200 bg-red-50 p-3 mt-2",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",Pe.formState.errors.correctDropZoneId.message]})})]}),Je&&Ke&&r("div",{className:"rounded-xl border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white",children:e(j,{className:"h-3 w-3"})}),e("span",{className:"text-sm font-semibold text-green-800",children:"Đáp án đúng"})]}),r("div",{className:"flex items-center gap-3 rounded-lg bg-white/80 p-3 border border-green-100",children:[e("div",{className:"h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 border-green-300 bg-white",children:Je.imageUrl?e(H,{url:Je.imageUrl,alt:Je.label}):e("div",{className:"flex h-full w-full items-center justify-center",children:e(w,{className:"h-5 w-5 text-gray-300"})})}),r("div",{className:"min-w-0",children:[e("p",{className:"font-semibold text-gray-900 text-sm",children:Je.label||"(Chưa đặt tên)"}),e("p",{className:"text-xs text-gray-500",children:"Đối tượng"})]}),e(D,{className:"h-5 w-5 text-green-500 flex-shrink-0 mx-1"}),e("div",{className:`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${We>=0?G(We).dot:"bg-blue-500"} text-white shadow-sm`,children:e(Z,{className:"h-5 w-5"})}),r("div",{className:"min-w-0",children:[e("p",{className:"font-semibold text-gray-900 text-sm",children:Ke.label||"(Chưa đặt nhãn)"}),r("p",{className:"text-xs text-gray-500",children:["Vị trí (",Ke.x,"%, ",Ke.y,"%)"]})]})]})]}),(!pe||!fe)&&ce.length>0&&he.length>0&&r("div",{className:"flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 p-3",children:[e(z,{className:"h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5"}),e("p",{className:"text-sm text-amber-700",children:"Vui lòng chọn cả đối tượng đúng và vị trí đúng cho câu hỏi này"})]})]})]}),r(c,{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(h,{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(E,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(g,{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(m,{children:e(d,{value:ye,onChange:e=>je(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function ListenAndDragObjectsIntoSceneCreator(r){return e(J,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } 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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
+import { Pencil, Eye, Plus, Trash2, Image as ImageIcon, Volume2, Lightbulb, GripVertical, Target, Move, ChevronDown, ChevronUp, MapPin, ArrowRight, AlertTriangle, ListChecks, BookOpen, } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { listenAndDragObjectsIntoSceneFormSchema, } from '../../../../shared/lib/validation/listen-and-drag-objects-into-scene.validation';
+import { ListenAndDragObjectsIntoSceneClient } from './ListenAndDragObjectsIntoSceneClient';
+import { useSceneQuestionGroup } from '../../_shared/hooks/useSceneQuestionGroup';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// Drop zone color palette for visual correlation between editor and preview
+const DROP_ZONE_COLORS = [
+    { bg: 'bg-blue-500', border: 'border-blue-400', light: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
+    { bg: 'bg-emerald-500', border: 'border-emerald-400', light: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500' },
+    { bg: 'bg-purple-500', border: 'border-purple-400', light: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500' },
+    { bg: 'bg-rose-500', border: 'border-rose-400', light: 'bg-rose-100', text: 'text-rose-700', dot: 'bg-rose-500' },
+    { bg: 'bg-amber-500', border: 'border-amber-400', light: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500' },
+    { bg: 'bg-cyan-500', border: 'border-cyan-400', light: 'bg-cyan-100', text: 'text-cyan-700', dot: 'bg-cyan-500' },
+];
+function getZoneColor(index) {
+    return DROP_ZONE_COLORS[index % DROP_ZONE_COLORS.length];
+}
+/** Shared group badge component */
+function SharedGroupBadge({ groupNumber }) {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700", children: [_jsx("span", { children: "\uD83D\uDD17" }), "Nh\u00F3m ", groupNumber, " \u2014 D\u00F9ng chung"] }));
+}
+/** Helper component for presigned image display */
+function PresignedImage({ url, alt }) {
+    const { previewUrl } = usePresignedFileUrl(url);
+    if (!previewUrl)
+        return _jsx(ImageIcon, { className: "h-4 w-4 text-gray-400" });
+    return (_jsx("img", { src: previewUrl, alt: alt, className: "h-full w-full object-contain pointer-events-none", draggable: false }));
+}
+/**
+ * DragObjectEditor - An individual drag object editor row (sidebar objects, no position)
+ * Enhanced with larger preview, delete confirmation, and consistent styling
+ */
+function DragObjectEditor({ node, index, onUpdate, onRemove, }) {
+    const [objectPreviewUrl, setObjectPreviewUrl] = useState('');
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const { previewUrl: presignedObjectUrl } = usePresignedFileUrl(node.imageUrl || '');
+    useEffect(() => {
+        if (presignedObjectUrl) {
+            setObjectPreviewUrl(presignedObjectUrl);
+        }
+    }, [presignedObjectUrl]);
+    const handleDelete = () => {
+        if (confirmDelete) {
+            onRemove(node.id);
+            setConfirmDelete(false);
+        }
+        else {
+            setConfirmDelete(true);
+            setTimeout(() => setConfirmDelete(false), 3000);
+        }
+    };
+    return (_jsx("div", { className: "rounded-lg border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("div", { className: "flex flex-col items-center gap-1 pt-1", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-sm font-bold text-white shadow-sm", children: index + 1 }), _jsx(GripVertical, { className: "h-4 w-4 text-gray-400" })] }), _jsx("div", { className: "flex-shrink-0", children: objectPreviewUrl ? (_jsx("div", { className: "h-20 w-20 overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-50 transition-all hover:border-orange-300", children: _jsx("img", { src: objectPreviewUrl, alt: node.label || 'Object', className: "h-full w-full object-contain p-1" }) })) : (_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-300" }) })) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "T\u00EAn \u0111\u1ED1i t\u01B0\u1EE3ng" }), _jsx(Input, { value: node.label, onChange: (e) => onUpdate(node.id, { label: e.target.value }), placeholder: "V\u00ED d\u1EE5: lemon, kite, car...", className: "mt-1 border-gray-200" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh \u0111\u1ED1i t\u01B0\u1EE3ng" }), _jsx("div", { className: "mt-1", children: _jsx(FileUpload, { id: `drag-object-image-${node.id}`, label: "", accept: "image/*", value: node.imageUrl || '', onChange: (url) => onUpdate(node.id, { imageUrl: url }), onPresignedUrlChange: setObjectPreviewUrl, maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh \u0111\u1ED1i t\u01B0\u1EE3ng", autoUpload: true, prefix: "questions/objects" }) })] })] }), _jsxs("div", { className: "flex flex-col items-center gap-1 pt-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleDelete, className: `transition-all ${confirmDelete
+                                ? 'bg-red-100 text-red-600 hover:bg-red-200 hover:text-red-700 ring-1 ring-red-300'
+                                : 'text-red-400 hover:bg-red-50 hover:text-red-600'}`, title: confirmDelete ? 'Nhấn lần nữa để xác nhận xóa' : 'Xóa đối tượng', children: _jsx(Trash2, { className: "h-4 w-4" }) }), confirmDelete && (_jsx("span", { className: "text-[10px] font-medium text-red-500 whitespace-nowrap", children: "Nh\u1EA5n l\u1EA1i?" }))] })] }) }));
+}
+/**
+ * DropZoneEditor - An individual drop zone editor row
+ * Enhanced with color-coded indicator matching the scene preview
+ */
+function DropZoneEditor({ zone, index, onUpdate, onRemove, isActive, onSelect, }) {
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const color = getZoneColor(index);
+    const handleDelete = () => {
+        if (confirmDelete) {
+            onRemove(zone.id);
+            setConfirmDelete(false);
+        }
+        else {
+            setConfirmDelete(true);
+            setTimeout(() => setConfirmDelete(false), 3000);
+        }
+    };
+    return (_jsx("div", { className: `rounded-lg border-2 border-dashed p-3 transition-all cursor-pointer ${isActive
+            ? 'border-blue-400 bg-blue-50/50 shadow-sm ring-1 ring-blue-200'
+            : 'border-gray-200 bg-white hover:border-blue-200 hover:bg-blue-50/20'}`, onClick: () => onSelect?.(zone.id), children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "flex flex-col items-center gap-1 pt-1.5", children: _jsx("div", { className: `h-6 w-6 rounded-md ${color.dot} flex items-center justify-center text-[10px] font-bold text-white shadow-sm`, children: index + 1 }) }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { value: zone.label, onChange: (e) => onUpdate(zone.id, { label: e.target.value }), placeholder: "V\u00ED d\u1EE5: near the pond, on the tree...", className: "h-8 border-gray-200 text-sm", onClick: (e) => e.stopPropagation() }), _jsxs("div", { className: "grid grid-cols-4 gap-1.5", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-[10px] font-medium text-gray-400", children: "X%" }), _jsx(Input, { type: "number", min: 0, max: 100, value: zone.x, onChange: (e) => onUpdate(zone.id, { x: parseFloat(e.target.value) || 0 }), className: "h-7 border-gray-200 text-xs px-1 text-center", onClick: (e) => e.stopPropagation() })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-[10px] font-medium text-gray-400", children: "Y%" }), _jsx(Input, { type: "number", min: 0, max: 100, value: zone.y, onChange: (e) => onUpdate(zone.id, { y: parseFloat(e.target.value) || 0 }), className: "h-7 border-gray-200 text-xs px-1 text-center", onClick: (e) => e.stopPropagation() })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-[10px] font-medium text-gray-400", children: "W%" }), _jsx(Input, { type: "number", min: 1, max: 100, value: zone.width, onChange: (e) => onUpdate(zone.id, { width: parseFloat(e.target.value) || 10 }), className: "h-7 border-gray-200 text-xs px-1 text-center", onClick: (e) => e.stopPropagation() })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-[10px] font-medium text-gray-400", children: "H%" }), _jsx(Input, { type: "number", min: 1, max: 100, value: zone.height, onChange: (e) => onUpdate(zone.id, { height: parseFloat(e.target.value) || 10 }), className: "h-7 border-gray-200 text-xs px-1 text-center", onClick: (e) => e.stopPropagation() })] })] })] }), _jsxs("div", { className: "flex flex-col items-center pt-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                                e.stopPropagation();
+                                handleDelete();
+                            }, className: `h-7 w-7 p-0 transition-all ${confirmDelete
+                                ? 'bg-red-100 text-red-600 hover:bg-red-200 ring-1 ring-red-300'
+                                : 'text-red-400 hover:bg-red-50 hover:text-red-600'}`, title: confirmDelete ? 'Nhấn lần nữa để xác nhận xóa' : 'Xóa vị trí', children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), confirmDelete && (_jsx("span", { className: "text-[9px] font-medium text-red-500 mt-0.5", children: "X\u00F3a?" }))] })] }) }));
+}
+/**
+ * Scene preview overlay for drop zones (drag-to-position)
+ * Enhanced with color-coded zones matching the editor list
+ */
+function DropZonePreviewWithDrag({ backgroundUrl, dropZones, onZoneDrag, onZoneResize, activeZoneId, onSelectZone, }) {
+    const containerRef = useRef(null);
+    const [draggingId, setDraggingId] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [resizingId, setResizingId] = useState(null);
+    const [resizeType, setResizeType] = useState(null);
+    const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 });
+    const [resizeStartDim, setResizeStartDim] = useState({ width: 0, height: 0 });
+    const handleMouseDown = (zoneId, zoneX, zoneY, e) => {
+        e.preventDefault();
+        if (e.target.dataset.resizeHandle)
+            return;
+        setDraggingId(zoneId);
+        onSelectZone?.(zoneId);
+        if (containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+            const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+            setDragOffset({
+                x: mouseXPercent - zoneX,
+                y: mouseYPercent - zoneY,
+            });
+        }
+    };
+    const handleResizeMouseDown = (zoneId, type, zoneWidth, zoneHeight, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setResizingId(zoneId);
+        setResizeType(type);
+        setResizeStartPos({ x: e.clientX, y: e.clientY });
+        setResizeStartDim({ width: zoneWidth, height: zoneHeight });
+    };
+    const handleMouseMove = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        if (draggingId) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+            const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+            const x = Math.max(0, Math.min(100, mouseXPercent - dragOffset.x));
+            const y = Math.max(0, Math.min(100, mouseYPercent - dragOffset.y));
+            onZoneDrag(draggingId, Math.round(x * 10) / 10, Math.round(y * 10) / 10);
+        }
+        else if (resizingId && resizeType) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const dx = ((e.clientX - resizeStartPos.x) / rect.width) * 100;
+            const dy = ((e.clientY - resizeStartPos.y) / rect.height) * 100;
+            let newWidth = resizeStartDim.width;
+            let newHeight = resizeStartDim.height;
+            if (resizeType === 'e' || resizeType === 'se') {
+                newWidth = Math.max(1, resizeStartDim.width + dx);
+            }
+            if (resizeType === 's' || resizeType === 'se') {
+                newHeight = Math.max(1, resizeStartDim.height + dy);
+            }
+            onZoneResize(resizingId, Math.round(newWidth * 10) / 10, Math.round(newHeight * 10) / 10);
+        }
+    }, [draggingId, resizingId, resizeType, resizeStartPos, resizeStartDim, dragOffset, onZoneDrag, onZoneResize]);
+    const handleMouseUp = useCallback(() => {
+        setDraggingId(null);
+        setResizingId(null);
+        setResizeType(null);
+    }, []);
+    useEffect(() => {
+        if (draggingId || resizingId) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', handleMouseMove);
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [draggingId, resizingId, handleMouseMove, handleMouseUp]);
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full select-none", children: [_jsx("img", { src: backgroundUrl, alt: "Scene background", className: "w-full rounded-md object-contain", draggable: false }), dropZones.map((zone, zoneIndex) => {
+                const isActive = draggingId === zone.id || resizingId === zone.id || activeZoneId === zone.id;
+                const color = getZoneColor(zoneIndex);
+                return (_jsxs("div", { className: `absolute cursor-move rounded-md border-2 border-dashed transition-colors group ${isActive
+                        ? `${color.border} bg-blue-200/30 shadow-lg z-20`
+                        : `${color.border} bg-blue-100/20 hover:bg-blue-200/30 z-10`}`, style: {
+                        left: `${zone.x}%`,
+                        top: `${zone.y}%`,
+                        width: `${zone.width}%`,
+                        height: `${zone.height}%`,
+                    }, onMouseDown: (e) => handleMouseDown(zone.id, zone.x, zone.y, e), children: [_jsxs("div", { className: `absolute -top-5 left-0 rounded ${color.dot} px-1.5 py-0.5 text-[10px] font-medium text-white whitespace-nowrap shadow-sm`, children: [zoneIndex + 1, ". ", zone.label || `Zone ${zoneIndex + 1}`] }), _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(Target, { className: "h-4 w-4 text-blue-400/60" }) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -right-1.5 top-1/2 h-3 w-3 -translate-y-1/2 cursor-e-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", style: { opacity: isActive ? 1 : undefined }, onMouseDown: (e) => handleResizeMouseDown(zone.id, 'e', zone.width, zone.height, e) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -bottom-1.5 left-1/2 h-3 w-3 -translate-x-1/2 cursor-s-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", style: { opacity: isActive ? 1 : undefined }, onMouseDown: (e) => handleResizeMouseDown(zone.id, 's', zone.width, zone.height, e) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -bottom-1.5 -right-1.5 h-3 w-3 cursor-se-resize rounded-full border border-blue-500 bg-white opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", style: { opacity: isActive ? 1 : undefined }, onMouseDown: (e) => handleResizeMouseDown(zone.id, 'se', zone.width, zone.height, e) })] }, zone.id));
+            })] }));
+}
+/**
+ * ListenAndDragObjectsIntoSceneCreator
+ *
+ * Admin creator component for the "Listen and Drag Objects into Scene" question type.
+ * Allows uploading a background scene, adding object images in sidebar,
+ * defining drop zones on the scene, and selecting the correct object+dropzone pair.
+ *
+ * UI/UX improvements:
+ * - Consolidated from 5 cards to 3 cards (Group Data + Question Details + Explanation)
+ * - Side-by-side scene preview + drop zone editor panel
+ * - Image thumbnails in correct answer selection
+ * - Color-coded drop zone indicators
+ * - Shared group badges on all group sections
+ * - Delete confirmation for objects and drop zones
+ * - Enlarged object image previews
+ * - Answer summary card
+ */
+function ListenAndDragObjectsIntoSceneCreatorContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, validationRef, externalErrors, groups, questionIndexInPart = 0, partId = '', }) {
+    console.log('[ListenAndDragObjectsIntoScene_Creator] RENDER', { initialData, questionIndexInPart, partId, groups });
+    // Get examId from global exam store for audio upload API
+    const examId = useExamQuestionStore((state) => state.examId);
+    // ============ SHARED GROUP DATA (via useSceneQuestionGroup hook) ============
+    const sceneGroupInitialData = {
+        backgroundImageUrl: initialData?.backgroundImageUrl || '',
+        objectNodes: initialData?.objectNodes || [],
+        dropZones: initialData?.dropZones || [],
+    };
+    const { isGrouped, currentGroupNumber, backgroundImageUrl, setBackgroundImageUrl, objectNodes, setObjectNodes, dropZones, setDropZones, } = useSceneQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: sceneGroupInitialData,
+    });
+    // ============ STATE ============
+    // Question-specific data
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
+    const [correctObjectId, setCorrectObjectId] = useState(initialData?.correctObjectId !== undefined && initialData?.correctObjectId !== null
+        ? String(initialData.correctObjectId)
+        : '');
+    const [correctDropZoneId, setCorrectDropZoneId] = useState(initialData?.correctDropZoneId !== undefined && initialData?.correctDropZoneId !== null
+        ? String(initialData.correctDropZoneId)
+        : '');
+    const [points, setPoints] = useState(initialData?.points);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isBackup, setIsBackup] = useState(initialData?.isBackup || false);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [backgroundPreviewUrl, setBackgroundPreviewUrl] = useState('');
+    const [audioPreviewUrl, setAudioPreviewUrl] = useState('');
+    const [activeDropZoneId, setActiveDropZoneId] = useState(null);
+    const [isGroupDataCollapsed, setIsGroupDataCollapsed] = useState(false);
+    // Use react-hook-form with Zod validation
+    const form = useReactHookForm({
+        defaultValues: {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            dropZones,
+            correctObjectId,
+            correctDropZoneId,
+            isBackup,
+        },
+        zodSchema: listenAndDragObjectsIntoSceneFormSchema,
+        mode: 'onBlur',
+    });
+    // Refs
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(true);
+    const onChangeRef = useRef(onChange);
+    const hasInitializedRef = useRef(false);
+    // Presigned URLs
+    const { previewUrl: presignedBgUrl } = usePresignedFileUrl(backgroundImageUrl);
+    const { previewUrl: presignedAudioUrl } = usePresignedFileUrl(audioUrl);
+    useEffect(() => {
+        if (presignedBgUrl)
+            setBackgroundPreviewUrl(presignedBgUrl);
+    }, [presignedBgUrl]);
+    useEffect(() => {
+        if (presignedAudioUrl)
+            setAudioPreviewUrl(presignedAudioUrl);
+    }, [presignedAudioUrl]);
+    // Update onChange ref
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return validateForm();
+                },
+                getFormData: () => ({
+                    audioUrl,
+                    backgroundImageUrl,
+                    objectNodes,
+                    dropZones,
+                    correctObjectId,
+                    correctDropZoneId,
+                    points,
+                    explanation,
+                    isBackup,
+                }),
+            };
+        }
+    }, [validationRef, audioUrl, backgroundImageUrl, objectNodes, dropZones, correctObjectId, correctDropZoneId, points, explanation, isBackup]);
+    // Sync question-specific state from initialData
+    useEffect(() => {
+        if (!initialData) {
+            if (!hasInitializedRef.current) {
+                hasInitializedRef.current = true;
+                isInitializingRef.current = false;
+            }
+            return;
+        }
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged && hasInitializedRef.current)
+            return;
+        previousInitialDataRef.current = initialData;
+        const newAudioUrl = initialData?.audioUrl || '';
+        const newCorrectObjectId = initialData?.correctObjectId !== undefined && initialData?.correctObjectId !== null ? String(initialData.correctObjectId) : '';
+        const newCorrectDropZoneId = initialData?.correctDropZoneId !== undefined && initialData?.correctDropZoneId !== null ? String(initialData.correctDropZoneId) : '';
+        const newPoints = initialData?.points || 1;
+        const newExplanation = initialData?.explanation || '';
+        const newIsBackup = initialData?.isBackup || false;
+        isInitializingRef.current = true;
+        hasInitializedRef.current = true;
+        setAudioUrl(newAudioUrl);
+        setCorrectObjectId(newCorrectObjectId);
+        setCorrectDropZoneId(newCorrectDropZoneId);
+        setPoints(newPoints);
+        setExplanation(newExplanation);
+        setIsBackup(newIsBackup);
+        setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 150);
+    }, [initialData]);
+    // Call onChange when form data changes
+    useEffect(() => {
+        if (isInitializingRef.current || !hasInitializedRef.current)
+            return;
+        const payload = {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            dropZones,
+            correctObjectId,
+            correctDropZoneId,
+            points,
+            explanation,
+            isBackup,
+            groups,
+            groupNumber: currentGroupNumber,
+        };
+        debouncedOnChange(payload);
+    }, [audioUrl, backgroundImageUrl, objectNodes, dropZones, correctObjectId, correctDropZoneId, points, explanation, isBackup, groups, currentGroupNumber, debouncedOnChange]);
+    // ============ VALIDATION ============
+    const validateForm = async () => {
+        form.setValue('audioUrl', audioUrl);
+        form.setValue('backgroundImageUrl', backgroundImageUrl);
+        form.setValue('objectNodes', objectNodes);
+        form.setValue('dropZones', dropZones);
+        form.setValue('correctObjectId', String(correctObjectId));
+        form.setValue('correctDropZoneId', String(correctDropZoneId));
+        form.setValue('isBackup', isBackup);
+        const isValid = await form.trigger();
+        return isValid;
+    };
+    // ============ OBJECT NODE HANDLERS ============
+    const addObjectNode = () => {
+        const newNode = {
+            id: generateObjectId(),
+            imageUrl: '',
+            label: '',
+        };
+        setObjectNodes([...objectNodes, newNode]);
+        form.clearErrors();
+    };
+    const updateObjectNode = (id, updates) => {
+        setObjectNodes(objectNodes.map((node) => (node.id === id ? { ...node, ...updates } : node)));
+        form.clearErrors();
+    };
+    const removeObjectNode = (id) => {
+        setObjectNodes(objectNodes.filter((node) => node.id !== id));
+        if (correctObjectId === id) {
+            setCorrectObjectId('');
+        }
+        form.clearErrors();
+    };
+    // ============ DROP ZONE HANDLERS ============
+    const addDropZone = () => {
+        const newZone = {
+            id: generateObjectId(),
+            label: '',
+            x: 20 + (dropZones.length * 20) % 60,
+            y: 30 + (dropZones.length * 15) % 40,
+            width: 12,
+            height: 12,
+        };
+        setDropZones([...dropZones, newZone]);
+        form.clearErrors();
+    };
+    const updateDropZone = (id, updates) => {
+        setDropZones(dropZones.map((zone) => (zone.id === id ? { ...zone, ...updates } : zone)));
+        form.clearErrors();
+    };
+    const removeDropZone = (id) => {
+        setDropZones(dropZones.filter((zone) => zone.id !== id));
+        if (correctDropZoneId === id) {
+            setCorrectDropZoneId('');
+        }
+        if (activeDropZoneId === id) {
+            setActiveDropZoneId(null);
+        }
+        form.clearErrors();
+    };
+    const handleZoneDrag = useCallback((id, x, y) => {
+        setDropZones((prev) => prev.map((zone) => (zone.id === id ? { ...zone, x, y } : zone)));
+    }, []);
+    const handleZoneResize = useCallback((id, width, height) => {
+        setDropZones((prev) => prev.map((zone) => (zone.id === id ? { ...zone, width, height } : zone)));
+    }, []);
+    // ============ DERIVED DATA ============
+    const selectedObject = objectNodes.find((n) => n.id === correctObjectId);
+    const selectedDropZone = dropZones.find((z) => z.id === correctDropZoneId);
+    const selectedDropZoneIndex = dropZones.findIndex((z) => z.id === correctDropZoneId);
+    // ============ RENDER ============
+    // Preview mode
+    if (isClientMode) {
+        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: "Nghe v\u00E0 k\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng (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 ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndDragObjectsIntoSceneClient, { questionData: {
+                        audioUrl: audioPreviewUrl || audioUrl,
+                        backgroundImageUrl: backgroundPreviewUrl || backgroundImageUrl,
+                        objectNodes,
+                        dropZones,
+                    }, isReviewMode: true, userAnswer: correctObjectId && correctDropZoneId ? { objectId: correctObjectId, dropZoneId: correctDropZoneId } : undefined, correctAnswer: correctObjectId && correctDropZoneId ? { objectId: correctObjectId, dropZoneId: correctDropZoneId } : undefined, explanation: explanation })] }));
+    }
+    // Creator mode
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "rose", steps: [
+                    { text: 'Upload hình nền (Scene) chung cho nhóm câu hỏi' },
+                    { text: 'Thêm các đối tượng kéo-thả (draggable objects) với hình ảnh và tên' },
+                    { text: 'Thiết lập vùng thả (drop zones) trên hình nền — vị trí mà học sinh cần kéo đối tượng vào' },
+                    { text: 'Upload audio hướng dẫn cho từng câu' },
+                    { text: 'Ghép đúng đối tượng với vùng thả tương ứng', highlight: true },
+                ], tips: ['Vùng thả nên đủ lớn và rõ ràng, tránh chồng chéo'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-rose-500 via-pink-500 to-fuchsia-500" }), _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 bg-gradient-to-br from-rose-500 to-pink-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-rose-100 px-3 py-1 text-sm font-medium text-rose-700", children: [_jsx("span", { children: "\uD83D\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] }), _jsx("span", { className: "text-xs font-normal opacity-75 ml-1", children: "(D\u00F9ng chung)" })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !backgroundImageUrl || objectNodes.length < 2 || dropZones.length < 1, className: "gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-rose-400 to-pink-400" }), _jsx(CardHeader, { className: "pb-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-rose-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-rose-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng k\u00E9o th\u1EA3" })] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setIsGroupDataCollapsed(!isGroupDataCollapsed), className: "gap-1 text-gray-500 hover:text-gray-700", children: [isGroupDataCollapsed ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronUp, { className: "h-4 w-4" }), isGroupDataCollapsed ? 'Mở rộng' : 'Thu gọn'] })] }) }), !isGroupDataCollapsed && (_jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border-2 p-5 bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200", children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-orange-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-orange-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
+                                                setBackgroundImageUrl(url);
+                                                form.clearErrors();
+                                            }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n h\u00ECnh \u1EA3nh n\u1EC1n", autoUpload: true, prefix: "questions/scenes" }), form.formState.errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.backgroundImageUrl.message }))] }) }), backgroundPreviewUrl && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden isolate", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2.5 bg-white", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: "H\u00ECnh \u1EA3nh n\u1EC1n" }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsx("div", { className: "text-xs text-gray-500 font-medium", children: "K\u00E9o th\u1EA3 v\u1ECB tr\u00ED \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB tr\u00EAn \u1EA3nh n\u1EC1n" })] }), _jsx("div", { className: "p-3 w-full", children: _jsx(DropZonePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, dropZones: dropZones, onZoneDrag: handleZoneDrag, onZoneResize: handleZoneResize, activeZoneId: activeDropZoneId, onSelectZone: setActiveDropZoneId }) })] })), !backgroundPreviewUrl && (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50/50 p-6", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-5 w-5 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Upload \u1EA3nh n\u1EC1n tr\u01B0\u1EDBc \u0111\u1EC3 thi\u1EBFt l\u1EADp v\u1ECB tr\u00ED tr\u00EAn h\u00ECnh \u1EA3nh n\u1EC1n." })] }) })), backgroundPreviewUrl && (_jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-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-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED (", dropZones.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addDropZone, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm v\u1ECB tr\u00ED"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: dropZones.length === 0 ? (_jsxs("div", { className: "col-span-full flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 v\u1ECB tr\u00ED n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm v\u1ECB tr\u00ED\u201D \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] })) : (dropZones.map((zone, index) => (_jsx(DropZoneEditor, { zone: zone, index: index, onUpdate: updateDropZone, onRemove: removeDropZone, isActive: activeDropZoneId === zone.id, onSelect: setActiveDropZoneId }, zone.id)))) }), form.formState.errors.dropZones && (_jsx("div", { className: "col-span-full mt-2 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.dropZones.message || "Vui lòng nhập đầy đủ thông tin cho các vị trí." }) }))] })), _jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-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-amber-100", children: _jsx(Move, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addObjectNode, 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\u1ED1i t\u01B0\u1EE3ng"] })] }), _jsxs("div", { className: "space-y-3", children: [objectNodes.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u1ED1i t\u01B0\u1EE3ng n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\u201D \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF sidebar." })] })) : (objectNodes.map((node, index) => (_jsx(DragObjectEditor, { node: node, index: index, onUpdate: updateObjectNode, onRemove: removeObjectNode }, node.id)))), form.formState.errors.objectNodes && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: form.formState.errors.objectNodes.message || "Vui lòng nhập đầy đủ thông tin cho các đối tượng." }))] })] })] }))] }), _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-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-green-100", children: _jsx(Volume2, { className: "h-4 w-4 text-green-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Th\u00F4ng tin c\u00E2u h\u1ECFi" })] }) }), _jsxs(CardContent, { className: "space-y-6 pt-2", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-audio", label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                            setAudioUrl(url);
+                                            form.clearErrors();
+                                        }, onPresignedUrlChange: setAudioPreviewUrl, maxSize: 10, placeholder: "Upload file audio c\u00E2u h\u1ECFi", autoUpload: true, prefix: "questions/audio", examId: examId || undefined, partId: partId || undefined }), form.formState.errors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.audioUrl.message })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-green-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), objectNodes.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
+                                            setCorrectObjectId(val);
+                                            form.clearErrors();
+                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
+                                                ? 'border-green-500 bg-green-50 ring-1 ring-green-500 shadow-sm'
+                                                : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-obj-${node.id}`, className: "flex-shrink-0" }), _jsx("div", { className: "h-12 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white", children: node.imageUrl ? (_jsx(PresignedImage, { url: node.imageUrl, alt: node.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-4 w-4 text-gray-300" }) })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-2 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }) })] }, node.id))) })), form.formState.errors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctObjectId.message] }) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), dropZones.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm v\u1ECB tr\u00ED \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctDropZoneId, onValueChange: (val) => {
+                                            setCorrectDropZoneId(val);
+                                            form.clearErrors();
+                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: dropZones.map((zone, index) => {
+                                            const color = getZoneColor(index);
+                                            return (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctDropZoneId === zone.id
+                                                    ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500 shadow-sm'
+                                                    : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50/50'}`, children: [_jsx(RadioGroupItem, { value: zone.id, id: `correct-dz-${zone.id}`, className: "flex-shrink-0" }), _jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md ${color.dot} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-1 break-all", children: [index + 1, ". ", zone.label || '(Chưa đặt nhãn)'] }), _jsxs("p", { className: "text-[11px] text-gray-400 mt-0.5", children: ["V\u1ECB tr\u00ED: (", zone.x, "%, ", zone.y, "%) \u2014 ", zone.width, "\u00D7", zone.height, "%"] })] })] }, zone.id));
+                                        }) })), form.formState.errors.correctDropZoneId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctDropZoneId.message] }) }))] }), selectedObject && selectedDropZone && (_jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Lightbulb, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-white/80 p-3 border border-green-100", children: [_jsx("div", { className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 border-green-300 bg-white", children: selectedObject.imageUrl ? (_jsx(PresignedImage, { url: selectedObject.imageUrl, alt: selectedObject.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-5 w-5 text-gray-300" }) })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedObject.label || '(Chưa đặt tên)' }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110\u1ED1i t\u01B0\u1EE3ng" })] }), _jsx(ArrowRight, { className: "h-5 w-5 text-green-500 flex-shrink-0 mx-1" }), _jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${selectedDropZoneIndex >= 0 ? getZoneColor(selectedDropZoneIndex).dot : 'bg-blue-500'} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedDropZone.label || '(Chưa đặt nhãn)' }), _jsxs("p", { className: "text-xs text-gray-500", children: ["V\u1ECB tr\u00ED (", selectedDropZone.x, "%, ", selectedDropZone.y, "%)"] })] })] })] })), (!correctObjectId || !correctDropZoneId) && objectNodes.length > 0 && dropZones.length > 0 && (_jsxs("div", { className: "flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5" }), _jsx("p", { className: "text-sm text-amber-700", children: "Vui l\u00F2ng ch\u1ECDn c\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng v\u00E0 v\u1ECB tr\u00ED \u0111\u00FAng cho c\u00E2u h\u1ECFi n\u00E0y" })] }))] })] }), _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, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function ListenAndDragObjectsIntoSceneCreator(props) {
+    return _jsx(ListenAndDragObjectsIntoSceneCreatorContent, { ...props });
+}

package/dist/components/questions/types/listen-and-drag-objects-into-scene/index.js

@@ -1 +1,2 @@
-export*from"./ListenAndDragObjectsIntoSceneCreator";export*from"./ListenAndDragObjectsIntoSceneClient";
+export * from './ListenAndDragObjectsIntoSceneCreator';
+export * from './ListenAndDragObjectsIntoSceneClient';