@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/listen-and-speak-with-story-images/ListenAndSpeakWithStoryImagesCreator.js

@@ -1 +1,230 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as r,useRef as s,useState as i}from"react";import{Card as n,CardContent as a,CardHeader as l,CardTitle as o}from"../../../../components/ui/card";import{Label as c}from"../../../../components/ui/label";import{Button as d}from"../../../../components/ui/button";import{Input as h}from"../../../../components/ui/input";import{Textarea as m}from"../../../../components/ui/textarea";import{Form as g,FormControl as p,FormField as u,FormItem as x,FormMessage as f}from"../../../../components/ui/form";import{FileUpload as b}from"../../../../components/ui/file-upload";import{PointsInput as N}from"../../../../components/ui/points-input";import{useReactHookForm as w}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as v,usePresignedFileUrl as y}from"../../../../shared/lib/hooks";import{listenAndSpeakWithStoryImagesSchema as k}from"../../../../shared/lib/validation/listen-and-speak-with-story-images.validation";import{Plus as S,Trash2 as A,Volume2 as C,ImageIcon as U,MessageSquareText as V,Mic as j,BookOpen as J,Eye as O,Pencil as D,Info as z,ListChecks as B}from"lucide-react";import{CreatorGuide as H}from"../../components/CreatorGuide";import{ListenAndSpeakWithStoryImagesClient as T}from"./ListenAndSpeakWithStoryImagesClient";function F({imageUrl:t,index:r}){const{previewUrl:s}=y(t);return s?e("div",{className:"relative rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm",children:e("img",{src:s,alt:`Story image ${r+1}`,className:"h-44 w-full object-contain bg-gray-50 p-2"})}):null}export function ListenAndSpeakWithStoryImagesCreator({initialData:y,onChange:G,onUnsavedChangesChange:I,validationRef:K}){const P=y,R=w({zodSchema:k,defaultValues:{audioUrl:P?.audioUrl||"",images:P?.images?.length>0?P.images:[""],expectedAnswers:P?.expectedAnswers?.length>0?P.expectedAnswers:[""],points:P?.points??1,explanation:P?.explanation||"",isBackup:P?.isBackup||!1}}),{control:$,watch:q,trigger:E,clearErrors:L}=R,M=q("audioUrl"),W=q("images"),X=q("expectedAnswers"),Q=q("points"),Y=q("explanation"),Z=q("isBackup"),_=s(y),ee=s(!1),te=s(G),re=s("");r(()=>{te.current=G},[G]);const se=v(e=>{te.current?.(e)},300);r(()=>{K&&(K.current={triggerValidation:async()=>await E(),getFormData:()=>R.getValues()})},[K,R,E]),r(()=>{const e={audioUrl:P?.audioUrl||"",images:P?.images?.length>0?P.images:[""],expectedAnswers:P?.expectedAnswers?.length>0?P.expectedAnswers:[""],points:P?.points??1,explanation:P?.explanation||"",isBackup:P?.isBackup||!1};if(!(JSON.stringify(_.current)!==JSON.stringify(y)))return;_.current=y;const t={audioUrl:M,images:W,expectedAnswers:X,points:Q,explanation:Y,isBackup:Z},r=t.points===e.points&&t.explanation===e.explanation&&t.audioUrl===e.audioUrl&&JSON.stringify(t.images)===JSON.stringify(e.images)&&JSON.stringify(t.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(r&&!0===y?.isCompleted)return;!r&&(e.audioUrl!==t.audioUrl||JSON.stringify(e.images)!==JSON.stringify(t.images)||JSON.stringify(e.expectedAnswers)!==JSON.stringify(t.expectedAnswers))&&(ee.current=!0,R.reset(e),setTimeout(()=>{ee.current=!1},150))},[y,R,M,W,X,Y,Q,Z]);const ie=JSON.stringify(W),ne=JSON.stringify(X);r(()=>{if(ee.current){const e=JSON.stringify({audioUrl:M,images:W,expectedAnswers:X,points:Q,explanation:Y,isBackup:Z});return void(re.current=e)}const e={audioUrl:M,images:W,expectedAnswers:X,points:Q,explanation:Y,isBackup:Z},t=JSON.stringify(e);re.current!==t&&(re.current=t,se(e))},[M,ie,ne,Q,Y,Z,se]),r(()=>{I&&I(R.formState.isDirty)},[R.formState.isDirty,I]);const ae=(e,t)=>{const r=[...W];r[e]=t,R.setValue("images",r,{shouldValidate:!0,shouldDirty:!0})},le=W.filter(e=>""!==e.trim()).length,[oe,ce]=i(!1);if(oe){const r={audioUrl:M,images:W,expectedAnswers:X,explanation:Y,points:Q,isBackup:Z};return t("div",{className:"space-y-6",children:[e(n,{children:e(l,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(o,{children:"Nghe và nói — Kể câu chuyện (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Preview mode"})]}),t(d,{variant:"outline",size:"sm",onClick:()=>ce(!1),children:[e(D,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(T,{questionData:r,isReviewMode:!0})]})}return t("div",{className:"space-y-6",children:[e(H,{colorScheme:"blue",steps:[{text:"Upload các hình ảnh câu chuyện theo thứ tự — học sinh sẽ kể lại câu chuyện dựa trên hình"},{text:"Có thể thêm hoặc xóa hình ảnh linh hoạt"},{text:"Upload audio câu hỏi cho từng câu — giám khảo sẽ hỏi về nội dung câu chuyện"},{text:"Nhập các đáp án mong muốn cho mỗi câu hỏi",highlight:!0},{text:"Thêm giải thích nếu cần"}],tips:["Hình ảnh nên sắp xếp theo trình tự thời gian rõ ràng, mỗi hình thể hiện một sự kiện"]}),t(n,{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(l,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("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(B,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(o,{className:"text-xl font-bold text-gray-900",children:"Kể câu chuyện theo hình"}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Học sinh nhìn hình ảnh và kể lại câu chuyện"})]})]}),t(d,{variant:"outline",size:"sm",onClick:()=>ce(!0),disabled:!M||0===X.filter(e=>e.trim()).length,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(O,{className:"h-4 w-4"}),"Preview"]})]})})]}),t(g,{...R,children:[t(n,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-fuchsia-500 to-pink-500"}),e(l,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-fuchsia-600 shadow-md",children:e(J,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(o,{className:"text-lg font-bold text-gray-900",children:"Hình ảnh câu chuyện"}),e("p",{className:"text-sm text-gray-500",children:"Thêm hình ảnh theo thứ tự — Học sinh sẽ nhìn hình và kể lại câu chuyện"})]})]}),t("div",{className:"flex items-center gap-3",children:[t("span",{className:"inline-flex items-center rounded-full px-3 py-1 text-xs font-bold "+(le>0?"bg-green-100 text-green-700 border border-green-200":"bg-orange-100 text-orange-600 border border-orange-200"),children:[le," ảnh"]}),t(d,{type:"button",variant:"outline",size:"sm",onClick:()=>{const e=R.getValues("images");R.setValue("images",[...e,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-purple-200 text-purple-600 hover:bg-purple-50",children:[e(S,{className:"h-4 w-4"}),"Thêm ảnh"]})]})]})}),e(a,{children:e(u,{control:$,name:"images",render:()=>t(x,{children:[e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:W.map((r,s)=>t(n,{className:"border border-gray-200",children:[e(l,{className:"pb-2 pt-3 px-4",children:t("div",{className:"flex items-center justify-between",children:[t("span",{className:"text-sm font-semibold text-gray-600 flex items-center gap-2",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-purple-100 text-purple-700 text-xs font-bold",children:s+1}),"Ảnh ",s+1]}),t("div",{className:"flex items-center gap-1",children:[r&&e(d,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>ae(e,""))(s),className:"h-7 w-7 rounded-full text-orange-400 hover:text-orange-600 hover:bg-orange-50",title:"Xóa ảnh",children:e(U,{className:"h-3.5 w-3.5"})}),W.length>1&&e(d,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(W.length>1){const t=W.filter((t,r)=>r!==e);R.setValue("images",t,{shouldValidate:!0,shouldDirty:!0})}})(s),className:"h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50",title:"Xóa slot",children:e(A,{className:"h-3.5 w-3.5"})})]})]})}),t(a,{className:"space-y-2 px-4 pb-4",children:[r?e(F,{imageUrl:r,index:s}):e(b,{id:`story-img-${s}`,label:"",accept:"image/*",value:"",onChange:e=>ae(s,e),placeholder:`Upload ảnh ${s+1}`,maxSize:5,autoUpload:!0,prefix:"questions/story-images"}),R.formState.errors?.images?.[s]&&t("p",{className:"text-sm font-medium text-destructive",children:["Vui lòng tải lên ảnh ",s+1]})]})]},s))}),R.formState.errors?.images?.message&&e(f,{})]})})})]}),t(n,{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(l,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(j,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(o,{className:"text-lg font-semibold text-gray-800",children:"Câu hỏi: Kể câu chuyện"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nghe audio, nhìn các hình ảnh và mô tả câu chuyện bằng lời"})]})]})}),t(a,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:t("div",{className:"flex flex-col md:flex-row gap-6",children:[e("div",{className:"flex-1",children:e(N,{...R.register("points",{valueAsNumber:!0}),error:R.formState.errors?.points?.message})}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),t("div",{className:"space-y-2",children:[t(c,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(C,{className:"h-4 w-4 text-indigo-500"}),"File Audio câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(u,{control:$,name:"audioUrl",render:({field:r})=>t(x,{children:[e(p,{children:e(b,{id:"audio-story-images",label:"",accept:"audio/*",value:r.value,onChange:e=>{r.onChange(e),L("audioUrl")},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"listen-and-speak"})}),e(f,{})]})})]})]})]}),t(n,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-green-400 to-emerald-500"}),e(l,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm",children:e(V,{className:"h-4 w-4 text-white"})}),e("div",{children:t(o,{className:"text-lg font-semibold text-gray-800",children:["Đáp án mong muốn (",X.filter(e=>e.trim()).length,")"]})})]}),t(d,{type:"button",variant:"outline",size:"sm",onClick:()=>{const e=R.getValues("expectedAnswers");R.setValue("expectedAnswers",[...e,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(S,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),t(a,{className:"space-y-4",children:[t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(z,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),t("div",{className:"text-xs text-blue-700 space-y-1",children:[e("p",{children:"Nhập các câu trả lời mong muốn. Có thể thêm nhiều đáp án nếu có nhiều cách trả lời đúng."}),t("p",{children:[e("span",{className:"font-semibold",children:"• Chấm thủ công:"})," Giáo viên dùng các đáp án này làm tham khảo để chấm điểm."]}),t("p",{children:[e("span",{className:"font-semibold",children:"• Chấm tự động (AI):"})," Hệ thống dùng AI so sánh giọng nói của học sinh với các đáp án để tự động chấm điểm."]})]})]}),t("div",{className:"space-y-3",children:[X.map((r,s)=>t("div",{className:"flex items-start gap-3 group/answer",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm",children:s+1}),t("div",{className:"flex-1",children:[e(h,{placeholder:"VD: "+(0===s?"First, the boy went to the park.":"Then he saw a dog and played with it."),value:r||"",onChange:e=>((e,t)=>{const r=[...X];r[e]=t,R.setValue("expectedAnswers",r,{shouldValidate:!0,shouldDirty:!0})})(s,e.target.value),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),R.formState.errors?.expectedAnswers?.[s]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:R.formState.errors.expectedAnswers[s]?.message})]}),X.length>1&&e(d,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(X.length>1){const t=X.filter((t,r)=>r!==e);R.setValue("expectedAnswers",t,{shouldValidate:!0,shouldDirty:!0})}})(s),className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity",children:e(A,{className:"h-4 w-4"})})]},s)),R.formState.errors?.expectedAnswers&&!Array.isArray(R.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:R.formState.errors.expectedAnswers.message})]})]})]}),t(n,{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(l,{className:"pb-4",children:t("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(J,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(o,{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(a,{children:e(m,{...R.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none",rows:3})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { PointsInput } from '../../../../components/ui/points-input';
+// Hooks
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { listenAndSpeakWithStoryImagesSchema, } from '../../../../shared/lib/validation/listen-and-speak-with-story-images.validation';
+// Icons
+import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, Mic, BookOpen, Eye, Pencil, Info, ListChecks } from 'lucide-react';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { ListenAndSpeakWithStoryImagesClient } from './ListenAndSpeakWithStoryImagesClient';
+// ─── Sub-component: Image preview with presigned URL ─────────────────────────
+function ImagePreview({ imageUrl, index }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsx("div", { className: "relative rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm", children: _jsx("img", { src: previewUrl, alt: `Story image ${index + 1}`, className: "h-44 w-full object-contain bg-gray-50 p-2" }) }));
+}
+// ─── Main Creator Component ──────────────────────────────────────────────────
+export function ListenAndSpeakWithStoryImagesCreator({ initialData, onChange, onUnsavedChangesChange, validationRef, }) {
+    // ---------------------------------------------------------------
+    // Form setup with Zod validation
+    // ---------------------------------------------------------------
+    const apiData = initialData;
+    const form = useReactHookForm({
+        zodSchema: listenAndSpeakWithStoryImagesSchema,
+        defaultValues: {
+            audioUrl: apiData?.audioUrl || '',
+            images: apiData?.images?.length > 0 ? apiData.images : [''],
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        },
+    });
+    const { control, watch, trigger, clearErrors } = form;
+    const watchedAudioUrl = watch('audioUrl');
+    const watchedImages = watch('images');
+    const watchedExpectedAnswers = watch('expectedAnswers');
+    const watchedPoints = watch('points');
+    const watchedExplanation = watch('explanation');
+    const watchedIsBackup = watch('isBackup');
+    // ---------------------------------------------------------------
+    // Echo-detection refs
+    // ---------------------------------------------------------------
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ---------------------------------------------------------------
+    // Connect to external validation trigger
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await trigger();
+                },
+                getFormData: () => form.getValues(),
+            };
+        }
+    }, [validationRef, form, trigger]);
+    // ---------------------------------------------------------------
+    // Sync form when initialData props change (echo-detection)
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        const normalizedInitialData = {
+            audioUrl: apiData?.audioUrl || '',
+            images: apiData?.images?.length > 0 ? apiData.images : [''],
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            audioUrl: watchedAudioUrl,
+            images: watchedImages,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            JSON.stringify(currentFormData.images) === JSON.stringify(normalizedInitialData.images) &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved)
+            return;
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                JSON.stringify(normalizedInitialData.images) !== JSON.stringify(currentFormData.images) ||
+                JSON.stringify(normalizedInitialData.expectedAnswers) !== JSON.stringify(currentFormData.expectedAnswers));
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedAudioUrl, watchedImages, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedIsBackup]);
+    // ---------------------------------------------------------------
+    // Fire onChange when form values change
+    // ---------------------------------------------------------------
+    const watchedImagesString = JSON.stringify(watchedImages);
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                images: watchedImages,
+                expectedAnswers: watchedExpectedAnswers,
+                points: watchedPoints,
+                explanation: watchedExplanation,
+                isBackup: watchedIsBackup,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            images: watchedImages,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedImagesString,
+        watchedExpectedAnswersString,
+        watchedPoints,
+        watchedExplanation,
+        watchedIsBackup,
+        debouncedOnChange,
+    ]);
+    // Track unsaved changes
+    useEffect(() => {
+        if (onUnsavedChangesChange) {
+            onUnsavedChangesChange(form.formState.isDirty);
+        }
+    }, [form.formState.isDirty, onUnsavedChangesChange]);
+    // ---------------------------------------------------------------
+    // Handlers — Images (dynamic count)
+    // ---------------------------------------------------------------
+    const handleImageChange = (index, url) => {
+        const newImages = [...watchedImages];
+        newImages[index] = url;
+        form.setValue('images', newImages, { shouldValidate: true, shouldDirty: true });
+    };
+    const addImage = () => {
+        const currentImages = form.getValues('images');
+        form.setValue('images', [...currentImages, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const removeImage = (index) => {
+        if (watchedImages.length > 1) {
+            const newImages = watchedImages.filter((_, i) => i !== index);
+            form.setValue('images', newImages, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const clearImage = (index) => handleImageChange(index, '');
+    // ---------------------------------------------------------------
+    // Handlers — Expected Answers
+    // ---------------------------------------------------------------
+    const addExpectedAnswer = () => {
+        const currentAnswers = form.getValues('expectedAnswers');
+        form.setValue('expectedAnswers', [...currentAnswers, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const handleExpectedAnswerChange = (index, value) => {
+        const newAnswers = [...watchedExpectedAnswers];
+        newAnswers[index] = value;
+        form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+    };
+    const removeExpectedAnswer = (index) => {
+        if (watchedExpectedAnswers.length > 1) {
+            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const uploadedCount = watchedImages.filter(img => img.trim() !== '').length;
+    // ---------------------------------------------------------------
+    // Preview mode
+    // ---------------------------------------------------------------
+    const [isClientMode, setIsClientMode] = useState(false);
+    if (isClientMode) {
+        const questionData = {
+            audioUrl: watchedAudioUrl,
+            images: watchedImages,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            isBackup: watchedIsBackup,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nghe v\u00E0 n\u00F3i \u2014 K\u1EC3 c\u00E2u chuy\u1EC7n (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Preview mode" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndSpeakWithStoryImagesClient, { questionData: questionData, isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Upload các hình ảnh câu chuyện theo thứ tự — học sinh sẽ kể lại câu chuyện dựa trên hình' },
+                    { text: 'Có thể thêm hoặc xóa hình ảnh linh hoạt' },
+                    { text: 'Upload audio câu hỏi cho từng câu — giám khảo sẽ hỏi về nội dung câu chuyện' },
+                    { text: 'Nhập các đáp án mong muốn cho mỗi câu hỏi', highlight: true },
+                    { text: 'Thêm giải thích nếu cần' },
+                ], tips: ['Hình ảnh nên sắp xếp theo trình tự thời gian rõ ràng, mỗi hình thể hiện một sự kiện'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "K\u1EC3 c\u00E2u chuy\u1EC7n theo h\u00ECnh" }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "H\u1ECDc sinh nh\u00ECn h\u00ECnh \u1EA3nh v\u00E0 k\u1EC3 l\u1EA1i c\u00E2u chuy\u1EC7n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-fuchsia-500 to-pink-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 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-fuchsia-600 shadow-md", children: _jsx(BookOpen, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "H\u00ECnh \u1EA3nh c\u00E2u chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-500", children: "Th\u00EAm h\u00ECnh \u1EA3nh theo th\u1EE9 t\u1EF1 \u2014 H\u1ECDc sinh s\u1EBD nh\u00ECn h\u00ECnh v\u00E0 k\u1EC3 l\u1EA1i c\u00E2u chuy\u1EC7n" })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount > 0
+                                                        ? 'bg-green-100 text-green-700 border border-green-200'
+                                                        : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, " \u1EA3nh"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addImage, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] })] })] }) }), _jsx(CardContent, { children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: watchedImages.map((imgUrl, index) => (_jsxs(Card, { className: "border border-gray-200", children: [_jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100 text-purple-700 text-xs font-bold", children: index + 1 }), "\u1EA2nh ", index + 1] }), _jsxs("div", { className: "flex items-center gap-1", children: [imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-orange-400 hover:text-orange-600 hover:bg-orange-50", title: "X\u00F3a \u1EA3nh", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5" }) })), watchedImages.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", title: "X\u00F3a slot", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }) }), _jsxs(CardContent, { className: "space-y-2 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index })) : (_jsx(FileUpload, { id: `story-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/story-images" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] }))] })] }, index))) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {}))] })) }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi: K\u1EC3 c\u00E2u chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe audio, nh\u00ECn c\u00E1c h\u00ECnh \u1EA3nh v\u00E0 m\u00F4 t\u1EA3 c\u00E2u chuy\u1EC7n b\u1EB1ng l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-story-images", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsx("div", { children: _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] }) })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'First, the boy went to the park.' : 'Then he saw a dog and played with it.'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-with-story-images/register.js

@@ -1 +1,56 @@
-import{ListenAndSpeakWithStoryImagesCreator as e}from"./ListenAndSpeakWithStoryImagesCreator";export const listenAndSpeakWithStoryImagesRegistration={component:e,wrapOnSave:(e,t)=>({type:t.questionType,content:{audioUrl:e.audioUrl,images:e.images||[],isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers||[]},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{audioUrl:e.audioUrl,images:e.images||[],isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers||[]},explanation:e?.explanation||""}),transformInitialData:e=>{const t=e?.content,a=e?.answer||e?.correctAnswer||e?.correct_answer,n=e?.total_points?parseFloat(e.total_points):e?.points||t?.points||a?.points||1,s=e?.explanation||t?.explanation||a?.explanation||"";return{audioUrl:t?.audioUrl||a?.audioUrl||"",images:t?.images||a?.images||[],expectedAnswers:a?.expectedAnswers||[],explanation:s,points:n,isBackup:t?.isBackup||!1}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef})};
+import { ListenAndSpeakWithStoryImagesCreator } from './ListenAndSpeakWithStoryImagesCreator';
+export const listenAndSpeakWithStoryImagesRegistration = {
+    component: ListenAndSpeakWithStoryImagesCreator,
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            audioUrl: data.audioUrl,
+            images: data.images || [],
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+        },
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            audioUrl: data.audioUrl,
+            images: data.images || [],
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+        },
+        explanation: data?.explanation || '',
+    }),
+    transformInitialData: (data) => {
+        const content = data?.content;
+        const answer = data?.answer || data?.correctAnswer || data?.correct_answer;
+        const points = data?.total_points
+            ? parseFloat(data.total_points)
+            : (data?.points || content?.points || answer?.points || 1);
+        const explanation = data?.explanation || content?.explanation || answer?.explanation || '';
+        return {
+            audioUrl: content?.audioUrl || answer?.audioUrl || '',
+            images: content?.images || answer?.images || [],
+            expectedAnswers: answer?.expectedAnswers || [],
+            explanation,
+            points,
+            isBackup: content?.isBackup || false,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+};

package/dist/components/questions/types/listen-and-speak-with-story-images/transform.js

@@ -1 +1,16 @@
-export const transformListenAndSpeakWithStoryImages=e=>{const s=e.content,a=e.answer,r=a?.expectedAnswers||[];return{apiContent:{audioUrl:s?.audioUrl||a?.audioUrl||"",images:s?.images||a?.images||[],isBackup:s?.isBackup||a?.isBackup||!1},apiCorrectAnswer:{expectedAnswers:r}}};
+export const transformListenAndSpeakWithStoryImages = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const apiContent = {
+        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
+        images: contentData?.images || answerData?.images || [],
+        isBackup: contentData?.isBackup || answerData?.isBackup || false,
+    };
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+        },
+    };
+};

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

@@ -1 +1,72 @@
-"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,Lightbulb as a}from"lucide-react";import{usePresignedFileUrl as d}from"../../../../shared/lib/hooks";function l({subQuestion:t,index:s,userAnswerValue:a,isReviewMode:l,onAnswerChange:o}){const{previewUrl:c,isLoading:g}=d(t.imageUrl||""),m=t.options.find(e=>e.isCorrect),h=a===(m?.id||""),b=""!==a;return r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-sm font-bold text-white shadow-sm",children:s+1}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nhìn tranh, chọn đáp án đúng"})]}),l&&b&&r("div",{className:"flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold "+(h?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(h?i:n,{className:"h-3.5 w-3.5"}),h?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-4",children:[(c||t.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:g?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-blue-500"})}):e("img",{src:c||t.imageUrl,alt:"Question illustration",className:"max-h-56 w-auto object-contain",onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})})]}),e("div",{className:"space-y-2",children:t.options.map((t,s)=>{const d=a===t.id,c=t.isCorrect,g=String.fromCharCode(65+s);return r("button",{type:"button",onClick:()=>!l&&o(t.id),disabled:l,className:"group flex w-full items-center gap-3 rounded-lg border-2 p-3 text-left transition-all "+(l?c?"border-green-400 bg-green-50":d?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":d?"border-blue-500 bg-blue-50 shadow-sm":"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm"),children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all "+(l?c?"bg-green-500 text-white":d?"bg-red-500 text-white":"bg-gray-200 text-gray-600":d?"bg-blue-500 text-white":"bg-gray-100 text-gray-600 group-hover:bg-gray-200"),children:g}),e("span",{className:"flex-1 text-sm font-medium "+(l&&c?"text-green-800":l&&d&&!c?"text-red-800":"text-gray-700"),children:t.text}),l&&(c||d)&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full "+(c?"bg-green-500":"bg-red-500"),children:e(c?i:n,{className:"h-4 w-4 text-white"})})]},t.id)})}),l&&b&&!h&&r("div",{className:"flex items-center gap-2 rounded-lg bg-green-50 p-3 border border-green-200",children:[e(i,{className:"h-4 w-4 text-green-600"}),r("span",{className:"text-sm text-green-700",children:["Đáp án đúng: ",e("strong",{children:m?.text})]})]})]})]})}export function LookPictureChooseCorrectAnswerClient({questionData:i,onSubmit:n,isReviewMode:d=!1,userAnswer:o={},explanation:c}){const[g,m]=t(o);s(()=>{m(o)},[o]);return r("div",{className:"space-y-6",children:[i.subQuestions.map((r,t)=>e(l,{subQuestion:r,index:t,userAnswerValue:g[r.id]||"",isReviewMode:d,onAnswerChange:e=>((e,r)=>{if(d)return;const t={...g,[e]:r};m(t),n?.(t)})(r.id,e)},r.id)),d&&c&&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(a,{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:c})]})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, Lightbulb } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+function SubQuestionClient({ subQuestion, index, userAnswerValue, isReviewMode, onAnswerChange, }) {
+    // Use hook at component level
+    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(subQuestion.imageUrl || '');
+    // Find correct answer
+    const correctOption = subQuestion.options.find((opt) => opt.isCorrect);
+    const correctOptionId = correctOption?.id || '';
+    // Check if answer is correct
+    const isAnswerCorrect = userAnswerValue === correctOptionId;
+    const hasAnswered = userAnswerValue !== '';
+    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-sm font-bold text-white shadow-sm", children: index + 1 }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: `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-4", children: [(imagePreviewUrl || subQuestion.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-blue-500" }) })) : (
+                                /* eslint-disable-next-line @next/next/no-img-element */
+                                _jsx("img", { src: imagePreviewUrl || subQuestion.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain", onError: (e) => {
+                                        const target = e.target;
+                                        target.onerror = null;
+                                        target.src = '/images/placeholder-image.svg';
+                                    } })) })] })), _jsx("div", { className: "space-y-2", children: subQuestion.options.map((option, optIndex) => {
+                            const isSelected = userAnswerValue === option.id;
+                            const isCorrectAnswer = option.isCorrect;
+                            const letter = String.fromCharCode(65 + optIndex);
+                            return _jsxs("button", { type: "button", onClick: () => !isReviewMode && onAnswerChange(option.id), disabled: isReviewMode, className: `group flex w-full items-center gap-3 rounded-lg border-2 p-3 text-left transition-all ${isReviewMode
+                                    ? isCorrectAnswer
+                                        ? 'border-green-400 bg-green-50'
+                                        : isSelected
+                                            ? 'border-red-400 bg-red-50'
+                                            : 'border-gray-200 bg-gray-50'
+                                    : isSelected
+                                        ? 'border-blue-500 bg-blue-50 shadow-sm'
+                                        : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'}`, children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all ${isReviewMode
+                                            ? isCorrectAnswer
+                                                ? 'bg-green-500 text-white'
+                                                : isSelected
+                                                    ? 'bg-red-500 text-white'
+                                                    : 'bg-gray-200 text-gray-600'
+                                            : isSelected
+                                                ? 'bg-blue-500 text-white'
+                                                : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'}`, children: letter }), _jsx("span", { className: `flex-1 text-sm font-medium ${isReviewMode && isCorrectAnswer
+                                            ? 'text-green-800'
+                                            : isReviewMode && isSelected && !isCorrectAnswer
+                                                ? 'text-red-800'
+                                                : 'text-gray-700'}`, children: option.text }), isReviewMode && (isCorrectAnswer || isSelected) && (_jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-full ${isCorrectAnswer ? 'bg-green-500' : 'bg-red-500'}`, children: isCorrectAnswer
+                                            ? _jsx(Check, { className: "h-4 w-4 text-white" })
+                                            : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, option.id);
+                        }) }), isReviewMode && hasAnswered && !isAnswerCorrect && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 p-3 border border-green-200", children: [_jsx(Check, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: correctOption?.text })] })] }))] })] }));
+}
+export function LookPictureChooseCorrectAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer = {}, explanation, }) {
+    // State for answers: { subQuestionId: selectedOptionId }
+    const [answers, setAnswers] = useState(userAnswer);
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        setAnswers(userAnswer);
+    }, [userAnswer]);
+    // Handle answer change for a sub-question
+    const handleAnswerChange = (subQuestionId, optionId) => {
+        if (isReviewMode)
+            return;
+        const newAnswers = {
+            ...answers,
+            [subQuestionId]: optionId,
+        };
+        setAnswers(newAnswers);
+        // Auto submit if callback provided
+        onSubmit?.(newAnswers);
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [questionData.subQuestions.map((subQuestion, index) => (_jsx(SubQuestionClient, { subQuestion: subQuestion, index: index, userAnswerValue: answers[subQuestion.id] || '', isReviewMode: isReviewMode, onAnswerChange: (value) => handleAnswerChange(subQuestion.id, value) }, subQuestion.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 })] })] }) }))] }));
+}