@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/questions/types/listen-and-speak-answer/register.js

@@ -1 +1,84 @@
-import{ListenAndSpeakAnswerCreator as e}from"./ListenAndSpeakAnswerCreator";export const listenAndSpeakAnswerRegistration={component:e,transformInitialData:e=>{let t=e?.answer;const o=e?.content,a=e?.answer||e?.correctAnswer||e?.correct_answer,n=e?.total_points?parseFloat(e.total_points):e?.points||o?.points||a?.points||1,r=e?.explanation||o?.explanation||a?.explanation||"";if(o&&"object"==typeof o&&void 0!==o.audioUrl){const e=a?.expectedAnswers||[];t={audioUrl:o.audioUrl||"",expectedAnswers:e,arrowNode:o.arrowNode,backgroundImageUrl:a?.backgroundImageUrl||o.backgroundImageUrl||"",groupNumber:a?.groupNumber||o.groupNumber||1,explanation:r,points:n,isBackup:o.isBackup||!1}}else a&&"object"==typeof a&&void 0!==a.expectedAnswers&&(t={...a,audioUrl:a.audioUrl||o?.audioUrl||"",arrowNode:a.arrowNode||o?.arrowNode,backgroundImageUrl:a.backgroundImageUrl||o?.backgroundImageUrl||"",groupNumber:a.groupNumber||o?.groupNumber||1,explanation:r,points:n,isBackup:o?.isBackup||!1});return t},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl,arrowNode:e.arrowNode,backgroundImageUrl:e.backgroundImageUrl,groupNumber:e.groupNumber,isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl,arrowNode:e.arrowNode,backgroundImageUrl:e.backgroundImageUrl,groupNumber:e.groupNumber,isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""})};
+import { ListenAndSpeakAnswerCreator } from './ListenAndSpeakAnswerCreator';
+export const listenAndSpeakAnswerRegistration = {
+    component: ListenAndSpeakAnswerCreator,
+    transformInitialData: (initialData) => {
+        let creatorData = initialData?.answer;
+        const content = initialData?.content;
+        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || content?.points || answer?.points || 1);
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        if (content && typeof content === 'object' && content.audioUrl !== undefined) {
+            const expectedAnswers = answer?.expectedAnswers || [];
+            creatorData = {
+                audioUrl: content.audioUrl || '',
+                expectedAnswers: expectedAnswers,
+                arrowNode: content.arrowNode,
+                backgroundImageUrl: answer?.backgroundImageUrl || content.backgroundImageUrl || '',
+                groupNumber: answer?.groupNumber || content.groupNumber || 1,
+                explanation,
+                points,
+                isBackup: content.isBackup || false,
+            };
+        }
+        else if (answer && typeof answer === 'object' && answer.expectedAnswers !== undefined) {
+            creatorData = {
+                ...answer,
+                audioUrl: answer.audioUrl || content?.audioUrl || '',
+                arrowNode: answer.arrowNode || content?.arrowNode,
+                backgroundImageUrl: answer.backgroundImageUrl || content?.backgroundImageUrl || '',
+                groupNumber: answer.groupNumber || content?.groupNumber || 1,
+                explanation,
+                points,
+                isBackup: content?.isBackup || false,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            arrowNode: data.arrowNode,
+            backgroundImageUrl: data.backgroundImageUrl,
+            groupNumber: data.groupNumber,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        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,
+            arrowNode: data.arrowNode,
+            backgroundImageUrl: data.backgroundImageUrl,
+            groupNumber: data.groupNumber,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/listen-and-speak-answer/transform.js

@@ -1 +1,27 @@
-export const transformListenAndSpeakAnswer=r=>{const e=r.content,a=r.answer,o=r.questionGroup,u=a?.expectedAnswers||[],n={apiContent:{audioUrl:e?.audioUrl||a?.audioUrl||"",arrowNode:e?.arrowNode||a?.arrowNode||{x:40,y:30,width:10,height:20},isBackup:e?.isBackup||a?.isBackup||!1},apiCorrectAnswer:{expectedAnswers:u}};return e?.backgroundImageUrl?(n.sceneData={backgroundImageUrl:e.backgroundImageUrl},n.groupNumber=e.groupNumber||o?.groupNumber||1):o?.payload&&(n.sceneData=o.payload,n.groupNumber=o.groupNumber),n};
+export const transformListenAndSpeakAnswer = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const questionGroup = question.questionGroup;
+    // No strict early return - let validation handle missing expectedAnswers
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const apiContent = {
+        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
+        arrowNode: contentData?.arrowNode || answerData?.arrowNode || { x: 40, y: 30, width: 10, height: 20 },
+        isBackup: contentData?.isBackup || answerData?.isBackup || false,
+    };
+    const result = {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+        },
+    };
+    if (contentData?.backgroundImageUrl) {
+        result.sceneData = { backgroundImageUrl: contentData.backgroundImageUrl };
+        result.groupNumber = contentData.groupNumber || questionGroup?.groupNumber || 1;
+    }
+    else if (questionGroup?.payload) {
+        result.sceneData = questionGroup.payload;
+        result.groupNumber = questionGroup.groupNumber;
+    }
+    return result;
+};

package/dist/components/questions/types/listen-and-speak-compare-images/ListenAndSpeakCompareImagesClient.js

@@ -1 +1,32 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as i,Volume2 as a,CheckCircle2 as d,Play as n,Pause as s,ImageIcon as l,Info as t,GitCompareArrows as o}from"lucide-react";import{Button as c}from"../../../../components/ui/button";import{useCompareImagesGroup as m}from"../../_shared/hooks/useCompareImagesGroup";import{usePresignedFileUrl as g,useAudioPreview as h}from"../../../../shared/lib/hooks";function b({audioUrl:i}){const{previewUrl:d}=g(i),{isPlaying:l,currentTime:t,duration:o,progressPercentage:m,handlePlayPause:b,handleProgressClick:x,formatTime:p}=h(d);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(c,{variant:"outline",size:"icon",onClick:b,disabled:!d,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(l?s:n,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[p(t)," / ",p(o)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:x,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${m}%`}})}),e(a,{className:"h-4 w-4 text-indigo-400"})]})}function x({imageUrl:r,label:i}){const{previewUrl:a}=g(r);return a?e("img",{src:a,alt:i,className:"object-contain w-full h-full"}):e("div",{className:"flex h-full w-full items-center justify-center bg-gray-100 text-gray-400",children:e(l,{className:"h-8 w-8"})})}export function ListenAndSpeakCompareImagesClient({questionData:n,isReviewMode:s=!1}){const{audioUrl:l,expectedAnswers:c=[],explanation:g}=n,{candidateImageUrl:h,examinerImageUrl:p}=m(void 0,n.groupNumber),u=n.candidateImageUrl||h,f=n.examinerImageUrl||p;return r("div",{className:"space-y-4",children:[n.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:[e("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-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-indigo-500 to-blue-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à nói (So sánh hình ảnh)"})]})}),r("div",{className:"p-5 space-y-5",children:[l?e(b,{audioUrl:l}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(a,{className:"h-4 w-4 text-gray-400"}),e("span",{className:"text-xs text-gray-400",children:"Chưa có audio câu hỏi"})]}),(u||f)&&r("div",{className:"space-y-4 bg-gradient-to-br from-amber-100 to-orange-100 p-5 rounded-2xl border border-amber-200 shadow-sm",children:[u&&r("div",{className:"space-y-2",children:[e("div",{className:"flex justify-center",children:e("span",{className:"inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50",children:"Candidate's Copy"})}),e("div",{className:"w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200",children:e(x,{imageUrl:u,label:"Candidate's Copy"})})]}),f&&r("div",{className:"space-y-2",children:[e("div",{className:"flex justify-center",children:e("span",{className:"inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50",children:"Examiner's Copy"})}),e("div",{className:"w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200",children:e(x,{imageUrl:f,label:"Examiner's Copy"})})]})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50",children:e(i,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:"Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây"})]}),s&&c.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(d,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"Các đáp án mong muốn"})]}),e("div",{className:"space-y-2",children:c.map((i,a)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("span",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold",children:a+1}),e("span",{className:"text-sm text-green-800",children:i})]},a))})]}),s&&g&&r("div",{className:"rounded-xl border border-indigo-200 bg-indigo-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e(t,{className:"h-4 w-4 text-indigo-600"}),e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích"})]}),e("p",{className:"text-sm text-indigo-700 leading-relaxed",children:g})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Play, Pause, ImageIcon, Info, GitCompareArrows } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { useCompareImagesGroup } from '../../_shared/hooks/useCompareImagesGroup';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+// ─── Sub-component: Custom 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: Presigned image preview ──────────────────────────────────
+function CompareImagePreview({ imageUrl, label }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gray-100 text-gray-400", children: _jsx(ImageIcon, { className: "h-8 w-8" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: label, className: "object-contain w-full h-full" }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndSpeakCompareImagesClient({ questionData, isReviewMode = false, }) {
+    const { audioUrl, expectedAnswers = [], explanation } = questionData;
+    // Retrieve shared group data which should have been populated by the store when the exam loaded
+    const { candidateImageUrl: storeCandidateImageUrl, examinerImageUrl: storeExaminerImageUrl } = useCompareImagesGroup(undefined, // partId not needed for read-only client
+    questionData.groupNumber);
+    // Use questionData images as primary source (Creator preview passes them directly),
+    // fall back to store values (exam-taking mode populates the store)
+    const candidateImageUrl = questionData.candidateImageUrl || storeCandidateImageUrl;
+    const examinerImageUrl = questionData.examinerImageUrl || storeExaminerImageUrl;
+    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: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-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-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(GitCompareArrows, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (So s\u00E1nh h\u00ECnh \u1EA3nh)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), (candidateImageUrl || examinerImageUrl) && (_jsxs("div", { className: "space-y-4 bg-gradient-to-br from-amber-100 to-orange-100 p-5 rounded-2xl border border-amber-200 shadow-sm", children: [candidateImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50", children: "Candidate's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: candidateImageUrl, label: "Candidate's Copy" }) })] })), examinerImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50", children: "Examiner's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: examinerImageUrl, label: "Examiner's Copy" }) })] }))] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-compare-images/ListenAndSpeakCompareImagesCreator.js

@@ -1 +1,295 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as a,useMemo as t,useRef as i,useState as n}from"react";import{Card as s,CardContent as l,CardHeader as d,CardTitle as c}from"../../../../components/ui/card";import{Label as o}from"../../../../components/ui/label";import{Button as m}from"../../../../components/ui/button";import{Input as h}from"../../../../components/ui/input";import{Textarea as g}from"../../../../components/ui/textarea";import{Form as p,FormControl as u,FormField as x,FormItem as f,FormMessage as b}from"../../../../components/ui/form";import{FileUpload as N}from"../../../../components/ui/file-upload";import{PointsInput as v}from"../../../../components/ui/points-input";import{useCompareImagesGroup as w}from"../../_shared/hooks/useCompareImagesGroup";import{useReactHookForm as y}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as C,usePresignedFileUrl as U}from"../../../../shared/lib/hooks";import{listenAndSpeakCompareImagesSchema as k}from"../../../../shared/lib/validation/listen-and-speak-compare-images.validation";import{Plus as I,Trash2 as A,Mic as S,Volume2 as j,ImageIcon as V,MessageSquareText as q,ListChecks as D,BookOpen as B,Eye as E,Pencil as z,Info as H}from"lucide-react";import{CreatorGuide as J}from"../../components/CreatorGuide";import{ListenAndSpeakCompareImagesClient as O}from"./ListenAndSpeakCompareImagesClient";function G({imageUrl:r,label:a}){const{previewUrl:t}=U(r);return t?e("div",{className:"mt-2 rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm",children:e("img",{src:t,alt:a,className:"h-72 w-full object-contain bg-gray-50 p-2"})}):null}export function ListenAndSpeakCompareImagesCreator({questionIndex:U,initialData:$,onChange:T,onUnsavedChangesChange:P,validationRef:F,isFirstInGroup:R,partId:L,groups:M,questionIndexInPart:K}){const Q=t(()=>{if(void 0!==R)return R;if(!M||!M.length||void 0===K)return!0;let e=0;for(const r of M){if(K===e)return!0;e+=r.questionCount}return!1},[R,M,K]),_=t(()=>{if(M&&M.length>0){if(void 0===K)return 1;let e=0;for(let r=0;r<M.length;r++){if(K<e+M[r].questionCount)return r+1;e+=M[r].questionCount}return 1}const e=$;return e?.groupNumber??e?.questionGroup?.groupNumber??void 0},[M,K,$]),W=$,{candidateImageUrl:X,examinerImageUrl:Y,updateCandidateImage:Z,updateExaminerImage:ee,isValid:re}=w(L,_,{candidateImageUrl:W?.candidateImageUrl,examinerImageUrl:W?.examinerImageUrl}),[ae,te]=n({}),ie=y({zodSchema:k,defaultValues:{candidateImageUrl:W?.candidateImageUrl||X||"",examinerImageUrl:W?.examinerImageUrl||Y||"",audioUrl:W?.audioUrl||"",expectedAnswers:W?.expectedAnswers?.length>0?W.expectedAnswers:[""],points:W?.points??1,explanation:W?.explanation||"",isBackup:W?.isBackup||!1}}),{control:ne,watch:se,setValue:le,trigger:de,clearErrors:ce}=ie,oe=se("audioUrl"),me=se("expectedAnswers"),he=se("points"),ge=se("explanation"),pe=se("isBackup"),ue=i($),xe=i(!1),fe=i(T),be=i("");a(()=>{fe.current=T},[T]);const Ne=C(e=>{fe.current?.(e)},300);a(()=>{F&&(F.current={triggerValidation:async()=>{if(Q){const e=!!X,r=!!Y,a={};if(e||(a.candidate="Vui lòng tải lên Candidate's Copy Image!"),r||(a.examiner="Vui lòng tải lên Examiner's Copy Image!"),te(a),!e||!r)return await de(),!1}else te({});return await de()},getFormData:()=>({...ie.getValues(),candidateImageUrl:X||"",examinerImageUrl:Y||"",groupNumber:Q?ye:void 0})})},[F,ie,de,Q,X,Y,te]),a(()=>{X&&ae.candidate&&te(e=>({...e,candidate:void 0})),Y&&ae.examiner&&te(e=>({...e,examiner:void 0}))},[X,Y]),a(()=>{const e={candidateImageUrl:W?.candidateImageUrl||"",examinerImageUrl:W?.examinerImageUrl||"",audioUrl:W?.audioUrl||"",expectedAnswers:W?.expectedAnswers?.length>0?W.expectedAnswers:[""],points:W?.points??1,explanation:W?.explanation||"",isBackup:W?.isBackup||!1};if(!(JSON.stringify(ue.current)!==JSON.stringify($)))return;ue.current=$;const r={audioUrl:oe,expectedAnswers:me,points:he,explanation:ge,isBackup:pe},a=r.points===e.points&&r.explanation===e.explanation&&r.audioUrl===e.audioUrl&&JSON.stringify(r.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(a&&!0===$?.isCompleted)return;!a&&(e.audioUrl!==r.audioUrl||JSON.stringify(e.expectedAnswers)!==JSON.stringify(r.expectedAnswers))&&(xe.current=!0,ie.reset(e),setTimeout(()=>{xe.current=!1},150))},[$,ie,oe,me,ge,he,pe]);const ve=JSON.stringify(me);a(()=>{if(xe.current){const e=JSON.stringify({audioUrl:oe,expectedAnswers:me,points:he,explanation:ge,isBackup:pe,candidateImageUrl:X,examinerImageUrl:Y});return void(be.current=e)}const e={audioUrl:oe,expectedAnswers:me,points:he,explanation:ge,isBackup:pe,candidateImageUrl:X,examinerImageUrl:Y},r=JSON.stringify(e);be.current!==r&&(be.current=r,Ne(e))},[oe,ve,he,ge,pe,X,Y,Ne]),a(()=>{P&&P(ie.formState.isDirty)},[ie.formState.isDirty,P]);const we="number"!=typeof U||isNaN(U)?"number"!=typeof K||isNaN(K)?"?":K+1:U+1,ye=_??1,[Ce,Ue]=n(!1);if(Ce){const a={audioUrl:oe,expectedAnswers:me,explanation:ge,points:he,isBackup:pe,groupNumber:ye,candidateImageUrl:X||"",examinerImageUrl:Y||""};return r("div",{className:"space-y-6",children:[e(s,{children:e(d,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(c,{children:"Nghe và nói — So sánh hình ảnh (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Preview mode"})]}),r(m,{variant:"outline",size:"sm",onClick:()=>Ue(!1),children:[e(z,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(O,{questionData:a,isReviewMode:!0})]})}return r("div",{className:"space-y-6",children:[e(J,{colorScheme:"blue",steps:[{text:"Upload 2 hình ảnh so sánh: Hình thí sinh (Candidate) và Hình giám khảo (Examiner) — dùng chung cho nhóm"},{text:"Câu hỏi đầu tiên trong nhóm sẽ quản lý hình ảnh chung, các câu sau tham chiếu"},{text:"Upload audio câu hỏi cho từng câu — giám khảo hỏi về sự khác biệt giữa 2 hình"},{text:"Nhập các đáp án mong muốn mô tả sự khác biệt",highlight:!0},{text:"Thêm giải thích cho từng điểm khác biệt"}],tips:["Chọn hình có sự khác biệt rõ ràng nhưng không quá dễ phát hiện"]}),r(s,{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-blue-500 via-indigo-500 to-purple-500"}),e(d,{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-blue-500 to-indigo-600 shadow-md",children:e(D,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(c,{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-blue-100 px-3 py-1 text-sm font-medium text-blue-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",ye]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(m,{variant:"outline",size:"sm",onClick:()=>Ue(!0),disabled:!oe||0===me.filter(e=>e.trim()).length,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(E,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(s,Q?{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(d,{className:"pb-4",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-100",children:e(V,{className:"h-3.5 w-3.5 text-amber-600"})}),e(c,{className:"text-lg font-semibold text-gray-800",children:"Hình ảnh so sánh"})]})}),e(l,{className:"space-y-4",children:r("div",{className:"space-y-6",children:[r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:["📷 Candidate's Copy Image ",e("span",{className:"text-red-500",children:"*"})]}),e(N,{id:`candidate-img-group-${ye}`,label:"",accept:"image/*",value:X||"",onChange:e=>Z(e),maxSize:5,placeholder:"Upload Candidate's Copy",autoUpload:!0,prefix:"questions/compare-images"}),X&&e(G,{imageUrl:X,label:"Candidate's Copy"}),!X&&r("div",{className:`flex flex-col items-center justify-center rounded-xl border-2 border-dashed ${ae.candidate?"border-red-300 bg-red-50/50":"border-amber-200 bg-amber-50/50"} py-6 px-4 text-center`,children:[e(V,{className:`h-8 w-8 ${ae.candidate?"text-red-400":"text-amber-400"} mb-2`}),e("p",{className:"text-xs text-gray-500",children:"Hình ảnh dành cho thí sinh"})]}),ae.candidate&&e("p",{className:"text-sm font-medium text-destructive",children:ae.candidate})]}),r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:["📷 Examiner's Copy Image ",e("span",{className:"text-red-500",children:"*"})]}),e(N,{id:`examiner-img-group-${ye}`,label:"",accept:"image/*",value:Y||"",onChange:e=>ee(e),maxSize:5,placeholder:"Upload Examiner's Copy",autoUpload:!0,prefix:"questions/compare-images"}),Y&&e(G,{imageUrl:Y,label:"Examiner's Copy"}),!Y&&r("div",{className:`flex flex-col items-center justify-center rounded-xl border-2 border-dashed ${ae.examiner?"border-red-300 bg-red-50/50":"border-orange-200 bg-orange-50/50"} py-6 px-4 text-center`,children:[e(V,{className:`h-8 w-8 ${ae.examiner?"text-red-400":"text-orange-400"} mb-2`}),e("p",{className:"text-xs text-gray-500",children:"Hình ảnh dành cho giám khảo"})]}),ae.examiner&&e("p",{className:"text-sm font-medium text-destructive",children:ae.examiner})]})]})})]}:{className:"overflow-hidden border-0 bg-white shadow shadow-amber-100/30",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(d,{className:"pb-3",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-100",children:e(V,{className:"h-3.5 w-3.5 text-amber-600"})}),r("div",{className:"flex-1",children:[r("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-lg font-semibold text-gray-800",children:"Hình ảnh so sánh"}),r("span",{className:"inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500",children:["Nhóm ",ye," — Chỉ đọc"]})]}),e("p",{className:"text-xs text-gray-400 mt-0.5",children:"Được quản lý bởi câu hỏi đầu tiên trong nhóm"})]})]})}),e(l,{className:"pt-0",children:X||Y?r("div",{className:"space-y-4",children:[X&&r("div",{className:"space-y-2",children:[e("div",{className:"flex justify-center",children:e("span",{className:"inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50",children:"Candidate's Copy"})}),e(G,{imageUrl:X,label:"Candidate's Copy"})]}),Y&&r("div",{className:"space-y-2",children:[e("div",{className:"flex justify-center",children:e("span",{className:"inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50",children:"Examiner's Copy"})}),e(G,{imageUrl:Y,label:"Examiner's Copy"})]})]}):e("div",{className:"text-center py-4 text-sm text-gray-400 italic",children:"Chưa có hình ảnh nào trong nhóm"})})]}),r(p,{...ie,children:[r(s,{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(d,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(S,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(c,{className:"text-lg font-semibold text-gray-800",children:"Câu hỏi Nghe & So sánh"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nghe âm thanh và nói điểm khác biệt giữa hai hình ảnh"})]})]})}),r(l,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:r("div",{className:"flex flex-col md:flex-row gap-6",children:[e("div",{className:"flex-1",children:e(v,{...ie.register("points",{valueAsNumber:!0}),error:ie.formState.errors?.points?.message})}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(j,{className:"h-4 w-4 text-indigo-500"}),"Âm thanh câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(x,{control:ne,name:"audioUrl",render:({field:a})=>r(f,{children:[e(u,{children:e(N,{id:`audio-compare-${we}`,label:"",accept:"audio/*",value:a.value,onChange:e=>{a.onChange(e),ce("audioUrl")},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"listen-and-speak"})}),e(b,{})]})})]})]})]}),r(s,{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-500"}),e(d,{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-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm",children:e(q,{className:"h-4 w-4 text-white"})}),e("div",{children:r(c,{className:"text-lg font-semibold text-gray-800",children:["Đáp án mong muốn (",me.filter(e=>e.trim()).length,")"]})})]}),r(m,{type:"button",variant:"outline",size:"sm",onClick:()=>{const e=ie.getValues("expectedAnswers");ie.setValue("expectedAnswers",[...e,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(I,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(l,{className:"space-y-4",children:[r("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(H,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),r("div",{className:"text-xs text-blue-700 space-y-1",children:[e("p",{children:"Nhập các câu trả lời mong muốn. Có thể thêm nhiều đáp án nếu có nhiều cách trả lời đúng."}),r("p",{children:[e("span",{className:"font-semibold",children:"• Chấm thủ công:"})," Giáo viên dùng các đáp án này làm tham khảo để chấm điểm."]}),r("p",{children:[e("span",{className:"font-semibold",children:"• Chấm tự động (AI):"})," Hệ thống dùng AI so sánh giọng nói của học sinh với các đáp án để tự động chấm điểm."]})]})]}),r("div",{className:"space-y-3",children:[me.map((a,t)=>r("div",{className:"flex items-start gap-3 group/answer",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm",children:t+1}),r("div",{className:"flex-1",children:[e(h,{placeholder:"VD: "+(0===t?"The tree is bigger in picture A":"The dog is brown in picture B"),value:a||"",onChange:e=>((e,r)=>{const a=[...me];a[e]=r,ie.setValue("expectedAnswers",a,{shouldValidate:!0,shouldDirty:!0})})(t,e.target.value),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),ie.formState.errors?.expectedAnswers?.[t]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:ie.formState.errors.expectedAnswers[t]?.message})]}),me.length>1&&e(m,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(me.length>1){const r=me.filter((r,a)=>a!==e);ie.setValue("expectedAnswers",r,{shouldValidate:!0,shouldDirty:!0})}})(t),className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity",children:e(A,{className:"h-4 w-4"})})]},t)),ie.formState.errors?.expectedAnswers&&!Array.isArray(ie.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:ie.formState.errors.expectedAnswers.message})]})]})]}),r(s,{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(d,{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(B,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(c,{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(l,{children:e(g,{...ie.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none",rows:3})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { PointsInput } from '../../../../components/ui/points-input';
+// Stores & hooks
+import { useCompareImagesGroup } from '../../_shared/hooks/useCompareImagesGroup';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { listenAndSpeakCompareImagesSchema } from '../../../../shared/lib/validation/listen-and-speak-compare-images.validation';
+// Icons
+import { Plus, Trash2, Mic, Volume2, ImageIcon, MessageSquareText, ListChecks, BookOpen, Eye, Pencil, Info } from 'lucide-react';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { ListenAndSpeakCompareImagesClient } from './ListenAndSpeakCompareImagesClient';
+// ─── Sub-component: Image preview with presigned URL ─────────────────────────
+function ImagePreview({ imageUrl, label }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsx("div", { className: "mt-2 rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm", children: _jsx("img", { src: previewUrl, alt: label, className: "h-72 w-full object-contain bg-gray-50 p-2" }) }));
+}
+export function ListenAndSpeakCompareImagesCreator({ questionIndex, initialData, onChange, onUnsavedChangesChange, validationRef, isFirstInGroup: isFirstInGroupProp, partId, groups, questionIndexInPart, }) {
+    // ---------------------------------------------------------------
+    // Determine if this is the first question in the group
+    // ---------------------------------------------------------------
+    const isFirstInGroup = useMemo(() => {
+        if (isFirstInGroupProp !== undefined)
+            return isFirstInGroupProp;
+        if (!groups || !groups.length || questionIndexInPart === undefined)
+            return true;
+        let cumulative = 0;
+        for (const group of groups) {
+            if (questionIndexInPart === cumulative)
+                return true;
+            cumulative += group.questionCount;
+        }
+        return false;
+    }, [isFirstInGroupProp, groups, questionIndexInPart]);
+    // ---------------------------------------------------------------
+    // 1. Group level state (Shared Compare Images)
+    // ---------------------------------------------------------------
+    const computedGroupNumber = useMemo(() => {
+        if (groups && groups.length > 0) {
+            if (questionIndexInPart === undefined)
+                return 1;
+            let cumulative = 0;
+            for (let i = 0; i < groups.length; i++) {
+                if (questionIndexInPart < cumulative + groups[i].questionCount) {
+                    return i + 1;
+                }
+                cumulative += groups[i].questionCount;
+            }
+            return 1;
+        }
+        // Fallback: use groupNumber from initialData when groups prop is not yet available
+        const apiData = initialData;
+        return apiData?.groupNumber ?? apiData?.questionGroup?.groupNumber ?? undefined;
+    }, [groups, questionIndexInPart, initialData]);
+    const apiData = initialData;
+    const { candidateImageUrl, examinerImageUrl, updateCandidateImage, updateExaminerImage, isValid: isGroupHookValid, } = useCompareImagesGroup(partId, computedGroupNumber, {
+        candidateImageUrl: apiData?.candidateImageUrl,
+        examinerImageUrl: apiData?.examinerImageUrl,
+    });
+    // Group image validation errors (inline under each input)
+    const [groupImageErrors, setGroupImageErrors] = useState({});
+    // ---------------------------------------------------------------
+    // 2. Question level form data
+    // ---------------------------------------------------------------
+    const form = useReactHookForm({
+        zodSchema: listenAndSpeakCompareImagesSchema,
+        defaultValues: {
+            candidateImageUrl: apiData?.candidateImageUrl || candidateImageUrl || '',
+            examinerImageUrl: apiData?.examinerImageUrl || examinerImageUrl || '',
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        },
+    });
+    const { control, watch, setValue, trigger, clearErrors } = form;
+    const watchedAudioUrl = watch('audioUrl');
+    const watchedExpectedAnswers = watch('expectedAnswers');
+    const watchedPoints = watch('points');
+    const watchedExplanation = watch('explanation');
+    const watchedIsBackup = watch('isBackup');
+    // ---------------------------------------------------------------
+    // Refs to prevent infinite loops
+    // ---------------------------------------------------------------
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ---------------------------------------------------------------
+    // Connect to external validation trigger
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    // If first in group, also validate that images are set
+                    if (isFirstInGroup) {
+                        const hasCandidate = !!candidateImageUrl;
+                        const hasExaminer = !!examinerImageUrl;
+                        const errors = {};
+                        if (!hasCandidate)
+                            errors.candidate = "Vui lòng tải lên Candidate's Copy Image!";
+                        if (!hasExaminer)
+                            errors.examiner = "Vui lòng tải lên Examiner's Copy Image!";
+                        setGroupImageErrors(errors);
+                        if (!hasCandidate || !hasExaminer) {
+                            // Also trigger form validation to show other errors
+                            await trigger();
+                            return false;
+                        }
+                    }
+                    else {
+                        setGroupImageErrors({});
+                    }
+                    return await trigger();
+                },
+                getFormData: () => ({
+                    ...form.getValues(),
+                    candidateImageUrl: candidateImageUrl || '',
+                    examinerImageUrl: examinerImageUrl || '',
+                    groupNumber: isFirstInGroup ? displayGroupNumber : undefined,
+                }),
+            };
+        }
+    }, [validationRef, form, trigger, isFirstInGroup, candidateImageUrl, examinerImageUrl, setGroupImageErrors]);
+    // Clear group image errors when images are uploaded
+    useEffect(() => {
+        if (candidateImageUrl && groupImageErrors.candidate) {
+            setGroupImageErrors(prev => ({ ...prev, candidate: undefined }));
+        }
+        if (examinerImageUrl && groupImageErrors.examiner) {
+            setGroupImageErrors(prev => ({ ...prev, examiner: undefined }));
+        }
+    }, [candidateImageUrl, examinerImageUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ---------------------------------------------------------------
+    // Sync form values if initialData props change
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        const normalizedInitialData = {
+            candidateImageUrl: apiData?.candidateImageUrl || '',
+            examinerImageUrl: apiData?.examinerImageUrl || '',
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved)
+            return;
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                JSON.stringify(normalizedInitialData.expectedAnswers) !== JSON.stringify(currentFormData.expectedAnswers));
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedAudioUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedIsBackup]);
+    // ---------------------------------------------------------------
+    // Fire onChange when form values change
+    // ---------------------------------------------------------------
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                expectedAnswers: watchedExpectedAnswers,
+                points: watchedPoints,
+                explanation: watchedExplanation,
+                isBackup: watchedIsBackup,
+                candidateImageUrl,
+                examinerImageUrl,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+            candidateImageUrl,
+            examinerImageUrl,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedExpectedAnswersString,
+        watchedPoints,
+        watchedExplanation,
+        watchedIsBackup,
+        candidateImageUrl,
+        examinerImageUrl,
+        debouncedOnChange,
+    ]);
+    // Track unsaved changes
+    useEffect(() => {
+        if (onUnsavedChangesChange) {
+            onUnsavedChangesChange(form.formState.isDirty);
+        }
+    }, [form.formState.isDirty, onUnsavedChangesChange]);
+    // ---------------------------------------------------------------
+    // Handlers
+    // ---------------------------------------------------------------
+    const addExpectedAnswer = () => {
+        const currentAnswers = form.getValues('expectedAnswers');
+        form.setValue('expectedAnswers', [...currentAnswers, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const handleExpectedAnswerChange = (index, value) => {
+        const newAnswers = [...watchedExpectedAnswers];
+        newAnswers[index] = value;
+        form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+    };
+    const removeExpectedAnswer = (index) => {
+        if (watchedExpectedAnswers.length > 1) {
+            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    // Compute display question number safely
+    const displayQuestionNumber = typeof questionIndex === 'number' && !isNaN(questionIndex)
+        ? questionIndex + 1
+        : (typeof questionIndexInPart === 'number' && !isNaN(questionIndexInPart)
+            ? questionIndexInPart + 1
+            : '?');
+    // Compute group number for display (reuse the computed group number)
+    const displayGroupNumber = computedGroupNumber ?? 1;
+    // ---------------------------------------------------------------
+    // Preview mode
+    // ---------------------------------------------------------------
+    const [isClientMode, setIsClientMode] = useState(false);
+    if (isClientMode) {
+        const questionData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            isBackup: watchedIsBackup,
+            groupNumber: displayGroupNumber,
+            candidateImageUrl: candidateImageUrl || '',
+            examinerImageUrl: examinerImageUrl || '',
+        };
+        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 n\u00F3i \u2014 So s\u00E1nh h\u00ECnh \u1EA3nh (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Preview mode" })] }), _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(ListenAndSpeakCompareImagesClient, { questionData: questionData, isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Upload 2 hình ảnh so sánh: Hình thí sinh (Candidate) và Hình giám khảo (Examiner) — dùng chung cho nhóm' },
+                    { text: 'Câu hỏi đầu tiên trong nhóm sẽ quản lý hình ảnh chung, các câu sau tham chiếu' },
+                    { text: 'Upload audio câu hỏi cho từng câu — giám khảo hỏi về sự khác biệt giữa 2 hình' },
+                    { text: 'Nhập các đáp án mong muốn mô tả sự khác biệt', highlight: true },
+                    { text: 'Thêm giải thích cho từng điểm khác biệt' },
+                ], tips: ['Chọn hình có sự khác biệt rõ ràng nhưng không quá dễ phát hiện'] }), _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-blue-500 via-indigo-500 to-purple-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-blue-500 to-indigo-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-blue-100 px-3 py-1 text-sm font-medium text-blue-700", children: [_jsx("span", { children: "\uD83D\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", displayGroupNumber] }), _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: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), isFirstInGroup ? (_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-2", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "H\u00ECnh \u1EA3nh so s\u00E1nh" })] }) }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: ["\uD83D\uDCF7 Candidate's Copy Image ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: `candidate-img-group-${displayGroupNumber}`, label: "", accept: "image/*", value: candidateImageUrl || '', onChange: (url) => updateCandidateImage(url), maxSize: 5, placeholder: "Upload Candidate's Copy", autoUpload: true, prefix: "questions/compare-images" }), candidateImageUrl && (_jsx(ImagePreview, { imageUrl: candidateImageUrl, label: "Candidate's Copy" })), !candidateImageUrl && (_jsxs("div", { className: `flex flex-col items-center justify-center rounded-xl border-2 border-dashed ${groupImageErrors.candidate ? 'border-red-300 bg-red-50/50' : 'border-amber-200 bg-amber-50/50'} py-6 px-4 text-center`, children: [_jsx(ImageIcon, { className: `h-8 w-8 ${groupImageErrors.candidate ? 'text-red-400' : 'text-amber-400'} mb-2` }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u00ECnh \u1EA3nh d\u00E0nh cho th\u00ED sinh" })] })), groupImageErrors.candidate && (_jsx("p", { className: "text-sm font-medium text-destructive", children: groupImageErrors.candidate }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: ["\uD83D\uDCF7 Examiner's Copy Image ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: `examiner-img-group-${displayGroupNumber}`, label: "", accept: "image/*", value: examinerImageUrl || '', onChange: (url) => updateExaminerImage(url), maxSize: 5, placeholder: "Upload Examiner's Copy", autoUpload: true, prefix: "questions/compare-images" }), examinerImageUrl && (_jsx(ImagePreview, { imageUrl: examinerImageUrl, label: "Examiner's Copy" })), !examinerImageUrl && (_jsxs("div", { className: `flex flex-col items-center justify-center rounded-xl border-2 border-dashed ${groupImageErrors.examiner ? 'border-red-300 bg-red-50/50' : 'border-orange-200 bg-orange-50/50'} py-6 px-4 text-center`, children: [_jsx(ImageIcon, { className: `h-8 w-8 ${groupImageErrors.examiner ? 'text-red-400' : 'text-orange-400'} mb-2` }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u00ECnh \u1EA3nh d\u00E0nh cho gi\u00E1m kh\u1EA3o" })] })), groupImageErrors.examiner && (_jsx("p", { className: "text-sm font-medium text-destructive", children: groupImageErrors.examiner }))] })] }) })] })) : (
+            /* Read-only view of shared images for non-first questions in group */
+            _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow shadow-amber-100/30", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "H\u00ECnh \u1EA3nh so s\u00E1nh" }), _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500", children: ["Nh\u00F3m ", displayGroupNumber, " \u2014 Ch\u1EC9 \u0111\u1ECDc"] })] }), _jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "\u0110\u01B0\u1EE3c qu\u1EA3n l\u00FD b\u1EDFi c\u00E2u h\u1ECFi \u0111\u1EA7u ti\u00EAn trong nh\u00F3m" })] })] }) }), _jsx(CardContent, { className: "pt-0", children: candidateImageUrl || examinerImageUrl ? (_jsxs("div", { className: "space-y-4", children: [candidateImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50", children: "Candidate's Copy" }) }), _jsx(ImagePreview, { imageUrl: candidateImageUrl, label: "Candidate's Copy" })] })), examinerImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50", children: "Examiner's Copy" }) }), _jsx(ImagePreview, { imageUrl: examinerImageUrl, label: "Examiner's Copy" })] }))] })) : (_jsx("div", { className: "text-center py-4 text-sm text-gray-400 italic", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh n\u00E0o trong nh\u00F3m" })) })] })), _jsxs(Form, { ...form, children: [_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-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi Nghe & So s\u00E1nh" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe \u00E2m thanh v\u00E0 n\u00F3i \u0111i\u1EC3m kh\u00E1c bi\u1EC7t gi\u1EEFa hai h\u00ECnh \u1EA3nh" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "\u00C2m thanh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: `audio-compare-${displayQuestionNumber}`, label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _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-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-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsx("div", { children: _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] }) })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'The tree is bigger in picture A' : 'The dog is brown in picture B'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+}