@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/questions/types/write-a-short-letter/WriteAShortLetterCreator.js

@@ -1 +1,320 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as s,useEffect as i}from"react";import{Button as n}from"../../../../components/ui/button";import{Label as a}from"../../../../components/ui/label";import{Input as o}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as c}from"../../../../components/ui/points-input";import{FileUpload as d}from"../../../../components/ui/file-upload";import{Card as m,CardContent as h,CardHeader as u,CardTitle as g}from"../../../../components/ui/card";import{Pencil as p,Eye as f,Plus as x,Trash2 as v,Lightbulb as b,Mail as N,ImageIcon as y,X as w}from"lucide-react";import{WriteAShortLetterClient as W}from"./WriteAShortLetterClient";import{useReactHookForm as k}from"../../../../shared/lib/hooks/useReactHookForm";import{usePresignedFileUrl as C}from"../../../../shared/lib/hooks/usePresignedFileUrl";import{z as S}from"zod";function j({imageKey:t,index:s,localPreviewUrl:i,onRemove:n}){const{previewUrl:a}=C(t),o=i||a||"";return r("div",{className:"group relative overflow-hidden rounded-lg border border-violet-200 bg-white shadow-sm transition-all hover:shadow-md",children:[e("div",{className:"aspect-square w-full overflow-hidden bg-gray-50",children:o?e("img",{src:o,alt:`Ảnh hướng dẫn ${s+1}`,className:"h-full w-full object-cover transition-transform group-hover:scale-105",onError:e=>{e.target.src="/images/placeholder-image.svg"}}):e("div",{className:"flex h-full w-full items-center justify-center",children:e(y,{className:"h-8 w-8 text-gray-300"})})}),e("button",{type:"button",onClick:()=>n(s),className:"absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-red-600",title:"Xóa ảnh",children:e(w,{className:"h-3.5 w-3.5"})}),e("div",{className:"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-1.5 opacity-0 transition-opacity group-hover:opacity-100",children:r("span",{className:"text-xs font-medium text-white",children:["Ảnh ",s+1]})})]})}const I=S.object({informations:S.array(S.string()),minWords:S.coerce.number().min(1,"Số từ tối thiểu phải >= 1"),maxWords:S.coerce.number().optional(),instruction:S.string().optional(),points:S.coerce.number().min(1,"Điểm phải >= 1")});function E({initialData:w,onChange:C,externalErrors:S,validationRef:E}){const[L,T]=t(w?.informations||[""]),[V,z]=t(w?.minWords??20),[R,U]=t(w?.maxWords),[P,F]=t(w?.instructions?.mainInstruction||""),[J,M]=t(w?.guideImages||[]),[O,H]=t(w?.points||10),[$,q]=t({}),A=s(null),[B,D]=t(!1),K=k({defaultValues:{informations:L,minWords:V,maxWords:R,instruction:P,points:O},zodSchema:I,mode:"onBlur"}),X=s(w),G=s(!0),Q=s(!1),Y=s(""),Z=s([]);i(()=>{E&&(E.current={triggerValidation:async()=>re()})},[E,L,V,R,P,J,O]),i(()=>{const e=JSON.stringify(w);if(Q.current&&(e===Y.current||Z.current.includes(e)))return void(X.current=w);!(JSON.stringify(X.current)!==e)&&Q.current||(G.current=!0,X.current=w,Q.current=!0,T(w?.informations?.length?w.informations:[""]),z(w?.minWords??20),U(w?.maxWords),F(w?.instructions?.mainInstruction??""),M(w?.guideImages??[]),H(w?.points??10),q({}),setTimeout(()=>{G.current=!1},150))},[w]);const _=s(C);i(()=>{_.current=C},[C]);const ee=s("");i(()=>{if(G.current||!Q.current){const e=JSON.stringify({informations:L,minWords:V,maxWords:R,instruction:P,guideImages:J,points:O});return void(ee.current=e)}if(!P.trim()&&L.every(e=>!e.trim()))return;const e={informations:L,minWords:V,maxWords:R,instructions:{mainInstruction:P||""},guideImages:J.length>0?J:void 0,points:O},r=JSON.stringify(e);ee.current!==r&&(ee.current=r,Y.current=JSON.stringify({informations:L,minWords:V,maxWords:R,instructions:{mainInstruction:P||""},guideImages:J,points:O}),Z.current=[...Z.current,Y.current].slice(-10),_.current?.(e))},[L,V,R,P,J,O]);const re=()=>{K.setValue("informations",L),K.setValue("minWords",V),K.setValue("maxWords",R),K.setValue("instruction",P),K.setValue("points",O);const e=I.safeParse({informations:L,minWords:V,maxWords:R,instruction:P,points:O});return!!e.success||(e.error.issues.forEach(e=>{const r=e.path.join(".");K.setError(r,{message:e.message})}),!1)},te=e=>{const r=J[e];M(r=>r.filter((r,t)=>t!==e)),r&&q(e=>{if(!(r in e))return e;const{[r]:t,...s}=e;return s})},se=(()=>{const e={},r=K.formState.errors.informations;r&&"string"==typeof r.message&&(e.informations=r.message);const t=K.formState.errors.minWords;t&&"string"==typeof t.message&&(e.minWords=t.message);const s=K.formState.errors.maxWords;s&&"string"==typeof s.message&&(e.maxWords=s.message);const i=K.formState.errors.instruction;i&&"string"==typeof i.message&&(e.instruction=i.message);const n=K.formState.errors.points;return n&&"string"==typeof n.message&&(e.points=n.message),e})();if(B){const t={informations:L,minWords:V,maxWords:R,instructions:{mainInstruction:P||""},guideImages:J.length>0?J:void 0};return r("div",{className:"space-y-6",children:[e(m,{children:e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(g,{children:"Write a Short Letter (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(n,{variant:"outline",size:"sm",onClick:()=>D(!1),children:[e(p,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(W,{questionData:t,onSubmit:()=>{},isReviewMode:!0})]})}return r("div",{className:"space-y-6",children:[S&&S.length>0&&e("div",{className:"rounded-lg border border-red-200 bg-red-50 p-4",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex-shrink-0",children:e("svg",{className:"h-5 w-5 text-red-600",fill:"currentColor",viewBox:"0 0 20 20",children:e("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"})})}),r("div",{className:"flex-1",children:[e("h3",{className:"text-sm font-medium text-red-800",children:"Vui lòng sửa các lỗi sau:"}),e("ul",{className:"mt-2 list-disc list-inside space-y-1",children:S.map((r,t)=>e("li",{className:"text-sm text-red-700",children:r},t))})]})]})}),r(m,{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-pink-500 via-rose-500 to-orange-500"}),e(u,{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-pink-500 to-rose-600 shadow-md",children:e(N,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:"Write a Short Letter"}),e("p",{className:"text-sm text-gray-500",children:"Tạo bài tập viết thư với các thông tin cần bao gồm"})]})]}),r(n,{variant:"outline",size:"sm",onClick:()=>D(!0),disabled:!V||V<1,className:"gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700",children:[e(f,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(h,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-pink-200 bg-gradient-to-r from-pink-50 to-rose-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-pink-100",children:e(b,{className:"h-4 w-4 text-pink-600"})}),r("div",{className:"text-sm text-pink-900",children:[e("p",{className:"font-semibold text-pink-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-pink-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-pink-400"}),"Nhập hướng dẫn viết thư cho học sinh"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-pink-400"}),"Liệt kê các thông tin cần bao gồm trong bài viết"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-pink-400"}),"Thiết lập giới hạn số từ tối thiểu/tối đa"]})]})]})]})}),r("div",{className:"grid grid-cols-1 gap-6 md:grid-cols-2",children:[e("div",{children:e(c,{defaultValue:O,onChange:e=>H(Number(e.target.value)||1),error:se.points})}),r("div",{className:"rounded-lg border border-gray-200 bg-gray-50/50 p-4",children:[e(a,{className:"mb-3 block text-sm font-medium text-gray-700",children:"Giới hạn số từ"}),r("div",{className:"flex items-center gap-4",children:[r("div",{className:"flex-1",children:[r(a,{htmlFor:"minWords",className:"text-xs text-gray-500",children:["Tối thiểu ",e("span",{className:"text-red-500",children:"*"})]}),e(o,{id:"minWords",type:"number",min:"1",step:"1",value:V??"",onChange:e=>{const r=e.target.value;if(""===r)z(1);else{const e=parseInt(r,10);z(e<1?1:e)}K.clearErrors("minWords")},placeholder:"20",className:"mt-1 "+(se.minWords?"border-red-500 focus:ring-red-500":"")}),se.minWords&&e("p",{className:"mt-1 text-xs text-red-600",children:se.minWords})]}),e("span",{className:"mt-6 text-gray-400",children:"—"}),r("div",{className:"flex-1",children:[e(a,{htmlFor:"maxWords",className:"text-xs text-gray-500",children:"Tối đa"}),e(o,{id:"maxWords",type:"number",min:"1",step:"1",value:R??"",onChange:e=>{const r=e.target.value;if(""===r)U(void 0);else{const e=parseInt(r,10);U(e<1?1:e)}K.clearErrors("maxWords")},placeholder:"∞",className:"mt-1 "+(se.maxWords?"border-red-500 focus:ring-red-500":"")}),se.maxWords&&e("p",{className:"mt-1 text-xs text-red-600",children:se.maxWords})]})]})]})]}),r("div",{children:[e(a,{htmlFor:"instruction",className:"text-sm font-medium",children:"Hướng dẫn"}),e(l,{id:"instruction",value:P,onChange:e=>{F(e.target.value),K.clearErrors("instruction")},placeholder:"Ví dụ: You are having a birthday party. Write a short letter to your friend, Minh, to invite him. Tell him about the party.",className:"mt-1.5 resize-none "+(se.instruction?"border-red-500":""),rows:3}),se.instruction&&e("p",{className:"mt-1 text-sm text-red-600",children:se.instruction})]}),r("div",{className:"space-y-3 rounded-lg border border-blue-100 bg-blue-50/30 p-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-full bg-blue-100",children:e("span",{className:"text-xs font-semibold text-blue-600",children:"i"})}),e(a,{className:"text-sm font-semibold text-gray-800",children:"Thông tin cần bao gồm"})]}),r(n,{type:"button",variant:"outline",size:"sm",onClick:()=>{T([...L,""]),K.clearErrors("informations")},className:"h-8 gap-1.5 border-blue-200 bg-white text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(x,{className:"h-3.5 w-3.5"}),"Thêm"]})]}),se.informations&&e("div",{className:"rounded-md border border-red-200 bg-red-50 p-3",children:e("p",{className:"text-sm text-red-600",children:se.informations})}),e("div",{className:"space-y-2",children:L.map((t,s)=>e("div",{className:"space-y-1",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-medium text-blue-600",children:s+1}),e(o,{value:t,onChange:e=>((e,r)=>{const t=[...L];t[e]=r,T(t),K.clearErrors("informations")})(s,e.target.value),placeholder:`Thông tin ${s+1}...`,className:"flex-1 border-gray-200"}),L.length>1&&e(n,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{L.length>1&&T(L.filter((r,t)=>t!==e))})(s),className:"h-8 w-8 flex-shrink-0 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500",children:e(v,{className:"h-4 w-4"})})]})},s))}),e("p",{className:"text-xs text-gray-500 italic",children:"💡 Liệt kê các thông tin học sinh cần đề cập trong bài viết"})]}),r("div",{className:"space-y-3 rounded-lg border border-violet-100 bg-violet-50/30 p-4",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-violet-100",children:e(y,{className:"h-3.5 w-3.5 text-violet-600"})}),e(a,{className:"text-sm font-semibold text-gray-800",children:"Ảnh hướng dẫn"}),e("span",{className:"text-xs text-gray-400"})]}),J.length>0&&e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",children:J.map((r,t)=>e(j,{imageKey:r,index:t,localPreviewUrl:$[r],onRemove:te},`${r}-${t}`))}),e(d,{label:"Thêm ảnh hướng dẫn",accept:"image/*",value:"",onChange:e=>{e&&(A.current=e,M(r=>[...r,e]))},onPresignedUrlChange:e=>{const r=A.current;e&&r&&(q(t=>({...t,[r]:e})),A.current=null)},autoUpload:!0,prefix:"write-short-letter/guide",placeholder:"Chọn hoặc kéo thả ảnh vào đây",icon:e(y,{className:"h-4 w-4"})}),e("p",{className:"text-xs text-gray-500 italic",children:"📷 Upload nhiều ảnh để hướng dẫn học sinh viết bài (ví dụ: mẫu thư, hình ảnh minh họa)"})]})]})]})]})}export function WriteAShortLetterCreator(r){return e(E,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Pencil, Eye, Plus, Trash2, Lightbulb, Mail, ImageIcon, X } from 'lucide-react';
+import { WriteAShortLetterClient } from './WriteAShortLetterClient';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks/usePresignedFileUrl';
+import { z } from 'zod';
+// Component to render a single guide image with presigned URL resolution
+function GuideImageItem({ imageKey, index, localPreviewUrl, onRemove, }) {
+    const { previewUrl: presignedUrl } = usePresignedFileUrl(imageKey);
+    const displayUrl = localPreviewUrl || presignedUrl || '';
+    return (_jsxs("div", { className: "group relative overflow-hidden rounded-lg border border-violet-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "aspect-square w-full overflow-hidden bg-gray-50", children: displayUrl ? (_jsx("img", { src: displayUrl, alt: `Ảnh hướng dẫn ${index + 1}`, className: "h-full w-full object-cover transition-transform group-hover:scale-105", onError: (e) => {
+                        e.target.src = '/images/placeholder-image.svg';
+                    } })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-8 w-8 text-gray-300" }) })) }), _jsx("button", { type: "button", onClick: () => onRemove(index), className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-red-600", title: "X\u00F3a \u1EA3nh", children: _jsx(X, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-1.5 opacity-0 transition-opacity group-hover:opacity-100", children: _jsxs("span", { className: "text-xs font-medium text-white", children: ["\u1EA2nh ", index + 1] }) })] }));
+}
+// Form schema for validation only
+const writeAShortLetterFormSchema = z.object({
+    informations: z.array(z.string()),
+    minWords: z.coerce.number().min(1, 'Số từ tối thiểu phải >= 1'),
+    maxWords: z.coerce.number().optional(),
+    instruction: z.string().optional(),
+    points: z.coerce.number().min(1, 'Điểm phải >= 1'),
+});
+function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors, validationRef, }) {
+    // State - use simple useState like ReadAndColorObjectsCreator
+    const [informations, setInformations] = useState(initialData?.informations || ['']);
+    const [minWords, setMinWords] = useState(initialData?.minWords ?? 20);
+    const [maxWords, setMaxWords] = useState(initialData?.maxWords);
+    const [instruction, setInstruction] = useState(initialData?.instructions?.mainInstruction || '');
+    const [guideImages, setGuideImages] = useState(initialData?.guideImages || []);
+    const [points, setPoints] = useState(initialData?.points || 10);
+    // Store presigned URLs keyed by imageKey (NOT index) to avoid index races
+    // when the user uploads several images quickly.
+    const [guideImagePreviewUrls, setGuideImagePreviewUrls] = useState({});
+    // Correlates an upload's `onChange(key)` with its later `onPresignedUrlChange(url)`
+    const pendingUploadKeyRef = useRef(null);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Use react-hook-form for validation only (like ReadAndColorObjectsCreator)
+    const form = useReactHookForm({
+        defaultValues: {
+            informations: informations,
+            minWords: minWords,
+            maxWords: maxWords,
+            instruction: instruction,
+            points: points,
+        },
+        zodSchema: writeAShortLetterFormSchema,
+        mode: 'onBlur',
+    });
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(true);
+    const hasInitializedRef = useRef(false);
+    // Stringified shape of the last payload we emitted (in initialData shape).
+    // Used to recognize when incoming initialData is just the parent echoing our own
+    // emission back — in that case we must NOT re-run the sync block, otherwise
+    // fast typing gets silently dropped (the sync's 150ms guard blocks subsequent
+    // onChange emissions).
+    const lastEmittedInitialDataRef = useRef('');
+    // Track a few recently emitted payloads because parent echoes can arrive slightly
+    // out of order while typing into number inputs (e.g. local `300`, then parent
+    // echoes older `30`). Those stale echoes must be ignored instead of overwriting
+    // the latest local state.
+    const recentEmittedInitialDataRef = useRef([]);
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return validateForm();
+                },
+            };
+        }
+    }, [validationRef, informations, minWords, maxWords, instruction, guideImages, points]);
+    // Sync state from initialData when it changes
+    useEffect(() => {
+        const incomingStr = JSON.stringify(initialData);
+        // If parent is echoing back one of our very recent emissions, do NOT
+        // re-enter the init block — otherwise we'd block subsequent user keystrokes
+        // via isInitializingRef for 150ms and silently drop input
+        // (e.g. "300" → older echoed "30").
+        if (hasInitializedRef.current &&
+            (incomingStr === lastEmittedInitialDataRef.current ||
+                recentEmittedInitialDataRef.current.includes(incomingStr))) {
+            previousInitialDataRef.current = initialData;
+            return;
+        }
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== incomingStr;
+        if (initialDataChanged || !hasInitializedRef.current) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            hasInitializedRef.current = true;
+            // Always overwrite every field so previous question's state doesn't leak
+            // (e.g. previous had maxWords=300, new question has no maxWords → must reset to undefined)
+            setInformations(initialData?.informations?.length ? initialData.informations : ['']);
+            setMinWords(initialData?.minWords ?? 20);
+            setMaxWords(initialData?.maxWords);
+            setInstruction(initialData?.instructions?.mainInstruction ?? '');
+            setGuideImages(initialData?.guideImages ?? []);
+            setPoints(initialData?.points ?? 10);
+            // Clear stale preview URLs from the previous question's uploads
+            setGuideImagePreviewUrls({});
+            // Reset flag after state updates
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData]);
+    // Store onChange callback in ref to avoid dependency issues
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Track previous values to prevent unnecessary onChange calls
+    const previousPayloadRef = useRef('');
+    // Trigger onChange when state changes (like ReadAndColorObjectsCreator)
+    useEffect(() => {
+        // Skip onChange during initialization to prevent infinite loop
+        if (isInitializingRef.current || !hasInitializedRef.current) {
+            // Still update previous payload ref to track current state
+            const currentPayload = JSON.stringify({
+                informations,
+                minWords,
+                maxWords,
+                instruction,
+                guideImages,
+                points,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        // Don't call onChange if we have no meaningful data yet
+        if (!instruction.trim() && informations.every((s) => !s.trim())) {
+            return;
+        }
+        // Create payload
+        const payload = {
+            informations,
+            minWords,
+            maxWords,
+            instructions: {
+                mainInstruction: instruction || '',
+            },
+            guideImages: guideImages.length > 0 ? guideImages : undefined,
+            points,
+        };
+        // Serialize payload for comparison
+        const payloadString = JSON.stringify(payload);
+        // Only call onChange if payload actually changed
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            // Record the shape parent is expected to echo back (via register.tsx
+            // transformInitialData), so the sync effect can recognize the echo and
+            // not re-enter its init guard. Field order & shape MUST match
+            // `transformInitialData` in register.tsx exactly, including
+            // `guideImages` being `[]` (never `undefined`).
+            lastEmittedInitialDataRef.current = JSON.stringify({
+                informations,
+                minWords,
+                maxWords,
+                instructions: { mainInstruction: instruction || '' },
+                guideImages,
+                points,
+            });
+            recentEmittedInitialDataRef.current = [
+                ...recentEmittedInitialDataRef.current,
+                lastEmittedInitialDataRef.current,
+            ].slice(-10);
+            onChangeRef.current?.(payload);
+        }
+    }, [informations, minWords, maxWords, instruction, guideImages, points]);
+    // Get validation errors
+    const getErrors = () => {
+        const errors = {};
+        const informationsError = form.formState.errors.informations;
+        if (informationsError && typeof informationsError.message === 'string') {
+            errors.informations = informationsError.message;
+        }
+        const minWordsError = form.formState.errors.minWords;
+        if (minWordsError && typeof minWordsError.message === 'string') {
+            errors.minWords = minWordsError.message;
+        }
+        const maxWordsError = form.formState.errors.maxWords;
+        if (maxWordsError && typeof maxWordsError.message === 'string') {
+            errors.maxWords = maxWordsError.message;
+        }
+        const instructionError = form.formState.errors.instruction;
+        if (instructionError && typeof instructionError.message === 'string') {
+            errors.instruction = instructionError.message;
+        }
+        const pointsError = form.formState.errors.points;
+        if (pointsError && typeof pointsError.message === 'string') {
+            errors.points = pointsError.message;
+        }
+        return errors;
+    };
+    // Validate form data
+    const validateForm = () => {
+        // Update form values before validation
+        form.setValue('informations', informations);
+        form.setValue('minWords', minWords);
+        form.setValue('maxWords', maxWords);
+        form.setValue('instruction', instruction);
+        form.setValue('points', points);
+        // Trigger validation
+        const result = writeAShortLetterFormSchema.safeParse({
+            informations,
+            minWords,
+            maxWords,
+            instruction,
+            points,
+        });
+        if (!result.success) {
+            // Set errors from Zod validation
+            result.error.issues.forEach((issue) => {
+                const path = issue.path.join('.');
+                form.setError(path, { message: issue.message });
+            });
+            return false;
+        }
+        return true;
+    };
+    // Add new information
+    const addInformation = () => {
+        setInformations([...informations, '']);
+        form.clearErrors('informations');
+    };
+    // Remove information
+    const removeInformation = (index) => {
+        if (informations.length > 1) {
+            setInformations(informations.filter((_, i) => i !== index));
+        }
+    };
+    // Update information at index
+    const updateInformation = (index, value) => {
+        const newInformations = [...informations];
+        newInformations[index] = value;
+        setInformations(newInformations);
+        form.clearErrors('informations');
+    };
+    // Handle guide image upload
+    const handleGuideImageUpload = (key) => {
+        if (key) {
+            pendingUploadKeyRef.current = key;
+            setGuideImages((prev) => [...prev, key]);
+        }
+    };
+    // Handle guide image presigned URL from upload
+    // Correlate via pendingUploadKeyRef so rapid uploads don't collide on stale index
+    const handleGuideImagePresignedUrl = (presignedUrl) => {
+        const key = pendingUploadKeyRef.current;
+        if (presignedUrl && key) {
+            setGuideImagePreviewUrls((prev) => ({ ...prev, [key]: presignedUrl }));
+            pendingUploadKeyRef.current = null;
+        }
+    };
+    // Remove guide image
+    const removeGuideImage = (index) => {
+        const removedKey = guideImages[index];
+        setGuideImages((prev) => prev.filter((_, i) => i !== index));
+        if (removedKey) {
+            setGuideImagePreviewUrls((prev) => {
+                if (!(removedKey in prev))
+                    return prev;
+                const { [removedKey]: _removed, ...rest } = prev;
+                return rest;
+            });
+        }
+    };
+    const errors = getErrors();
+    // If in client mode, render the Client component
+    if (isClientMode) {
+        const questionData = {
+            informations,
+            minWords,
+            maxWords,
+            instructions: {
+                mainInstruction: instruction || '',
+            },
+            guideImages: guideImages.length > 0 ? guideImages : undefined,
+        };
+        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: "Write a Short Letter (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(WriteAShortLetterClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("svg", { className: "h-5 w-5 text-red-600", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "Vui l\u00F2ng s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc list-inside space-y-1", children: externalErrors.map((error, index) => (_jsx("li", { className: "text-sm text-red-700", children: error }, index))) })] })] }) })), _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-pink-500 via-rose-500 to-orange-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-pink-500 to-rose-600 shadow-md", children: _jsx(Mail, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Write a Short Letter" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o b\u00E0i t\u1EADp vi\u1EBFt th\u01B0 v\u1EDBi c\u00E1c th\u00F4ng tin c\u1EA7n bao g\u1ED3m" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !minWords || minWords < 1, className: "gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-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-pink-200 bg-gradient-to-r from-pink-50 to-rose-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-pink-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-pink-600" }) }), _jsxs("div", { className: "text-sm text-pink-900", children: [_jsx("p", { className: "font-semibold text-pink-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-pink-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-pink-400" }), "Nh\u1EADp h\u01B0\u1EDBng d\u1EABn vi\u1EBFt th\u01B0 cho h\u1ECDc sinh"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-pink-400" }), "Li\u1EC7t k\u00EA c\u00E1c th\u00F4ng tin c\u1EA7n bao g\u1ED3m trong b\u00E0i vi\u1EBFt"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-pink-400" }), "Thi\u1EBFt l\u1EADp gi\u1EDBi h\u1EA1n s\u1ED1 t\u1EEB t\u1ED1i thi\u1EC3u/t\u1ED1i \u0111a"] })] })] })] }) }), _jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [_jsx("div", { children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1), error: errors.points }) }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsx(Label, { className: "mb-3 block text-sm font-medium text-gray-700", children: "Gi\u1EDBi h\u1EA1n s\u1ED1 t\u1EEB" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsxs(Label, { htmlFor: "minWords", className: "text-xs text-gray-500", children: ["T\u1ED1i thi\u1EC3u ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "minWords", type: "number", min: "1", step: "1", value: minWords ?? '', onChange: (e) => {
+                                                                    const value = e.target.value;
+                                                                    if (value === '') {
+                                                                        setMinWords(1);
+                                                                    }
+                                                                    else {
+                                                                        const numValue = parseInt(value, 10);
+                                                                        setMinWords(numValue < 1 ? 1 : numValue);
+                                                                    }
+                                                                    form.clearErrors('minWords');
+                                                                }, placeholder: "20", className: `mt-1 ${errors.minWords ? 'border-red-500 focus:ring-red-500' : ''}` }), errors.minWords && (_jsx("p", { className: "mt-1 text-xs text-red-600", children: errors.minWords }))] }), _jsx("span", { className: "mt-6 text-gray-400", children: "\u2014" }), _jsxs("div", { className: "flex-1", children: [_jsx(Label, { htmlFor: "maxWords", className: "text-xs text-gray-500", children: "T\u1ED1i \u0111a" }), _jsx(Input, { id: "maxWords", type: "number", min: "1", step: "1", value: maxWords ?? '', onChange: (e) => {
+                                                                    const value = e.target.value;
+                                                                    if (value === '') {
+                                                                        setMaxWords(undefined);
+                                                                    }
+                                                                    else {
+                                                                        const numValue = parseInt(value, 10);
+                                                                        setMaxWords(numValue < 1 ? 1 : numValue);
+                                                                    }
+                                                                    form.clearErrors('maxWords');
+                                                                }, placeholder: "\u221E", className: `mt-1 ${errors.maxWords ? 'border-red-500 focus:ring-red-500' : ''}` }), errors.maxWords && (_jsx("p", { className: "mt-1 text-xs text-red-600", children: errors.maxWords }))] })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-medium", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => {
+                                            setInstruction(e.target.value);
+                                            form.clearErrors('instruction');
+                                        }, placeholder: "V\u00ED d\u1EE5: You are having a birthday party. Write a short letter to your friend, Minh, to invite him. Tell him about the party.", className: `mt-1.5 resize-none ${errors.instruction ? 'border-red-500' : ''}`, rows: 3 }), errors.instruction && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.instruction }))] }), _jsxs("div", { className: "space-y-3 rounded-lg border border-blue-100 bg-blue-50/30 p-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-full bg-blue-100", children: _jsx("span", { className: "text-xs font-semibold text-blue-600", children: "i" }) }), _jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "Th\u00F4ng tin c\u1EA7n bao g\u1ED3m" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addInformation, className: "h-8 gap-1.5 border-blue-200 bg-white text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm"] })] }), errors.informations && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-3", children: _jsx("p", { className: "text-sm text-red-600", children: errors.informations }) })), _jsx("div", { className: "space-y-2", children: informations.map((info, index) => (_jsx("div", { className: "space-y-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-medium text-blue-600", children: index + 1 }), _jsx(Input, { value: info, onChange: (e) => updateInformation(index, e.target.value), placeholder: `Thông tin ${index + 1}...`, className: "flex-1 border-gray-200" }), informations.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeInformation(index), className: "h-8 w-8 flex-shrink-0 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }) }, index))) }), _jsx("p", { className: "text-xs text-gray-500 italic", children: "\uD83D\uDCA1 Li\u1EC7t k\u00EA c\u00E1c th\u00F4ng tin h\u1ECDc sinh c\u1EA7n \u0111\u1EC1 c\u1EADp trong b\u00E0i vi\u1EBFt" })] }), _jsxs("div", { className: "space-y-3 rounded-lg border border-violet-100 bg-violet-50/30 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-violet-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-violet-600" }) }), _jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "\u1EA2nh h\u01B0\u1EDBng d\u1EABn" }), _jsx("span", { className: "text-xs text-gray-400" })] }), guideImages.length > 0 && (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: guideImages.map((imageKey, index) => (_jsx(GuideImageItem, { imageKey: imageKey, index: index, localPreviewUrl: guideImagePreviewUrls[imageKey], onRemove: removeGuideImage }, `${imageKey}-${index}`))) })), _jsx(FileUpload, { label: "Th\u00EAm \u1EA3nh h\u01B0\u1EDBng d\u1EABn", accept: "image/*", value: "", onChange: handleGuideImageUpload, onPresignedUrlChange: handleGuideImagePresignedUrl, autoUpload: true, prefix: "write-short-letter/guide", placeholder: "Ch\u1ECDn ho\u1EB7c k\u00E9o th\u1EA3 \u1EA3nh v\u00E0o \u0111\u00E2y", icon: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("p", { className: "text-xs text-gray-500 italic", children: "\uD83D\uDCF7 Upload nhi\u1EC1u \u1EA3nh \u0111\u1EC3 h\u01B0\u1EDBng d\u1EABn h\u1ECDc sinh vi\u1EBFt b\u00E0i (v\u00ED d\u1EE5: m\u1EABu th\u01B0, h\u00ECnh \u1EA3nh minh h\u1ECDa)" })] })] })] })] }));
+}
+export function WriteAShortLetterCreator(props) {
+    return _jsx(WriteAShortLetterCreatorContent, { ...props });
+}

package/dist/components/questions/types/write-a-short-letter/index.js

@@ -1 +1,2 @@
-export*from"./WriteAShortLetterCreator";export*from"./WriteAShortLetterClient";
+export * from './WriteAShortLetterCreator';
+export * from './WriteAShortLetterClient';

package/dist/components/questions/types/write-a-short-letter/register.js

@@ -1 +1,68 @@
-import{WriteAShortLetterCreator as t}from"./WriteAShortLetterCreator";export const writeAShortLetterRegistration={component:t,transformInitialData:t=>{const n=t?.content,s=t?.answer,i=t?.total_points?parseFloat(t.total_points):t?.points||10;let o={points:i};if(s?.informations&&Array.isArray(s.informations))o={informations:s.informations,minWords:s.minWords,maxWords:s.maxWords,instructions:s.instructions||{mainInstruction:""},guideImages:s.guideImages||[],points:i};else if(n?.informations&&Array.isArray(n.informations))o={informations:n.informations,minWords:n.minWords,maxWords:n.maxWords,instructions:n.instructions||{mainInstruction:""},guideImages:n.guideImages||[],points:i};else if(n?.contexts||s?.contexts){const t=(n?.contexts||s?.contexts||[]).filter(t=>"text"===t.type&&t.text).map(t=>t.text);o={informations:t.length>0?t:[],minWords:n?.minWords??s?.minWords,maxWords:n?.maxWords??s?.maxWords,instructions:n?.instructions||s?.instructions||{mainInstruction:""},guideImages:n?.guideImages||s?.guideImages||[],points:i}}return o},wrapOnSave:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??10,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t}),wrapOnChange:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??10,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t})};
+import { WriteAShortLetterCreator } from './WriteAShortLetterCreator';
+export const writeAShortLetterRegistration = {
+    component: WriteAShortLetterCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const apiPoints = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || 10); // WRITE_A_SHORT_LETTER defaults to 10 points
+        let creatorData = { points: apiPoints };
+        // Priority 1: Data from store (answer has informations directly)
+        if (answer?.informations && Array.isArray(answer.informations)) {
+            creatorData = {
+                informations: answer.informations,
+                minWords: answer.minWords,
+                maxWords: answer.maxWords,
+                instructions: answer.instructions || { mainInstruction: '' },
+                guideImages: answer.guideImages || [],
+                points: apiPoints,
+            };
+        }
+        // Priority 2: Data from API (content has informations)
+        else if (content?.informations && Array.isArray(content.informations)) {
+            creatorData = {
+                informations: content.informations,
+                minWords: content.minWords,
+                maxWords: content.maxWords,
+                instructions: content.instructions || { mainInstruction: '' },
+                guideImages: content.guideImages || [],
+                points: apiPoints,
+            };
+        }
+        // Priority 3: Legacy format with contexts
+        else if (content?.contexts || answer?.contexts) {
+            const contexts = content?.contexts || answer?.contexts || [];
+            const informations = contexts
+                .filter((ctx) => ctx.type === 'text' && ctx.text)
+                .map((ctx) => ctx.text);
+            creatorData = {
+                informations: informations.length > 0 ? informations : [],
+                minWords: content?.minWords ?? answer?.minWords,
+                maxWords: content?.maxWords ?? answer?.maxWords,
+                instructions: content?.instructions || answer?.instructions || { mainInstruction: '' },
+                guideImages: content?.guideImages || answer?.guideImages || [],
+                points: apiPoints,
+            };
+        }
+        return creatorData;
+    },
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 10,
+        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 ?? 10,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+    }),
+};

package/dist/components/questions/types/write-a-short-letter/transform.js

@@ -1 +1,25 @@
-export const transformWriteAShortLetter=r=>{const t=r.answer,i=Array.isArray(t?.informations)?t.informations.filter(r=>"string"==typeof r&&""!==r.trim()):[],n=t?.instructions?.mainInstruction||"",s=Array.isArray(t?.guideImages)?t.guideImages.filter(r=>"string"==typeof r&&""!==r.trim()):[],o={informations:i,minWords:t?.minWords||20,maxWords:t?.maxWords??null,instructions:{mainInstruction:n}};return s.length>0&&(o.guideImages=s),{apiContent:o,apiCorrectAnswer:{}}};
+// WRITE_A_SHORT_LETTER - essay type without correct answer
+// Uses simple string[] for informations (different from WRITE_SHORT_PARAGRAPH which uses object[] contexts)
+export const transformWriteAShortLetter = (question) => {
+    const answerData = question.answer;
+    const informations = Array.isArray(answerData?.informations)
+        ? answerData.informations.filter((info) => typeof info === 'string' && info.trim() !== '')
+        : [];
+    const mainInstruction = answerData?.instructions?.mainInstruction || '';
+    const guideImages = Array.isArray(answerData?.guideImages)
+        ? answerData.guideImages.filter((url) => typeof url === 'string' && url.trim() !== '')
+        : [];
+    const apiContent = {
+        informations,
+        minWords: answerData?.minWords || 20,
+        maxWords: answerData?.maxWords ?? null,
+        instructions: { mainInstruction },
+    };
+    if (guideImages.length > 0) {
+        apiContent.guideImages = guideImages;
+    }
+    return {
+        apiContent,
+        apiCorrectAnswer: {},
+    };
+};

package/dist/components/questions/types/write-correct-verb-form/WriteCorrectVerbFormClient.js

@@ -1 +1,61 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as s}from"react";import{Input as n}from"../../../../components/ui/input";import{cn as a}from"../../../../shared/lib/utils";import{Check as d,X as l,FileText as i,PenLine as o,AlertTriangle as c,Lightbulb as m}from"lucide-react";export function WriteCorrectVerbFormClient({questionData:g,onSubmit:h,isReviewMode:x=!1,userAnswer:b=""}){const[f,p]=t(b||"");s(()=>{void 0!==b&&p(b)},[b]);const u=x&&(e=>{const r=g.correctAnswer.trim(),t=e.trim();return g.caseSensitive?t===r:t.toLowerCase()===r.toLowerCase()})(f),N=x&&f&&!u,w=f.trim().length>0;return r("div",{className:"space-y-5",children:[g.instruction&&e("div",{className:"overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm",children:r("div",{className:"flex items-center gap-3 px-5 py-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm",children:e(i,{className:"h-5 w-5"})}),r("div",{children:[e("h3",{className:"text-sm font-semibold text-blue-900",children:"Hướng dẫn"}),e("p",{className:"text-sm text-blue-700",children:g.instruction})]})]})}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:a("flex items-center justify-between border-b px-5 py-3",x&&u&&"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50",x&&N&&"border-red-200 bg-gradient-to-r from-red-50 to-rose-50",(!x||!u&&!N)&&"border-gray-100 bg-gradient-to-r from-gray-50 to-white"),children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:a("flex h-8 w-8 items-center justify-center rounded-lg text-white shadow-sm",x&&u&&"bg-gradient-to-br from-green-500 to-emerald-600",x&&N&&"bg-gradient-to-br from-red-500 to-rose-600",(!x||!u&&!N)&&"bg-gradient-to-br from-violet-500 to-purple-600"),children:e(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Chia động từ đúng"})]}),x&&w&&r("div",{className:a("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",u?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(u?d:l,{className:"h-3.5 w-3.5"}),u?"Đúng":"Sai"]})]}),r("div",{className:"p-6 space-y-5",children:[e("div",{className:"rounded-xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 p-5",children:(()=>{const t=g.sentence.split(/(\{0\})/g);return e("div",{className:"flex flex-wrap items-center gap-1.5 text-lg leading-relaxed",children:t.map((t,s)=>"{0}"===t?r("span",{className:"inline-flex items-center gap-2",children:[r("div",{className:"relative inline-flex items-center",children:[e(n,{value:g.correctAnswer,readOnly:!0,disabled:!0,className:a("w-36 text-center font-semibold border-2 rounded-lg transition-all","border-green-400 bg-green-50 text-green-800 cursor-not-allowed")}),x&&e("div",{className:a("absolute -right-7 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full",u?"bg-green-500":N?"bg-red-500":"bg-gray-300"),children:u?e(d,{className:"h-3 w-3 text-white"}):N?e(l,{className:"h-3 w-3 text-white"}):null})]}),r("span",{className:"rounded-lg bg-amber-100 px-2 py-0.5 text-sm font-medium text-amber-700",children:["(",g.verbHint,")"]})]},s):e("span",{className:"text-gray-800",children:t},s))})})()}),x&&r("div",{className:"space-y-3",children:[r("div",{className:"grid grid-cols-2 gap-4",children:[r("div",{className:a("rounded-xl border-2 p-4",u?"border-green-200 bg-green-50":N?"border-red-200 bg-red-50":"border-gray-200 bg-gray-50"),children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:a("flex h-6 w-6 items-center justify-center rounded-lg",u?"bg-green-200":N?"bg-red-200":"bg-gray-200"),children:u?e(d,{className:"h-3.5 w-3.5 text-green-700"}):N?e(l,{className:"h-3.5 w-3.5 text-red-700"}):e("span",{className:"text-xs text-gray-500",children:"?"})}),e("span",{className:"text-xs font-medium text-gray-600",children:"Câu trả lời của bạn"})]}),e("p",{className:a("text-lg font-bold",u?"text-green-700":N?"text-red-700":"text-gray-400"),children:f||"(Chưa trả lời)"})]}),r("div",{className:"rounded-xl border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-lg bg-green-200",children:e(d,{className:"h-3.5 w-3.5 text-green-700"})}),e("span",{className:"text-xs font-medium text-gray-600",children:"Đáp án đúng"})]}),e("p",{className:"text-lg font-bold text-green-700",children:g.correctAnswer})]})]}),e("div",{className:a("rounded-xl p-4",u?"bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200":"bg-gradient-to-r from-red-50 to-rose-50 border border-red-200"),children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:a("flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm",u?"bg-gradient-to-br from-green-500 to-emerald-600":"bg-gradient-to-br from-red-500 to-rose-600"),children:e(u?d:l,{className:"h-5 w-5"})}),r("div",{children:[e("p",{className:a("text-sm font-semibold",u?"text-green-800":"text-red-800"),children:u?"Chính xác!":"Chưa đúng"}),e("p",{className:a("text-xs",u?"text-green-600":"text-red-600"),children:u?"Bạn đã chia động từ đúng.":`Đáp án đúng là "${g.correctAnswer}".`})]})]})}),g.explanation&&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-lg bg-blue-500 text-white",children:e(m,{className:"h-3.5 w-3.5"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:g.explanation})]})]})})]}),!x&&!w&&e("div",{className:"rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm",children:e("span",{className:"text-sm font-bold",children:"!"})}),r("div",{children:[e("p",{className:"text-sm font-medium text-amber-800",children:"Nhập dạng đúng của động từ"}),e("p",{className:"text-xs text-amber-600",children:"Sử dụng gợi ý trong ngoặc để chia động từ phù hợp."})]})]})})]})]}),!x&&g.caseSensitive&&e("div",{className:"overflow-hidden rounded-xl border border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50 shadow-sm",children:r("div",{className:"flex items-center gap-3 px-5 py-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-sm",children:e(c,{className:"h-5 w-5"})}),r("div",{children:[e("h3",{className:"text-sm font-semibold text-yellow-900",children:"Lưu ý quan trọng"}),e("p",{className:"text-sm text-yellow-700",children:"Đáp án có phân biệt chữ hoa/thường"})]})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Input } from '../../../../components/ui/input';
+import { cn } from '../../../../shared/lib/utils';
+import { Check, X, FileText, PenLine, AlertTriangle, Lightbulb } from 'lucide-react';
+export function WriteCorrectVerbFormClient({ questionData, onSubmit, isReviewMode = false, userAnswer = '', }) {
+    // ============ STATE ============
+    const [answer, setAnswer] = useState(userAnswer || '');
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        if (userAnswer !== undefined) {
+            setAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    // ============ HANDLERS ============
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setAnswer(value);
+        onSubmit?.(value);
+    };
+    // Check if answer is correct
+    const isAnswerCorrect = (userInput) => {
+        const correctAnswer = questionData.correctAnswer.trim();
+        const inputAnswer = userInput.trim();
+        if (questionData.caseSensitive) {
+            return inputAnswer === correctAnswer;
+        }
+        else {
+            return inputAnswer.toLowerCase() === correctAnswer.toLowerCase();
+        }
+    };
+    const isCorrect = isReviewMode && isAnswerCorrect(answer);
+    const isWrong = isReviewMode && answer && !isCorrect;
+    const hasAnswered = answer.trim().length > 0;
+    // Render sentence with input field at {0} position
+    const renderSentenceWithInput = () => {
+        const parts = questionData.sentence.split(/(\{0\})/g);
+        return (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-lg leading-relaxed", children: parts.map((part, index) => {
+                if (part === '{0}') {
+                    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsxs("div", { className: "relative inline-flex items-center", children: [_jsx(Input, { value: questionData.correctAnswer, readOnly: true, disabled: true, className: cn('w-36 text-center font-semibold border-2 rounded-lg transition-all', 'border-green-400 bg-green-50 text-green-800 cursor-not-allowed') }), isReviewMode && (_jsx("div", { className: cn('absolute -right-7 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full', isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-gray-300'), children: isCorrect ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : isWrong ? (_jsx(X, { className: "h-3 w-3 text-white" })) : null }))] }), _jsxs("span", { className: "rounded-lg bg-amber-100 px-2 py-0.5 text-sm font-medium text-amber-700", children: ["(", questionData.verbHint, ")"] })] }, index));
+                }
+                else {
+                    return _jsx("span", { className: "text-gray-800", children: part }, index);
+                }
+            }) }));
+    };
+    // ============ RENDER ============
+    return (_jsxs("div", { className: "space-y-5", children: [questionData.instruction && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-blue-900", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx("p", { className: "text-sm text-blue-700", children: questionData.instruction })] })] }) })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-5 py-3', isReviewMode && isCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && isWrong && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', (!isReviewMode || (!isCorrect && !isWrong)) && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-white shadow-sm', isReviewMode && isCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && isWrong && 'bg-gradient-to-br from-red-500 to-rose-600', (!isReviewMode || (!isCorrect && !isWrong)) && 'bg-gradient-to-br from-violet-500 to-purple-600'), children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Chia \u0111\u1ED9ng t\u1EEB \u0111\u00FAng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-6 space-y-5", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 p-5", children: renderSentenceWithInput() }), isReviewMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: cn('rounded-xl border-2 p-4', isCorrect
+                                                    ? 'border-green-200 bg-green-50'
+                                                    : isWrong
+                                                        ? 'border-red-200 bg-red-50'
+                                                        : 'border-gray-200 bg-gray-50'), children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-lg', isCorrect ? 'bg-green-200' : isWrong ? 'bg-red-200' : 'bg-gray-200'), children: isCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-700" })) : isWrong ? (_jsx(X, { className: "h-3.5 w-3.5 text-red-700" })) : (_jsx("span", { className: "text-xs text-gray-500", children: "?" })) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n" })] }), _jsx("p", { className: cn('text-lg font-bold', isCorrect ? 'text-green-700' : isWrong ? 'text-red-700' : 'text-gray-400'), children: answer || '(Chưa trả lời)' })] }), _jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-green-200", children: _jsx(Check, { className: "h-3.5 w-3.5 text-green-700" }) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-lg font-bold text-green-700", children: questionData.correctAnswer })] })] }), _jsx("div", { className: cn('rounded-xl p-4', isCorrect
+                                            ? 'bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200'
+                                            : 'bg-gradient-to-r from-red-50 to-rose-50 border border-red-200'), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm', isCorrect
+                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600'
+                                                        : 'bg-gradient-to-br from-red-500 to-rose-600'), children: isCorrect ? _jsx(Check, { className: "h-5 w-5" }) : _jsx(X, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: cn('text-sm font-semibold', isCorrect ? 'text-green-800' : 'text-red-800'), children: isCorrect ? 'Chính xác!' : 'Chưa đúng' }), _jsx("p", { className: cn('text-xs', isCorrect ? 'text-green-600' : 'text-red-600'), children: isCorrect
+                                                                ? 'Bạn đã chia động từ đúng.'
+                                                                : `Đáp án đúng là "${questionData.correctAnswer}".` })] })] }) }), questionData.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-lg 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: questionData.explanation })] })] }) }))] })), !isReviewMode && !hasAnswered && (_jsx("div", { className: "rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx("span", { className: "text-sm font-bold", children: "!" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-amber-800", children: "Nh\u1EADp d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB" }), _jsx("p", { className: "text-xs text-amber-600", children: "S\u1EED d\u1EE5ng g\u1EE3i \u00FD trong ngo\u1EB7c \u0111\u1EC3 chia \u0111\u1ED9ng t\u1EEB ph\u00F9 h\u1EE3p." })] })] }) }))] })] }), !isReviewMode && questionData.caseSensitive && (_jsx("div", { className: "overflow-hidden rounded-xl border border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-sm", children: _jsx(AlertTriangle, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-yellow-900", children: "L\u01B0u \u00FD quan tr\u1ECDng" }), _jsx("p", { className: "text-sm text-yellow-700", children: "\u0110\u00E1p \u00E1n c\u00F3 ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }) }))] }));
+}