@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneClient.js

@@ -1 +1,70 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as d}from"react";import{Check as l,X as s,CircleHelp as n,Volume2 as i}from"lucide-react";import{usePresignedFileUrl as a}from"../../../../shared/lib/hooks";import{cn as o}from"../../../../shared/lib/utils";function c({node:t,isSelected:d,isCorrect:n,isWrong:i,isReviewMode:c,onClick:b}){const{previewUrl:m}=a(t.imageUrl||"");return r("button",{type:"button",onClick:b,disabled:c,className:o("absolute cursor-pointer rounded-lg transition-all duration-200 overflow-hidden","hover:scale-105","focus:outline-none focus:ring-2 focus:ring-offset-1",!d&&!n&&!i&&"border-2 border-transparent hover:border-blue-300 focus:ring-blue-400",d&&!c&&"border-3 border-blue-500 ring-2 ring-blue-200 shadow-lg shadow-blue-200/50 scale-105",n&&"border-3 border-green-500 ring-2 ring-green-200 shadow-lg shadow-green-200/50 scale-105",i&&"border-3 border-red-500 ring-2 ring-red-200 shadow-lg shadow-red-200/50 scale-105",c&&"cursor-default hover:scale-100"),style:{left:`${t.x}%`,top:`${t.y}%`,width:`${t.width}%`,height:`${t.height}%`},title:c?t.label:`Chọn ${t.label}`,children:[m?e("img",{src:m,alt:t.label,className:"h-full w-full object-fill pointer-events-none",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center bg-gray-100/80 text-xs text-gray-500",children:t.label}),c&&(n||i)&&e("div",{className:o("absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md",n?"bg-green-500":"bg-red-500"),style:{zIndex:1},children:e(n?l:s,{className:"h-3 w-3 text-white"})})]})}export function ListenAndChooseObjectsInSceneClient({questionData:b,onSubmit:m,isReviewMode:h=!1,userAnswer:g,correctAnswer:u,explanation:f}){const[x,p]=t(g?.objectId||""),{previewUrl:w,isLoading:v}=a(b.backgroundImageUrl||""),{previewUrl:N}=a(b.audioUrl||"");d(()=>{g?.objectId&&p(g.objectId)},[g]);const y=""!==x,j=b.objectNodes.find(e=>e.id===x),C=h&&u&&x===u.objectId;return r("div",{className:"space-y-4",children:[b.isBackup&&r("div",{className:"inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm",children:e(n,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và chọn đối tượng trong cảnh"})]}),h&&y&&r("div",{className:o("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",C?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(C?l:s,{className:"h-3.5 w-3.5"}),C?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[N&&r("div",{className:"flex items-center gap-3 rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(i,{className:"h-4 w-4"})}),e("audio",{controls:!0,className:"h-8 w-full",src:N,children:"Trình duyệt không hỗ trợ audio."})]}),r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Scene"})]})}),e("div",{className:"relative p-2",children:v?e("div",{className:"flex h-64 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"})}):w?r("div",{className:"relative w-full",children:[e("img",{src:w,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),b.objectNodes.map(r=>{const t=x===r.id,d=h&&u?.objectId===r.id,l=h&&t&&u?.objectId!==r.id;return e(c,{node:r,isSelected:t,isCorrect:d,isWrong:l,isReviewMode:h,onClick:()=>{return e=r.id,void(h||(p(e),m?.({objectId:e})));var e}},r.id)})]}):e("div",{className:"flex h-64 items-center justify-center text-sm text-gray-400",children:"Chưa có ảnh nền"})})]}),y&&j&&r("div",{className:o("flex items-center gap-2 rounded-lg border p-3",h?C?"border-green-200 bg-green-50":"border-red-200 bg-red-50":"border-blue-200 bg-blue-50"),children:[r("span",{className:"text-sm font-medium text-gray-700",children:["Đã chọn: ",e("strong",{children:j.label})]}),h&&e("span",{className:o("text-xs font-semibold",C?"text-green-600":"text-red-600"),children:C?"✓ Chính xác":"✗ Không chính xác"})]}),!h&&!y&&r("div",{className:"flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Nghe audio và nhấp vào đối tượng đúng trong hình"})]}),h&&f&&r("div",{className:"rounded-lg border border-indigo-200 bg-indigo-50 p-4",children:[e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích:"}),e("p",{className:"mt-1 text-sm text-indigo-700",children:f})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, CircleHelp, Volume2 } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+/**
+ * Scene Object Button - A clickable image button overlaid on the background scene
+ */
+function SceneObjectButton({ node, isSelected, isCorrect, isWrong, isReviewMode, onClick, }) {
+    const { previewUrl: objectImageUrl } = usePresignedFileUrl(node.imageUrl || '');
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: isReviewMode, className: cn('absolute cursor-pointer rounded-lg transition-all duration-200 overflow-hidden', 'hover:scale-105', 'focus:outline-none focus:ring-2 focus:ring-offset-1', 
+        // Default state
+        !isSelected && !isCorrect && !isWrong && 'border-2 border-transparent hover:border-blue-300 focus:ring-blue-400', 
+        // Selected (not review mode)
+        isSelected && !isReviewMode && 'border-3 border-blue-500 ring-2 ring-blue-200 shadow-lg shadow-blue-200/50 scale-105', 
+        // Review mode - correct
+        isCorrect && 'border-3 border-green-500 ring-2 ring-green-200 shadow-lg shadow-green-200/50 scale-105', 
+        // Review mode - wrong (selected but not correct)
+        isWrong && 'border-3 border-red-500 ring-2 ring-red-200 shadow-lg shadow-red-200/50 scale-105', 
+        // Disabled in review
+        isReviewMode && 'cursor-default hover:scale-100'), style: {
+            left: `${node.x}%`,
+            top: `${node.y}%`,
+            width: `${node.width}%`,
+            height: `${node.height}%`,
+        }, title: isReviewMode ? node.label : `Chọn ${node.label}`, children: [objectImageUrl ? (_jsx("img", { src: objectImageUrl, alt: node.label, className: "h-full w-full object-fill pointer-events-none", draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gray-100/80 text-xs text-gray-500", children: node.label })), isReviewMode && (isCorrect || isWrong) && (_jsx("div", { className: cn('absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md', isCorrect ? 'bg-green-500' : 'bg-red-500'), style: { zIndex: 1 }, children: isCorrect ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] }));
+}
+/**
+ * ListenAndChooseObjectsInSceneClient
+ *
+ * Student/preview view for the "Listen and Choose Objects in Scene" question type.
+ * Displays a background scene image with clickable object images overlaid.
+ * Student listens to audio and clicks the correct object.
+ */
+export function ListenAndChooseObjectsInSceneClient({ questionData, onSubmit, isReviewMode = false, userAnswer, correctAnswer, explanation, }) {
+    // State
+    const [selectedObjectId, setSelectedObjectId] = useState(userAnswer?.objectId || '');
+    // Presigned URLs
+    const { previewUrl: backgroundUrl, isLoading: bgLoading } = usePresignedFileUrl(questionData.backgroundImageUrl || '');
+    const { previewUrl: audioUrl } = usePresignedFileUrl(questionData.audioUrl || '');
+    // Sync userAnswer
+    useEffect(() => {
+        if (userAnswer?.objectId) {
+            setSelectedObjectId(userAnswer.objectId);
+        }
+    }, [userAnswer]);
+    // Handle object click
+    const handleObjectClick = (objectId) => {
+        if (isReviewMode)
+            return;
+        setSelectedObjectId(objectId);
+        onSubmit?.({ objectId });
+    };
+    const hasAnswered = selectedObjectId !== '';
+    const selectedNode = questionData.objectNodes.find((n) => n.id === selectedObjectId);
+    const isAnswerCorrect = isReviewMode && correctAnswer && selectedObjectId === correctAnswer.objectId;
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng trong c\u1EA3nh" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
+                                    ? 'bg-green-100 text-green-700'
+                                    : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [audioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("audio", { controls: true, className: "h-8 w-full", src: audioUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "Scene" })] }) }), _jsx("div", { className: "relative p-2", children: bgLoading ? (_jsx("div", { className: "flex h-64 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : backgroundUrl ? (_jsxs("div", { className: "relative w-full", children: [_jsx("img", { src: backgroundUrl, alt: "Scene background", className: "w-full rounded-md object-contain", draggable: false }), questionData.objectNodes.map((node) => {
+                                                    const isSelected = selectedObjectId === node.id;
+                                                    const isCorrectNode = isReviewMode && correctAnswer?.objectId === node.id;
+                                                    const isWrongNode = isReviewMode && isSelected && correctAnswer?.objectId !== node.id;
+                                                    return (_jsx(SceneObjectButton, { node: node, isSelected: isSelected, isCorrect: isCorrectNode, isWrong: isWrongNode, isReviewMode: isReviewMode, onClick: () => handleObjectClick(node.id) }, node.id));
+                                                })] })) : (_jsx("div", { className: "flex h-64 items-center justify-center text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n" })) })] }), hasAnswered && selectedNode && (_jsxs("div", { className: cn('flex items-center gap-2 rounded-lg border p-3', isReviewMode
+                                    ? isAnswerCorrect
+                                        ? 'border-green-200 bg-green-50'
+                                        : 'border-red-200 bg-red-50'
+                                    : 'border-blue-200 bg-blue-50'), children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["\u0110\u00E3 ch\u1ECDn: ", _jsx("strong", { children: selectedNode.label })] }), isReviewMode && (_jsx("span", { className: cn('text-xs font-semibold', isAnswerCorrect ? 'text-green-600' : 'text-red-600'), children: isAnswerCorrect ? '✓ Chính xác' : '✗ Không chính xác' }))] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Nghe audio v\u00E0 nh\u1EA5p v\u00E0o \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng trong h\u00ECnh" })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-lg border border-indigo-200 bg-indigo-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-indigo-700", children: explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneCreator.js

@@ -1 +1,386 @@
-"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 i}from"react";import{Button as l}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 h,CardHeader as m,CardTitle as g}from"../../../../components/ui/card";import{PointsInput as u}from"../../../../components/ui/points-input";import{RadioGroup as p,RadioGroupItem as b}from"../../../../components/ui/radio-group";import{Pencil as x,Eye as f,Plus as v,Trash2 as N,Image as w,Volume2 as y,Lightbulb as j,MousePointerClick as U,GripVertical as C,ListChecks as k,BookOpen as I}from"lucide-react";import{FileUpload as S}from"../../../../components/ui/file-upload";import{usePresignedFileUrl as z,useDebouncedCallback as O}from"../../../../shared/lib/hooks";import{useReactHookForm as D}from"../../../../shared/lib/hooks/useReactHookForm";import{listenAndChooseObjectsInSceneFormSchema as M}from"../../../../shared/lib/validation/listen-and-choose-objects-in-scene.validation";import{ListenAndChooseObjectsInSceneClient as E}from"./ListenAndChooseObjectsInSceneClient";import{useSceneQuestionGroup as B}from"../../_shared/hooks/useSceneQuestionGroup";import{generateObjectId as R}from"../../_shared/utils/id-generator";import{useExamQuestionStore as V}from"../../../../shared/lib/stores/examQuestionStore";import{CreatorGuide as P}from"../../components/CreatorGuide";function T({node:a,index:i,isCorrect:d,onUpdate:c,onRemove:h,onSelectCorrect:m,errors:g}){const[u,p]=t(""),{previewUrl:b}=z(a.imageUrl||"");return n(()=>{b&&p(b)},[b]),e("div",{className:"rounded-lg border-2 p-4 transition-all "+(d?"border-green-300 bg-green-50/50":"border-gray-200 bg-white hover:border-gray-300"),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-blue-500 to-indigo-600 text-sm font-bold text-white shadow-sm",children:i+1}),e(C,{className:"h-4 w-4 text-gray-400"})]}),r("div",{className:"flex-1 space-y-3",children:[r("div",{className:"flex items-center gap-3",children:[r("div",{className:"flex-1",children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Tên đối tượng"}),e(o,{value:a.label,onChange:e=>c(a.id,{label:e.target.value}),placeholder:"Ví dụ: cow, frog, horse...",className:"mt-1 "+(g?.label?"border-red-500":"border-gray-200")}),g?.label&&e("p",{className:"mt-1 text-xs text-red-500",children:g.label})]}),e("div",{className:"flex items-center gap-2 pt-5"})]}),r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Hình ảnh đối tượng"}),r("div",{className:"mt-1 flex items-center gap-3",children:[r("div",{className:"flex-1",children:[e(S,{id:`object-image-${a.id}`,label:"",accept:"image/*",value:a.imageUrl||"",onChange:e=>c(a.id,{imageUrl:e}),onPresignedUrlChange:p,maxSize:5,placeholder:"Upload hình ảnh đối tượng",autoUpload:!0,prefix:"questions/objects"}),g?.imageUrl&&e("p",{className:"mt-1 text-xs text-red-500",children:g.imageUrl})]}),u&&e("div",{className:"h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:e("img",{src:u,alt:a.label||"Object",className:"h-full w-full object-contain"})})]})]}),r("div",{className:"grid grid-cols-4 gap-2",children:[r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"X (%)"}),e(o,{type:"number",min:0,max:100,value:a.x,onChange:e=>c(a.id,{x:parseFloat(e.target.value)||0}),className:"mt-1 border-gray-200"})]}),r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Y (%)"}),e(o,{type:"number",min:0,max:100,value:a.y,onChange:e=>c(a.id,{y:parseFloat(e.target.value)||0}),className:"mt-1 border-gray-200"})]}),r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Width (%)"}),e(o,{type:"number",min:1,max:100,value:a.width,onChange:e=>c(a.id,{width:parseFloat(e.target.value)||10}),className:"mt-1 border-gray-200"})]}),r("div",{children:[e(s,{className:"text-xs font-medium text-gray-500",children:"Height (%)"}),e(o,{type:"number",min:1,max:100,value:a.height,onChange:e=>c(a.id,{height:parseFloat(e.target.value)||10}),className:"mt-1 border-gray-200"})]})]})]}),e(l,{variant:"ghost",size:"sm",onClick:()=>h(a.id),className:"mt-1 text-red-400 hover:bg-red-50 hover:text-red-600",children:e(N,{className:"h-4 w-4"})})]})})}function q({backgroundUrl:l,objectNodes:s,correctObjectId:o,onNodeDrag:d,onNodeResize:c}){const h=a(null),[m,g]=t(null),[u,p]=t({x:0,y:0}),[b,x]=t(null),[f,v]=t(null),[N,y]=t({x:0,y:0}),[j,U]=t({width:0,height:0}),C=(e,r,t,a,n)=>{n.preventDefault(),n.stopPropagation(),x(e),v(r),y({x:n.clientX,y:n.clientY}),U({width:t,height:a})},k=i(e=>{if(h.current)if(m){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-u.x)),i=Math.max(0,Math.min(100,a-u.y));d(m,Math.round(10*n)/10,Math.round(10*i)/10)}else if(b&&f){const r=h.current.getBoundingClientRect(),t=(e.clientX-N.x)/r.width*100,a=(e.clientY-N.y)/r.height*100;let n=j.width,i=j.height;"e"!==f&&"se"!==f||(n=Math.max(1,j.width+t)),"s"!==f&&"se"!==f||(i=Math.max(1,j.height+a)),c(b,Math.round(10*n)/10,Math.round(10*i)/10)}},[m,b,f,N,j,u,d,c]),I=i(()=>{g(null),x(null),v(null)},[]);return n(()=>{if(m||b)return window.addEventListener("mousemove",k),window.addEventListener("mouseup",I),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",I)}},[m,b,k,I]),r("div",{ref:h,className:"relative w-full select-none",children:[e("img",{src:l,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),s.map(t=>{const a=t.id===o,n=m===t.id||b===t.id;return r("div",{className:"absolute cursor-move rounded-md border-2 transition-colors group "+(n?"border-blue-500 shadow-lg":a?"border-green-400 shadow-md":"border-gray-300 hover:border-blue-400"),style:{left:`${t.x}%`,top:`${t.y}%`,width:`${t.width}%`,height:`${t.height}%`,zIndex:n?2:1},onMouseDown:e=>((e,r,t,a)=>{if(a.preventDefault(),!a.target.dataset.resizeHandle&&(g(e),h.current)){const e=h.current.getBoundingClientRect(),n=(a.clientX-e.left)/e.width*100,i=(a.clientY-e.top)/e.height*100;p({x:n-r,y:i-t})}})(t.id,t.x,t.y,e),children:[r("div",{className:"absolute -top-5 left-0 rounded bg-black/70 px-1.5 py-0.5 text-[10px] font-medium text-white whitespace-nowrap",children:[t.label||`Obj ${s.indexOf(t)+1}`,a&&" ✓"]}),e("div",{className:"flex h-full w-full items-center justify-center overflow-hidden rounded bg-transparent",children:t.imageUrl?e(F,{url:t.imageUrl,alt:t.label}):e("div",{className:"flex bg-white/30 p-2 rounded items-center justify-center",children:e(w,{className:"h-4 w-4 text-gray-400"})})}),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=>C(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=>C(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=>C(t.id,"se",t.width,t.height,e)})]},t.id)})]})}function F({url:r,alt:t}){const{previewUrl:a}=z(r);return a?e("img",{src:a,alt:t,className:"h-full w-full object-fill pointer-events-none",draggable:!1}):e(w,{className:"h-4 w-4 text-gray-400"})}function L({initialData:o,onSave:N,onSaveToQuestionBank:C,onCancel:L,onChange:$,onUnsavedChangesChange:A,validationRef:G,externalErrors:H,groups:X,questionIndexInPart:Y=0,partId:K=""}){console.log("[ListenAndChooseObjects_Creator] RENDER",{initialData:o,questionIndexInPart:Y,partId:K,groups:X});const Q=V(e=>e.examId),_={backgroundImageUrl:o?.backgroundImageUrl||"",objectNodes:o?.objectNodes||[]},{isGrouped:J,currentGroupNumber:W,backgroundImageUrl:Z,objectNodes:ee,setBackgroundImageUrl:re,setObjectNodes:te}=B({partId:K,groups:X,questionIndexInPart:Y,initialData:_}),[ae,ne]=t(o?.audioUrl||""),[ie,le]=t(o?.correctObjectId||""),[se,oe]=t(o?.points||1),[de,ce]=t(o?.explanation||""),[he,me]=t(o?.isBackup||!1),[ge,ue]=t(!1),[pe,be]=t(""),[xe,fe]=t(""),ve=D({defaultValues:{audioUrl:ae,backgroundImageUrl:Z,objectNodes:ee,correctObjectId:ie,isBackup:he},zodSchema:M,mode:"onBlur"}),Ne=a(o),we=a(!0),ye=a($),je=a(!1),{previewUrl:Ue}=z(Z),{previewUrl:Ce}=z(ae);n(()=>{Ue&&be(Ue)},[Ue]),n(()=>{Ce&&fe(Ce)},[Ce]),n(()=>{ye.current=$},[$]);const ke=O(e=>{ye.current?.(e)},300);n(()=>{G&&(G.current={triggerValidation:async()=>Ie(),getFormData:()=>({audioUrl:ae,backgroundImageUrl:Z,objectNodes:ee,correctObjectId:ie,points:se,explanation:de,isBackup:he})})},[G,ae,Z,ee,ie,se,de,he]),n(()=>{if(!o)return void(je.current||(je.current=!0,we.current=!1));if(!(JSON.stringify(Ne.current)!==JSON.stringify(o))&&je.current)return;Ne.current=o;const e=o?.audioUrl||"",r=o?.correctObjectId||"",t=o?.points||1,a=o?.explanation||"",n=o?.isBackup||!1;we.current=!0,je.current=!0,ne(e),le(r),oe(t),ce(a),me(n),setTimeout(()=>{we.current=!1},150)},[o]),n(()=>{if(we.current||!je.current)return;ke({audioUrl:ae,backgroundImageUrl:Z,objectNodes:ee,correctObjectId:ie,points:se,explanation:de,isBackup:he,groups:X,groupNumber:W})},[ae,Z,ee,ie,se,de,he,X,W,ke]);const Ie=async()=>{ve.setValue("audioUrl",ae),ve.setValue("backgroundImageUrl",Z),ve.setValue("objectNodes",ee),ve.setValue("correctObjectId",ie),ve.setValue("isBackup",he);const e=await ve.trigger(),r=[];let t=!0;return ie&&!ee.find(e=>e.id===ie)&&(r.push("Đáp án đúng không tồn tại trong danh sách đối tượng!"),t=!1),e&&t?(ve.clearErrors("root"),!0):(r.length>0&&ve.setError("root",{message:r.join("\n")}),!1)},Se=(e,r)=>{te(ee.map(t=>t.id===e?{...t,...r}:t)),ve.clearErrors()},ze=e=>{te(ee.filter(r=>r.id!==e)),ie===e&&le(""),ve.clearErrors()},Oe=i((e,r,t)=>{te(a=>a.map(a=>a.id===e?{...a,x:r,y:t}:a))},[]),De=i((e,r,t)=>{te(a=>a.map(a=>a.id===e?{...a,width:r,height:t}:a))},[]);if(ge)return r("div",{className:"space-y-6",children:[e(c,{children:e(m,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(g,{children:"Nghe và chọn đố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(l,{variant:"outline",size:"sm",onClick:()=>ue(!1),children:[e(x,{className:"mr-2 h-4 w-4"}),"Quay lại chỉnh sửa"]})]})})}),e(E,{questionData:{audioUrl:xe||ae,backgroundImageUrl:pe||Z,objectNodes:ee},isReviewMode:!0,userAnswer:ie?{objectId:ie}:void 0,correctAnswer:ie?{objectId:ie}:void 0,explanation:de})]});const Me=ve.formState.errors;return r("div",{className:"space-y-6",children:[e(P,{colorScheme:"purple",steps:[{text:"Upload ảnh nền (Scene) — ảnh này dùng chung cho tất cả câu hỏi trong nhóm"},{text:'Nhấn "Thêm đối tượng" để tạo các object trên ảnh nền. Mỗi đối tượng cần có tên và hình ảnh riêng'},{text:"Kéo thả đối tượng trên ảnh nền để điều chỉnh vị trí, hoặc nhập tọa độ X, Y, Width, Height thủ công"},{text:"Upload audio câu hỏi — học sinh sẽ nghe audio rồi chọn đúng đối tượng trên ảnh"},{text:"Chọn đáp án đúng cho câu hỏi này từ danh sách đối tượng đã tạo",highlight:!0},{text:"Thêm giải thích (không bắt buộc) — sẽ hiển thị sau khi học sinh trả lời"}],tips:["Số đối tượng nên nhiều hơn số câu hỏi trong part để tạo lựa chọn nhiễu. Đặt tên rõ ràng và chọn hình ảnh dễ phân biệt giữa các đối tượng","Kéo thả trực tiếp trên ảnh nền sẽ nhanh hơn nhập tọa độ thủ công"]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-fuchsia-500"}),e(m,{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-purple-500 to-violet-600 shadow-md",children:e(k,{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-purple-100 px-3 py-1 text-sm font-medium text-purple-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",W]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(l,{variant:"outline",size:"sm",onClick:()=>ue(!0),disabled:!Z||ee.length<2,className:"gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700",children:[e(f,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-purple-400 to-violet-400"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-purple-100",children:e(w,{className:"h-3.5 w-3.5 text-purple-600"})}),e(g,{className:"text-lg font-semibold text-gray-800",children:"Ảnh nền & Đối tượng trong Scene"})]})}),r(h,{className:"space-y-6",children:[e("div",{className:"rounded-xl border-2 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200",children:r("div",{className:"space-y-2",children:[r(s,{className:"flex items-center gap-2 text-base font-semibold text-blue-800",children:[e(w,{className:"h-4 w-4 text-blue-600"}),"Ảnh nền (Scene) ",e("span",{className:"text-red-500",children:"*"})]}),e(S,{id:"scene-background",label:"",accept:"image/*",value:Z,onChange:e=>{re(e),ve.clearErrors()},onPresignedUrlChange:be,maxSize:10,placeholder:"Upload hình ảnh nền cảnh",autoUpload:!0,prefix:"questions/scenes"}),Me.backgroundImageUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:Me.backgroundImageUrl.message}),pe&&r("div",{className:"mt-2 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 isolate",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:e("span",{className:"text-xs font-medium text-gray-500",children:"Ảnh nền - Kéo thả đối tượng để định vị"})}),e("div",{className:"p-2",children:e(q,{backgroundUrl:pe,objectNodes:ee,correctObjectId:ie,onNodeDrag:Oe,onNodeResize:De})})]})]})}),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-indigo-100",children:e(U,{className:"h-3.5 w-3.5 text-indigo-600"})}),r("h3",{className:"text-lg font-semibold text-gray-800",children:["Đối tượng (",ee.length," items)"]})]}),r(l,{variant:"outline",size:"sm",onClick:()=>{const e={id:R(),imageUrl:"",label:"",x:20+15*ee.length%60,y:30+10*ee.length%40,width:12,height:15};te([...ee,e]),ve.clearErrors()},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(v,{className:"h-4 w-4"}),"Thêm đối tượng"]})]}),e("div",{className:"space-y-3",children:0===ee.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 chung cho nhóm.'})]}):ee.map((r,t)=>e(T,{node:r,index:t,isCorrect:!1,onUpdate:Se,onRemove:ze,onSelectCorrect:()=>{},errors:{label:Me.objectNodes?.[t]?.label?.message,imageUrl:Me.objectNodes?.[t]?.imageUrl?.message}},r.id))})]})]})]}),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(m,{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(h,{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:se,onChange:e=>oe(parseFloat(e.target.value)||1)})}),e("div",{className:"flex-1 flex flex-col justify-center"})]})}),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(S,{id:"scene-audio",label:"",accept:"audio/*",value:ae,onChange:e=>{ne(e),ve.clearErrors()},onPresignedUrlChange:fe,maxSize:10,placeholder:"Upload file audio câu hỏi",autoUpload:!0,prefix:"questions/audio",examId:Q||void 0,partId:K||void 0}),Me.audioUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:Me.audioUrl.message}),xe&&e("audio",{controls:!0,className:"mt-2 w-full",src:xe,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:["Đáp án đúng của câu hỏi này ",e("span",{className:"text-red-500",children:"*"})]})]}),0===ee.length?e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng thêm đối tượng ở bên trên trước khi chọn đáp án."}):e(p,{value:ie,onValueChange:e=>{le(e),ve.clearErrors()},className:"grid gap-3 sm:grid-cols-2 md:grid-cols-3",children:ee.map((t,a)=>r("label",{className:"flex cursor-pointer items-start gap-3 rounded-lg border-2 p-3 transition-all "+(ie===t.id?"border-green-500 bg-green-50 ring-1 ring-green-500":"border-gray-200 hover:border-green-300 hover:bg-green-50/50"),children:[e(b,{value:t.id,id:`correct-${t.id}`,className:"mt-1 flex-shrink-0"}),r("div",{className:"min-w-0 flex-1",children:[r("p",{className:"font-medium text-gray-900 line-clamp-1 break-all",children:[a+1,". ",t.label||"(Chưa đặt tên)"]}),t.imageUrl?e("div",{className:"mt-2 h-12 w-full max-w-16 rounded overflow-hidden bg-white border border-gray-200",children:e(F,{url:t.imageUrl,alt:t.label})}):e("div",{className:"mt-2 text-xs text-gray-400 italic",children:"Chưa có hình"})]})]},t.id))})]}),Me.correctObjectId&&e("div",{className:"rounded-lg border border-red-200 bg-red-50 p-3 mt-3",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",Me.correctObjectId.message]})})]})]}),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(m,{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(I,{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(h,{children:e(d,{value:de,onChange:e=>ce(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 ListenAndChooseObjectsInSceneCreator(r){return e(L,{...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, MousePointerClick, GripVertical, 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 { listenAndChooseObjectsInSceneFormSchema, } from '../../../../shared/lib/validation/listen-and-choose-objects-in-scene.validation';
+import { ListenAndChooseObjectsInSceneClient } from './ListenAndChooseObjectsInSceneClient';
+import { useSceneQuestionGroup } from '../../_shared/hooks/useSceneQuestionGroup';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+import { CreatorGuide } from '../../components/CreatorGuide';
+/**
+ * Scene Object Editor - An individual object node editor row
+ */
+function SceneObjectEditor({ node, index, isCorrect, onUpdate, onRemove, onSelectCorrect, errors, }) {
+    const [objectPreviewUrl, setObjectPreviewUrl] = useState('');
+    const { previewUrl: presignedObjectUrl } = usePresignedFileUrl(node.imageUrl || '');
+    useEffect(() => {
+        if (presignedObjectUrl) {
+            setObjectPreviewUrl(presignedObjectUrl);
+        }
+    }, [presignedObjectUrl]);
+    return (_jsx("div", { className: `rounded-lg border-2 p-4 transition-all ${isCorrect
+            ? 'border-green-300 bg-green-50/50'
+            : 'border-gray-200 bg-white hover:border-gray-300'}`, 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-blue-500 to-indigo-600 text-sm font-bold text-white shadow-sm", children: index + 1 }), _jsx(GripVertical, { className: "h-4 w-4 text-gray-400" })] }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex-1", 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: cow, frog, horse...", className: `mt-1 ${errors?.label ? 'border-red-500' : 'border-gray-200'}` }), errors?.label && _jsx("p", { className: "mt-1 text-xs text-red-500", children: errors.label })] }), _jsx("div", { className: "flex items-center gap-2 pt-5" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh \u0111\u1ED1i t\u01B0\u1EE3ng" }), _jsxs("div", { className: "mt-1 flex items-center gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx(FileUpload, { id: `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" }), errors?.imageUrl && _jsx("p", { className: "mt-1 text-xs text-red-500", children: errors.imageUrl })] }), objectPreviewUrl && (_jsx("div", { className: "h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: _jsx("img", { src: objectPreviewUrl, alt: node.label || 'Object', className: "h-full w-full object-contain" }) }))] })] }), _jsxs("div", { className: "grid grid-cols-4 gap-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "X (%)" }), _jsx(Input, { type: "number", min: 0, max: 100, value: node.x, onChange: (e) => onUpdate(node.id, { x: parseFloat(e.target.value) || 0 }), className: "mt-1 border-gray-200" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "Y (%)" }), _jsx(Input, { type: "number", min: 0, max: 100, value: node.y, onChange: (e) => onUpdate(node.id, { y: parseFloat(e.target.value) || 0 }), className: "mt-1 border-gray-200" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "Width (%)" }), _jsx(Input, { type: "number", min: 1, max: 100, value: node.width, onChange: (e) => onUpdate(node.id, { width: parseFloat(e.target.value) || 10 }), className: "mt-1 border-gray-200" })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs font-medium text-gray-500", children: "Height (%)" }), _jsx(Input, { type: "number", min: 1, max: 100, value: node.height, onChange: (e) => onUpdate(node.id, { height: parseFloat(e.target.value) || 10 }), className: "mt-1 border-gray-200" })] })] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemove(node.id), className: "mt-1 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) }));
+}
+/**
+ * Drag overlay for positioning objects on the background image
+ */
+function ScenePreviewWithDrag({ backgroundUrl, objectNodes, correctObjectId, onNodeDrag, onNodeResize, }) {
+    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 = (nodeId, nodeX, nodeY, e) => {
+        e.preventDefault();
+        if (e.target.dataset.resizeHandle)
+            return; // Ignore drag if clicking resize handle
+        setDraggingId(nodeId);
+        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 - nodeX,
+                y: mouseYPercent - nodeY,
+            });
+        }
+    };
+    const handleResizeMouseDown = (nodeId, type, nodeWidth, nodeHeight, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setResizingId(nodeId);
+        setResizeType(type);
+        setResizeStartPos({ x: e.clientX, y: e.clientY });
+        setResizeStartDim({ width: nodeWidth, height: nodeHeight });
+    };
+    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));
+            onNodeDrag(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);
+            }
+            onNodeResize(resizingId, Math.round(newWidth * 10) / 10, Math.round(newHeight * 10) / 10);
+        }
+    }, [draggingId, resizingId, resizeType, resizeStartPos, resizeStartDim, dragOffset, onNodeDrag, onNodeResize]);
+    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 }), objectNodes.map((node) => {
+                const isCorrect = node.id === correctObjectId;
+                const isActive = draggingId === node.id || resizingId === node.id;
+                return (_jsxs("div", { className: `absolute cursor-move rounded-md border-2 transition-colors group ${isActive
+                        ? 'border-blue-500 shadow-lg'
+                        : isCorrect
+                            ? 'border-green-400 shadow-md'
+                            : 'border-gray-300 hover:border-blue-400'}`, style: {
+                        left: `${node.x}%`,
+                        top: `${node.y}%`,
+                        width: `${node.width}%`,
+                        height: `${node.height}%`,
+                        zIndex: isActive ? 2 : 1,
+                    }, onMouseDown: (e) => handleMouseDown(node.id, node.x, node.y, e), children: [_jsxs("div", { className: "absolute -top-5 left-0 rounded bg-black/70 px-1.5 py-0.5 text-[10px] font-medium text-white whitespace-nowrap", children: [node.label || `Obj ${objectNodes.indexOf(node) + 1}`, isCorrect && ' ✓'] }), _jsx("div", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded bg-transparent", children: node.imageUrl ? (_jsx(PresignedImage, { url: node.imageUrl, alt: node.label })) : (_jsx("div", { className: "flex bg-white/30 p-2 rounded items-center justify-center", children: _jsx(ImageIcon, { className: "h-4 w-4 text-gray-400" }) })) }), _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(node.id, 'e', node.width, node.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(node.id, 's', node.width, node.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(node.id, 'se', node.width, node.height, e) })] }, node.id));
+            })] }));
+}
+/** 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-fill pointer-events-none", draggable: false }));
+}
+/**
+ * ListenAndChooseObjectsInSceneCreator
+ *
+ * Admin creator component for the "Listen and Choose Objects in Scene" question type.
+ * Allows uploading a background scene, adding object images with positions,
+ * and selecting the correct answer.
+ */
+function ListenAndChooseObjectsInSceneCreatorContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, validationRef, externalErrors, groups, questionIndexInPart = 0, partId = '', }) {
+    console.log('[ListenAndChooseObjects_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 || [],
+    };
+    const { isGrouped, currentGroupNumber, backgroundImageUrl, objectNodes, setBackgroundImageUrl, setObjectNodes, } = useSceneQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: sceneGroupInitialData,
+    });
+    // ============ STATE ============
+    // Audio, Points, CorrectObjectId, Explanation are SPECIFIC to the question
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
+    const [correctObjectId, setCorrectObjectId] = useState(initialData?.correctObjectId || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    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('');
+    // Use react-hook-form with Zod validation
+    const form = useReactHookForm({
+        defaultValues: {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            correctObjectId,
+            isBackup,
+        },
+        zodSchema: listenAndChooseObjectsInSceneFormSchema,
+        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,
+                    correctObjectId,
+                    points,
+                    explanation,
+                    isBackup,
+                }),
+            };
+        }
+    }, [validationRef, audioUrl, backgroundImageUrl, objectNodes, correctObjectId, 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);
+        // On first mount, even if initialData hasn't changed from the ref's initial value,
+        // we still need to initialize the flags so onChange can fire when user edits.
+        if (!initialDataChanged && hasInitializedRef.current)
+            return;
+        previousInitialDataRef.current = initialData;
+        const newAudioUrl = initialData?.audioUrl || '';
+        const newCorrect = initialData?.correctObjectId || '';
+        const newPoints = initialData?.points || 1;
+        const newExplanation = initialData?.explanation || '';
+        const newIsBackup = initialData?.isBackup || false;
+        // Always apply new data when initialData changes (e.g. navigation)
+        isInitializingRef.current = true;
+        hasInitializedRef.current = true;
+        setAudioUrl(newAudioUrl);
+        setCorrectObjectId(newCorrect);
+        setPoints(newPoints);
+        setExplanation(newExplanation);
+        setIsBackup(newIsBackup);
+        // Give React time to batch before allowing onChange
+        setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 150);
+    }, [initialData]);
+    // Call onChange when form data changes
+    useEffect(() => {
+        if (isInitializingRef.current || !hasInitializedRef.current)
+            return;
+        const payload = {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            correctObjectId,
+            points,
+            explanation,
+            isBackup,
+            groups,
+            groupNumber: currentGroupNumber,
+        };
+        debouncedOnChange(payload);
+    }, [audioUrl, backgroundImageUrl, objectNodes, correctObjectId, points, explanation, isBackup, groups, currentGroupNumber, debouncedOnChange]);
+    // ============ VALIDATION ============
+    const validateForm = async () => {
+        // Sync React state to react-hook-form before validation
+        form.setValue('audioUrl', audioUrl);
+        form.setValue('backgroundImageUrl', backgroundImageUrl);
+        form.setValue('objectNodes', objectNodes);
+        form.setValue('correctObjectId', correctObjectId);
+        form.setValue('isBackup', isBackup);
+        // Trigger Zod validation
+        const isValid = await form.trigger();
+        const formattedErrors = [];
+        // Check custom business logic
+        let isCustomValid = true;
+        if (correctObjectId && !objectNodes.find((n) => n.id === correctObjectId)) {
+            formattedErrors.push('Đáp án đúng không tồn tại trong danh sách đối tượng!');
+            isCustomValid = false;
+        }
+        if (!isValid || !isCustomValid) {
+            if (formattedErrors.length > 0) {
+                // Set errors on form as a single merged string so we can display it simply
+                form.setError('root', { message: formattedErrors.join('\n') });
+            }
+            return false;
+        }
+        form.clearErrors('root');
+        return true;
+    };
+    const internalHandleSave = (callback) => {
+        validateForm().then((isValid) => {
+            if (isValid) {
+                callback?.({
+                    audioUrl,
+                    backgroundImageUrl,
+                    objectNodes,
+                    correctObjectId,
+                    points,
+                    explanation,
+                    isBackup,
+                    groups,
+                    groupNumber: currentGroupNumber,
+                });
+            }
+        });
+    };
+    // ============ OBJECT NODE HANDLERS ============
+    const addObjectNode = () => {
+        const newNode = {
+            id: generateObjectId(),
+            imageUrl: '',
+            label: '',
+            x: 20 + (objectNodes.length * 15) % 60,
+            y: 30 + (objectNodes.length * 10) % 40,
+            width: 12,
+            height: 15,
+        };
+        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();
+    };
+    const handleNodeDrag = useCallback((id, x, y) => {
+        setObjectNodes((prev) => prev.map((node) => (node.id === id ? { ...node, x, y } : node)));
+    }, []);
+    const handleNodeResize = useCallback((id, width, height) => {
+        setObjectNodes((prev) => prev.map((node) => (node.id === id ? { ...node, width, height } : node)));
+    }, []);
+    // ============ 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 ch\u1ECDn \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(ListenAndChooseObjectsInSceneClient, { questionData: {
+                        audioUrl: audioPreviewUrl || audioUrl,
+                        backgroundImageUrl: backgroundPreviewUrl || backgroundImageUrl,
+                        objectNodes,
+                    }, isReviewMode: true, userAnswer: correctObjectId ? { objectId: correctObjectId } : undefined, correctAnswer: correctObjectId ? { objectId: correctObjectId } : undefined, explanation: explanation })] }));
+    }
+    const formErrors = form.formState.errors;
+    // Creator mode
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "purple", steps: [
+                    { text: 'Upload ảnh nền (Scene) — ảnh này dùng chung cho tất cả câu hỏi trong nhóm' },
+                    { text: 'Nhấn "Thêm đối tượng" để tạo các object trên ảnh nền. Mỗi đối tượng cần có tên và hình ảnh riêng' },
+                    { text: 'Kéo thả đối tượng trên ảnh nền để điều chỉnh vị trí, hoặc nhập tọa độ X, Y, Width, Height thủ công' },
+                    { text: 'Upload audio câu hỏi — học sinh sẽ nghe audio rồi chọn đúng đối tượng trên ảnh' },
+                    { text: 'Chọn đáp án đúng cho câu hỏi này từ danh sách đối tượng đã tạo', highlight: true },
+                    { text: 'Thêm giải thích (không bắt buộc) — sẽ hiển thị sau khi học sinh trả lời' },
+                ], tips: [
+                    'Số đối tượng nên nhiều hơn số câu hỏi trong part để tạo lựa chọn nhiễu. Đặt tên rõ ràng và chọn hình ảnh dễ phân biệt giữa các đối tượng',
+                    'Kéo thả trực tiếp trên ảnh nền sẽ nhanh hơn nhập tọa độ thủ công',
+                ] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-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-purple-500 to-violet-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-purple-100 px-3 py-1 text-sm font-medium text-purple-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, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-violet-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng trong Scene" })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: `rounded-xl border-2 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200`, children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-blue-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
+                                                setBackgroundImageUrl(url);
+                                                form.clearErrors();
+                                            }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n c\u1EA3nh", autoUpload: true, prefix: "questions/scenes" }), formErrors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.backgroundImageUrl.message })), backgroundPreviewUrl && (_jsxs("div", { className: "mt-2 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 isolate", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsx("span", { className: "text-xs font-medium text-gray-500", children: "\u1EA2nh n\u1EC1n - K\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" }) }), _jsx("div", { className: "p-2", children: _jsx(ScenePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, objectNodes: objectNodes, correctObjectId: correctObjectId, onNodeDrag: handleNodeDrag, onNodeResize: handleNodeResize }) })] }))] }) }), _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-indigo-100", children: _jsx(MousePointerClick, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs("h3", { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] })] }), _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"] })] }), _jsx("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 \"Th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\" \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng chung cho nh\u00F3m." })] })) : (objectNodes.map((node, index) => (_jsx(SceneObjectEditor, { node: node, index: index, isCorrect: false, onUpdate: updateObjectNode, onRemove: removeObjectNode, onSelectCorrect: () => { }, errors: {
+                                                label: formErrors.objectNodes?.[index]?.label?.message,
+                                                imageUrl: formErrors.objectNodes?.[index]?.imageUrl?.message,
+                                            } }, node.id)))) })] })] })] }), _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" })] }) }), _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: "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 }), formErrors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.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\u00E1p \u00E1n \u0111\u00FAng c\u1EE7a c\u00E2u h\u1ECFi n\u00E0y ", _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 b\u00EAn tr\u00EAn tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
+                                            setCorrectObjectId(val);
+                                            form.clearErrors(); // Xóa lỗi validation khi người dùng đã chọn đáp án
+                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-start gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
+                                                ? 'border-green-500 bg-green-50 ring-1 ring-green-500'
+                                                : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-${node.id}`, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 line-clamp-1 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }), node.imageUrl ? (_jsx("div", { className: "mt-2 h-12 w-full max-w-16 rounded overflow-hidden bg-white border border-gray-200", children: _jsx(PresignedImage, { url: node.imageUrl, alt: node.label }) })) : (_jsx("div", { className: "mt-2 text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 h\u00ECnh" }))] })] }, node.id))) }))] }), formErrors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", formErrors.correctObjectId.message] }) }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { 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 ListenAndChooseObjectsInSceneCreator(props) {
+    return _jsx(ListenAndChooseObjectsInSceneCreatorContent, { ...props });
+}

package/dist/components/questions/types/listen-and-choose-objects-in-scene/index.js

@@ -1 +1,2 @@
-export*from"./ListenAndChooseObjectsInSceneCreator";export*from"./ListenAndChooseObjectsInSceneClient";
+export * from './ListenAndChooseObjectsInSceneCreator';
+export * from './ListenAndChooseObjectsInSceneClient';