@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/image-object-matching/register.js

@@ -1 +1,3 @@
-import{ImageObjectMatchingCreator as t}from"./ImageObjectMatchingCreator";import{createColorRegionRegistration as e}from"../../_shared/utils/createColorRegionRegistration";export const imageObjectMatchingRegistration=e(t);
+import { ImageObjectMatchingCreator } from './ImageObjectMatchingCreator';
+import { createColorRegionRegistration } from '../../_shared/utils/createColorRegionRegistration';
+export const imageObjectMatchingRegistration = createColorRegionRegistration(ImageObjectMatchingCreator);

package/dist/components/questions/types/image-object-matching/transform.js

@@ -1 +1,2 @@
-export{transformReadAndColorObjects as transformImageObjectMatching}from"../read-and-color-objects/transform";
+// IMAGE_OBJECT_MATCHING reuses the same transform as READ_AND_COLOR_OBJECTS
+export { transformReadAndColorObjects as transformImageObjectMatching } from '../read-and-color-objects/transform';

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

@@ -1 +1,102 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as l,useRef as s}from"react";import{cn as n}from"../../../../shared/lib/utils";import{Input as a}from"../../../../components/ui/input";import{Lightbulb as d}from"lucide-react";import{usePresignedFileUrl as i}from"../../../../shared/lib/hooks";export function LabelThePictureClient({questionData:o,userAnswer:c={},isReviewMode:m=!1,explanation:g,onSubmit:h}){const{imageUrl:b,wordBank:u,labels:x}=o,p=x.reduce((e,r)=>(r.isPreFilled&&r.correctAnswer&&(e[r.id]=r.correctAnswer),e),{}),[f,v]=t(c||p),N=s(""),w=s("");l(()=>{const e=JSON.stringify(c||{}),r=JSON.stringify(x);if(N.current===e&&w.current===r)return;N.current=e,w.current=r;const t=x.reduce((e,r)=>(r.isPreFilled&&r.correctAnswer&&(e[r.id]=r.correctAnswer),e),{});if(c&&Object.keys(c).length>0){const e={...t,...c};v(e)}else v(t)},[c,x]);const{previewUrl:y,isLoading:k,error:j}=i(b);console.log("🖼️ LabelThePictureClient image debug:",{inputImageUrl:b,previewUrl:y,isLoadingUrl:k,urlError:j,finalSrc:y||b});const L=[...x].sort((e,r)=>e.number-r.number);return r("div",{className:"space-y-5",children:[e("div",{className:"flex items-center justify-between",children:r("div",{children:[e("h2",{className:"text-lg font-semibold text-gray-900",children:"Label the Picture"}),e("p",{className:"text-sm text-gray-500",children:"Nhìn tranh và điền từ vào các vị trí tương ứng"})]})}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg",children:[e("div",{className:"border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-2.5 w-2.5 rounded-full bg-red-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-yellow-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-green-400"}),e("span",{className:"ml-3 text-sm font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex justify-center bg-gradient-to-br from-slate-50 to-gray-100 p-4",children:r("div",{className:"relative max-h-[400px] w-full max-w-2xl overflow-hidden rounded-lg",children:[k&&e("div",{className:"flex h-64 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"})}),k||!y&&!b?r("div",{className:"flex h-64 flex-col items-center justify-center gap-3 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200",children:[e("svg",{className:"h-16 w-16 text-gray-300",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})}),e("p",{className:"text-gray-400 font-medium",children:"Chưa có hình ảnh"})]}):e("img",{src:y||b,alt:"Label the picture",className:"h-full w-full object-contain",onError:e=>{console.error("Failed to load image:",b,"previewUrl:",y);const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})]})})]}),u.length>0&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-2.5",children:[e("svg",{className:"h-5 w-5 text-amber-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"})}),e("h3",{className:"text-sm font-semibold text-gray-800",children:"Word Bank"})]}),e("div",{className:"p-4",children:e("div",{className:"flex flex-wrap gap-2",children:u.map((t,l)=>{const s=x.some(e=>e.isPreFilled&&e.correctAnswer===t),a=Object.values(f).includes(t);return r("div",{className:n("flex items-center gap-1.5 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-all",s?"border-blue-300 bg-blue-50 text-blue-700":a?"border-green-300 bg-green-50 text-green-700":"border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:shadow-sm"),children:[t,s&&e("span",{className:"rounded bg-blue-200 px-1 py-0.5 text-xs",children:"sẵn"}),a&&!s&&e("span",{className:"rounded bg-green-200 px-1 py-0.5 text-xs",children:"✓"})]},l)})})})]}),r("div",{className:"space-y-4",children:[r("div",{className:"flex items-center gap-2",children:[e("svg",{className:"h-5 w-5 text-blue-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"})}),e("h3",{className:"text-sm font-semibold text-gray-800",children:"Điền từ vào các vị trí"})]}),e("div",{className:"grid gap-3 sm:grid-cols-2 lg:grid-cols-3",children:L.map(t=>{const l=f[t.id]||"",s=t.correctAnswer.trim().toLowerCase(),d=l.trim().toLowerCase(),i=m&&d===s&&""!==l.trim(),o=m&&""!==l.trim()&&d!==s,c=t.isPreFilled||!1;return r("div",{className:n("group overflow-hidden rounded-xl border bg-white shadow-sm transition-all hover:shadow-md",c&&"border-blue-300 bg-blue-50/30",m&&i&&!c&&"border-green-400 bg-green-50/50",m&&o&&!c&&"border-red-400 bg-red-50/50",!m&&!c&&"border-gray-200"),children:[r("div",{className:n("flex items-center justify-between px-4 py-2",c?"bg-blue-100/50":"bg-gray-50"),children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:n("flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm",c?"bg-blue-500":i?"bg-green-500":o?"bg-red-500":"bg-gradient-to-br from-blue-500 to-indigo-600"),children:t.number}),r("span",{className:"text-sm font-medium text-gray-700",children:["Vị trí ",t.number]})]}),c&&e("span",{className:"rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600",children:"Điền sẵn"}),m&&i&&!c&&e("span",{className:"rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-600",children:"✓ Đúng"}),m&&o&&!c&&e("span",{className:"rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-600",children:"✗ Sai"})]}),r("div",{className:"p-4",children:[e(a,{value:l,onChange:e=>((e,r)=>{if(m)return;const t={...f,[e]:r};v(t),h?.(t)})(t.id,e.target.value),readOnly:m||c,placeholder:c?"":"Nhập từ...",className:n("w-full text-center font-semibold",c&&"bg-blue-50 border-blue-200 cursor-not-allowed",i&&!c&&"bg-green-50 border-green-300",o&&!c&&"bg-red-50 border-red-300")}),m&&o&&!c&&r("div",{className:"mt-2 rounded-lg bg-green-50 p-2 flex items-center justify-center gap-1.5 border border-green-200",children:[e("span",{className:"text-xs text-green-600",children:"Đáp án:"}),e("span",{className:"text-sm font-bold text-green-700",children:t.correctAnswer})]})]})]},t.id)})})]}),m&&g&&e("div",{className:"rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(d,{className:"h-3.5 w-3.5"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:g})]})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '../../../../shared/lib/utils';
+import { Input } from '../../../../components/ui/input';
+import { Lightbulb } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+export function LabelThePictureClient({ questionData, userAnswer = {}, isReviewMode = false, explanation, onSubmit, }) {
+    const { imageUrl, wordBank, labels } = questionData;
+    // Initialize answers with pre-filled values
+    const initialAnswers = labels.reduce((acc, label) => {
+        if (label.isPreFilled && label.correctAnswer) {
+            acc[label.id] = label.correctAnswer;
+        }
+        return acc;
+    }, {});
+    const [answers, setAnswers] = useState(userAnswer || initialAnswers);
+    // Use refs to track previous values and prevent infinite loops
+    const previousUserAnswerRef = useRef('');
+    const previousLabelsRef = useRef('');
+    useEffect(() => {
+        // Serialize current values for comparison
+        const currentUserAnswerStr = JSON.stringify(userAnswer || {});
+        const currentLabelsStr = JSON.stringify(labels);
+        // Only update if values actually changed
+        if (previousUserAnswerRef.current === currentUserAnswerStr &&
+            previousLabelsRef.current === currentLabelsStr) {
+            return;
+        }
+        // Update refs
+        previousUserAnswerRef.current = currentUserAnswerStr;
+        previousLabelsRef.current = currentLabelsStr;
+        // Re-calculate pre-filled answers
+        const preFilledAnswers = labels.reduce((acc, label) => {
+            if (label.isPreFilled && label.correctAnswer) {
+                acc[label.id] = label.correctAnswer;
+            }
+            return acc;
+        }, {});
+        if (userAnswer && Object.keys(userAnswer).length > 0) {
+            // Merge user answers with pre-filled values
+            const mergedAnswers = { ...preFilledAnswers, ...userAnswer };
+            setAnswers(mergedAnswers);
+        }
+        else {
+            // Initialize with pre-filled values if no user answer
+            setAnswers(preFilledAnswers);
+        }
+    }, [userAnswer, labels]);
+    const handleAnswerChange = (labelId, value) => {
+        if (isReviewMode)
+            return;
+        const newAnswers = {
+            ...answers,
+            [labelId]: value,
+        };
+        setAnswers(newAnswers);
+        onSubmit?.(newAnswers);
+    };
+    const { previewUrl, isLoading: isLoadingUrl, error: urlError } = usePresignedFileUrl(imageUrl);
+    // Debug logging
+    console.log('🖼️ LabelThePictureClient image debug:', {
+        inputImageUrl: imageUrl,
+        previewUrl,
+        isLoadingUrl,
+        urlError,
+        finalSrc: previewUrl || imageUrl,
+    });
+    // Sort labels by number
+    const sortedLabels = [...labels].sort((a, b) => a.number - b.number);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Label the Picture" }), _jsx("p", { className: "text-sm text-gray-500", children: "Nh\u00ECn tranh v\u00E0 \u0111i\u1EC1n t\u1EEB v\u00E0o c\u00E1c v\u1ECB tr\u00ED t\u01B0\u01A1ng \u1EE9ng" })] }) }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg", children: [_jsx("div", { className: "border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-red-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-green-400" }), _jsx("span", { className: "ml-3 text-sm font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex justify-center bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "relative max-h-[400px] w-full max-w-2xl overflow-hidden rounded-lg", children: [isLoadingUrl && (_jsx("div", { className: "flex h-64 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })), !isLoadingUrl && (previewUrl || imageUrl) ? (
+                                /* eslint-disable-next-line @next/next/no-img-element */
+                                _jsx("img", { src: previewUrl || imageUrl, alt: "Label the picture", className: "h-full w-full object-contain", onError: (e) => {
+                                        console.error('Failed to load image:', imageUrl, 'previewUrl:', previewUrl);
+                                        // Replace with default placeholder
+                                        const target = e.target;
+                                        target.onerror = null; // Prevent infinite loop
+                                        target.src = '/images/placeholder-image.svg';
+                                    } })) : (_jsxs("div", { className: "flex h-64 flex-col items-center justify-center gap-3 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200", children: [_jsx("svg", { className: "h-16 w-16 text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-gray-400 font-medium", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh" })] }))] }) })] }), wordBank.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-2.5", children: [_jsx("svg", { className: "h-5 w-5 text-amber-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), _jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "Word Bank" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
+                                const isUsedAsPreFilled = labels.some((label) => label.isPreFilled && label.correctAnswer === word);
+                                const isUsedByUser = Object.values(answers).includes(word);
+                                return (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-all', isUsedAsPreFilled
+                                        ? 'border-blue-300 bg-blue-50 text-blue-700'
+                                        : isUsedByUser
+                                            ? 'border-green-300 bg-green-50 text-green-700'
+                                            : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:shadow-sm'), children: [word, isUsedAsPreFilled && (_jsx("span", { className: "rounded bg-blue-200 px-1 py-0.5 text-xs", children: "s\u1EB5n" })), isUsedByUser && !isUsedAsPreFilled && (_jsx("span", { className: "rounded bg-green-200 px-1 py-0.5 text-xs", children: "\u2713" }))] }, index));
+                            }) }) })] })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-5 w-5 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }), _jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o c\u00E1c v\u1ECB tr\u00ED" })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: sortedLabels.map((label) => {
+                            const userAnswerValue = answers[label.id] || '';
+                            const correctAnswer = label.correctAnswer.trim().toLowerCase();
+                            const userAnswerLower = userAnswerValue.trim().toLowerCase();
+                            const isCorrect = isReviewMode && userAnswerLower === correctAnswer && userAnswerValue.trim() !== '';
+                            const isWrong = isReviewMode && userAnswerValue.trim() !== '' && userAnswerLower !== correctAnswer;
+                            const isPreFilled = label.isPreFilled || false;
+                            return (_jsxs("div", { className: cn('group overflow-hidden rounded-xl border bg-white shadow-sm transition-all hover:shadow-md', isPreFilled && 'border-blue-300 bg-blue-50/30', isReviewMode && isCorrect && !isPreFilled && 'border-green-400 bg-green-50/50', isReviewMode && isWrong && !isPreFilled && 'border-red-400 bg-red-50/50', !isReviewMode && !isPreFilled && 'border-gray-200'), children: [_jsxs("div", { className: cn('flex items-center justify-between px-4 py-2', isPreFilled ? 'bg-blue-100/50' : 'bg-gray-50'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm', isPreFilled
+                                                            ? 'bg-blue-500'
+                                                            : isCorrect
+                                                                ? 'bg-green-500'
+                                                                : isWrong
+                                                                    ? 'bg-red-500'
+                                                                    : 'bg-gradient-to-br from-blue-500 to-indigo-600'), children: label.number }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["V\u1ECB tr\u00ED ", label.number] })] }), isPreFilled && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600", children: "\u0110i\u1EC1n s\u1EB5n" })), isReviewMode && isCorrect && !isPreFilled && (_jsx("span", { className: "rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-600", children: "\u2713 \u0110\u00FAng" })), isReviewMode && isWrong && !isPreFilled && (_jsx("span", { className: "rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-600", children: "\u2717 Sai" }))] }), _jsxs("div", { className: "p-4", children: [_jsx(Input, { value: userAnswerValue, onChange: (e) => handleAnswerChange(label.id, e.target.value), readOnly: isReviewMode || isPreFilled, placeholder: isPreFilled ? '' : 'Nhập từ...', className: cn('w-full text-center font-semibold', isPreFilled && 'bg-blue-50 border-blue-200 cursor-not-allowed', isCorrect && !isPreFilled && 'bg-green-50 border-green-300', isWrong && !isPreFilled && 'bg-red-50 border-red-300') }), isReviewMode && isWrong && !isPreFilled && (_jsxs("div", { className: "mt-2 rounded-lg bg-green-50 p-2 flex items-center justify-center gap-1.5 border border-green-200", children: [_jsx("span", { className: "text-xs text-green-600", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "text-sm font-bold text-green-700", children: label.correctAnswer })] }))] })] }, label.id));
+                        }) })] }), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
+}

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

@@ -1 +1,344 @@
-"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 l}from"../../../../components/ui/button";import{Label as s}from"../../../../components/ui/label";import{Input as i}from"../../../../components/ui/input";import{Textarea as o}from"../../../../components/ui/textarea";import{Card as d,CardContent as c,CardHeader as m,CardTitle as h}from"../../../../components/ui/card";import{PointsInput as g}from"../../../../components/ui/points-input";import{Pencil as u,Eye as b,Plus as p,X as f,Image as x,Lightbulb as N,Tags as v,BookOpen as w}from"lucide-react";import{FileUpload as y}from"../../../../components/ui/file-upload";import{Select as k,SelectContent as C,SelectItem as B,SelectTrigger as U,SelectValue as j}from"../../../../components/ui/select";import{LabelThePictureClient as E}from"./LabelThePictureClient";import{usePresignedFileUrl as A}from"../../../../shared/lib/hooks";import{useReactHookForm as T}from"../../../../shared/lib/hooks/useReactHookForm";import{labelThePictureFormSchema as I}from"../../../../shared/lib/validation/label-the-picture.validation";function P({initialData:P,onSave:S,onCancel:z,onChange:D,onUnsavedChangesChange:V,validationRef:F}){const L=()=>P?.content?.imageUrl?P.content.imageUrl:P?.imageUrl||"",q=()=>P?.content?.wordBank&&Array.isArray(P.content.wordBank)?P.content.wordBank:P?.wordBank||[],H=()=>P?.content?.labels&&Array.isArray(P.content.labels)?P.content.labels:P?.labels||[],$=()=>P?.points||1,M=()=>P?.explanation||"",[R,G]=t(L()),[W,J]=t(q()),[O,K]=t(H()),[Q,X]=t($()),[Y,Z]=t(M()),_=T({defaultValues:{imageUrl:R,wordBank:W,labels:O},zodSchema:I,mode:"onBlur"}),ee=a(P),re=a(!0),te=a(D),ae=a(!1);n(()=>{te.current=D},[D]),n(()=>{F&&(F.current={triggerValidation:async()=>ce(),getFormData:()=>({imageUrl:R,wordBank:W,labels:O,points:Q,explanation:Y})})},[F,R,W,O,Q,Y]);const[ne,le]=t(""),{previewUrl:se}=A(R);n(()=>{se&&le(se)},[se]),n(()=>{if(!P)return void(ae.current||(ae.current=!0,re.current=!1));const e=JSON.stringify(ee.current)!==JSON.stringify(P);console.log("🏷️ LabelThePictureCreator useEffect:",{initialDataChanged:e,hasInitialized:ae.current,initialData:P,previousData:ee.current});const r=!ae.current,t=e&&void 0===ee.current;r||t?(re.current=!0,ee.current=P,ae.current=!0,console.log("🏷️ LabelThePictureCreator - Setting state from initialData:",{imageUrl:L(),wordBank:q(),labels:H()}),G(L()),J(q()),K(H()),X($()),Z(M()),setTimeout(()=>{re.current=!1},150)):ee.current=P},[P]),n(()=>{if(re.current||!ae.current)return;if(!R&&0===W.length&&0===O.length)return;const e={imageUrl:R,wordBank:W,labels:O};e.points=Q,e.explanation=Y,requestAnimationFrame(()=>{te.current?.(e)})},[R,W,O,Q,Y]);const[ie,oe]=t(!1),de=(e,r,t)=>{K(O.map(a=>a.id===e?{...a,[r]:t}:a)),_.clearErrors()},ce=()=>{_.setValue("imageUrl",R),_.setValue("wordBank",W),_.setValue("labels",O);const e=I.safeParse({imageUrl:R,wordBank:W,labels:O});return!!e.success||(e.error.issues.forEach(e=>{const r=e.path.join(".");_.setError(r,{message:e.message})}),!1)},me=(()=>{const e={},r=_.formState.errors.imageUrl;r&&(e.imageUrl=r.message);const t=_.formState.errors.wordBank;t&&"string"==typeof t.message&&(e.wordBank=t.message),e.wordBankItems={},W.forEach((r,t)=>{const a=_.formState.errors.wordBank?.[t];a&&(e.wordBankItems[t]=a.message)});const a=_.formState.errors.labels;return a&&"string"==typeof a.message&&(e.labels=a.message),e.labelItems={},O.forEach((r,t)=>{const a=_.formState.errors.labels?.[t]?.correctAnswer;a&&(e.labelItems[r.id]=a.message)}),e})();if(ie){const t={imageUrl:R,wordBank:W,labels:O},a=O.reduce((e,r)=>(e[r.id]=r.correctAnswer,e),{});return r("div",{className:"space-y-6",children:[e(d,{children:e(m,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Label the Picture (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(l,{variant:"outline",size:"sm",onClick:()=>oe(!1),children:[e(u,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(E,{questionData:t,userAnswer:a,isReviewMode:!0,explanation:Y})]})}return r("div",{className:"space-y-6",children:[r(d,{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(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-blue-500 to-indigo-600 shadow-md",children:e(x,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(h,{className:"text-xl font-bold text-gray-900",children:"Gắn nhãn hình ảnh"}),e("p",{className:"text-sm text-gray-500",children:"Tạo câu hỏi với hình ảnh, word bank và các vị trí cần điền"})]})]}),r(l,{variant:"outline",size:"sm",onClick:()=>{ce()&&oe(!0)},className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(b,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(c,{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:e(g,{defaultValue:Q,onChange:e=>X(Number(e.target.value)||1)})}),e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100",children:e(N,{className:"h-4 w-4 text-blue-600"})}),r("div",{className:"text-sm text-blue-900",children:[e("p",{className:"font-semibold text-blue-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-blue-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Upload hình ảnh cần gắn nhãn"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Thêm các từ vào Word Bank (danh sách từ gợi ý)"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Tạo các vị trí cần điền và chọn đáp án đúng từ Word Bank"]})]})]})]})}),r("div",{className:"space-y-2",children:[r(s,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(x,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh ",e("span",{className:"text-red-500",children:"*"})]}),e(y,{id:"label-picture-image",label:"Hình ảnh",accept:"image/*",value:R,onChange:e=>{G(e),_.clearErrors()},onPresignedUrlChange:e=>{le(e)},maxSize:5,placeholder:"Upload ảnh hoặc paste URL",required:!0,autoUpload:!0,prefix:"questions"}),me.imageUrl&&e("p",{className:"mt-1 text-sm text-red-600",children:me.imageUrl}),ne&&e("div",{className:"relative mt-2 h-64 w-full max-w-2xl overflow-hidden rounded border",children:e("img",{src:ne,alt:"Preview for question",className:"h-full w-full object-contain",onError:()=>{console.error("Failed to load image:",R)}})})]})]})]}),r(d,{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 justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(v,{className:"h-3.5 w-3.5 text-indigo-600"})}),r(h,{className:"text-lg font-semibold text-gray-800",children:["Word Bank ",r("span",{className:"text-sm font-normal text-gray-500",children:["(",W.filter(e=>e.trim()).length," từ)"]})]})]}),r(l,{type:"button",size:"sm",onClick:()=>{J([...W,""]),_.clearErrors()},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",variant:"outline",children:[e(p,{className:"h-4 w-4"}),"Thêm từ"]})]})}),r(c,{className:"space-y-4",children:[me.wordBank&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("span",{className:"text-lg",children:"❌"}),e("p",{className:"text-sm text-red-600",children:me.wordBank})]}),e("div",{className:"grid gap-3 sm:grid-cols-2",children:W.map((t,a)=>r("div",{className:"group relative rounded-xl border-2 p-3 transition-all duration-200 "+(t.trim()?"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50":"border-gray-200 bg-white hover:border-gray-300"),children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all "+(t.trim()?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600"),children:a+1}),e(i,{value:t,onChange:e=>((e,r)=>{const t=[...W];t[e]=r,J(t),_.clearErrors()})(a,e.target.value),placeholder:`Từ ${a+1}`,className:"flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(me.wordBankItems?.[a]?"border-red-400":"")}),e(l,{type:"button",variant:"ghost",size:"icon",onClick:()=>(e=>{J(W.filter((r,t)=>t!==e)),_.clearErrors()})(a),className:"text-gray-400 hover:bg-red-50 hover:text-red-500",children:e(f,{className:"h-4 w-4"})})]}),me.wordBankItems?.[a]&&e("p",{className:"mt-2 ml-11 text-sm text-red-600",children:me.wordBankItems[a]})]},a))}),0===W.length&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("span",{className:"text-lg",children:"⚠️"}),e("p",{className:"text-sm text-amber-800",children:'Chưa có từ nào. Nhấn "Thêm từ" để bắt đầu.'})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-purple-400 to-pink-400"}),e(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-purple-100",children:e(v,{className:"h-3.5 w-3.5 text-purple-600"})}),r(h,{className:"text-lg font-semibold text-gray-800",children:["Vị trí cần điền ",r("span",{className:"text-sm font-normal text-gray-500",children:["(",O.length," vị trí)"]})]})]}),r(l,{type:"button",size:"sm",onClick:()=>{const e=O.length>0?Math.max(...O.map(e=>e.number)):0,r={id:`label-${Date.now()}-${Math.random()}`,number:e+1,correctAnswer:""};K([...O,r]),_.clearErrors()},className:"gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700",variant:"outline",children:[e(p,{className:"h-4 w-4"}),"Thêm vị trí"]})]})}),r(c,{className:"space-y-4",children:[me.labels&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("span",{className:"text-lg",children:"❌"}),e("p",{className:"text-sm text-red-600",children:me.labels})]}),e("div",{className:"space-y-4",children:O.sort((e,r)=>e.number-r.number).map(t=>{const a=t.correctAnswer&&t.correctAnswer.trim();return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(a?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-bold transition-all "+(a?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-purple-100 text-purple-700"),children:t.number}),r("div",{className:"flex-1 space-y-3",children:[r("div",{children:[r(s,{className:"text-sm font-semibold text-gray-700",children:["Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),e("div",{className:"mt-1.5",children:r(k,{value:t.correctAnswer||"",onValueChange:e=>de(t.id,"correctAnswer",e),children:[e(U,{className:"w-full border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(me.labelItems?.[t.id]?"border-red-400":""),children:e(j,{placeholder:"Chọn từ trong word bank"})}),e(C,{children:W.filter(e=>""!==e.trim()).map((r,t)=>e(B,{value:r,children:r},t))})]})}),me.labelItems?.[t.id]&&e("p",{className:"mt-1 text-sm text-red-600",children:me.labelItems[t.id]})]}),r("div",{className:"flex items-center gap-2",children:[e("input",{type:"checkbox",id:`prefilled-${t.id}`,checked:t.isPreFilled||!1,onChange:e=>de(t.id,"isPreFilled",e.target.checked),className:"h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),e(s,{htmlFor:`prefilled-${t.id}`,className:"text-sm font-normal text-gray-600 cursor-pointer",children:"Đánh dấu là từ gợi ý (đã điền sẵn)"})]})]}),e(l,{type:"button",variant:"ghost",size:"icon",onClick:()=>(e=>{K(O.filter(r=>r.id!==e));const r=O.filter(r=>r.id!==e).sort((e,r)=>e.number-r.number);K(r.map((e,r)=>({...e,number:r+1}))),_.clearErrors()})(t.id),className:"text-gray-400 hover:bg-red-50 hover:text-red-500",children:e(f,{className:"h-4 w-4"})})]})},t.id)})}),0===O.length&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("span",{className:"text-lg",children:"⚠️"}),e("p",{className:"text-sm text-amber-800",children:'Chưa có vị trí nào. Nhấn "Thêm vị trí" để bắt đầu.'})]})]})]}),r(d,{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(w,{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(c,{children:e(o,{id:"explanation",value:Y,onChange:e=>Z(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function LabelThePictureCreator(r){return e(P,{...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 { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Pencil, Eye, Plus, X, Image, Lightbulb, Tags, BookOpen } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../../components/ui/select';
+import { LabelThePictureClient } from './LabelThePictureClient';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { labelThePictureFormSchema, } from '../../../../shared/lib/validation/label-the-picture.validation';
+function LabelThePictureCreatorContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, validationRef, }) {
+    // ============ HELPER FUNCTIONS FOR NEW API FORMAT ============
+    // Support NEW API format (content.imageUrl, content.wordBank, content.labels) and legacy formats
+    const getInitialImageUrl = () => {
+        // NEW API format: content.imageUrl
+        if (initialData?.content?.imageUrl)
+            return initialData.content.imageUrl;
+        // Legacy format: imageUrl at root level
+        return initialData?.imageUrl || '';
+    };
+    const getInitialWordBank = () => {
+        // NEW API format: content.wordBank
+        if (initialData?.content?.wordBank && Array.isArray(initialData.content.wordBank)) {
+            return initialData.content.wordBank;
+        }
+        // Legacy format: wordBank at root level
+        return initialData?.wordBank || [];
+    };
+    const getInitialLabels = () => {
+        // NEW API format: content.labels with correctAnswer in each label
+        if (initialData?.content?.labels && Array.isArray(initialData.content.labels)) {
+            return initialData.content.labels;
+        }
+        // Legacy format: labels at root level
+        return initialData?.labels || [];
+    };
+    const getInitialPoints = () => {
+        // Points at root level
+        return initialData?.points || 1;
+    };
+    const getInitialExplanation = () => {
+        return initialData?.explanation || '';
+    };
+    // State
+    const [imageUrl, setImageUrl] = useState(getInitialImageUrl());
+    const [wordBank, setWordBank] = useState(getInitialWordBank());
+    const [labels, setLabels] = useState(getInitialLabels());
+    const [points, setPoints] = useState(getInitialPoints());
+    const [explanation, setExplanation] = useState(getInitialExplanation());
+    // Use react-hook-form with Zod validation
+    const form = useReactHookForm({
+        defaultValues: {
+            imageUrl: imageUrl,
+            wordBank: wordBank,
+            labels: labels,
+        },
+        zodSchema: labelThePictureFormSchema,
+        mode: 'onBlur',
+    });
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(true); // Start as true to prevent onChange on first render
+    const onChangeRef = useRef(onChange);
+    const hasInitializedRef = useRef(false); // Track if we've initialized from initialData
+    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage (exam_question_status_{id})
+    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return validateForm();
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => ({
+                    imageUrl,
+                    wordBank,
+                    labels,
+                    points,
+                    explanation,
+                }),
+            };
+        }
+    }, [validationRef, imageUrl, wordBank, labels, points, explanation]);
+    // Store presigned URLs for images
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    // Use custom hooks for presigned URLs
+    const { previewUrl: presignedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    // Update image preview URL - only set when we have a valid presigned URL
+    // Don't fallback to raw imageUrl as it's a storage path that won't load
+    useEffect(() => {
+        if (presignedPreviewUrl) {
+            setImagePreviewUrl(presignedPreviewUrl);
+        }
+        // Don't fallback to imageUrl directly - it's a storage path, not a valid URL
+    }, [presignedPreviewUrl]);
+    // Sync state from initialData when it changes
+    // IMPORTANT: Only sync when initialData comes from API (has ID) or when explicitly loading
+    // Don't sync when parent just echoes back our own onChange data
+    useEffect(() => {
+        // Skip if initialData is undefined/null
+        if (!initialData) {
+            // Only initialize once to empty state
+            if (!hasInitializedRef.current) {
+                hasInitializedRef.current = true;
+                isInitializingRef.current = false;
+            }
+            return;
+        }
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        console.log('🏷️ LabelThePictureCreator useEffect:', {
+            initialDataChanged,
+            hasInitialized: hasInitializedRef.current,
+            initialData,
+            previousData: previousInitialDataRef.current,
+        });
+        // Only sync from initialData if:
+        // 1. First time initialization (hasInitializedRef.current is false)
+        // 2. OR initialData has actually changed AND we're not the source of the change
+        //    (detecting by checking if previousInitialDataRef is undefined or significantly different)
+        const isFirstInit = !hasInitializedRef.current;
+        const isApiDataLoad = initialDataChanged && previousInitialDataRef.current === undefined;
+        if (isFirstInit || isApiDataLoad) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            hasInitializedRef.current = true;
+            console.log('🏷️ LabelThePictureCreator - Setting state from initialData:', {
+                imageUrl: getInitialImageUrl(),
+                wordBank: getInitialWordBank(),
+                labels: getInitialLabels(),
+            });
+            setImageUrl(getInitialImageUrl());
+            setWordBank(getInitialWordBank());
+            setLabels(getInitialLabels());
+            setPoints(getInitialPoints());
+            setExplanation(getInitialExplanation());
+            // Wait for state updates to complete before allowing onChange
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+        else {
+            // Just update the ref to track current value, but don't reset state
+            previousInitialDataRef.current = initialData;
+        }
+    }, [initialData]);
+    // Convert to payload format and call onChange
+    // IMPORTANT: Only call onChange after initialization is complete AND state has values
+    useEffect(() => {
+        // Don't call onChange during initialization
+        if (isInitializingRef.current || !hasInitializedRef.current) {
+            return;
+        }
+        // Don't call onChange if we have no meaningful data yet
+        // This prevents overwriting API data with empty values
+        if (!imageUrl && wordBank.length === 0 && labels.length === 0) {
+            return;
+        }
+        const payload = {
+            imageUrl,
+            wordBank,
+            labels,
+        };
+        payload.points = points;
+        payload.explanation = explanation;
+        requestAnimationFrame(() => {
+            onChangeRef.current?.(payload);
+        });
+    }, [imageUrl, wordBank, labels, points, explanation]);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Add word to word bank
+    const addWordToBank = () => {
+        setWordBank([...wordBank, '']);
+        form.clearErrors();
+    };
+    // Update word in word bank
+    const updateWordInBank = (index, value) => {
+        const newWordBank = [...wordBank];
+        newWordBank[index] = value;
+        setWordBank(newWordBank);
+        form.clearErrors();
+    };
+    // Remove word from word bank
+    const removeWordFromBank = (index) => {
+        setWordBank(wordBank.filter((_, i) => i !== index));
+        form.clearErrors();
+    };
+    // Add label position
+    const addLabel = () => {
+        const maxNumber = labels.length > 0 ? Math.max(...labels.map((l) => l.number)) : 0;
+        const newLabel = {
+            id: `label-${Date.now()}-${Math.random()}`,
+            number: maxNumber + 1,
+            correctAnswer: '',
+        };
+        setLabels([...labels, newLabel]);
+        form.clearErrors();
+    };
+    // Update label
+    const updateLabel = (id, field, value) => {
+        setLabels(labels.map((label) => (label.id === id ? { ...label, [field]: value } : label)));
+        form.clearErrors();
+    };
+    // Remove label
+    const removeLabel = (id) => {
+        setLabels(labels.filter((label) => label.id !== id));
+        // Re-number remaining labels
+        const remainingLabels = labels.filter((label) => label.id !== id);
+        const sortedLabels = remainingLabels.sort((a, b) => a.number - b.number);
+        setLabels(sortedLabels.map((label, index) => ({
+            ...label,
+            number: index + 1,
+        })));
+        form.clearErrors();
+    };
+    // Get validation errors
+    const getErrors = () => {
+        const errors = {};
+        // Image URL error
+        const imageError = form.formState.errors.imageUrl;
+        if (imageError) {
+            errors.imageUrl = imageError.message;
+        }
+        // Word bank error
+        const wordBankError = form.formState.errors.wordBank;
+        if (wordBankError && typeof wordBankError.message === 'string') {
+            errors.wordBank = wordBankError.message;
+        }
+        // Word bank items errors
+        errors.wordBankItems = {};
+        wordBank.forEach((_, index) => {
+            const itemError = form.formState.errors.wordBank?.[index];
+            if (itemError) {
+                errors.wordBankItems[index] = itemError.message;
+            }
+        });
+        // Labels error
+        const labelsError = form.formState.errors.labels;
+        if (labelsError && typeof labelsError.message === 'string') {
+            errors.labels = labelsError.message;
+        }
+        // Label items errors
+        errors.labelItems = {};
+        labels.forEach((label, index) => {
+            const itemError = form.formState.errors.labels?.[index]?.correctAnswer;
+            if (itemError) {
+                errors.labelItems[label.id] = itemError.message;
+            }
+        });
+        return errors;
+    };
+    // Validate form data
+    const validateForm = () => {
+        // Update form values before validation
+        form.setValue('imageUrl', imageUrl);
+        form.setValue('wordBank', wordBank);
+        form.setValue('labels', labels);
+        // Trigger validation
+        const result = labelThePictureFormSchema.safeParse({ imageUrl, wordBank, labels });
+        if (!result.success) {
+            // Set errors from Zod validation
+            result.error.issues.forEach((issue) => {
+                const path = issue.path.join('.');
+                form.setError(path, { message: issue.message });
+            });
+            return false;
+        }
+        return true;
+    };
+    // Validate before switching to client mode
+    const handlePreview = () => {
+        if (!validateForm()) {
+            return;
+        }
+        setIsClientMode(true);
+    };
+    // Handle save with validation
+    const handleSave = () => {
+        if (!validateForm()) {
+            return;
+        }
+        // NOTE: Save status is now managed by ExamCreator via localStorage
+        const saveData = {
+            imageUrl,
+            wordBank,
+            labels,
+        };
+        saveData.points = points;
+        onSave?.(saveData);
+    };
+    const errors = getErrors();
+    // If in client mode, show preview
+    if (isClientMode) {
+        // Pass raw imageUrl (relative path) - Client will fetch presigned URL itself via usePresignedFileUrl hook
+        const questionData = {
+            imageUrl: imageUrl, // Use raw path, not presignedPreviewUrl
+            wordBank,
+            labels,
+        };
+        // Auto-fill all positions with correct answers for preview
+        const correctAnswers = labels.reduce((acc, label) => {
+            acc[label.id] = label.correctAnswer;
+            return acc;
+        }, {});
+        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: "Label the Picture (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(LabelThePictureClient, { questionData: questionData, userAnswer: correctAnswers, isReviewMode: true, explanation: explanation })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_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(Image, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "G\u1EAFn nh\u00E3n h\u00ECnh \u1EA3nh" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi v\u1EDBi h\u00ECnh \u1EA3nh, word bank v\u00E0 c\u00E1c v\u1ECB tr\u00ED c\u1EA7n \u0111i\u1EC1n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePreview, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "Upload h\u00ECnh \u1EA3nh c\u1EA7n g\u1EAFn nh\u00E3n"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "Th\u00EAm c\u00E1c t\u1EEB v\u00E0o Word Bank (danh s\u00E1ch t\u1EEB g\u1EE3i \u00FD)"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "T\u1EA1o c\u00E1c v\u1ECB tr\u00ED c\u1EA7n \u0111i\u1EC1n v\u00E0 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng t\u1EEB Word Bank"] })] })] })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Image, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "label-picture-image", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: imageUrl, onChange: (url) => {
+                                            setImageUrl(url);
+                                            form.clearErrors();
+                                        }, onPresignedUrlChange: (presignedUrl) => {
+                                            setImagePreviewUrl(presignedUrl);
+                                        }, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), errors.imageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.imageUrl })), imagePreviewUrl && (_jsx("div", { className: "relative mt-2 h-64 w-full max-w-2xl overflow-hidden rounded border", children: _jsx("img", { src: imagePreviewUrl, alt: "Preview for question", className: "h-full w-full object-contain", onError: () => {
+                                                console.error('Failed to load image:', imageUrl);
+                                            } }) }))] })] })] }), _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 justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Tags, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Word Bank ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", wordBank.filter(w => w.trim()).length, " t\u1EEB)"] })] })] }), _jsxs(Button, { type: "button", size: "sm", onClick: addWordToBank, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", variant: "outline", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [errors.wordBank && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.wordBank })] })), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: wordBank.map((word, index) => (_jsxs("div", { className: `group relative rounded-xl border-2 p-3 transition-all duration-200 ${word.trim()
+                                        ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
+                                        : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all ${word.trim()
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                        : 'bg-gray-100 text-gray-600'}`, children: index + 1 }), _jsx(Input, { value: word, onChange: (e) => updateWordInBank(index, e.target.value), placeholder: `Từ ${index + 1}`, className: `flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${errors.wordBankItems?.[index] ? 'border-red-400' : ''}` }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeWordFromBank(index), className: "text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(X, { className: "h-4 w-4" }) })] }), errors.wordBankItems?.[index] && (_jsx("p", { className: "mt-2 ml-11 text-sm text-red-600", children: errors.wordBankItems[index] }))] }, index))) }), wordBank.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o. Nh\u1EA5n \"Th\u00EAm t\u1EEB\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-pink-400" }), _jsx(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-purple-100", children: _jsx(Tags, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED c\u1EA7n \u0111i\u1EC1n ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", labels.length, " v\u1ECB tr\u00ED)"] })] })] }), _jsxs(Button, { type: "button", size: "sm", onClick: addLabel, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", variant: "outline", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm v\u1ECB tr\u00ED"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [errors.labels && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.labels })] })), _jsx("div", { className: "space-y-4", children: labels
+                                    .sort((a, b) => a.number - b.number)
+                                    .map((label) => {
+                                    const hasAnswer = label.correctAnswer && label.correctAnswer.trim();
+                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${hasAnswer
+                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
+                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-bold transition-all ${hasAnswer
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                        : 'bg-purple-100 text-purple-700'}`, children: label.number }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { children: [_jsxs(Label, { className: "text-sm font-semibold text-gray-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("div", { className: "mt-1.5", children: _jsxs(Select, { value: label.correctAnswer || '', onValueChange: (value) => updateLabel(label.id, 'correctAnswer', value), children: [_jsx(SelectTrigger, { className: `w-full border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200 ${errors.labelItems?.[label.id] ? 'border-red-400' : ''}`, children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn t\u1EEB trong word bank" }) }), _jsx(SelectContent, { children: wordBank
+                                                                                    .filter((word) => word.trim() !== '')
+                                                                                    .map((word, index) => (_jsx(SelectItem, { value: word, children: word }, index))) })] }) }), errors.labelItems?.[label.id] && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.labelItems[label.id] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", id: `prefilled-${label.id}`, checked: label.isPreFilled || false, onChange: (e) => updateLabel(label.id, 'isPreFilled', e.target.checked), className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" }), _jsx(Label, { htmlFor: `prefilled-${label.id}`, className: "text-sm font-normal text-gray-600 cursor-pointer", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 t\u1EEB g\u1EE3i \u00FD (\u0111\u00E3 \u0111i\u1EC1n s\u1EB5n)" })] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeLabel(label.id), className: "text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(X, { className: "h-4 w-4" }) })] }) }, label.id));
+                                }) }), labels.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: "Ch\u01B0a c\u00F3 v\u1ECB tr\u00ED n\u00E0o. Nh\u1EA5n \"Th\u00EAm v\u1ECB tr\u00ED\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] }))] })] }), _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, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function LabelThePictureCreator(props) {
+    return _jsx(LabelThePictureCreatorContent, { ...props });
+}

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

@@ -1 +1,2 @@
-export*from"./LabelThePictureCreator";export*from"./LabelThePictureClient";
+export * from './LabelThePictureCreator';
+export * from './LabelThePictureClient';

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

@@ -1 +1,54 @@
-import{LabelThePictureCreator as t}from"./LabelThePictureCreator";export const labelThePictureRegistration={component:t,transformInitialData:t=>{const e=t?.content,s=t?.answer;let n=s;if(e&&"object"==typeof e&&e.labels&&Array.isArray(e.labels)){const a=e.labels.map(t=>({...t,correctAnswer:s?.answers?.[t.id]||t.correctAnswer||""})),o=t?.total_points?parseFloat(t.total_points):t?.points||1;n={...e,labels:a,points:o}}else{const e=t?.total_points?parseFloat(t.total_points):t?.points||s?.points||1;n&&(n={...n,points:e})}return n},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t})};
+import { LabelThePictureCreator } from './LabelThePictureCreator';
+export const labelThePictureRegistration = {
+    component: LabelThePictureCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        let creatorData = answer;
+        if (content && typeof content === 'object' && content.labels && Array.isArray(content.labels)) {
+            const mergedLabels = content.labels.map((label) => ({
+                ...label,
+                correctAnswer: answer?.answers?.[label.id] || label.correctAnswer || '',
+            }));
+            const apiPoints = initialData?.total_points
+                ? parseFloat(initialData.total_points)
+                : (initialData?.points || 1);
+            creatorData = {
+                ...content,
+                labels: mergedLabels,
+                points: apiPoints,
+            };
+        }
+        else {
+            const apiPoints = initialData?.total_points
+                ? parseFloat(initialData.total_points)
+                : (initialData?.points || answer?.points || 1);
+            if (creatorData) {
+                creatorData = { ...creatorData, points: apiPoints };
+            }
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+    }),
+};