@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/word-ordering/WordOrderingCreator.js

@@ -1 +1,192 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as a,useRef as s,useEffect as n,useCallback as i}from"react";import{Button as l}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as h,CardContent as g,CardHeader as p,CardTitle as x}from"../../../../components/ui/card";import{Checkbox as u}from"../../../../components/ui/checkbox";import{usePresignedFileUrl as f,useDebouncedCallback as w}from"../../../../shared/lib/hooks";import{useReactHookForm as b}from"../../../../shared/lib/hooks/useReactHookForm";import{Pencil as N,Eye as v,Plus as y,Trash2 as S,ArrowUpDown as V,GripVertical as U,Shuffle as C,ImageIcon as E,BookOpen as O,Lightbulb as k}from"lucide-react";import{FileUpload as J}from"../../../../components/ui/file-upload";import{WordOrderingClient as j}from"./WordOrderingClient";import{wordOrderingFormSchema as z}from"../../../../shared/lib/validation/word-ordering.validation";function T({initialData:T,onSave:X,onCancel:D,onChange:F,externalErrors:H,onUnsavedChangesChange:R,validationRef:q,headerExtra:A}){const G=T,M=b({defaultValues:{words:G?.words?.length>0?G.words:["",""],answer:G?.answer?.length>0?G.answer:["",""],imageUrl:G?.imageUrl||"",isExample:G?.isExample||!1,explanation:G?.explanation||"",points:G?.points??1},zodSchema:z,mode:"onBlur"}),[P,W]=a(!1),[$,B]=a(""),K=s(T),L=s(!1),Q=s(F),I=s("");n(()=>{Q.current=F},[F]);const Y=w(e=>{Q.current?.(e)},300),Z=M.watch("words"),_=M.watch("answer"),ee=M.watch("imageUrl"),re=M.watch("isExample"),te=M.watch("explanation"),ae=M.watch("points"),{previewUrl:se}=f(ee||""),ne=$||se||"";n(()=>{q&&(q.current={triggerValidation:async()=>await M.trigger(),getFormData:()=>({words:Z,answer:_,imageUrl:ee,isExample:re,explanation:te,points:ae})})},[q,M,Z,_,ee,re,te,ae]),n(()=>{const e=T,r={words:e?.words?.length>0?e.words:["",""],answer:e?.answer?.length>0?e.answer:["",""],imageUrl:e?.imageUrl||"",isExample:e?.isExample||!1,explanation:e?.explanation||"",points:e?.points??1};if(!(JSON.stringify(K.current)!==JSON.stringify(T)))return;K.current=T;const t={words:Z,answer:_,imageUrl:ee,isExample:re,explanation:te,points:ae},a=JSON.stringify(t.words)===JSON.stringify(r.words)&&JSON.stringify(t.answer)===JSON.stringify(r.answer)&&t.imageUrl===r.imageUrl&&t.points===r.points;if(a&&!0===T?.isCompleted)return;!a&&(JSON.stringify(r.words)!==JSON.stringify(t.words)||JSON.stringify(r.answer)!==JSON.stringify(t.answer)||r.imageUrl!==t.imageUrl)&&r.words.length>0&&(L.current=!0,M.reset(r),setTimeout(()=>{L.current=!1},150))},[T,M,Z,_,ee,re,te,ae]);const ie=JSON.stringify(Z),le=JSON.stringify(_);n(()=>{if(L.current){const e=JSON.stringify({words:Z,answer:_,imageUrl:ee,isExample:re,explanation:te,points:ae});return void(I.current=e)}const e={words:Z,answer:_,imageUrl:ee,isExample:re,explanation:te,points:ae},r=JSON.stringify(e);I.current!==r&&(I.current=r,Y(e))},[ie,le,ee,re,te,ae]);const oe=i(()=>{const e=[...M.getValues("words"),""],r=[...M.getValues("answer"),""];M.setValue("words",e),M.setValue("answer",r)},[M]),ce=i(e=>{const r=M.getValues("words"),t=M.getValues("answer");r.length<=2||(M.setValue("words",r.filter((r,t)=>t!==e),{shouldValidate:!0}),M.setValue("answer",t.filter((r,t)=>t!==e),{shouldValidate:!0}))},[M]),de=i(()=>{const e=[...M.getValues("answer")].sort(()=>Math.random()-.5);M.setValue("words",e,{shouldValidate:!0})},[M]);M.handleSubmit(e=>{X?.(e)});if(P){const t={words:Z,answer:_,imageUrl:ne||ee,isExample:re,explanation:te};return r("div",{className:"space-y-4",children:[e(h,{children:e(p,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(x,{children:"Sắp xếp từ (Xem trước)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiện đáp án đúng"})]}),r(l,{variant:"outline",size:"sm",onClick:()=>W(!1),children:[e(N,{className:"mr-2 h-4 w-4"}),"Quay lại chỉnh sửa"]})]})})}),e(j,{questionData:t,isReviewMode:!0,userAnswer:_})]})}return r("div",{className:"space-y-4",children:[r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(p,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(V,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(x,{className:"text-base font-bold text-gray-900",children:"Sắp xếp từ"}),e("p",{className:"text-xs text-gray-500",children:"Sắp xếp các chữ cái / từ thành từ / câu đúng"})]})]}),r("div",{className:"flex items-center gap-2",children:[A,r(l,{variant:"outline",size:"sm",onClick:()=>W(!0),disabled:Z.filter(e=>e.trim()).length<2,className:"gap-2 border-amber-200 text-amber-600 hover:bg-amber-50 hover:text-amber-700",children:[e(v,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(g,{className:"space-y-4 px-4 pb-4",children:[e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100",children:e(k,{className:"h-4 w-4 text-blue-600"})}),r("div",{className:"text-sm text-blue-900",children:[e("p",{className:"font-semibold text-blue-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-blue-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Nhập ",e("strong",{children:"đáp án đúng"})," theo thứ tự chính xác (phía dưới)"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Nhấn ",e("strong",{children:'"Xáo trộn → Từ"'})," để tự động tạo danh sách từ hiển 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-blue-400"}),"Upload ",e("strong",{children:"hình ảnh"})," minh hoạ (nếu có)"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),"Nhập ",e("strong",{children:"giải thích"})," cho đáp án đúng (tuỳ chọn)"]})]})]})]})}),r("div",{className:"flex items-center gap-6",children:[e(m,{...M.register("points",{valueAsNumber:!0}),error:M.hasError("points")?M.getFieldError("points"):void 0}),r("div",{className:"flex items-center gap-2",children:[e(u,{id:"isExample",checked:re||!1,onCheckedChange:e=>M.setValue("isExample",!!e)}),e(o,{htmlFor:"isExample",className:"flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(E,{className:"h-4 w-4 text-amber-500"}),"Hình ảnh"]}),e(J,{id:"word-ordering-image",label:"",accept:"image/*",value:ee||"",onChange:e=>{M.setValue("imageUrl",e,{shouldValidate:!0})},onPresignedUrlChange:B,maxSize:5,placeholder:"Upload hình ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),ne&&e(t,{src:ne,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]})]})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e(p,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-green-100",children:e(V,{className:"h-3.5 w-3.5 text-green-600"})}),r(x,{className:"text-base font-semibold text-gray-800",children:["Đáp án đúng (",_.length," từ/chữ)"]})]}),r("div",{className:"flex gap-2",children:[r(l,{variant:"outline",size:"sm",onClick:de,disabled:_.filter(e=>e.trim()).length<2,className:"gap-2 border-amber-200 text-amber-600 hover:bg-amber-50",title:"Xáo trộn thứ tự đáp án để tạo danh sách từ",children:[e(C,{className:"h-4 w-4"}),"Xáo trộn → Từ"]}),r(l,{variant:"outline",size:"sm",onClick:oe,className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(y,{className:"h-4 w-4"}),"Thêm"]})]})]})}),r(g,{className:"space-y-3 px-4 pb-4",children:[r("p",{className:"text-xs text-gray-500",children:["Nhập các từ/chữ cái theo ",e("strong",{children:"thứ tự đúng"}),'. Nhấn "Xáo trộn → Từ" để tạo danh sách từ xáo trộn tự động.']}),_.map((t,a)=>r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 text-white text-sm font-bold shadow-sm",children:a+1}),e("div",{className:"flex-1",children:e(c,{value:t,onChange:e=>{const r=[..._];r[a]=e.target.value,M.setValue("answer",r,{shouldValidate:!0})},placeholder:`Từ/chữ cái thứ ${a+1}`,className:"border-gray-200"})}),_.length>2&&e(l,{variant:"ghost",size:"sm",onClick:()=>ce(a),className:"text-red-500 hover:text-red-700 hover:bg-red-50",children:e(S,{className:"h-4 w-4"})})]},a)),M.formState.errors.answer?.message&&e("p",{className:"text-sm text-red-600",children:M.formState.errors.answer.message})]})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-orange-100/50",children:[e(p,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-orange-100",children:e(U,{className:"h-3.5 w-3.5 text-orange-600"})}),r(x,{className:"text-base font-semibold text-gray-800",children:["Từ hiển thị (xáo trộn) (",Z.length," từ/chữ)"]})]})}),r(g,{className:"space-y-3 px-4 pb-4",children:[e("p",{className:"text-xs text-gray-500",children:"Danh sách từ/chữ cái hiển thị cho học sinh (đã xáo trộn). Có thể chỉnh sửa trực tiếp."}),Z.map((t,a)=>r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-orange-400 to-amber-500 text-white text-sm font-bold shadow-sm",children:a+1}),e("div",{className:"flex-1",children:e(c,{value:t,onChange:e=>{const r=[...Z];r[a]=e.target.value,M.setValue("words",r,{shouldValidate:!0})},placeholder:`Từ/chữ cái thứ ${a+1}`,className:"border-gray-200"})})]},a)),M.formState.errors.words?.message&&e("p",{className:"text-sm text-red-600",children:M.formState.errors.words.message})]})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(p,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(O,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(x,{className:"text-base 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-xs 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(g,{className:"px-4 pb-4",children:e(d,{...M.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function WordOrderingCreator(r){return e(T,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useState, useRef, useEffect, useCallback } 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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Pencil, Eye, Plus, Trash2, ArrowUpDown, GripVertical, Shuffle, ImageIcon, BookOpen, Lightbulb } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { WordOrderingClient } from './WordOrderingClient';
+import { wordOrderingFormSchema, } from '../../../../shared/lib/validation/word-ordering.validation';
+function WordOrderingCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, headerExtra, }) {
+    const apiData = initialData;
+    const form = useReactHookForm({
+        defaultValues: {
+            words: apiData?.words?.length > 0 ? apiData.words : ['', ''],
+            answer: apiData?.answer?.length > 0 ? apiData.answer : ['', ''],
+            imageUrl: apiData?.imageUrl || '',
+            isExample: apiData?.isExample || false,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: wordOrderingFormSchema,
+        mode: 'onBlur',
+    });
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    // Refs
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Watch form values
+    const watchedWords = form.watch('words');
+    const watchedAnswer = form.watch('answer');
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedIsExample = form.watch('isExample');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    // Pre-signed URL for image
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl || '');
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    // Expose validation via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const result = await form.trigger();
+                    return result;
+                },
+                getFormData: () => ({
+                    words: watchedWords,
+                    answer: watchedAnswer,
+                    imageUrl: watchedImageUrl,
+                    isExample: watchedIsExample,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedWords, watchedAnswer, watchedImageUrl, watchedIsExample, watchedExplanation, watchedPoints]);
+    // Sync from initialData changes
+    useEffect(() => {
+        const apiData = initialData;
+        const normalizedInitialData = {
+            words: apiData?.words?.length > 0 ? apiData.words : ['', ''],
+            answer: apiData?.answer?.length > 0 ? apiData.answer : ['', ''],
+            imageUrl: apiData?.imageUrl || '',
+            isExample: apiData?.isExample || false,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            words: watchedWords,
+            answer: watchedAnswer,
+            imageUrl: watchedImageUrl,
+            isExample: watchedIsExample,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEchoFromOnChange = JSON.stringify(currentFormData.words) === JSON.stringify(normalizedInitialData.words) &&
+            JSON.stringify(currentFormData.answer) === JSON.stringify(normalizedInitialData.answer) &&
+            currentFormData.imageUrl === normalizedInitialData.imageUrl &&
+            currentFormData.points === normalizedInitialData.points;
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved)
+            return;
+        const shouldReset = !isEchoFromOnChange &&
+            (JSON.stringify(normalizedInitialData.words) !== JSON.stringify(currentFormData.words) ||
+                JSON.stringify(normalizedInitialData.answer) !== JSON.stringify(currentFormData.answer) ||
+                normalizedInitialData.imageUrl !== currentFormData.imageUrl);
+        if (shouldReset && normalizedInitialData.words.length > 0) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedWords, watchedAnswer, watchedImageUrl, watchedIsExample, watchedExplanation, watchedPoints]);
+    // onChange effect
+    const watchedWordsStr = JSON.stringify(watchedWords);
+    const watchedAnswerStr = JSON.stringify(watchedAnswer);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                words: watchedWords, answer: watchedAnswer, imageUrl: watchedImageUrl,
+                isExample: watchedIsExample, explanation: watchedExplanation, points: watchedPoints,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            words: watchedWords,
+            answer: watchedAnswer,
+            imageUrl: watchedImageUrl,
+            isExample: watchedIsExample,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [watchedWordsStr, watchedAnswerStr, watchedImageUrl, watchedIsExample, watchedExplanation, watchedPoints]);
+    // Handlers
+    const addWord = useCallback(() => {
+        const newWords = [...form.getValues('words'), ''];
+        const newAnswer = [...form.getValues('answer'), ''];
+        form.setValue('words', newWords);
+        form.setValue('answer', newAnswer);
+    }, [form]);
+    const removeWord = useCallback((index) => {
+        const currentWords = form.getValues('words');
+        const currentAnswer = form.getValues('answer');
+        if (currentWords.length <= 2)
+            return;
+        form.setValue('words', currentWords.filter((_, i) => i !== index), { shouldValidate: true });
+        form.setValue('answer', currentAnswer.filter((_, i) => i !== index), { shouldValidate: true });
+    }, [form]);
+    const shuffleWords = useCallback(() => {
+        const answer = form.getValues('answer');
+        const shuffled = [...answer].sort(() => Math.random() - 0.5);
+        form.setValue('words', shuffled, { shouldValidate: true });
+    }, [form]);
+    const handleSave = form.handleSubmit((data) => {
+        onSave?.(data);
+    });
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            words: watchedWords,
+            answer: watchedAnswer,
+            imageUrl: displayPreviewUrl || watchedImageUrl,
+            isExample: watchedIsExample,
+            explanation: watchedExplanation,
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "S\u1EAFp x\u1EBFp t\u1EEB (Xem tr\u01B0\u1EDBc)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC7n \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 ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(WordOrderingClient, { questionData: questionData, isReviewMode: true, userAnswer: watchedAnswer })] }));
+    }
+    // Creator UI
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(ArrowUpDown, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "S\u1EAFp x\u1EBFp t\u1EEB" }), _jsx("p", { className: "text-xs text-gray-500", children: "S\u1EAFp x\u1EBFp c\u00E1c ch\u1EEF c\u00E1i / t\u1EEB th\u00E0nh t\u1EEB / c\u00E2u \u0111\u00FAng" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: watchedWords.filter((w) => w.trim()).length < 2, className: "gap-2 border-amber-200 text-amber-600 hover:bg-amber-50 hover:text-amber-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "Nh\u1EADp ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " theo th\u1EE9 t\u1EF1 ch\u00EDnh x\u00E1c (ph\u00EDa d\u01B0\u1EDBi)"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "Nh\u1EA5n ", _jsx("strong", { children: "\"X\u00E1o tr\u1ED9n \u2192 T\u1EEB\"" }), " \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng t\u1EA1o danh s\u00E1ch t\u1EEB hi\u1EC3n th\u1ECB 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-blue-400" }), "Upload ", _jsx("strong", { children: "h\u00ECnh \u1EA3nh" }), " minh ho\u1EA1 (n\u1EBFu c\u00F3)"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "Nh\u1EADp ", _jsx("strong", { children: "gi\u1EA3i th\u00EDch" }), " cho \u0111\u00E1p \u00E1n \u0111\u00FAng (tu\u1EF3 ch\u1ECDn)"] })] })] })] }) }), _jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isExample", checked: watchedIsExample || false, onCheckedChange: (checked) => form.setValue('isExample', !!checked) }), _jsx(Label, { htmlFor: "isExample", className: "flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-amber-500" }), "H\u00ECnh \u1EA3nh"] }), _jsx(FileUpload, { id: "word-ordering-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
+                                            form.setValue('imageUrl', url, { shouldValidate: true });
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-green-100", children: _jsx(ArrowUpDown, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng (", watchedAnswer.length, " t\u1EEB/ch\u1EEF)"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: shuffleWords, disabled: watchedAnswer.filter((a) => a.trim()).length < 2, className: "gap-2 border-amber-200 text-amber-600 hover:bg-amber-50", title: "X\u00E1o tr\u1ED9n th\u1EE9 t\u1EF1 \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EA1o danh s\u00E1ch t\u1EEB", children: [_jsx(Shuffle, { className: "h-4 w-4" }), "X\u00E1o tr\u1ED9n \u2192 T\u1EEB"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addWord, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp c\u00E1c t\u1EEB/ch\u1EEF c\u00E1i theo ", _jsx("strong", { children: "th\u1EE9 t\u1EF1 \u0111\u00FAng" }), ". Nh\u1EA5n \"X\u00E1o tr\u1ED9n \u2192 T\u1EEB\" \u0111\u1EC3 t\u1EA1o danh s\u00E1ch t\u1EEB x\u00E1o tr\u1ED9n t\u1EF1 \u0111\u1ED9ng."] }), watchedAnswer.map((word, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 text-white text-sm font-bold shadow-sm", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(Input, { value: word, onChange: (e) => {
+                                                const newAnswer = [...watchedAnswer];
+                                                newAnswer[index] = e.target.value;
+                                                form.setValue('answer', newAnswer, { shouldValidate: true });
+                                            }, placeholder: `Từ/chữ cái thứ ${index + 1}`, className: "border-gray-200" }) }), watchedAnswer.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => removeWord(index), className: "text-red-500 hover:text-red-700 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors.answer?.message && (_jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.answer.message }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-orange-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-orange-100", children: _jsx(GripVertical, { className: "h-3.5 w-3.5 text-orange-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["T\u1EEB hi\u1EC3n th\u1ECB (x\u00E1o tr\u1ED9n) (", watchedWords.length, " t\u1EEB/ch\u1EEF)"] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsx("p", { className: "text-xs text-gray-500", children: "Danh s\u00E1ch t\u1EEB/ch\u1EEF c\u00E1i hi\u1EC3n th\u1ECB cho h\u1ECDc sinh (\u0111\u00E3 x\u00E1o tr\u1ED9n). C\u00F3 th\u1EC3 ch\u1EC9nh s\u1EEDa tr\u1EF1c ti\u1EBFp." }), watchedWords.map((word, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-orange-400 to-amber-500 text-white text-sm font-bold shadow-sm", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(Input, { value: word, onChange: (e) => {
+                                                const newWords = [...watchedWords];
+                                                newWords[index] = e.target.value;
+                                                form.setValue('words', newWords, { shouldValidate: true });
+                                            }, placeholder: `Từ/chữ cái thứ ${index + 1}`, className: "border-gray-200" }) })] }, index))), form.formState.errors.words?.message && (_jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.words.message }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base 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-xs 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, { className: "px-4 pb-4", children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function WordOrderingCreator(props) {
+    return _jsx(WordOrderingCreatorContent, { ...props });
+}

package/dist/components/questions/types/word-ordering/index.js

@@ -1 +1,2 @@
-export*from"./WordOrderingCreator";export*from"./WordOrderingClient";
+export * from './WordOrderingCreator';
+export * from './WordOrderingClient';

package/dist/components/questions/types/word-ordering/register.js

@@ -1 +1,46 @@
-import{WordOrderingCreator as t}from"./WordOrderingCreator";export const wordOrderingRegistration={component:t,transformInitialData:t=>{const e=t?.content||{},n=t?.answer||{},a=t?.total_points?parseFloat(t.total_points):n?.points||t?.points||1,i=t?.explanation||n?.explanation||"";return{words:e?.words||n?.words||[],answer:n?.answer||[],imageUrl:e?.imageUrl||n?.imageUrl||"",isExample:t?.isExample||n?.isExample||!1,explanation:i,points:a}},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""})};
+import { WordOrderingCreator } from './WordOrderingCreator';
+export const wordOrderingRegistration = {
+    component: WordOrderingCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content || {};
+        const answer = initialData?.answer || {};
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (answer?.points || initialData?.points || 1);
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        // API format: content.words, correctAnswer.answer
+        // Internal onChange format: answer.words, answer.answer
+        return {
+            words: content?.words || answer?.words || [],
+            answer: answer?.answer || [],
+            imageUrl: content?.imageUrl || answer?.imageUrl || '',
+            isExample: initialData?.isExample || answer?.isExample || false,
+            explanation,
+            points,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/word-ordering/transform.js

@@ -1 +1,24 @@
-export const transformWordOrdering=r=>{const e=r.answer;if(!e?.words||!e?.answer)return{apiContent:{},apiCorrectAnswer:{}};const n={words:e.words};return e.imageUrl&&(n.imageUrl=e.imageUrl),{apiContent:n,apiCorrectAnswer:{answer:e.answer},isExample:e.isExample||!1}};
+/**
+ * Transform WORD_ORDERING creator data → API format
+ * Creator: { words, answer, imageUrl }
+ * API: content: { words, imageUrl }, correctAnswer: { answer: [...] }
+ */
+export const transformWordOrdering = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.words || !answerData?.answer) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const apiContent = {
+        words: answerData.words,
+    };
+    if (answerData.imageUrl) {
+        apiContent.imageUrl = answerData.imageUrl;
+    }
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            answer: answerData.answer,
+        },
+        isExample: answerData.isExample || false,
+    };
+};

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

@@ -1 +1,99 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as a,useEffect as s,useMemo as i}from"react";import{Textarea as d}from"../../../../components/ui/textarea";import{cn as l}from"../../../../shared/lib/utils";import{HtmlOrText as n}from"../../../../shared/lib/html-content";import{FileText as o,PenLine as m,Check as c,AlertCircle as g,BookOpen as h,Lightbulb as b,ImageIcon as x}from"lucide-react";import{usePresignedFileUrl as f}from"../../../../shared/lib/hooks/usePresignedFileUrl";function u({imageKey:t}){const{previewUrl:a}=f(t);return e("div",a?{className:"mx-auto w-full max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm",children:e("img",{src:a,alt:"Ảnh hướng dẫn",className:"h-auto w-full object-contain",onError:e=>{e.target.src="/images/placeholder-image.svg"}})}:{className:"flex aspect-[4/3] w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50",children:r("div",{className:"flex flex-col items-center gap-2 text-gray-400",children:[e(x,{className:"h-8 w-8"}),e("span",{className:"text-xs",children:"Đang tải..."})]})})}export function WriteAShortLetterClient({questionData:f,onSubmit:p,isReviewMode:v=!1,userAnswer:w,explanation:N}){const{informations:y,minWords:j,maxWords:k,instructions:B,guideImages:$}=f,C=B?.mainInstruction||"",[T,M]=a("string"==typeof w?w:"");s(()=>{void 0!==w&&"string"==typeof w&&M(w)},[w]);const W=i(()=>{const e="string"==typeof T?T:"";return e.trim()?e.trim().split(/\s+/).filter(e=>e.length>0).length:0},[T]),q=i(()=>!(W<j)&&!(k&&W>k),[W,j,k]),A=i(()=>k&&W>k,[W,k]),F=i(()=>{const e=j;return Math.min(W/e*100,100)},[W,j]);return r("div",{className:"space-y-5",children:[C&&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(h,{className:"h-5 w-5"})}),r("div",{children:[e("h3",{className:"text-sm font-semibold text-blue-900",children:"Hướng dẫn"}),e(n,{value:C,className:"text-sm text-blue-700"})]})]})}),$&&$.length>0&&r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-sm",children:e(x,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Ảnh hướng dẫn"})]}),e("div",{className:"p-5",children:e("div",{className:"flex flex-col gap-4",children:$.map((r,t)=>e(u,{imageKey:r},`${r}-${t}`))})})]}),y&&y.filter(e=>e?.trim()).length>0&&r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm",children:e(o,{className:"h-4 w-4"})}),r("span",{className:"text-sm font-medium text-gray-700",children:["Thông tin cần bao gồm (",y.length,")"]})]}),e("div",{className:"p-5",children:e("div",{className:"space-y-3",children:y.filter(e=>e?.trim()).map((t,a)=>r("div",{className:"flex items-start gap-3 rounded-lg border border-gray-100 bg-gradient-to-r from-white to-gray-50 p-3 transition-all hover:border-gray-200 hover:shadow-sm",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-xs font-bold text-white shadow-sm",children:a+1}),e(n,{value:t,className:"text-sm text-gray-700 leading-relaxed pt-0.5"})]},a))})})]}),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-purple-500 to-violet-600 text-white shadow-sm",children:e(m,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Viết thư của bạn"})]}),r("div",{className:l("flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold transition-all",A?"bg-red-100 text-red-700":q?"bg-green-100 text-green-700":"bg-amber-100 text-amber-700"),children:[q&&!A&&e(c,{className:"h-3.5 w-3.5"}),A&&e(g,{className:"h-3.5 w-3.5"}),r("span",{children:[W," / ",j,k?` - ${k}`:"+"," từ"]})]})]}),r("div",{className:"p-5 space-y-4",children:[!v&&r("div",{className:"space-y-2",children:[r("div",{className:"flex items-center justify-between text-xs text-gray-500",children:[e("span",{children:"Tiến độ viết"}),r("span",{children:[Math.round(F),"%"]})]}),e("div",{className:"h-2 w-full overflow-hidden rounded-full bg-gray-100",children:e("div",{className:l("h-full transition-all duration-300 ease-out rounded-full",A?"bg-gradient-to-r from-red-400 to-rose-500":q?"bg-gradient-to-r from-green-400 to-emerald-500":"bg-gradient-to-r from-amber-400 to-orange-500"),style:{width:`${F}%`}})})]}),r("div",{className:"relative",children:[e(d,{id:"writing-answer",value:T,onChange:e=>{return r=e.target.value,void(v||(M(r),p?.(r)));var r},placeholder:"Bắt đầu viết thư của bạn tại đây...",className:l("min-h-[280px] resize-none rounded-xl border-2 p-4 text-base leading-relaxed transition-all","focus:ring-2 focus:ring-offset-1",v?"bg-gray-50 cursor-not-allowed":"bg-white hover:border-gray-300",A?"border-red-300 focus:border-red-400 focus:ring-red-100":q?"border-green-300 focus:border-green-400 focus:ring-green-100":"border-gray-200 focus:border-purple-400 focus:ring-purple-100"),rows:12,disabled:v}),e("div",{className:"absolute bottom-3 right-3 pointer-events-none",children:e("div",{className:"flex items-center gap-1 text-gray-300",children:e(m,{className:"h-4 w-4"})})})]}),!v&&e("div",{className:l("rounded-xl border p-4 transition-all",A?"border-red-200 bg-gradient-to-r from-red-50 to-rose-50":q?"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50":"border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50"),children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:l("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-white shadow-sm",A?"bg-gradient-to-br from-red-500 to-rose-600":q?"bg-gradient-to-br from-green-500 to-emerald-600":"bg-gradient-to-br from-amber-500 to-orange-600"),children:e(A?g:q?c:g,{className:"h-4 w-4"})}),r("div",{className:"flex-1",children:[e("p",{className:l("text-sm font-semibold",A?"text-red-800":q?"text-green-800":"text-amber-800"),children:A?"Vượt quá số từ cho phép!":q?"Tuyệt vời! Đã đủ số từ yêu cầu":"Chưa đủ số từ yêu cầu"}),e("p",{className:l("text-xs mt-0.5",A?"text-red-600":q?"text-green-600":"text-amber-600"),children:r(t,A?{children:["Bạn đã viết ",W," từ. Tối đa ",k," từ."]}:q?{children:["Bạn đã viết ",W," từ. Yêu cầu: ",j,k?` - ${k}`:"+"," từ."]}:{children:["Bạn đã viết ",W," từ. Cần ít nhất ",j," từ."]})})]})]})}),v&&T&&r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-slate-50 to-gray-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3 pb-3 border-b border-gray-200",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-lg bg-gray-200",children:e(o,{className:"h-3.5 w-3.5 text-gray-600"})}),e("span",{className:"text-sm font-medium text-gray-600",children:"Bài viết đã nộp"}),r("span",{className:l("ml-auto text-xs font-semibold px-2 py-1 rounded-full",q?"bg-green-100 text-green-700":"bg-amber-100 text-amber-700"),children:[W," từ"]})]}),e("p",{className:"text-sm text-gray-700 whitespace-pre-wrap leading-relaxed",children:T})]}),v&&N&&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(b,{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:N})]})]})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Textarea } from '../../../../components/ui/textarea';
+import { cn } from '../../../../shared/lib/utils';
+import { HtmlOrText } from '../../../../shared/lib/html-content';
+import { FileText, PenLine, Check, AlertCircle, BookOpen, Lightbulb, ImageIcon } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks/usePresignedFileUrl';
+// Component to render a single guide image in client mode
+function GuideImageDisplay({ imageKey }) {
+    const { previewUrl } = usePresignedFileUrl(imageKey);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-gray-400", children: [_jsx(ImageIcon, { className: "h-8 w-8" }), _jsx("span", { className: "text-xs", children: "\u0110ang t\u1EA3i..." })] }) }));
+    }
+    return (_jsx("div", { className: "mx-auto w-full max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: _jsx("img", { src: previewUrl, alt: "\u1EA2nh h\u01B0\u1EDBng d\u1EABn", className: "h-auto w-full object-contain", onError: (e) => {
+                e.target.src = '/images/placeholder-image.svg';
+            } }) }));
+}
+export function WriteAShortLetterClient({ questionData, onSubmit, isReviewMode = false, userAnswer, explanation, }) {
+    const { informations, minWords, maxWords, instructions, guideImages } = questionData;
+    const instruction = instructions?.mainInstruction || '';
+    // Initialize answer state - ensure it's always a string
+    const [answer, setAnswer] = useState(typeof userAnswer === 'string' ? userAnswer : '');
+    // Sync userAnswer when it changes (e.g., when loading from server in review mode)
+    useEffect(() => {
+        if (userAnswer !== undefined && typeof userAnswer === 'string') {
+            setAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    // Count words
+    const wordCount = useMemo(() => {
+        const answerStr = typeof answer === 'string' ? answer : '';
+        if (!answerStr.trim())
+            return 0;
+        return answerStr
+            .trim()
+            .split(/\s+/)
+            .filter((word) => word.length > 0).length;
+    }, [answer]);
+    // Check if word count is valid
+    const isValidWordCount = useMemo(() => {
+        if (wordCount < minWords)
+            return false;
+        if (maxWords && wordCount > maxWords)
+            return false;
+        return true;
+    }, [wordCount, minWords, maxWords]);
+    // Check if exceeded max words
+    const isExceeded = useMemo(() => {
+        return maxWords && wordCount > maxWords;
+    }, [wordCount, maxWords]);
+    // Handle answer change
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setAnswer(value);
+        onSubmit?.(value);
+    };
+    // Calculate progress percentage
+    const progressPercentage = useMemo(() => {
+        const target = minWords;
+        return Math.min((wordCount / target) * 100, 100);
+    }, [wordCount, minWords]);
+    return (_jsxs("div", { className: "space-y-5", children: [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(BookOpen, { 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(HtmlOrText, { value: instruction, className: "text-sm text-blue-700" })] })] }) })), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-sm", children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u1EA2nh h\u01B0\u1EDBng d\u1EABn" })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "flex flex-col gap-4", children: guideImages.map((imageKey, index) => (_jsx(GuideImageDisplay, { imageKey: imageKey }, `${imageKey}-${index}`))) }) })] })), informations && informations.filter((i) => i?.trim()).length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Th\u00F4ng tin c\u1EA7n bao g\u1ED3m (", informations.length, ")"] })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "space-y-3", children: informations.filter((i) => i?.trim()).map((info, index) => (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-gray-100 bg-gradient-to-r from-white to-gray-50 p-3 transition-all hover:border-gray-200 hover:shadow-sm", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-xs font-bold text-white shadow-sm", children: index + 1 }), _jsx(HtmlOrText, { value: info, className: "text-sm text-gray-700 leading-relaxed pt-0.5" })] }, index))) }) })] })), _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-purple-500 to-violet-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Vi\u1EBFt th\u01B0 c\u1EE7a b\u1EA1n" })] }), _jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold transition-all', isExceeded
+                                    ? 'bg-red-100 text-red-700'
+                                    : isValidWordCount
+                                        ? 'bg-green-100 text-green-700'
+                                        : 'bg-amber-100 text-amber-700'), children: [isValidWordCount && !isExceeded && _jsx(Check, { className: "h-3.5 w-3.5" }), isExceeded && _jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: [wordCount, " / ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB"] })] })] }), _jsxs("div", { className: "p-5 space-y-4", children: [!isReviewMode && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [_jsx("span", { children: "Ti\u1EBFn \u0111\u1ED9 vi\u1EBFt" }), _jsxs("span", { children: [Math.round(progressPercentage), "%"] })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-gray-100", children: _jsx("div", { className: cn('h-full transition-all duration-300 ease-out rounded-full', isExceeded
+                                                ? 'bg-gradient-to-r from-red-400 to-rose-500'
+                                                : isValidWordCount
+                                                    ? 'bg-gradient-to-r from-green-400 to-emerald-500'
+                                                    : 'bg-gradient-to-r from-amber-400 to-orange-500'), style: { width: `${progressPercentage}%` } }) })] })), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "writing-answer", value: answer, onChange: (e) => handleAnswerChange(e.target.value), placeholder: "B\u1EAFt \u0111\u1EA7u vi\u1EBFt th\u01B0 c\u1EE7a b\u1EA1n t\u1EA1i \u0111\u00E2y...", className: cn('min-h-[280px] resize-none rounded-xl border-2 p-4 text-base leading-relaxed transition-all', 'focus:ring-2 focus:ring-offset-1', isReviewMode
+                                            ? 'bg-gray-50 cursor-not-allowed'
+                                            : 'bg-white hover:border-gray-300', isExceeded
+                                            ? 'border-red-300 focus:border-red-400 focus:ring-red-100'
+                                            : isValidWordCount
+                                                ? 'border-green-300 focus:border-green-400 focus:ring-green-100'
+                                                : 'border-gray-200 focus:border-purple-400 focus:ring-purple-100'), rows: 12, disabled: isReviewMode }), _jsx("div", { className: "absolute bottom-3 right-3 pointer-events-none", children: _jsx("div", { className: "flex items-center gap-1 text-gray-300", children: _jsx(PenLine, { className: "h-4 w-4" }) }) })] }), !isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-4 transition-all', isExceeded
+                                    ? 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50'
+                                    : isValidWordCount
+                                        ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
+                                        : 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50'), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-white shadow-sm', isExceeded
+                                                ? 'bg-gradient-to-br from-red-500 to-rose-600'
+                                                : isValidWordCount
+                                                    ? 'bg-gradient-to-br from-green-500 to-emerald-600'
+                                                    : 'bg-gradient-to-br from-amber-500 to-orange-600'), children: isExceeded ? (_jsx(AlertCircle, { className: "h-4 w-4" })) : isValidWordCount ? (_jsx(Check, { className: "h-4 w-4" })) : (_jsx(AlertCircle, { className: "h-4 w-4" })) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: cn('text-sm font-semibold', isExceeded
+                                                        ? 'text-red-800'
+                                                        : isValidWordCount
+                                                            ? 'text-green-800'
+                                                            : 'text-amber-800'), children: isExceeded
+                                                        ? 'Vượt quá số từ cho phép!'
+                                                        : isValidWordCount
+                                                            ? 'Tuyệt vời! Đã đủ số từ yêu cầu'
+                                                            : 'Chưa đủ số từ yêu cầu' }), _jsx("p", { className: cn('text-xs mt-0.5', isExceeded
+                                                        ? 'text-red-600'
+                                                        : isValidWordCount
+                                                            ? 'text-green-600'
+                                                            : 'text-amber-600'), children: isExceeded ? (_jsxs(_Fragment, { children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. T\u1ED1i \u0111a ", maxWords, " t\u1EEB."] })) : isValidWordCount ? (_jsxs(_Fragment, { children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. Y\u00EAu c\u1EA7u: ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB."] })) : (_jsxs(_Fragment, { children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. C\u1EA7n \u00EDt nh\u1EA5t ", minWords, " t\u1EEB."] })) })] })] }) })), isReviewMode && answer && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-slate-50 to-gray-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3 pb-3 border-b border-gray-200", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-gray-200", children: _jsx(FileText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("span", { className: "text-sm font-medium text-gray-600", children: "B\u00E0i vi\u1EBFt \u0111\u00E3 n\u1ED9p" }), _jsxs("span", { className: cn('ml-auto text-xs font-semibold px-2 py-1 rounded-full', isValidWordCount ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'), children: [wordCount, " t\u1EEB"] })] }), _jsx("p", { className: "text-sm text-gray-700 whitespace-pre-wrap leading-relaxed", children: answer })] })), 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 })] })] }) }))] })] })] }));
+}