@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/label-the-picture/transform.js

@@ -1 +1,28 @@
-export const transformLabelThePicture=e=>{const r=e.answer;if(!r?.imageUrl||!r?.labels||0===r.labels.length)return{apiContent:{},apiCorrectAnswer:{}};const l=(r.labels||[]).map(e=>({id:e.id,number:e.number,correctAnswer:e.correctAnswer||"",isPreFilled:e.isPreFilled||!1})),n=(r.labels||[]).reduce((e,r)=>(r.id&&r.correctAnswer&&!r.isPreFilled&&(e[r.id]=r.correctAnswer),e),{});return{apiContent:{imageUrl:r.imageUrl,wordBank:r.wordBank||[],labels:l},apiCorrectAnswer:{labels:n}}};
+export const transformLabelThePicture = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.imageUrl || !answerData?.labels || answerData.labels.length === 0) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const labels = (answerData.labels || []).map((label) => ({
+        id: label.id,
+        number: label.number,
+        correctAnswer: label.correctAnswer || '',
+        isPreFilled: label.isPreFilled || false,
+    }));
+    const answersMapping = (answerData.labels || []).reduce((acc, label) => {
+        if (label.id && label.correctAnswer && !label.isPreFilled) {
+            acc[label.id] = label.correctAnswer;
+        }
+        return acc;
+    }, {});
+    return {
+        apiContent: {
+            imageUrl: answerData.imageUrl,
+            wordBank: answerData.wordBank || [],
+            labels,
+        },
+        apiCorrectAnswer: {
+            labels: answersMapping,
+        },
+    };
+};

package/dist/components/questions/types/listen-and-choose-from-answer-group/ListenAndChooseFromAnswerGroupClient.js

@@ -1 +1,78 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as i,useEffect as n}from"react";import{Check as s,X as d,Play as a,Pause as l,Volume2 as o,ImageIcon as c}from"lucide-react";import{Button as m}from"../../../../components/ui/button";import{usePresignedFileUrl as g,useAudioPreview as h}from"../../../../shared/lib/hooks";import{cn as b}from"../../../../shared/lib/utils";function u({audioUrl:t}){const{previewUrl:i}=g(t),{isPlaying:n,currentTime:s,duration:d,progressPercentage:c,handlePlayPause:b,handleProgressClick:u,formatTime:x}=h(i);return r("div",{className:"flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5",children:[e(m,{variant:"outline",size:"icon",onClick:b,disabled:!i,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(n?l:a,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[x(s)," / ",x(d)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:u,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${c}%`}})}),e(o,{className:"h-4 w-4 text-indigo-400"})]})}function x({imageUrl:r}){const{previewUrl:t}=g(r);return t?e("img",{src:t,alt:"Option",className:"h-20 w-20 flex-shrink-0 rounded-lg object-contain bg-gray-50 border border-gray-200"}):e("div",{className:"flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 border border-gray-200",children:e(c,{className:"h-8 w-8 text-gray-300"})})}export function ListenAndChooseFromAnswerGroupClient({questionData:a,onSubmit:l,isReviewMode:c=!1,userAnswer:m,correctAnswer:g,explanation:h}){const[p,f]=i(m);n(()=>{void 0!==m&&f(m)},[m]);const w=g??a.correctAnswer,N=!!p,y=a.options.find(e=>e.id===p),v=c&&p===w;return r("div",{className:"space-y-4",children:[a.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-orange-50 to-amber-50 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-orange-500 to-amber-600 text-white shadow-sm",children:e(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và chọn trong nhóm đáp án"})]}),c&&N&&e("div",{className:b("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",v?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:r(t,v?{children:[e(s,{className:"h-3.5 w-3.5"})," Đúng"]}:{children:[e(d,{className:"h-3.5 w-3.5"})," Sai"]})})]}),r("div",{className:"p-5 space-y-5",children:[a.audioUrl&&e(u,{audioUrl:a.audioUrl}),r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Chọn đáp án đúng"}),e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3",children:a.options.map((t,i)=>{const{isSelected:n,isCorrect:a,isWrong:o}=(e=>{const r=p===e,t=c&&e===w;return{isSelected:r,isCorrect:t,isWrong:c&&r&&!t}})(t.id);return r("button",{type:"button",onClick:()=>{return e=t.id,void(c||(f(e),l?.(e)));var e},disabled:c,className:b("group relative flex flex-col items-center gap-2 rounded-xl border-2 p-3 transition-all",c?a?"border-green-400 bg-green-50 shadow-md":o?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":n?"border-blue-500 bg-blue-50 shadow-md ring-2 ring-blue-100":"border-gray-200 bg-white hover:border-gray-400 hover:shadow-sm cursor-pointer"),children:[e("div",{className:b("flex h-7 w-7 items-center justify-center rounded-lg text-sm font-bold shadow-sm",c?a?"bg-green-500 text-white":o?"bg-red-500 text-white":"bg-gray-200 text-gray-600":n?"bg-blue-500 text-white":"bg-gray-100 text-gray-600"),children:String.fromCharCode(65+i)}),e(x,{imageUrl:t.imageUrl}),t.label&&e("p",{className:b("text-xs text-center font-medium",c?a?"text-green-700":o?"text-red-700":"text-gray-600":n?"text-blue-700":"text-gray-600"),children:t.label}),c&&(a||o)&&e("div",{className:b("absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm",a?"bg-green-500":"bg-red-500"),children:e(a?s:d,{className:"h-3.5 w-3.5 text-white"})}),!c&&n&&e("div",{className:"absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm",children:e(s,{className:"h-3.5 w-3.5 text-white"})})]},t.id)})})]}),N&&y&&r("div",{className:b("flex items-center gap-2 rounded-lg border p-3",c?v?"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:y.label||y.id})]}),c&&e("span",{className:b("text-xs font-semibold",v?"text-green-600":"text-red-600"),children:v?"✓ Chính xác":"✗ Không chính xác"})]}),!c&&!N&&r("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2",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:"Hãy chọn một đáp án"})]}),c&&h&&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:h})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, Play, Pause, Volume2, ImageIcon } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+// ─── Sub-component: Audio player ─────────────────────────────────────────────
+function QuestionAudioPlayer({ audioUrl }) {
+    const { previewUrl } = usePresignedFileUrl(audioUrl);
+    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) }), _jsx(Volume2, { className: "h-4 w-4 text-indigo-400" })] }));
+}
+// ─── Sub-component: Option image ─────────────────────────────────────────────
+function OptionImage({ imageUrl }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 border border-gray-200", children: _jsx(ImageIcon, { className: "h-8 w-8 text-gray-300" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: "Option", className: "h-20 w-20 flex-shrink-0 rounded-lg object-contain bg-gray-50 border border-gray-200" }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndChooseFromAnswerGroupClient({ questionData, onSubmit, isReviewMode = false, userAnswer, correctAnswer, explanation, }) {
+    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer);
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        if (userAnswer !== undefined) {
+            setSelectedAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    // Handle option selection — now by option ID
+    const handleOptionSelect = (optionId) => {
+        if (isReviewMode)
+            return;
+        setSelectedAnswer(optionId);
+        onSubmit?.(optionId);
+    };
+    // Resolve correct answer: prop > questionData
+    const resolvedCorrectAnswer = correctAnswer ?? questionData.correctAnswer;
+    // Get answer status for an option — by option ID
+    const getOptionStatus = (optionId) => {
+        const isSelected = selectedAnswer === optionId;
+        const isCorrectAnswer = isReviewMode && optionId === resolvedCorrectAnswer;
+        const isWrongSelection = isReviewMode && isSelected && !isCorrectAnswer;
+        return { isSelected, isCorrect: isCorrectAnswer, isWrong: isWrongSelection };
+    };
+    const hasAnswered = !!selectedAnswer;
+    const selectedOption = questionData.options.find((o) => o.id === selectedAnswer);
+    const isAnswerCorrect = isReviewMode && selectedAnswer === resolvedCorrectAnswer;
+    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-orange-50 to-amber-50 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-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 ch\u1ECDn trong nh\u00F3m \u0111\u00E1p \u00E1n" })] }), isReviewMode && hasAnswered && (_jsx("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 ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [questionData.audioUrl && (_jsx(QuestionAudioPlayer, { audioUrl: questionData.audioUrl })), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: questionData.options.map((option, optIndex) => {
+                                            const { isSelected, isCorrect, isWrong } = getOptionStatus(option.id);
+                                            return (_jsxs("button", { type: "button", onClick: () => handleOptionSelect(option.id), disabled: isReviewMode, className: cn('group relative flex flex-col items-center gap-2 rounded-xl border-2 p-3 transition-all', isReviewMode
+                                                    ? isCorrect
+                                                        ? 'border-green-400 bg-green-50 shadow-md'
+                                                        : isWrong
+                                                            ? 'border-red-400 bg-red-50'
+                                                            : 'border-gray-200 bg-gray-50'
+                                                    : isSelected
+                                                        ? 'border-blue-500 bg-blue-50 shadow-md ring-2 ring-blue-100'
+                                                        : 'border-gray-200 bg-white hover:border-gray-400 hover:shadow-sm cursor-pointer'), children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-lg text-sm font-bold shadow-sm', isReviewMode
+                                                            ? isCorrect
+                                                                ? 'bg-green-500 text-white'
+                                                                : isWrong
+                                                                    ? 'bg-red-500 text-white'
+                                                                    : 'bg-gray-200 text-gray-600'
+                                                            : isSelected
+                                                                ? 'bg-blue-500 text-white'
+                                                                : 'bg-gray-100 text-gray-600'), children: String.fromCharCode(65 + optIndex) }), _jsx(OptionImage, { imageUrl: option.imageUrl }), option.label && (_jsx("p", { className: cn('text-xs text-center font-medium', isReviewMode
+                                                            ? isCorrect ? 'text-green-700' : isWrong ? 'text-red-700' : 'text-gray-600'
+                                                            : isSelected ? 'text-blue-700' : 'text-gray-600'), children: option.label })), isReviewMode && (isCorrect || isWrong) && (_jsx("div", { className: cn('absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm', isCorrect ? 'bg-green-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5 text-white" })) : (_jsx(X, { className: "h-3.5 w-3.5 text-white" })) })), !isReviewMode && isSelected && (_jsx("div", { className: "absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: _jsx(Check, { className: "h-3.5 w-3.5 text-white" }) }))] }, option.id));
+                                        }) })] }), hasAnswered && selectedOption && (_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: selectedOption.label || selectedOption.id })] }), 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: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", 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: "H\u00E3y ch\u1ECDn m\u1ED9t \u0111\u00E1p \u00E1n" })] })), 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-from-answer-group/ListenAndChooseFromAnswerGroupCreator.js

@@ -1 +1,232 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as a,useEffect as n}from"react";import{Button as i}from"../../../../components/ui/button";import{Input as o}from"../../../../components/ui/input";import{Textarea as s}from"../../../../components/ui/textarea";import{Label as l}from"../../../../components/ui/label";import{Card as c,CardContent as d,CardHeader as m,CardTitle as h}from"../../../../components/ui/card";import{Pencil as g,Eye as p,Play as u,Pause as f,Plus as b,Trash2 as x,Music as N,CheckCircle2 as v,ListChecks as w,ImageIcon as y,BookOpen as U}from"lucide-react";import{toast as C}from"sonner";import{FileUpload as S}from"../../../../components/ui/file-upload";import{ListenAndChooseFromAnswerGroupClient as k}from"./ListenAndChooseFromAnswerGroupClient";import{usePresignedFileUrl as A,useAudioPreview as j,useDebouncedCallback as z}from"../../../../shared/lib/hooks";import{useReactHookForm as B}from"../../../../shared/lib/hooks/useReactHookForm";import{listenAndChooseFromAnswerGroupFormSchema as G}from"../../../../shared/lib/validation/listen-and-choose-from-answer-group.validation";import{useAnswerGroupQuestionGroup as P}from"../../_shared/hooks/useAnswerGroupQuestionGroup";import{generateObjectId as V}from"../../_shared/utils/id-generator";import{CreatorGuide as q}from"../../components/CreatorGuide";function E({audioUrl:t}){const{previewUrl:a}=A(t),{isPlaying:n,currentTime:o,duration:s,progressPercentage:l,handlePlayPause:c,handleProgressClick:d,formatTime:m}=j(a);return a?e("div",{className:"bg-muted/50 rounded-lg border p-3",children:r("div",{className:"flex items-center gap-3",children:[e(i,{variant:"outline",size:"icon",onClick:c,disabled:!a,className:"h-8 w-8",children:e(n?f:u,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[m(o)," / ",m(s)]}),e("div",{className:"bg-muted relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:d,children:e("div",{className:"bg-primary absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${l}%`}})})]})}):null}function I({imageUrl:r}){const{previewUrl:t}=A(r);return t?e("div",{className:"mt-2 rounded-lg border border-gray-200 overflow-hidden",children:e("img",{src:t,alt:"Option",className:"h-24 w-full object-contain bg-gray-50"})}):null}function D({initialData:u,onSave:f,onCancel:A,onChange:j,onUnsavedChangesChange:D,validationRef:O,externalErrors:T,groups:M,questionIndexInPart:R=0,partId:J=""}){const L={options:u?.options||[]},{isGrouped:Q,currentGroupNumber:$,options:_,setOptions:H}=P({partId:J,groups:M,questionIndexInPart:R,initialData:L}),[K,W]=t(u?.audioUrl||""),[X,Y]=t(null!=u?.correctAnswer?String(u.correctAnswer):""),[Z,ee]=t(u?.points),[re,te]=t(u?.explanation||""),[ae,ne]=t(u?.isBackup||!1),ie=a(u),oe=a(!1),[se,le]=t(!1);n(()=>{JSON.stringify(ie.current)!==JSON.stringify(u)&&(oe.current=!0,ie.current=u,u?(void 0!==u.audioUrl&&W(u.audioUrl),void 0!==u.correctAnswer&&null!==u.correctAnswer&&Y(String(u.correctAnswer)),void 0!==u.points&&ee(u.points),void 0!==u.explanation&&te(u.explanation),void 0!==u.isBackup&&ne(u.isBackup)):(W(""),Y(""),ee(void 0),te(""),ne(!1)),setTimeout(()=>{oe.current=!1},100))},[u]);const ce=a(j);n(()=>{ce.current=j},[j]);const de=z(e=>{ce.current?.(e)},300);n(()=>{oe.current||de({options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae,groups:M,groupNumber:$})},[_,K,X,Z,re,ae,M,$,de]);const me=B({defaultValues:{options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae},zodSchema:G,mode:"onBlur"});n(()=>{O&&(O.current={triggerValidation:async()=>{me.setValue("options",_),me.setValue("audioUrl",K),me.setValue("correctAnswer",String(X)),me.setValue("points",Z),me.setValue("isBackup",ae);return!!await me.trigger()},getFormData:()=>({options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae,groups:M,groupNumber:$})})},[O,_,K,X,Z,re,ae,M,$,me]);const he=()=>{const e={id:V(),imageUrl:"",label:""};H([..._,e])};if(se){const t={options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae};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(h,{children:"Nghe và chọn trong nhóm đáp án (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>le(!1),children:[e(g,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(k,{questionData:t,onSubmit:()=>{},isReviewMode:!0,userAnswer:X||void 0,correctAnswer:X||void 0,explanation:re})]})}return r("div",{className:"space-y-6",children:[e(q,{colorScheme:"orange",steps:[{text:"Upload các hình ảnh lựa chọn (options) cho nhóm — học sinh sẽ chọn đáp án đúng"},{text:"Mỗi option cần có hình ảnh và nhãn mô tả"},{text:"Upload audio câu hỏi cho từng câu"},{text:"Chọn đáp án đúng (correct answer) từ danh sách options",highlight:!0}],tips:["Nên có ít nhất 3-4 options để tạo sự phân biệt rõ ràng"]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-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-orange-500 to-amber-600 shadow-md",children:e(w,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(h,{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-orange-100 px-3 py-1 text-sm font-medium text-orange-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",$]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(i,{variant:"outline",size:"sm",onClick:()=>le(!0),disabled:_.filter(e=>e.imageUrl).length<2||!K,className:"gap-2 border-orange-200 text-orange-600 hover:bg-orange-50 hover:text-orange-700",children:[e(p,{className:"h-4 w-4"}),"Preview"]})]})})]}),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"}),r(m,{className:"pb-4",children:[r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-amber-100",children:e(w,{className:"h-3.5 w-3.5 text-amber-600"})}),r(h,{className:"text-lg font-semibold text-gray-800",children:["Nhóm đáp án (",_.length," đáp án)"]})]}),r(i,{variant:"outline",size:"sm",onClick:he,className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án"]})]}),me.formState.errors.options?.root&&e("div",{className:"px-4 pb-2",children:e("p",{className:"text-sm text-red-500",children:me.formState.errors.options.root.message})})]}),r(d,{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[_.map((t,a)=>r(c,{className:"border border-gray-200",children:[e(m,{className:"pb-2 pt-3 px-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white text-sm font-bold shadow-sm",children:String.fromCharCode(65+a)}),r("span",{className:"text-sm font-semibold text-gray-700",children:["Đáp án ",String.fromCharCode(65+a)]})]}),_.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>(e=>{if(_.length<=2)return void C.error("Cần tối thiểu 2 đáp án!");const r=_.filter(r=>r.id!==e);H(r),X===e&&Y(""),me.clearErrors("options")})(t.id),className:"h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50",children:e(x,{className:"h-3.5 w-3.5"})})]})}),r(d,{className:"space-y-3 px-4 pb-4",children:[r("div",{children:[e(S,{id:`option-image-${t.id}`,label:"Ảnh đáp án",accept:"image/*",value:t.imageUrl,onChange:e=>{return r=t.id,a=e,H(_.map(e=>e.id===r?{...e,imageUrl:a}:e)),void me.clearErrors("options");var r,a},maxSize:5,placeholder:"Upload ảnh cho đáp án",required:!0,autoUpload:!0,prefix:"questions"}),me.formState.errors.options?.[a]?.imageUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.options[a].imageUrl.message}),t.imageUrl&&e(I,{imageUrl:t.imageUrl})]}),r("div",{children:[e(l,{className:"font-medium",children:"Nhãn"}),e(o,{value:t.label||"",onChange:e=>{return r=t.id,a=e.target.value,H(_.map(e=>e.id===r?{...e,label:a}:e)),void me.clearErrors("options");var r,a},placeholder:"Nhập label / mô tả ngắn",className:"mt-1"})]})]})]},t.id)),0===_.length&&r("div",{className:"col-span-1 md:col-span-2 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-amber-300 p-8 bg-amber-50/50",children:[e(y,{className:"h-10 w-10 text-amber-400 mb-2"}),e("p",{className:"text-sm text-gray-500 mb-3",children:"Chưa có đáp án nào"}),r(i,{variant:"outline",size:"sm",onClick:he,className:"gap-2",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án đầu tiên"]})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-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-indigo-100",children:e(N,{className:"h-3.5 w-3.5 text-indigo-600"})}),e(h,{className:"text-lg font-semibold text-gray-800",children:"Câu hỏi"})]})}),r(d,{className:"space-y-6",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:[r("div",{className:"flex-1",children:[e(l,{className:"text-sm font-semibold text-gray-700 mb-2 block",children:"Điểm *"}),e(o,{type:"number",min:1,value:Z??"",onChange:e=>{const r=e.target.value;ee(""===r?void 0:parseInt(r,10)),me.clearErrors("points")},placeholder:"Nhập điểm số",className:"w-40 bg-white "+(me.formState.errors.points?"border-red-500":"")}),me.formState.errors.points&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.points.message})]}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),r("div",{children:[e(S,{id:"question-audio",label:"File âm thanh",accept:"audio/*",value:K,onChange:e=>{W(e),me.clearErrors("audioUrl")},maxSize:10,placeholder:"Upload file audio",required:!0,autoUpload:!0,prefix:"questions"}),me.formState.errors.audioUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.audioUrl.message}),K&&e(E,{audioUrl:K})]}),r("div",{children:[e(l,{className:"text-sm font-semibold text-gray-700 mb-2 block",children:"Chọn đáp án đúng *"}),_.filter(e=>e.imageUrl).length>0?e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3",children:_.map((t,a)=>{if(!t.imageUrl)return null;const n=X===t.id;return r("button",{type:"button",onClick:()=>{Y(t.id),me.clearErrors("correctAnswer")},className:"relative text-left rounded-xl border-2 p-2 transition-all "+(n?"border-green-500 bg-green-50 ring-2 ring-green-200 shadow-md":"border-gray-200 hover:border-gray-400 hover:shadow-sm"),children:[r("div",{className:"flex flex-col items-center gap-2",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm "+(n?"bg-green-500 text-white":"bg-gray-100 text-gray-600"),children:String.fromCharCode(65+a)}),e(F,{imageUrl:t.imageUrl}),t.label&&e("p",{className:"text-xs text-center "+(n?"text-green-700 font-medium":"text-gray-600"),children:t.label})]}),n&&e("div",{className:"absolute top-1 right-1",children:e(v,{className:"h-5 w-5 text-green-500"})})]},t.id)})}):e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng upload ảnh cho đáp án ở phần trên trước"}),me.formState.errors.correctAnswer&&e("div",{className:"mt-3 rounded-lg border border-red-200 bg-red-50 p-3",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",me.formState.errors.correctAnswer.message]})}),!me.formState.errors.correctAnswer&&!X&&_.filter(e=>e.imageUrl).length>0&&e("p",{className:"mt-1 text-xs text-amber-600",children:"Chưa chọn đáp án đúng"})]})]})]}),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(U,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{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(d,{children:e(s,{value:re,onChange:e=>te(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"})})]})]})}function F({imageUrl:r}){const{previewUrl:t}=A(r);return t?e("img",{src:t,alt:"Option",className:"h-16 w-full rounded-lg object-contain bg-gray-50"}):e("div",{className:"flex h-16 w-full items-center justify-center rounded-lg bg-gray-100",children:e(y,{className:"h-6 w-6 text-gray-300"})})}export function ListenAndChooseFromAnswerGroupCreator(r){return e(D,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Label } from '../../../../components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Pencil, Eye, Play, Pause, Plus, Trash2, Music, CheckCircle2, ListChecks, ImageIcon, BookOpen } from 'lucide-react';
+import { toast } from 'sonner';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ListenAndChooseFromAnswerGroupClient } from './ListenAndChooseFromAnswerGroupClient';
+import { usePresignedFileUrl, useAudioPreview, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { listenAndChooseFromAnswerGroupFormSchema } from '../../../../shared/lib/validation/listen-and-choose-from-answer-group.validation';
+import { useAnswerGroupQuestionGroup } from '../../_shared/hooks/useAnswerGroupQuestionGroup';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+import { CreatorGuide } from '../../components/CreatorGuide';
+// ─── Sub-component: Audio preview ────────────────────────────────────────────
+function AudioPreview({ audioUrl }) {
+    const { previewUrl } = usePresignedFileUrl(audioUrl);
+    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsx("div", { className: "bg-muted/50 rounded-lg border p-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-muted relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-primary absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) })] }) }));
+}
+// ─── Sub-component: Option image preview ─────────────────────────────────────
+function OptionImagePreview({ imageUrl }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsx("div", { className: "mt-2 rounded-lg border border-gray-200 overflow-hidden", children: _jsx("img", { src: previewUrl, alt: "Option", className: "h-24 w-full object-contain bg-gray-50" }) }));
+}
+// ─── Main Creator Component ──────────────────────────────────────────────────
+function ListenAndChooseFromAnswerGroupCreatorContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, validationRef, externalErrors, groups, questionIndexInPart = 0, partId = '', }) {
+    // Shared Group Data
+    const answerGroupInitialData = {
+        options: initialData?.options || [],
+    };
+    const { isGrouped, currentGroupNumber, options, setOptions, } = useAnswerGroupQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: answerGroupInitialData,
+    });
+    // Specific Question State
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
+    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer !== undefined && initialData?.correctAnswer !== null
+        ? String(initialData.correctAnswer)
+        : '');
+    const [points, setPoints] = useState(initialData?.points);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isBackup, setIsBackup] = useState(initialData?.isBackup || false);
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Sync state from initialData when it changes
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            if (initialData) {
+                if (initialData.audioUrl !== undefined)
+                    setAudioUrl(initialData.audioUrl);
+                if (initialData.correctAnswer !== undefined && initialData.correctAnswer !== null) {
+                    setCorrectAnswer(String(initialData.correctAnswer));
+                }
+                if (initialData.points !== undefined)
+                    setPoints(initialData.points);
+                if (initialData.explanation !== undefined)
+                    setExplanation(initialData.explanation);
+                if (initialData.isBackup !== undefined)
+                    setIsBackup(initialData.isBackup);
+            }
+            else {
+                setAudioUrl('');
+                setCorrectAnswer('');
+                setPoints(undefined);
+                setExplanation('');
+                setIsBackup(false);
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData]);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Notify onChange
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        debouncedOnChange({
+            options,
+            audioUrl,
+            correctAnswer,
+            points,
+            explanation,
+            isBackup,
+            groups,
+            groupNumber: currentGroupNumber,
+        });
+    }, [options, audioUrl, correctAnswer, points, explanation, isBackup, groups, currentGroupNumber, debouncedOnChange]);
+    // Validation
+    const form = useReactHookForm({
+        defaultValues: {
+            options,
+            audioUrl,
+            correctAnswer,
+            points,
+            explanation,
+            isBackup,
+        },
+        zodSchema: listenAndChooseFromAnswerGroupFormSchema,
+        mode: 'onBlur',
+    });
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    form.setValue('options', options);
+                    form.setValue('audioUrl', audioUrl);
+                    form.setValue('correctAnswer', String(correctAnswer));
+                    form.setValue('points', points);
+                    form.setValue('isBackup', isBackup);
+                    const isValid = await form.trigger();
+                    if (!isValid) {
+                        return false;
+                    }
+                    return true;
+                },
+                getFormData: () => ({
+                    options,
+                    audioUrl,
+                    correctAnswer,
+                    points,
+                    explanation,
+                    isBackup,
+                    groups,
+                    groupNumber: currentGroupNumber,
+                }),
+            };
+        }
+    }, [validationRef, options, audioUrl, correctAnswer, points, explanation, isBackup, groups, currentGroupNumber, form]);
+    // ─── Option Management ──────────────────────────────────────────────────────
+    const addOption = () => {
+        const newOption = {
+            id: generateObjectId(),
+            imageUrl: '',
+            label: '',
+        };
+        setOptions([...options, newOption]);
+    };
+    const updateOptionImageUrl = (id, imageUrl) => {
+        setOptions(options.map((opt) => (opt.id === id ? { ...opt, imageUrl } : opt)));
+        form.clearErrors('options');
+    };
+    const updateOptionLabel = (id, label) => {
+        setOptions(options.map((opt) => (opt.id === id ? { ...opt, label } : opt)));
+        form.clearErrors('options');
+    };
+    const removeOption = (id) => {
+        if (options.length <= 2) {
+            toast.error('Cần tối thiểu 2 đáp án!');
+            return;
+        }
+        const newOptions = options.filter((opt) => opt.id !== id);
+        setOptions(newOptions);
+        // Clear correctAnswer if the removed option was the correct one
+        if (correctAnswer === id) {
+            setCorrectAnswer('');
+        }
+        form.clearErrors('options');
+    };
+    // ─── Client Mode Preview ──────────────────────────────────────────────────
+    if (isClientMode) {
+        const questionData = {
+            options,
+            audioUrl,
+            correctAnswer,
+            points,
+            explanation,
+            isBackup,
+        };
+        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 trong nh\u00F3m \u0111\u00E1p \u00E1n (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndChooseFromAnswerGroupClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, userAnswer: correctAnswer || undefined, correctAnswer: correctAnswer || undefined, explanation: explanation })] }));
+    }
+    // ─── Creator UI ────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "orange", steps: [
+                    { text: 'Upload các hình ảnh lựa chọn (options) cho nhóm — học sinh sẽ chọn đáp án đúng' },
+                    { text: 'Mỗi option cần có hình ảnh và nhãn mô tả' },
+                    { text: 'Upload audio câu hỏi cho từng câu' },
+                    { text: 'Chọn đáp án đúng (correct answer) từ danh sách options', highlight: true },
+                ], tips: ['Nên có ít nhất 3-4 options để tạo sự phân biệt rõ ràng'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-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-orange-500 to-amber-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-orange-100 px-3 py-1 text-sm font-medium text-orange-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: options.filter((o) => o.imageUrl).length < 2 || !audioUrl, className: "gap-2 border-orange-200 text-orange-600 hover:bg-orange-50 hover:text-orange-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _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" }), _jsxs(CardHeader, { className: "pb-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-amber-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Nh\u00F3m \u0111\u00E1p \u00E1n (", options.length, " \u0111\u00E1p \u00E1n)"] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addOption, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), form.formState.errors.options?.root && (_jsx("div", { className: "px-4 pb-2", children: _jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.options.root.message }) }))] }), _jsxs(CardContent, { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [options.map((option, index) => (_jsxs(Card, { className: "border border-gray-200", children: [_jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white text-sm font-bold shadow-sm", children: String.fromCharCode(65 + index) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["\u0110\u00E1p \u00E1n ", String.fromCharCode(65 + index)] })] }), options.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => removeOption(option.id), className: "h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { children: [_jsx(FileUpload, { id: `option-image-${option.id}`, label: "\u1EA2nh \u0111\u00E1p \u00E1n", accept: "image/*", value: option.imageUrl, onChange: (url) => updateOptionImageUrl(option.id, url), maxSize: 5, placeholder: "Upload \u1EA3nh cho \u0111\u00E1p \u00E1n", required: true, autoUpload: true, prefix: "questions" }), form.formState.errors.options?.[index]?.imageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.options[index].imageUrl.message })), option.imageUrl && _jsx(OptionImagePreview, { imageUrl: option.imageUrl })] }), _jsxs("div", { children: [_jsx(Label, { className: "font-medium", children: "Nh\u00E3n" }), _jsx(Input, { value: option.label || '', onChange: (e) => updateOptionLabel(option.id, e.target.value), placeholder: "Nh\u1EADp label / m\u00F4 t\u1EA3 ng\u1EAFn", className: "mt-1" })] })] })] }, option.id))), options.length === 0 && (_jsxs("div", { className: "col-span-1 md:col-span-2 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-amber-300 p-8 bg-amber-50/50", children: [_jsx(ImageIcon, { className: "h-10 w-10 text-amber-400 mb-2" }), _jsx("p", { className: "text-sm text-gray-500 mb-3", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n n\u00E0o" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addOption, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n \u0111\u1EA7u ti\u00EAn"] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-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-indigo-100", children: _jsx(Music, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi" })] }) }), _jsxs(CardContent, { className: "space-y-6", 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: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700 mb-2 block", children: "\u0110i\u1EC3m *" }), _jsx(Input, { type: "number", min: 1, value: points ?? '', onChange: (e) => {
+                                                        const val = e.target.value;
+                                                        setPoints(val === '' ? undefined : parseInt(val, 10));
+                                                        form.clearErrors('points');
+                                                    }, placeholder: "Nh\u1EADp \u0111i\u1EC3m s\u1ED1", className: `w-40 bg-white ${form.formState.errors.points ? 'border-red-500' : ''}` }), form.formState.errors.points && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.points.message }))] }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { children: [_jsx(FileUpload, { id: "question-audio", label: "File \u00E2m thanh", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                            setAudioUrl(url);
+                                            form.clearErrors('audioUrl');
+                                        }, maxSize: 10, placeholder: "Upload file audio", required: true, autoUpload: true, prefix: "questions" }), form.formState.errors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.audioUrl.message })), audioUrl && _jsx(AudioPreview, { audioUrl: audioUrl })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700 mb-2 block", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng *" }), options.filter((o) => o.imageUrl).length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: options.map((option, optIndex) => {
+                                            if (!option.imageUrl)
+                                                return null;
+                                            const isSelected = correctAnswer === option.id;
+                                            return (_jsxs("button", { type: "button", onClick: () => {
+                                                    setCorrectAnswer(option.id);
+                                                    form.clearErrors('correctAnswer');
+                                                }, className: `relative text-left rounded-xl border-2 p-2 transition-all ${isSelected
+                                                    ? 'border-green-500 bg-green-50 ring-2 ring-green-200 shadow-md'
+                                                    : 'border-gray-200 hover:border-gray-400 hover:shadow-sm'}`, children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm ${isSelected
+                                                                    ? 'bg-green-500 text-white'
+                                                                    : 'bg-gray-100 text-gray-600'}`, children: String.fromCharCode(65 + optIndex) }), _jsx(OptionImagePreviewInline, { imageUrl: option.imageUrl }), option.label && (_jsx("p", { className: `text-xs text-center ${isSelected ? 'text-green-700 font-medium' : 'text-gray-600'}`, children: option.label }))] }), isSelected && (_jsx("div", { className: "absolute top-1 right-1", children: _jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" }) }))] }, option.id));
+                                        }) })) : (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng upload \u1EA3nh cho \u0111\u00E1p \u00E1n \u1EDF ph\u1EA7n tr\u00EAn tr\u01B0\u1EDBc" })), form.formState.errors.correctAnswer && (_jsx("div", { className: "mt-3 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctAnswer.message] }) })), !form.formState.errors.correctAnswer && !correctAnswer && options.filter((o) => o.imageUrl).length > 0 && (_jsx("p", { className: "mt-1 text-xs text-amber-600", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }))] })] })] }), _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" }) })] })] }));
+}
+// ─── Inline image preview (for correct answer selection) ─────────────────────
+function OptionImagePreviewInline({ imageUrl }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "flex h-16 w-full items-center justify-center rounded-lg bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-300" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: "Option", className: "h-16 w-full rounded-lg object-contain bg-gray-50" }));
+}
+export function ListenAndChooseFromAnswerGroupCreator(props) {
+    return _jsx(ListenAndChooseFromAnswerGroupCreatorContent, { ...props });
+}

package/dist/components/questions/types/listen-and-choose-from-answer-group/index.js

@@ -1 +1,2 @@
-export*from"./ListenAndChooseFromAnswerGroupCreator";export*from"./ListenAndChooseFromAnswerGroupClient";
+export * from './ListenAndChooseFromAnswerGroupCreator';
+export * from './ListenAndChooseFromAnswerGroupClient';

package/dist/components/questions/types/listen-and-choose-from-answer-group/register.js

@@ -1 +1,82 @@
-import{ListenAndChooseFromAnswerGroupCreator as t}from"./ListenAndChooseFromAnswerGroupCreator";export const listenAndChooseFromAnswerGroupRegistration={component:t,transformInitialData:t=>{if(!t)return;const n=t,o=n?.questionGroup?.payload?.options?.length>0&&n?.questionGroup?.payload?.options||n?.answer?.options?.length>0&&n?.answer?.options||n?.content?.options?.length>0&&n?.content?.options||n?.options||[],e=n?.content?.audioUrl||n?.answer?.audioUrl||n?.audioUrl||"",s=n?.answer?.correctAnswer??n?.correctAnswer?.answer??n?.content?.correctAnswer??-1,r=n?.points||n?.answer?.points||1,a=n?.explanation||n?.answer?.explanation||n?.content?.explanation||"",i=n?.content?.isBackup||n?.isBackup||!1;return console.log("[LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP register] transformInitialData:",{correctAnswer:s,audioUrl:e?"✓":"✗",optionsCount:o?.length||0,sources:{"answer.correctAnswer":n?.answer?.correctAnswer,"correctAnswer.answer":n?.correctAnswer?.answer,"questionGroup.payload.options":n?.questionGroup?.payload?.options?.length}}),{audioUrl:e,options:o,correctAnswer:s,points:r,explanation:a,isBackup:i,isCompleted:n?.isCompleted}},getExtraProps:t=>({groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,n)=>({type:n.questionType,content:{..."object"==typeof n.state.content&&null!==n.state.content?n.state.content:{},audioUrl:t.audioUrl,options:t.options,correctAnswer:t.correctAnswer,isBackup:t.isBackup||!1},points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,explanation:t?.explanation||""}),wrapOnChange:(t,n)=>({type:n.questionType,content:{..."object"==typeof n.state.content&&null!==n.state.content?n.state.content:{},audioUrl:t.audioUrl,options:t.options,correctAnswer:t.correctAnswer,isBackup:t.isBackup||!1},points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,explanation:t?.explanation||""})};
+import { ListenAndChooseFromAnswerGroupCreator } from './ListenAndChooseFromAnswerGroupCreator';
+export const listenAndChooseFromAnswerGroupRegistration = {
+    component: ListenAndChooseFromAnswerGroupCreator,
+    transformInitialData: (initialData) => {
+        if (!initialData)
+            return undefined;
+        const d = initialData;
+        // Group shared data: options
+        // Use data from questionGroup.payload first (API format), fallback to answer (reverse-transformed)
+        const options = (d?.questionGroup?.payload?.options?.length > 0 && d?.questionGroup?.payload?.options) ||
+            (d?.answer?.options?.length > 0 && d?.answer?.options) ||
+            (d?.content?.options?.length > 0 && d?.content?.options) ||
+            d?.options || [];
+        // Question specific data - prioritize content (API) then answer (reverse-transformed)
+        const audioUrl = d?.content?.audioUrl || d?.answer?.audioUrl || d?.audioUrl || '';
+        // Correct answer from multiple possible locations
+        const correctAnswer = d?.answer?.correctAnswer ??
+            d?.correctAnswer?.answer ??
+            d?.content?.correctAnswer ??
+            -1;
+        // Points and explanation - top-level fields take priority
+        const points = d?.points || d?.answer?.points || 1;
+        const explanation = d?.explanation || d?.answer?.explanation || d?.content?.explanation || '';
+        const isBackup = d?.content?.isBackup || d?.isBackup || false;
+        console.log('[LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP register] transformInitialData:', {
+            correctAnswer,
+            audioUrl: audioUrl ? '✓' : '✗',
+            optionsCount: options?.length || 0,
+            sources: {
+                'answer.correctAnswer': d?.answer?.correctAnswer,
+                'correctAnswer.answer': d?.correctAnswer?.answer,
+                'questionGroup.payload.options': d?.questionGroup?.payload?.options?.length,
+            }
+        });
+        return {
+            audioUrl,
+            options,
+            correctAnswer,
+            points,
+            explanation,
+            isBackup,
+            isCompleted: d?.isCompleted,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            options: data.options,
+            correctAnswer: data.correctAnswer,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            options: data.options,
+            correctAnswer: data.correctAnswer,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/listen-and-choose-from-answer-group/transform.js

@@ -1 +1,27 @@
-export const transformListenAndChooseFromAnswerGroup=r=>{const o=r.answer,e={};o?.audioUrl&&(e.audioUrl=o.audioUrl);return{apiContent:e,apiCorrectAnswer:{answer:o.correctAnswer},answerGroupData:{options:(o.options||[]).map(r=>({id:r.id,imageUrl:r.imageUrl,...r.label?{label:r.label}:{}}))},groupNumber:o.groupNumber||1}};
+export const transformListenAndChooseFromAnswerGroup = (question) => {
+    const answerData = question.answer;
+    // Question-specific content: only audioUrl
+    const apiContent = {};
+    if (answerData?.audioUrl) {
+        apiContent.audioUrl = answerData.audioUrl;
+    }
+    const apiCorrectAnswer = {
+        answer: answerData.correctAnswer,
+    };
+    // Group shared data: options go into questionGroup.payload
+    const answerGroupData = {
+        options: (answerData.options || []).map((opt) => ({
+            id: opt.id,
+            imageUrl: opt.imageUrl,
+            ...(opt.label ? { label: opt.label } : {}),
+        })),
+    };
+    // Get group number directly from the component payload
+    const groupNumber = answerData.groupNumber || 1;
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        answerGroupData,
+        groupNumber,
+    };
+};