@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerCreator.js

@@ -1 +1,230 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as o}from"react";import{Button as a}from"../../../../components/ui/button";import{Input as s}from"../../../../components/ui/input";import{Textarea as i}from"../../../../components/ui/textarea";import{Card as c,CardContent as l,CardHeader as d,CardTitle as m}from"../../../../components/ui/card";import{PointsInput as h}from"../../../../components/ui/points-input";import{RadioGroup as g}from"../../../../components/ui/radio-group";import{Pencil as p,Eye as u,Plus as f,Trash2 as x,Image as b,CheckCircle2 as w,Lightbulb as N,BookOpen as v}from"lucide-react";import{FileUpload as y}from"../../../../components/ui/file-upload";import{ImagePreview as A}from"../../../../components/ui/image-preview";import{usePresignedFileUrl as C,useDebouncedCallback as U}from"../../../../shared/lib/hooks";import{LookPictureChooseCorrectAnswerClient as V}from"./LookPictureChooseCorrectAnswerClient";import{useReactHookForm as k}from"../../../../shared/lib/hooks/useReactHookForm";import{lookPictureChooseCorrectAnswerFormSchema as S}from"../../../../shared/lib/validation/look-picture-choose-correct-answer.validation";function j({initialData:j,onSave:z,onCancel:q,onChange:J,onUnsavedChangesChange:O,optionCount:P=2,validationRef:E}){const L=(e,r)=>e&&0!==e.length?e.map(e=>String(e||"")):Array.from({length:r},()=>""),$=j,D=$?.content?.options||$?.options||[],H=k({defaultValues:{imageUrl:$?.content?.imageUrl||$?.imageUrl||"",options:L(D,P),correctAnswer:"object"==typeof $?.correctAnswer?$?.correctAnswer?.answer??-1:$?.correctAnswer??-1,explanation:$?.explanation||"",points:$?.points??1},zodSchema:S,mode:"onBlur"}),[R,T]=t(!1),[F,G]=t(""),M=n(j),Q=n(!1),B=n(J),K=n("");o(()=>{B.current=J},[J]);const X=U(e=>{B.current?.(e)},300),I=H.watch("imageUrl"),W=H.watch("options"),Y=H.watch("correctAnswer"),Z=H.watch("explanation"),_=H.watch("points"),{previewUrl:ee}=C(I),re=F||ee||"";o(()=>{E&&(E.current={triggerValidation:async()=>{const e=await H.trigger();return-1===Y?(H.setError("correctAnswer",{message:"Vui lòng chọn đáp án đúng!"}),!1):e},getFormData:()=>({imageUrl:I,options:W,correctAnswer:Y,explanation:Z,points:_})})},[E,H,Y,I,W,Z,_]),o(()=>{const e=j,r={imageUrl:e?.content?.imageUrl||e?.imageUrl||"",options:L(e?.content?.options||e?.options||[],P),correctAnswer:"object"==typeof e?.correctAnswer?e?.correctAnswer?.answer??-1:e?.correctAnswer??-1,explanation:e?.explanation||"",points:e?.points??1};if(!(JSON.stringify(M.current)!==JSON.stringify(j)))return;M.current=j;const t={imageUrl:I,options:W,correctAnswer:Y,explanation:Z,points:_},n=t.imageUrl===r.imageUrl&&t.correctAnswer===r.correctAnswer&&t.points===r.points&&t.explanation===r.explanation&&JSON.stringify(t.options)===JSON.stringify(r.options);if(n&&!0===j?.isCompleted)return;!n&&r.correctAnswer!==t.correctAnswer&&-1!==r.correctAnswer&&(Q.current=!0,H.reset(r),setTimeout(()=>{Q.current=!1},150))},[j,P,H,I,W,Y,Z,_]);const te=JSON.stringify(W);o(()=>{if(Q.current){const e=JSON.stringify({imageUrl:I,options:W,correctAnswer:Y,explanation:Z,points:_});return void(K.current=e)}const e={imageUrl:I,options:W,correctAnswer:Y,explanation:Z,points:_},r=JSON.stringify(e);K.current!==r&&(K.current=r,X(e))},[I,te,Y,Z,_]);H.handleSubmit(e=>{-1===e.correctAnswer||e.correctAnswer>=e.options.length?H.setError("correctAnswer",{message:"Vui lòng chọn đáp án đúng!"}):z?.(e)});if(R){const t={subQuestions:[{id:"preview-sq",imageUrl:re||I,question:"",options:W.map((e,r)=>({id:`opt-${r}`,text:e,isCorrect:r===Y}))}]},n=-1!==Y?{"preview-sq":`opt-${Y}`}:{};return e("div",{className:"space-y-6",children:r(c,{children:[e(d,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(m,{children:"Nhìn tranh, chọn đáp án đúng (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(a,{variant:"outline",size:"sm",onClick:()=>T(!1),children:[e(p,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})}),e(l,{children:e(V,{questionData:t,isReviewMode:!0,userAnswer:n,explanation:Z})})]})})}return r("div",{className:"space-y-6",children:[r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-cyan-500 via-teal-500 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-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-600 shadow-md",children:e(b,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(m,{className:"text-xl font-bold text-gray-900",children:"Nhìn tranh, chọn đáp án đúng"}),e("p",{className:"text-sm text-gray-500",children:"Tạo câu hỏi với hình ảnh và các lựa chọn đáp án"})]})]}),r(a,{variant:"outline",size:"sm",onClick:()=>T(!0),className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(u,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(l,{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(h,{defaultValue:_,onChange:e=>H.setValue("points",Number(e.target.value)||1)})}),r("div",{className:"rounded-xl border-2 border-teal-100 bg-gradient-to-r from-teal-50/30 to-cyan-50/30 p-5",children:[r("div",{className:"mb-4 flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-teal-100",children:e(b,{className:"h-3.5 w-3.5 text-teal-600"})}),e("span",{className:"text-sm font-semibold text-teal-800",children:"Hình ảnh câu hỏi"})]}),e(y,{id:"image-upload",label:"Hình ảnh",accept:"image/*",value:I,onChange:e=>H.setValue("imageUrl",e,{shouldValidate:!0}),onPresignedUrlChange:e=>G(e),maxSize:5,placeholder:"Upload ảnh hoặc paste URL",required:!0,autoUpload:!0,prefix:"questions"}),H.hasError("imageUrl")&&e("p",{className:"mt-1 text-sm text-red-600",children:H.formState.errors.imageUrl?.message}),re&&e(A,{src:re,alt:"Preview for question",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-400"}),e(d,{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(N,{className:"h-3.5 w-3.5 text-indigo-600"})}),r(m,{className:"text-lg font-semibold text-gray-800",children:["Các lựa chọn ",r("span",{className:"text-sm font-normal text-gray-500",children:["(",W.length," đáp án)"]})]})]}),r(a,{variant:"outline",size:"sm",onClick:()=>{const e=H.getValues("options");H.setValue("options",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(f,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(l,{className:"space-y-4",children:[e(g,{value:Y.toString(),onValueChange:e=>{H.setValue("correctAnswer",Number(e),{shouldValidate:!0})},children:W.map((t,n)=>{const o=H.formState.errors.options?.[n],i=Y===n,c=String.fromCharCode(65+n);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(i?"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 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(i?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"),onClick:()=>H.setValue("correctAnswer",n,{shouldValidate:!0}),children:c}),r("div",{className:"flex-1 space-y-2",children:[e(s,{id:`option-input-${n}`,...H.register(`options.${n}`),placeholder:`Nhập đáp án ${c}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(o?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),o&&e("p",{className:"text-sm text-red-600",children:o.message}),i&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(w,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[!i&&e(a,{type:"button",variant:"ghost",size:"sm",onClick:()=>H.setValue("correctAnswer",n,{shouldValidate:!0}),className:"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(w,{className:"h-4 w-4"})}),W.length>2&&e(a,{variant:"ghost",size:"sm",onClick:()=>{const e=H.getValues("options").filter((e,r)=>r!==n);H.setValue("options",e);const r=H.getValues("correctAnswer");r===n?H.setValue("correctAnswer",-1):r>n&&H.setValue("correctAnswer",r-1)},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(x,{className:"h-4 w-4"})})]})]})},n)})}),-1===Y&&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("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),r("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:"Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng"})]})]}),H.hasError("correctAnswer")&&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("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),e("div",{className:"text-sm text-red-600",children:H.formState.errors.correctAnswer?.message})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(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(v,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(m,{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(i,{id:"explanation",...H.register("explanation"),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 LookPictureChooseCorrectAnswerCreator(r){return e(j,{...r})}export const LookPictureChooseCorrectAnswer=LookPictureChooseCorrectAnswerCreator;
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { RadioGroup } from '../../../../components/ui/radio-group';
+import { Pencil, Eye, Plus, Trash2, Image, CheckCircle2, Lightbulb, BookOpen } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { LookPictureChooseCorrectAnswerClient } from './LookPictureChooseCorrectAnswerClient';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { lookPictureChooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/look-picture-choose-correct-answer.validation';
+function LookPictureChooseCorrectAnswerContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, optionCount = 2, validationRef, }) {
+    // Helper to normalize options - ensure they are always string[]
+    const normalizeOptions = (opts, defaultCount) => {
+        if (!opts || opts.length === 0) {
+            return Array.from({ length: defaultCount }, () => '');
+        }
+        // Options should always be string[] - convert each to string for safety
+        return opts.map((opt) => String(opt || ''));
+    };
+    // Use react-hook-form with Zod validation
+    // initialData can be in API format (content.imageUrl, correctAnswer.answer) or flat format
+    const apiData = initialData;
+    const rawOptions = apiData?.content?.options || apiData?.options || [];
+    const form = useReactHookForm({
+        defaultValues: {
+            // Support both API format (content.imageUrl) and flat format (imageUrl)
+            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
+            // Use normalizeOptions to ensure options are always string[]
+            options: normalizeOptions(rawOptions, optionCount),
+            // Support both API format (correctAnswer.answer) and flat format (correctAnswer as number)
+            correctAnswer: typeof apiData?.correctAnswer === 'object'
+                ? (apiData?.correctAnswer?.answer ?? -1)
+                : (apiData?.correctAnswer ?? -1),
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: lookPictureChooseCorrectAnswerFormSchema,
+        mode: 'onBlur',
+    });
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange callback to prevent excessive re-renders
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Watch form values - MUST be declared before useEffects that use them
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedOptions = form.watch('options');
+    const watchedCorrectAnswer = form.watch('correctAnswer');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    // Custom hooks for presigned URL
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    // Expose validation function and getFormData via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const result = await form.trigger();
+                    // Also check correctAnswer
+                    if (watchedCorrectAnswer === -1) {
+                        form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
+                        return false;
+                    }
+                    return result;
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => ({
+                    imageUrl: watchedImageUrl,
+                    options: watchedOptions,
+                    correctAnswer: watchedCorrectAnswer,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedCorrectAnswer, watchedImageUrl, watchedOptions, watchedExplanation, watchedPoints]);
+    // Sync state from initialData when it changes from EXTERNAL sources only
+    useEffect(() => {
+        const apiData = initialData;
+        const normalizedInitialData = {
+            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
+            options: normalizeOptions(apiData?.content?.options || apiData?.options || [], optionCount),
+            correctAnswer: typeof apiData?.correctAnswer === 'object'
+                ? (apiData?.correctAnswer?.answer ?? -1)
+                : (apiData?.correctAnswer ?? -1),
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return;
+        }
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            imageUrl: watchedImageUrl,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEchoFromOnChange = currentFormData.imageUrl === normalizedInitialData.imageUrl &&
+            currentFormData.correctAnswer === normalizedInitialData.correctAnswer &&
+            currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        const shouldReset = !isEchoFromOnChange &&
+            normalizedInitialData.correctAnswer !== currentFormData.correctAnswer;
+        if (shouldReset && normalizedInitialData.correctAnswer !== -1) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, optionCount, form, watchedImageUrl, watchedOptions, watchedCorrectAnswer, watchedExplanation, watchedPoints]);
+    // Convert to payload format and call onChange
+    const watchedOptionsString = JSON.stringify(watchedOptions);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                imageUrl: watchedImageUrl,
+                options: watchedOptions,
+                correctAnswer: watchedCorrectAnswer,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            imageUrl: watchedImageUrl,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedImageUrl,
+        watchedOptionsString,
+        watchedCorrectAnswer,
+        watchedExplanation,
+        watchedPoints,
+    ]);
+    // Handle save with validation
+    const handleSave = form.handleSubmit((data) => {
+        if (data.correctAnswer === -1 || data.correctAnswer >= data.options.length) {
+            form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
+            return;
+        }
+        onSave?.(data);
+    });
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            subQuestions: [{
+                    id: 'preview-sq',
+                    imageUrl: displayPreviewUrl || watchedImageUrl,
+                    question: '',
+                    options: watchedOptions.map((text, index) => ({
+                        id: `opt-${index}`,
+                        text,
+                        isCorrect: index === watchedCorrectAnswer,
+                    })),
+                }],
+        };
+        const correctAnswers = watchedCorrectAnswer !== -1
+            ? { 'preview-sq': `opt-${watchedCorrectAnswer}` }
+            : {};
+        return (_jsx("div", { className: "space-y-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng (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(CardContent, { children: _jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, isReviewMode: true, userAnswer: correctAnswers, explanation: watchedExplanation }) })] }) }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-cyan-500 via-teal-500 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-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-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: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi v\u1EDBi h\u00ECnh \u1EA3nh v\u00E0 c\u00E1c l\u1EF1a ch\u1ECDn \u0111\u00E1p \u00E1n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-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: watchedPoints, onChange: (e) => form.setValue('points', Number(e.target.value) || 1) }) }), _jsxs("div", { className: "rounded-xl border-2 border-teal-100 bg-gradient-to-r from-teal-50/30 to-cyan-50/30 p-5", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(Image, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx("span", { className: "text-sm font-semibold text-teal-800", children: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi" })] }), _jsx(FileUpload, { id: "image-upload", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: watchedImageUrl, onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: (presignedUrl) => setImagePreviewUrl(presignedUrl), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.formState.errors.imageUrl?.message })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview for question", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })] })] }), _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(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                        const currentOptions = form.getValues('options');
+                                        form.setValue('options', [...currentOptions, '']);
+                                    }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(RadioGroup, { value: watchedCorrectAnswer.toString(), onValueChange: (value) => {
+                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
+                                }, children: watchedOptions.map((option, index) => {
+                                    const optionError = form.formState.errors.options?.[index];
+                                    const isCorrect = watchedCorrectAnswer === index;
+                                    const optionLetter = String.fromCharCode(65 + index);
+                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
+                                            ? '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 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                const currentOptions = form.getValues('options');
+                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
+                                                                form.setValue('options', newOptions);
+                                                                // Adjust correctAnswer if needed
+                                                                const currentCorrect = form.getValues('correctAnswer');
+                                                                if (currentCorrect === index) {
+                                                                    form.setValue('correctAnswer', -1);
+                                                                }
+                                                                else if (currentCorrect > index) {
+                                                                    form.setValue('correctAnswer', currentCorrect - 1);
+                                                                }
+                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
+                                }) }), watchedCorrectAnswer === -1 && (_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("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), form.hasError('correctAnswer') && (_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("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsx("div", { className: "text-sm text-red-600", children: form.formState.errors.correctAnswer?.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, { id: "explanation", ...form.register('explanation'), 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 LookPictureChooseCorrectAnswerCreator(props) {
+    return _jsx(LookPictureChooseCorrectAnswerContent, { ...props });
+}
+// Legacy export for backward compatibility
+export const LookPictureChooseCorrectAnswer = LookPictureChooseCorrectAnswerCreator;

package/dist/components/questions/types/look-picture-choose-correct-answer/index.js

@@ -1 +1 @@
-export*from"./LookPictureChooseCorrectAnswerCreator";
+export * from './LookPictureChooseCorrectAnswerCreator';

package/dist/components/questions/types/look-picture-choose-correct-answer/register.js

@@ -1 +1,66 @@
-import{LookPictureChooseCorrectAnswer as t}from"./LookPictureChooseCorrectAnswerCreator";export const lookPictureChooseCorrectAnswerRegistration={component:t,transformInitialData:t=>{let e;const n=t?.content,o=t?.answer,i=t?.total_points?parseFloat(t.total_points):t?.points||o?.points||1,s=t=>Array.isArray(t)&&0!==t.length?t.map(t=>String(t||"")):[];if(void 0!==o?.imageUrl||o?.options)e={imageUrl:o.imageUrl||"",options:s(o.options||[]),correctAnswer:"number"==typeof o.correctAnswer?o.correctAnswer:-1,explanation:o.explanation||t?.explanation||"",points:o.points||i};else if(n&&(void 0!==n.imageUrl||n.options)){let a=-1;"number"==typeof o?.answer?a=o.answer:"number"==typeof t?.correct_answer?.answer&&(a=t.correct_answer.answer),e={imageUrl:n.imageUrl||"",options:s(n.options||[]),correctAnswer:a,explanation:t?.explanation||"",points:i}}return e},getExtraProps:t=>({optionCount:t.optionCount??void 0,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 { LookPictureChooseCorrectAnswer } from './LookPictureChooseCorrectAnswerCreator';
+export const lookPictureChooseCorrectAnswerRegistration = {
+    component: LookPictureChooseCorrectAnswer,
+    transformInitialData: (initialData) => {
+        let creatorData = undefined;
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const apiPoints = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || answer?.points || 1);
+        const normalizeOptions = (opts) => {
+            if (!Array.isArray(opts) || opts.length === 0)
+                return [];
+            return opts.map((opt) => String(opt || ''));
+        };
+        // Priority 1: Data from reverse transform or store
+        if (answer?.imageUrl !== undefined || answer?.options) {
+            creatorData = {
+                imageUrl: answer.imageUrl || '',
+                options: normalizeOptions(answer.options || []),
+                correctAnswer: typeof answer.correctAnswer === 'number' ? answer.correctAnswer : -1,
+                explanation: answer.explanation || initialData?.explanation || '',
+                points: answer.points || apiPoints,
+            };
+        }
+        // Priority 2: Raw API content format
+        else if (content && (content.imageUrl !== undefined || content.options)) {
+            let correctAnswer = -1;
+            if (typeof answer?.answer === 'number')
+                correctAnswer = answer.answer;
+            else if (typeof initialData?.correct_answer?.answer === 'number')
+                correctAnswer = initialData.correct_answer.answer;
+            creatorData = {
+                imageUrl: content.imageUrl || '',
+                options: normalizeOptions(content.options || []),
+                correctAnswer,
+                explanation: initialData?.explanation || '',
+                points: apiPoints,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        optionCount: ctx.optionCount ?? undefined,
+        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,
+    }),
+};

package/dist/components/questions/types/look-picture-choose-correct-answer/transform.js

@@ -1 +1,42 @@
-export const transformLookPictureChooseCorrectAnswer=r=>{const t=r.answer;if(void 0!==t?.imageUrl||t?.options){const r=(t.options||[]).map(r=>"string"==typeof r?r:r.text||"");let o=-1;return"number"==typeof t.correctAnswer?o=t.correctAnswer:Array.isArray(t.options)&&(o=t.options.findIndex(r=>!0===r.isCorrect)),{apiContent:{imageUrl:t.imageUrl||"",options:r},apiCorrectAnswer:{answer:o}}}const o=t;if(!o?.subQuestions||0===o.subQuestions.length)return{apiContent:{},apiCorrectAnswer:{}};const e=o.subQuestions[0],n=(e.options||[]).map(r=>r.text||""),s=e.options?.findIndex(r=>r.isCorrect)??-1;return{apiContent:{imageUrl:e.imageUrl||"",options:n},apiCorrectAnswer:{answer:s}}};
+// LOOK_PICTURE_CHOOSE_CORRECT_ANSWER - flattened structure (always 1 question, no question text)
+// NEW FORMAT: content { imageUrl, options: string[] }, correct_answer { answer: number }
+export const transformLookPictureChooseCorrectAnswer = (question) => {
+    const answerData = question.answer;
+    // NEW format: { imageUrl, options: string[], correctAnswer: number, points }
+    if (answerData?.imageUrl !== undefined || answerData?.options) {
+        const options = (answerData.options || []).map((opt) => typeof opt === 'string' ? opt : (opt.text || ''));
+        let correctAnswer = -1;
+        if (typeof answerData.correctAnswer === 'number') {
+            correctAnswer = answerData.correctAnswer;
+        }
+        else if (Array.isArray(answerData.options)) {
+            correctAnswer = answerData.options.findIndex((opt) => opt.isCorrect === true);
+        }
+        return {
+            apiContent: {
+                imageUrl: answerData.imageUrl || '',
+                options,
+            },
+            apiCorrectAnswer: {
+                answer: correctAnswer,
+            },
+        };
+    }
+    // LEGACY format with subQuestions - convert to new format
+    const legacyData = answerData;
+    if (!legacyData?.subQuestions || legacyData.subQuestions.length === 0) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const sq = legacyData.subQuestions[0];
+    const options = (sq.options || []).map((opt) => opt.text || '');
+    const correctAnswerIndex = sq.options?.findIndex((opt) => opt.isCorrect) ?? -1;
+    return {
+        apiContent: {
+            imageUrl: sq.imageUrl || '',
+            options,
+        },
+        apiCorrectAnswer: {
+            answer: correctAnswerIndex,
+        },
+    };
+};

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient.js

@@ -1 +1,96 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as s}from"react";import{Check as i,X as n,ImageIcon as a,Lightbulb as l}from"lucide-react";import{usePresignedFileUrl as d}from"../../../../shared/lib/hooks";import{cn as o}from"../../../../shared/lib/utils";export function LookPictureFillBlankChooseAnswerClient({questionData:c,onSubmit:m,isReviewMode:g=!1,userAnswer:u="",correctAnswer:h="",explanation:p}){const b=c.subQuestions?.[0]?{imageUrl:c.subQuestions[0].imageUrl,question:c.subQuestions[0].question||"",options:c.subQuestions[0].options.map(e=>({id:e.id,text:e.text}))}:{imageUrl:c.imageUrl||"",question:c.question||"",options:c.options||[]},x="string"==typeof u?u:u?.[c.subQuestions?.[0]?.id||""]||"",[f,N]=t(x),{previewUrl:w,isLoading:y}=d(b.imageUrl||""),v=f===h,j=""!==f;s(()=>{const e="string"==typeof u?u:u?.[c.subQuestions?.[0]?.id||""]||"";N(e)},[u,c.subQuestions]);const k=t=>{const s=b.question.split("{0}");return e("span",{children:s.map((i,n)=>r("span",{children:[i,n<s.length-1&&e("span",{className:"inline-flex items-center mx-1",children:e("span",{className:"inline-block rounded-md bg-gradient-to-r from-blue-500 to-indigo-500 px-3 py-0.5 text-white font-semibold shadow-sm",children:t})})]},n))})};return r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm",children:e(a,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nhìn tranh, điền từ vào chỗ trống"})]}),g&&j&&r("div",{className:o("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",v?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(v?i:n,{className:"h-3.5 w-3.5"}),v?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-5",children:[(w||b.imageUrl)&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex items-center justify-center p-4",children:y?e("div",{className:"flex h-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-purple-500"})}):e("img",{src:w||b.imageUrl,alt:"Question illustration",className:"max-h-56 w-auto object-contain rounded-md",onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})})]}),e("div",{className:"rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100",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-purple-100 text-purple-600",children:e("span",{className:"text-xs font-bold",children:"?"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Câu hỏi"}),e("p",{className:"mt-1 text-base font-medium leading-relaxed",children:(()=>{const t=b.question.split("{0}");return e("span",{className:"text-gray-800",children:t.map((s,i)=>r("span",{children:[s,i<t.length-1&&e("span",{className:"inline-flex items-center mx-1",children:e("span",{className:"inline-block min-w-[80px] border-b-2 border-dashed border-blue-400 bg-blue-50/50 px-3 py-0.5 text-center text-blue-600 font-medium rounded",children:"___________"})})]},i))})})()})]})]})}),r("div",{className:"space-y-2.5",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Chọn đáp án"}),b.options.map((t,s)=>{const a=f===t.id,l=t.id===h,d=String.fromCharCode(65+s);return r("button",{type:"button",onClick:()=>{return e=t.id,void(g||(N(e),m?.(e)));var e},disabled:g,className:o("group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all",g?l?"border-green-400 bg-green-50":a?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":a?"border-purple-500 bg-purple-50 shadow-sm ring-2 ring-purple-100":"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm"),children:[e("div",{className:o("flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all",g?l?"bg-green-500 text-white":a?"bg-red-500 text-white":"bg-gray-200 text-gray-600":a?"bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm":"bg-gray-100 text-gray-600 group-hover:bg-gray-200"),children:d}),e("div",{className:"flex-1",children:e("span",{className:o("text-sm font-medium",g&&l?"text-green-800":g&&a&&!l?"text-red-800":"text-gray-700"),children:t.text})}),g&&(l||a)&&e("div",{className:o("flex h-6 w-6 items-center justify-center rounded-full",l?"bg-green-500":"bg-red-500"),children:e(l?i:n,{className:"h-4 w-4 text-white"})})]},t.id)})]}),j&&!g&&r("div",{className:"rounded-lg bg-gradient-to-r from-purple-50 to-indigo-50 p-4 border border-purple-100",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-purple-500 text-white",children:e(i,{className:"h-3 w-3"})}),e("span",{className:"text-xs font-semibold text-purple-700 uppercase tracking-wider",children:"Preview câu trả lời"})]}),e("p",{className:"text-sm text-gray-800 leading-relaxed",children:k((()=>{const e=b.options.find(e=>e.id===f);return e?.text||""})())})]}),g&&j&&!v&&r("div",{className:"rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white",children:e(i,{className:"h-3 w-3"})}),e("span",{className:"text-xs font-semibold text-green-700 uppercase tracking-wider",children:"Đáp án đúng"})]}),e("p",{className:"text-sm text-gray-800 leading-relaxed",children:k((()=>{const e=b.options.find(e=>e.id===h);return e?.text||""})())})]}),!g&&!j&&r("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng chọn một đáp án"})]}),g&&p&&e("div",{className:"rounded-lg 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(l,{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:p})]})]})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, ImageIcon, Lightbulb } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+export function LookPictureFillBlankChooseAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer = '', correctAnswer = '', explanation, }) {
+    // Handle both flat structure and subQuestions structure
+    const flatData = questionData.subQuestions?.[0]
+        ? {
+            imageUrl: questionData.subQuestions[0].imageUrl,
+            question: questionData.subQuestions[0].question || '',
+            options: questionData.subQuestions[0].options.map(opt => ({ id: opt.id, text: opt.text })),
+        }
+        : {
+            imageUrl: questionData.imageUrl || '',
+            question: questionData.question || '',
+            options: questionData.options || [],
+        };
+    // State for selected answer
+    const initialAnswer = typeof userAnswer === 'string' ? userAnswer : userAnswer?.[questionData.subQuestions?.[0]?.id || ''] || '';
+    const [selectedAnswer, setSelectedAnswer] = useState(initialAnswer);
+    // Get presigned URL for image
+    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(flatData.imageUrl || '');
+    // Check if answer is correct
+    const isAnswerCorrect = selectedAnswer === correctAnswer;
+    const hasAnswered = selectedAnswer !== '';
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        const answer = typeof userAnswer === 'string' ? userAnswer : userAnswer?.[questionData.subQuestions?.[0]?.id || ''] || '';
+        setSelectedAnswer(answer);
+    }, [userAnswer, questionData.subQuestions]);
+    // Handle answer change
+    const handleAnswerChange = (optionId) => {
+        if (isReviewMode)
+            return;
+        setSelectedAnswer(optionId);
+        onSubmit?.(optionId);
+    };
+    // Replace {0} with styled blank for display
+    const renderQuestionWithBlank = () => {
+        const parts = flatData.question.split('{0}');
+        return (_jsx("span", { className: "text-gray-800", children: parts.map((part, idx) => (_jsxs("span", { children: [part, idx < parts.length - 1 && (_jsx("span", { className: "inline-flex items-center mx-1", children: _jsx("span", { className: "inline-block min-w-[80px] border-b-2 border-dashed border-blue-400 bg-blue-50/50 px-3 py-0.5 text-center text-blue-600 font-medium rounded", children: "___________" }) }))] }, idx))) }));
+    };
+    // Replace {0} with selected answer for preview
+    const renderQuestionWithAnswer = (answerText) => {
+        const parts = flatData.question.split('{0}');
+        return (_jsx("span", { children: parts.map((part, idx) => (_jsxs("span", { children: [part, idx < parts.length - 1 && (_jsx("span", { className: "inline-flex items-center mx-1", children: _jsx("span", { className: "inline-block rounded-md bg-gradient-to-r from-blue-500 to-indigo-500 px-3 py-0.5 text-white font-semibold shadow-sm", children: answerText }) }))] }, idx))) }));
+    };
+    // Get selected option text
+    const getSelectedOptionText = () => {
+        const option = flatData.options.find(opt => opt.id === selectedAnswer);
+        return option?.text || '';
+    };
+    // Get correct option text
+    const getCorrectOptionText = () => {
+        const option = flatData.options.find(opt => opt.id === correctAnswer);
+        return option?.text || '';
+    };
+    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm", children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, \u0111i\u1EC1n t\u1EEB v\u00E0o ch\u1ED7 tr\u1ED1ng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
+                            ? 'bg-green-100 text-green-700'
+                            : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imagePreviewUrl || flatData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-purple-500" }) })) : (
+                                /* eslint-disable-next-line @next/next/no-img-element */
+                                _jsx("img", { src: imagePreviewUrl || flatData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
+                                        const target = e.target;
+                                        target.onerror = null;
+                                        target.src = '/images/placeholder-image.svg';
+                                    } })) })] })), _jsx("div", { className: "rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100", 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-purple-100 text-purple-600", children: _jsx("span", { className: "text-xs font-bold", children: "?" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "C\u00E2u h\u1ECFi" }), _jsx("p", { className: "mt-1 text-base font-medium leading-relaxed", children: renderQuestionWithBlank() })] })] }) }), _jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), flatData.options.map((option, optIndex) => {
+                                const isSelected = selectedAnswer === option.id;
+                                const isCorrectOption = option.id === correctAnswer;
+                                const letter = String.fromCharCode(65 + optIndex);
+                                return _jsxs("button", { type: "button", onClick: () => handleAnswerChange(option.id), disabled: isReviewMode, className: cn('group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all', isReviewMode
+                                        ? isCorrectOption
+                                            ? 'border-green-400 bg-green-50'
+                                            : isSelected
+                                                ? 'border-red-400 bg-red-50'
+                                                : 'border-gray-200 bg-gray-50'
+                                        : isSelected
+                                            ? 'border-purple-500 bg-purple-50 shadow-sm ring-2 ring-purple-100'
+                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all', isReviewMode
+                                                ? isCorrectOption
+                                                    ? 'bg-green-500 text-white'
+                                                    : isSelected
+                                                        ? 'bg-red-500 text-white'
+                                                        : 'bg-gray-200 text-gray-600'
+                                                : isSelected
+                                                    ? 'bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm'
+                                                    : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), _jsx("div", { className: "flex-1", children: _jsx("span", { className: cn('text-sm font-medium', isReviewMode && isCorrectOption
+                                                    ? 'text-green-800'
+                                                    : isReviewMode && isSelected && !isCorrectOption
+                                                        ? 'text-red-800'
+                                                        : 'text-gray-700'), children: option.text }) }), isReviewMode && (isCorrectOption || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectOption ? 'bg-green-500' : 'bg-red-500'), children: isCorrectOption
+                                                ? _jsx(Check, { className: "h-4 w-4 text-white" })
+                                                : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, option.id);
+                            })] }), hasAnswered && !isReviewMode && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-purple-50 to-indigo-50 p-4 border border-purple-100", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-purple-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-purple-700 uppercase tracking-wider", children: "Preview c\u00E2u tr\u1EA3 l\u1EDDi" })] }), _jsx("p", { className: "text-sm text-gray-800 leading-relaxed", children: renderQuestionWithAnswer(getSelectedOptionText()) })] })), isReviewMode && hasAnswered && !isAnswerCorrect && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-green-700 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-sm text-gray-800 leading-relaxed", children: renderQuestionWithAnswer(getCorrectOptionText()) })] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng ch\u1ECDn m\u1ED9t \u0111\u00E1p \u00E1n" })] })), isReviewMode && explanation && (_jsx("div", { className: "rounded-lg 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 })] })] }) }))] })] }));
+}