@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/questions/types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsCreator.js

@@ -1 +1,511 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s,useRef as r,useEffect as n}from"react";import{Button as i}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{Card as d,CardContent as g,CardHeader as m,CardTitle as u}from"../../../../components/ui/card";import{RadioGroup as p}from"../../../../components/ui/radio-group";import{Pencil as h,Eye as b,Plus as f,Trash2 as x,BookOpen as N,Lightbulb as v,MessageSquare as w,CheckCircle2 as y}from"lucide-react";import{ReadPassageAndAnswerQuestionsClient as C}from"./ReadPassageAndAnswerQuestionsClient";import{useDebouncedCallback as T}from"../../../../shared/lib/hooks";import{useExamQuestionStore as A}from"../../../../shared/lib/stores/examQuestionStore";function q(e,t){if(!t||0===t.length)return 1;let s=0;for(const r of t){if(e<s+r.questionCount)return r.number;s+=r.questionCount}return t[t.length-1]?.number||1}function Q({initialData:Q,onSave:j,onSaveToQuestionBank:k,onCancel:V,onChange:D,onUnsavedChangesChange:S,externalErrors:F,optionCount:z=4,groups:O,questionIndexInPart:P=0,partId:I="",validationRef:R}){A(e=>e.questions),A(e=>e.currentQuestionIndex),A(e=>e.upsertQuestionData),A(e=>e.getQuestionData);const $=A(e=>e.setSharedPassageData),E=A(e=>e.getSharedPassageData),M=()=>{const e=Q?.content,t=Q?.answer;if(e?.question||t?.singleQuestion){const s=t?.singleQuestion||e,r=Q?.points||s?.points||1;return{id:`sq-${Date.now()}-imported`,question:s?.question||"",options:s?.options||Array.from({length:z},()=>""),correctAnswer:s?.correctAnswer??-1,points:r,groupNumber:q(P,O)}}if(Q?.singleQuestion){const e=Q?.points||Q.singleQuestion.points||1;return{...Q.singleQuestion,points:e,groupNumber:q(P,O)}}return(()=>{const e=q(P,O);return{id:`sq-${Date.now()}-${Math.random()}`,question:"",options:Array.from({length:z},()=>""),correctAnswer:-1,points:1,groupNumber:e}})()},[G,H]=s(M),J=q(P,O),[B,K]=s(()=>{if(I){const e=E(I,J);if(e?.passage)return e.passage}const e=Q?.content,t=Q?.answer;return t?.passage||e?.passage||Q?.passage||""}),[L,U]=s(()=>{if(I){const e=E(I,J);if(e?.passageTitle)return e.passageTitle}const e=Q?.content,t=Q?.answer;return t?.passageTitle||e?.passageTitle||Q?.passageTitle||""}),[X,W]=s(()=>{if(I){const e=E(I,J);if(e?.instructions)return e.instructions}const e=Q?.content,t=Q?.answer;return t?.instructions||e?.instructions||Q?.instructions||""}),[Y,Z]=s(!1),[_,ee]=s(!1),[te,se]=s(Q?.explanation||""),[re,ne]=s({}),ie=r(""),ae=r(Q),oe=r(P),le=r(!1),ce=r(!1),de=r(D),ge=r(""),me=G.groupNumber||1,ue=r(S);n(()=>{ue.current=S},[S]),n(()=>{de.current=D},[D]);const pe=T(e=>{de.current?.(e)},300),he=()=>JSON.stringify({passage:B,passageTitle:L,instructions:X,question:G.question,options:G.options,correctAnswer:G.correctAnswer,points:G.points});n(()=>{if(le.current)return;const e=setTimeout(()=>{ie.current=he(),ee(!1)},150);return()=>clearTimeout(e)},[P]),n(()=>{if(le.current)return;if(!ie.current)return;const e=he()!==ie.current;e!==_&&(ee(e),ue.current?.(e))},[B,L,X,G,_]),n(()=>{const e=P!==oe.current,t=Q?.content,s=Q?.answer,r=!(!t?.question&&!s?.singleQuestion)||!!Q?.singleQuestion,n=!ce.current&&r;if((n||e)&&(n||e)){le.current=!0,ae.current=Q,oe.current=P,ce.current=!0;const e=q(P,O);H({...M(),groupNumber:e});let r={passage:"",passageTitle:"",instructions:""};if(I){const n=E(I,e);n?.passage?r={passage:n.passage,passageTitle:n.passageTitle||"",instructions:n.instructions||""}:(r={passage:s?.passage||t?.passage||Q?.passage||"",passageTitle:s?.passageTitle||t?.passageTitle||Q?.passageTitle||"",instructions:s?.instructions||t?.instructions||Q?.instructions||""},r.passage&&$(I,e,r))}else r={passage:s?.passage||t?.passage||Q?.passage||"",passageTitle:s?.passageTitle||t?.passageTitle||Q?.passageTitle||"",instructions:s?.instructions||t?.instructions||Q?.instructions||""};K(r.passage),U(r.passageTitle),W(r.instructions),setTimeout(()=>{le.current=!1},100)}},[Q,O,P,I,E,$]),n(()=>{if(le.current)return;const e={passage:B,passageTitle:L,instructions:X,explanation:te,singleQuestion:G,groups:O};e.points=G.points||1;const t=JSON.stringify(e);ge.current!==t&&(ge.current=t,I&&B&&$(I,me,{passage:B,passageTitle:L,instructions:X}),pe(e))},[B,L,X,te,G,O,I,me,$,pe]);const be=(e,t)=>{H(s=>({...s,[e]:t})),"question"===e&&re.question&&ne(e=>({...e,question:void 0})),"correctAnswer"===e&&re.correctAnswer&&ne(e=>({...e,correctAnswer:void 0}))},fe=()=>{const e={};if(B.trim()||(e.passage="Vui lòng nhập nội dung đoạn văn!"),G.question.trim()||(e.question="Vui lòng nhập câu hỏi!"),e.options={},G.options.forEach((t,s)=>{t.trim()||(e.options[s]="Vui lòng nhập đáp án!")}),0===Object.keys(e.options).length&&delete e.options,G.correctAnswer<0&&(e.correctAnswer="Vui lòng chọn đáp án đúng!"),ne(e),Object.keys(e).length>0)return{isValid:!1};const t={passage:B,passageTitle:L,instructions:X,explanation:te,singleQuestion:G,groups:O};return t.points=G.points||1,{isValid:!0,saveData:t}};n(()=>{R&&(R.current={triggerValidation:async()=>{const{isValid:e}=fe();return e},getFormData:()=>{const e={passage:B,passageTitle:L,instructions:X,explanation:te,singleQuestion:G,groups:O};return e.points=G.points||1,e}})},[R,B,L,X,te,G,O]);if(Y){const s={passage:B,passageTitle:L,instructions:X,explanation:te,singleQuestion:G,groups:O};return t("div",{className:"space-y-6",children:[e(d,{children:e(m,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(u,{children:"Đọc đoạn văn và trả lời câu hỏi (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),t(i,{variant:"outline",size:"sm",onClick:()=>Z(!1),children:[e(h,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(C,{questionData:s,autoFillCorrectAnswers:!0,isReviewMode:!0,onSubmit:()=>{},explanation:te})]})}return t("div",{className:"space-y-6",children:[t(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500"}),e(m,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md",children:e(N,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(u,{className:"text-xl font-bold text-gray-900",children:"Đọc đoạn văn và trả lời câu hỏi"}),t("div",{className:"mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-700",children:[e("span",{children:"📚"}),t("span",{children:["Nhóm ",me]})]})]})]}),t(i,{variant:"outline",size:"sm",onClick:()=>{B.trim()?Z(!0):ne(e=>({...e,passage:"Vui lòng nhập nội dung đoạn văn trước khi xem trước!"}))},className:"gap-2 border-violet-200 text-violet-600 hover:bg-violet-50 hover:text-violet-700",children:[e(b,{className:"h-4 w-4"}),"Xem trước"]})]})}),t(g,{className:"space-y-6",children:[t("div",{className:"rounded-xl border-2 p-5 transition-all "+(re.passage?"border-red-300 bg-gradient-to-r from-red-50 to-rose-50":"border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50"),children:[t("div",{className:"mb-4 flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg "+(re.passage?"bg-red-100":"bg-amber-100"),children:e(N,{className:"h-4 w-4 "+(re.passage?"text-red-600":"text-amber-600")})}),t(a,{className:"text-base font-semibold "+(re.passage?"text-red-800":"text-amber-800"),children:["Đoạn văn đọc hiểu ",t("span",{className:"font-normal text-amber-600",children:["(dùng chung cho nhóm ",me,")"]})]})]}),t("div",{className:"mb-4",children:[e(a,{htmlFor:"passageTitle",className:"text-sm font-medium text-gray-700",children:"Tiêu đề"}),e(o,{id:"passageTitle",value:L,onChange:e=>U(e.target.value),placeholder:"Ví dụ: Our Family Holiday in Nha Trang",className:"mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200"})]}),t("div",{className:"mb-4",children:[t(a,{htmlFor:"passage",className:"text-sm font-medium text-gray-700",children:["Nội dung đoạn văn ",e("span",{className:"text-red-500",children:"*"})]}),e(l,{id:"passage",value:B,onChange:e=>{K(e.target.value),re.passage&&ne(e=>({...e,passage:void 0}))},placeholder:"Nhập nội dung đoạn văn đọc hiểu...",className:"mt-1.5 min-h-[150px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 "+(re.passage?"border-red-400 focus:border-red-500 focus:ring-red-200":""),rows:6}),re.passage&&e("p",{className:"mt-1.5 text-sm text-red-600",children:re.passage})]}),t("div",{children:[e(a,{htmlFor:"instructions",className:"text-sm font-medium text-gray-700",children:"Hướng dẫn"}),e(o,{id:"instructions",value:X,onChange:e=>W(e.target.value),placeholder:"Ví dụ: Read the short passage and answer the question below.",className:"mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200"})]})]}),F&&F.length>0&&t("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),t("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:F.map((t,s)=>e("li",{children:t},s))})]})]})]})]}),t(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-400"}),e(m,{className:"bg-gradient-to-r from-indigo-50 to-purple-50 pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100",children:e(w,{className:"h-4 w-4 text-indigo-600"})}),e(u,{className:"text-lg font-semibold text-gray-800",children:"Nội dung câu hỏi"}),t("span",{className:"inline-flex items-center gap-1 rounded-full bg-purple-100 px-2.5 py-1 text-xs font-medium text-purple-700",children:["📚 Nhóm ",me]})]})}),t(g,{className:"space-y-6 pt-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(c,{id:"points",value:G.points||1,onChange:e=>{be("points",Number(e.target.value)||1)}})}),t("div",{className:"space-y-2",children:[t(a,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(w,{className:"h-4 w-4 text-indigo-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(o,{id:"question",value:G.question||"",onChange:e=>be("question",e.target.value),placeholder:"Nhập câu hỏi...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(re.question?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),re.question&&e("p",{className:"text-sm text-red-600",children:re.question})]}),t("div",{className:"space-y-4",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(v,{className:"h-3.5 w-3.5 text-indigo-600"})}),t(a,{className:"text-base font-semibold text-gray-800",children:["Các lựa chọn ",t("span",{className:"text-sm font-normal text-gray-500",children:["(",G.options.length," đáp án)"]})]})]}),t(i,{type:"button",variant:"outline",size:"sm",onClick:()=>{if(G.options.length>=10)return;const e=[...G.options,""];H(t=>({...t,options:e}))},disabled:G.options.length>=10,className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(f,{className:"h-4 w-4"}),"Thêm đáp án"]})]}),e(p,{value:G.correctAnswer>=0?G.correctAnswer.toString():"",onValueChange:e=>be("correctAnswer",parseInt(e)),children:e("div",{className:"space-y-3",children:G.options.map((s,r)=>{const n=re.options?.[r],a=G.correctAnswer===r,l=String.fromCharCode(65+r);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(a?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:t("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(a?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"),onClick:()=>be("correctAnswer",r),children:l}),t("div",{className:"flex-1 space-y-2",children:[e(o,{id:`option-input-${r}`,value:s,onChange:e=>((e,t)=>{const s=[...G.options];s[e]=t,H(e=>({...e,options:s})),re.options?.[e]&&ne(t=>{const s={...t.options};return delete s[e],{...t,options:Object.keys(s).length>0?s:void 0}})})(r,e.target.value),placeholder:`Nhập đáp án ${l}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(n?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),n&&e("p",{className:"text-sm text-red-600",children:n}),a&&t("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(y,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]})]}),t("div",{className:"flex items-center gap-2",children:[!a&&e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>be("correctAnswer",r),className:"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(y,{className:"h-4 w-4"})}),G.options.length>2&&e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(G.options.length<=2)return;const t=G.options.filter((t,s)=>s!==e);let s=G.correctAnswer;G.correctAnswer===e?s=-1:G.correctAnswer>e&&(s=G.correctAnswer-1),H(e=>({...e,options:t,correctAnswer:s}))})(r),className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(x,{className:"h-4 w-4"})})]})]})},r)})})}),G.correctAnswer<0&&t("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),t("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:"Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng"})]})]}),re.correctAnswer&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:re.correctAnswer})})]})]})]}),t(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(m,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(N,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(u,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(g,{children:e(l,{id:"explanation",value:te,onChange:e=>se(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function ReadPassageAndAnswerQuestionsCreator(t){return e(Q,{...t})}
+'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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { RadioGroup } from '../../../../components/ui/radio-group';
+import { Pencil, Eye, Plus, Trash2, BookOpen, Lightbulb, MessageSquare, CheckCircle2 } from 'lucide-react';
+import { ReadPassageAndAnswerQuestionsClient } from './ReadPassageAndAnswerQuestionsClient';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// Helper: Calculate group number for a question index based on groups config
+function getGroupNumberForIndex(questionIndex, groups) {
+    if (!groups || groups.length === 0) {
+        return 1; // Default to group 1 if no groups config
+    }
+    let currentIndex = 0;
+    for (const group of groups) {
+        if (questionIndex < currentIndex + group.questionCount) {
+            return group.number;
+        }
+        currentIndex += group.questionCount;
+    }
+    return groups[groups.length - 1]?.number || 1;
+}
+/**
+ * ReadPassageAndAnswerQuestionsCreator - Single Question Mode
+ *
+ * This component handles ONE question at a time. Navigation between questions
+ * is handled by the parent ExamCreator component.
+ *
+ * Shared data within group:
+ * - passage: string (required)
+ * - passageTitle: string (optional)
+ * - instructions: string (optional)
+ */
+function ReadPassageAndAnswerQuestionsContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, externalErrors, optionCount = 4, groups, questionIndexInPart = 0, partId = '', validationRef, }) {
+    // Access exam question store to find and update shared passage for questions in same group
+    const questionsState = useExamQuestionStore((state) => state.questions);
+    const currentQuestionIndex = useExamQuestionStore((state) => state.currentQuestionIndex);
+    const upsertQuestionData = useExamQuestionStore((state) => state.upsertQuestionData);
+    const getQuestionData = useExamQuestionStore((state) => state.getQuestionData);
+    const setSharedPassageData = useExamQuestionStore((state) => state.setSharedPassageData);
+    const getSharedPassageData = useExamQuestionStore((state) => state.getSharedPassageData);
+    // Create a default single question
+    const createDefaultQuestion = () => {
+        const groupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+        return {
+            id: `sq-${Date.now()}-${Math.random()}`,
+            question: '',
+            options: Array.from({ length: optionCount }, () => ''),
+            correctAnswer: -1,
+            points: 1,
+            groupNumber,
+        };
+    };
+    // Initialize from initialData or create new
+    const initializeQuestion = () => {
+        // Check for new single question format first
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        if (content?.question || answer?.singleQuestion) {
+            const sq = answer?.singleQuestion || content;
+            const pointsFromInitialData = initialData?.points || sq?.points || 1;
+            return {
+                id: `sq-${Date.now()}-imported`,
+                question: sq?.question || '',
+                options: sq?.options || Array.from({ length: optionCount }, () => ''),
+                correctAnswer: sq?.correctAnswer ?? -1,
+                points: pointsFromInitialData,
+                groupNumber: getGroupNumberForIndex(questionIndexInPart, groups),
+            };
+        }
+        // Legacy format: singleQuestion in answer
+        if (initialData?.singleQuestion) {
+            const pointsFromInitialData = initialData?.points || initialData.singleQuestion.points || 1;
+            return {
+                ...initialData.singleQuestion,
+                points: pointsFromInitialData,
+                groupNumber: getGroupNumberForIndex(questionIndexInPart, groups),
+            };
+        }
+        return createDefaultQuestion();
+    };
+    // State for current question
+    const [currentQuestion, setCurrentQuestion] = useState(initializeQuestion);
+    // Get current group number for initialization
+    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+    // Shared passage data state
+    const [passage, setPassage] = useState(() => {
+        // Priority 1: Check shared passage from store
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.passage) {
+                return storedData.passage;
+            }
+        }
+        // Priority 2: From initialData
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        return answer?.passage || content?.passage || initialData?.passage || '';
+    });
+    const [passageTitle, setPassageTitle] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.passageTitle) {
+                return storedData.passageTitle;
+            }
+        }
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        return answer?.passageTitle || content?.passageTitle || initialData?.passageTitle || '';
+    });
+    const [instructions, setInstructions] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.instructions) {
+                return storedData.instructions;
+            }
+        }
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        return answer?.instructions || content?.instructions || initialData?.instructions || '';
+    });
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    // Inline validation errors
+    const [validationErrors, setValidationErrors] = useState({});
+    // Store the last saved state for comparison
+    const savedStateRef = useRef('');
+    // Refs for change tracking
+    const previousInitialDataRef = useRef(initialData);
+    const previousQuestionIndexRef = useRef(questionIndexInPart);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Current group number
+    const currentGroupNumber = currentQuestion.groupNumber || 1;
+    // Ref for onUnsavedChangesChange callback
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
+    // Update onChange ref
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange callback
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Helper function to create current state string for comparison
+    const getCurrentStateString = () => {
+        return JSON.stringify({
+            passage,
+            passageTitle,
+            instructions,
+            question: currentQuestion.question,
+            options: currentQuestion.options,
+            correctAnswer: currentQuestion.correctAnswer,
+            points: currentQuestion.points,
+        });
+    };
+    // Initialize saved state when questionIndexInPart changes (navigation)
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const timer = setTimeout(() => {
+            savedStateRef.current = getCurrentStateString();
+            setHasUnsavedChanges(false);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [questionIndexInPart]);
+    // Detect unsaved changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        if (!savedStateRef.current)
+            return;
+        const currentState = getCurrentStateString();
+        const hasChanges = currentState !== savedStateRef.current;
+        if (hasChanges !== hasUnsavedChanges) {
+            setHasUnsavedChanges(hasChanges);
+            onUnsavedChangesChangeRef.current?.(hasChanges);
+        }
+    }, [passage, passageTitle, instructions, currentQuestion, hasUnsavedChanges]);
+    // Sync from initialData when navigation or first init
+    useEffect(() => {
+        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const hasNewFormatData = !!(content?.question || answer?.singleQuestion);
+        const hasValidInitialData = hasNewFormatData || !!initialData?.singleQuestion;
+        const shouldSyncForFirstInit = !hasInitializedRef.current && hasValidInitialData;
+        const shouldSyncForNavigation = questionIndexChanged;
+        if (!shouldSyncForFirstInit && !shouldSyncForNavigation) {
+            return;
+        }
+        if (shouldSyncForFirstInit || shouldSyncForNavigation) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            previousQuestionIndexRef.current = questionIndexInPart;
+            hasInitializedRef.current = true;
+            const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+            // Initialize question
+            setCurrentQuestion({
+                ...initializeQuestion(),
+                groupNumber: groupNum,
+            });
+            // Handle shared passage data
+            let passageData = {
+                passage: '',
+                passageTitle: '',
+                instructions: '',
+            };
+            // Priority 1: Check shared passage from store
+            if (partId) {
+                const storedData = getSharedPassageData(partId, groupNum);
+                if (storedData?.passage) {
+                    passageData = {
+                        passage: storedData.passage,
+                        passageTitle: storedData.passageTitle || '',
+                        instructions: storedData.instructions || '',
+                    };
+                }
+                else {
+                    // Priority 2: From initialData (loaded from API)
+                    passageData = {
+                        passage: answer?.passage || content?.passage || initialData?.passage || '',
+                        passageTitle: answer?.passageTitle || content?.passageTitle || initialData?.passageTitle || '',
+                        instructions: answer?.instructions || content?.instructions || initialData?.instructions || '',
+                    };
+                    // Save to store for other questions in the same group to access
+                    if (passageData.passage) {
+                        setSharedPassageData(partId, groupNum, passageData);
+                    }
+                }
+            }
+            else {
+                // No partId, just use initialData
+                passageData = {
+                    passage: answer?.passage || content?.passage || initialData?.passage || '',
+                    passageTitle: answer?.passageTitle || content?.passageTitle || initialData?.passageTitle || '',
+                    instructions: answer?.instructions || content?.instructions || initialData?.instructions || '',
+                };
+            }
+            // Set state
+            setPassage(passageData.passage);
+            setPassageTitle(passageData.passageTitle);
+            setInstructions(passageData.instructions);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData, groups, questionIndexInPart, partId, getSharedPassageData, setSharedPassageData]);
+    // Call onChange when data changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const payload = {
+            passage,
+            passageTitle,
+            instructions,
+            explanation,
+            singleQuestion: currentQuestion,
+            groups,
+        };
+        payload.points = currentQuestion.points || 1;
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            // Save shared passage data to store
+            if (partId && passage) {
+                setSharedPassageData(partId, currentGroupNumber, {
+                    passage,
+                    passageTitle,
+                    instructions,
+                });
+            }
+            debouncedOnChange(payload);
+        }
+    }, [passage, passageTitle, instructions, explanation, currentQuestion, groups, partId, currentGroupNumber, setSharedPassageData, debouncedOnChange]);
+    // Update current question field
+    const updateCurrentQuestion = (field, value) => {
+        setCurrentQuestion((prev) => ({ ...prev, [field]: value }));
+        // Clear validation error
+        if (field === 'question' && validationErrors.question) {
+            setValidationErrors(prev => ({ ...prev, question: undefined }));
+        }
+        if (field === 'correctAnswer' && validationErrors.correctAnswer) {
+            setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
+        }
+    };
+    // Add new option
+    const addOption = () => {
+        if (currentQuestion.options.length >= 10) {
+            return; // Max 10 options
+        }
+        const newOptions = [...currentQuestion.options, ''];
+        setCurrentQuestion((prev) => ({ ...prev, options: newOptions }));
+    };
+    // Delete option at index
+    const deleteOption = (index) => {
+        if (currentQuestion.options.length <= 2) {
+            return; // Minimum 2 options
+        }
+        const newOptions = currentQuestion.options.filter((_, i) => i !== index);
+        // If deleted option was the correct answer, reset correctAnswer
+        let newCorrectAnswer = currentQuestion.correctAnswer;
+        if (currentQuestion.correctAnswer === index) {
+            newCorrectAnswer = -1;
+        }
+        else if (currentQuestion.correctAnswer > index) {
+            // Shift correctAnswer index down if it's after the deleted option
+            newCorrectAnswer = currentQuestion.correctAnswer - 1;
+        }
+        setCurrentQuestion((prev) => ({ ...prev, options: newOptions, correctAnswer: newCorrectAnswer }));
+    };
+    // Update option at index
+    const updateOption = (index, value) => {
+        const newOptions = [...currentQuestion.options];
+        newOptions[index] = value;
+        setCurrentQuestion((prev) => ({ ...prev, options: newOptions }));
+        // Clear validation error
+        if (validationErrors.options?.[index]) {
+            setValidationErrors(prev => {
+                const newOptionsErrors = { ...prev.options };
+                delete newOptionsErrors[index];
+                return {
+                    ...prev,
+                    options: Object.keys(newOptionsErrors).length > 0 ? newOptionsErrors : undefined,
+                };
+            });
+        }
+    };
+    // Validate form data
+    const validateForm = () => {
+        const errors = {};
+        if (!passage.trim()) {
+            errors.passage = 'Vui lòng nhập nội dung đoạn văn!';
+        }
+        if (!currentQuestion.question.trim()) {
+            errors.question = 'Vui lòng nhập câu hỏi!';
+        }
+        // Validate options
+        errors.options = {};
+        currentQuestion.options.forEach((opt, idx) => {
+            if (!opt.trim()) {
+                errors.options[idx] = 'Vui lòng nhập đáp án!';
+            }
+        });
+        if (Object.keys(errors.options).length === 0) {
+            delete errors.options;
+        }
+        if (currentQuestion.correctAnswer < 0) {
+            errors.correctAnswer = 'Vui lòng chọn đáp án đúng!';
+        }
+        setValidationErrors(errors);
+        if (Object.keys(errors).length > 0) {
+            return { isValid: false };
+        }
+        const saveData = {
+            passage,
+            passageTitle,
+            instructions,
+            explanation,
+            singleQuestion: currentQuestion,
+            groups,
+        };
+        saveData.points = currentQuestion.points || 1;
+        return { isValid: true, saveData };
+    };
+    // Expose validation function to parent via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const { isValid } = validateForm();
+                    return isValid;
+                },
+                // BUGFIX: Expose getFormData to get fresh form data at save time
+                // This bypasses the debounced onChange race condition
+                getFormData: () => {
+                    const data = {
+                        passage,
+                        passageTitle,
+                        instructions,
+                        explanation,
+                        singleQuestion: currentQuestion,
+                        groups,
+                    };
+                    data.points = currentQuestion.points || 1;
+                    return data;
+                },
+            };
+        }
+    }, [validationRef, passage, passageTitle, instructions, explanation, currentQuestion, groups]);
+    // Sync passage data to all questions in same group
+    const syncPassageDataToSameGroup = () => {
+        const targetGroupNumber = currentGroupNumber;
+        const passageData = { passage, passageTitle, instructions };
+        Object.entries(questionsState).forEach(([indexStr, entry]) => {
+            const questionIndex = Number(indexStr);
+            if (questionIndex === currentQuestionIndex)
+                return;
+            if (!entry?.data)
+                return;
+            if (entry.data.type !== 'READ_PASSAGE_AND_ANSWER_QUESTIONS')
+                return;
+            const answerData = entry.data.answer;
+            const sq = answerData?.singleQuestion;
+            if (sq?.groupNumber !== targetGroupNumber)
+                return;
+            const updatedAnswer = {
+                ...answerData,
+                passage: passageData.passage,
+                passageTitle: passageData.passageTitle,
+                instructions: passageData.instructions,
+            };
+            upsertQuestionData(questionIndex, {
+                ...entry.data,
+                answer: updatedAnswer,
+            });
+        });
+    };
+    // Handle save
+    const handleSave = () => {
+        const { isValid, saveData } = validateForm();
+        if (!isValid || !saveData)
+            return;
+        // Save shared passage data to store
+        if (partId) {
+            setSharedPassageData(partId, currentGroupNumber, {
+                passage,
+                passageTitle,
+                instructions,
+            });
+        }
+        // Sync to other questions in same group
+        syncPassageDataToSameGroup();
+        // Update saved state
+        savedStateRef.current = getCurrentStateString();
+        setHasUnsavedChanges(false);
+        onUnsavedChangesChangeRef.current?.(false);
+        onSave?.(saveData);
+    };
+    // Handle save to question bank
+    const handleSaveToQuestionBank = () => {
+        const { isValid, saveData } = validateForm();
+        if (!isValid || !saveData)
+            return;
+        if (partId) {
+            setSharedPassageData(partId, currentGroupNumber, {
+                passage,
+                passageTitle,
+                instructions,
+            });
+        }
+        syncPassageDataToSameGroup();
+        savedStateRef.current = getCurrentStateString();
+        setHasUnsavedChanges(false);
+        onUnsavedChangesChangeRef.current?.(false);
+        onSaveToQuestionBank?.(saveData);
+    };
+    // Preview mode
+    const handlePreview = () => {
+        if (!passage.trim()) {
+            setValidationErrors(prev => ({ ...prev, passage: 'Vui lòng nhập nội dung đoạn văn trước khi xem trước!' }));
+            return;
+        }
+        setIsClientMode(true);
+    };
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            passage,
+            passageTitle,
+            instructions,
+            explanation,
+            singleQuestion: currentQuestion,
+            groups,
+        };
+        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: "\u0110\u1ECDc \u0111o\u1EA1n v\u0103n v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _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(ReadPassageAndAnswerQuestionsClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: true, onSubmit: () => { }, explanation: explanation })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-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-purple-500 to-violet-600 shadow-md", children: _jsx(BookOpen, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "\u0110\u1ECDc \u0111o\u1EA1n v\u0103n v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-700", children: [_jsx("span", { children: "\uD83D\uDCDA" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePreview, className: "gap-2 border-violet-200 text-violet-600 hover:bg-violet-50 hover:text-violet-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: `rounded-xl border-2 p-5 transition-all ${validationErrors.passage ? 'border-red-300 bg-gradient-to-r from-red-50 to-rose-50' : 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50'}`, children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${validationErrors.passage ? 'bg-red-100' : 'bg-amber-100'}`, children: _jsx(BookOpen, { className: `h-4 w-4 ${validationErrors.passage ? 'text-red-600' : 'text-amber-600'}` }) }), _jsxs(Label, { className: `text-base font-semibold ${validationErrors.passage ? 'text-red-800' : 'text-amber-800'}`, children: ["\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u ", _jsxs("span", { className: "font-normal text-amber-600", children: ["(d\u00F9ng chung cho nh\u00F3m ", currentGroupNumber, ")"] })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx(Label, { htmlFor: "passageTitle", className: "text-sm font-medium text-gray-700", children: "Ti\u00EAu \u0111\u1EC1" }), _jsx(Input, { id: "passageTitle", value: passageTitle, onChange: (e) => setPassageTitle(e.target.value), placeholder: "V\u00ED d\u1EE5: Our Family Holiday in Nha Trang", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] }), _jsxs("div", { className: "mb-4", children: [_jsxs(Label, { htmlFor: "passage", className: "text-sm font-medium text-gray-700", children: ["N\u1ED9i dung \u0111o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "passage", value: passage, onChange: (e) => {
+                                                    setPassage(e.target.value);
+                                                    if (validationErrors.passage) {
+                                                        setValidationErrors(prev => ({ ...prev, passage: undefined }));
+                                                    }
+                                                }, placeholder: "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u...", className: `mt-1.5 min-h-[150px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.passage ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 6 }), validationErrors.passage && (_jsx("p", { className: "mt-1.5 text-sm text-red-600", children: validationErrors.passage }))] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "instructions", className: "text-sm font-medium text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "instructions", value: instructions, onChange: (e) => setInstructions(e.target.value), placeholder: "V\u00ED d\u1EE5: Read the short passage and answer the question below.", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "bg-gradient-to-r from-indigo-50 to-purple-50 pb-4", 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-indigo-100", children: _jsx(MessageSquare, { className: "h-4 w-4 text-indigo-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-purple-100 px-2.5 py-1 text-xs font-medium text-purple-700", children: ["\uD83D\uDCDA Nh\u00F3m ", currentGroupNumber] })] }) }), _jsxs(CardContent, { className: "space-y-6 pt-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { id: "points", value: currentQuestion.points || 1, onChange: (e) => {
+                                        updateCurrentQuestion('points', Number(e.target.value) || 1);
+                                    } }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "question", value: currentQuestion.question || '', onChange: (e) => updateCurrentQuestion('question', e.target.value), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", currentQuestion.options.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addOption, disabled: currentQuestion.options.length >= 10, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), _jsx(RadioGroup, { value: currentQuestion.correctAnswer >= 0 ? currentQuestion.correctAnswer.toString() : '', onValueChange: (value) => updateCurrentQuestion('correctAnswer', parseInt(value)), children: _jsx("div", { className: "space-y-3", children: currentQuestion.options.map((option, optIndex) => {
+                                                const optionError = validationErrors.options?.[optIndex];
+                                                const isCorrect = currentQuestion.correctAnswer === optIndex;
+                                                const optionLetter = String.fromCharCode(65 + optIndex);
+                                                return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
+                                                        ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
+                                                        : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
+                                                                    ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                                    : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => updateCurrentQuestion('correctAnswer', optIndex), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${optIndex}`, value: option, onChange: (e) => updateOption(optIndex, e.target.value), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => updateCurrentQuestion('correctAnswer', optIndex), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), currentQuestion.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => deleteOption(optIndex), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, optIndex));
+                                            }) }) }), currentQuestion.correctAnswer < 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), validationErrors.correctAnswer && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }) }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function ReadPassageAndAnswerQuestionsCreator(props) {
+    return _jsx(ReadPassageAndAnswerQuestionsContent, { ...props });
+}

package/dist/components/questions/types/read-passage-and-answer-questions/index.js

@@ -1 +1,2 @@
-export*from"./ReadPassageAndAnswerQuestionsCreator";export*from"./ReadPassageAndAnswerQuestionsClient";
+export * from './ReadPassageAndAnswerQuestionsCreator';
+export * from './ReadPassageAndAnswerQuestionsClient';

package/dist/components/questions/types/read-passage-and-answer-questions/register.js

@@ -1 +1,58 @@
-import{ReadPassageAndAnswerQuestionsCreator as t}from"./ReadPassageAndAnswerQuestionsCreator";export const readPassageAndAnswerQuestionsRegistration={component:t,transformInitialData:t=>{const n=t?.content||{},e=t?.answer||{},s=t?.explanation||e?.explanation||"",a=t?.total_points?parseFloat(t.total_points):t?.points||1,o={passage:e?.passage||n?.passage||"",passageTitle:e?.passageTitle||n?.passageTitle||"",instructions:e?.instructions||n?.instructions||"",explanation:s,points:a};return(e?.singleQuestion||n?.question)&&(o.singleQuestion=e?.singleQuestion||{id:`sq-${Date.now()}-imported`,question:n?.question||"",options:n?.options||[],correctAnswer:e?.correctAnswer??n?.correctAnswer??-1,points:a}),o},getExtraProps:t=>({optionCount:t.optionCount||4,groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,validationRef:t.validationRef,onUnsavedChangesChange:t.onUnsavedChangesChange}),wrapOnSave:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t,explanation:t?.explanation||""})};
+import { ReadPassageAndAnswerQuestionsCreator } from './ReadPassageAndAnswerQuestionsCreator';
+export const readPassageAndAnswerQuestionsRegistration = {
+    component: ReadPassageAndAnswerQuestionsCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content || {};
+        const answer = initialData?.answer || {};
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        const apiPoints = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || 1);
+        const creatorData = {
+            passage: answer?.passage || content?.passage || '',
+            passageTitle: answer?.passageTitle || content?.passageTitle || '',
+            instructions: answer?.instructions || content?.instructions || '',
+            explanation,
+            points: apiPoints,
+        };
+        // singleQuestion format
+        if (answer?.singleQuestion || content?.question) {
+            creatorData.singleQuestion = answer?.singleQuestion || {
+                id: `sq-${Date.now()}-imported`,
+                question: content?.question || '',
+                options: content?.options || [],
+                correctAnswer: answer?.correctAnswer ?? content?.correctAnswer ?? -1,
+                points: apiPoints,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        optionCount: ctx.optionCount || 4,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        validationRef: ctx.validationRef,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+    }),
+    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 || '',
+    }),
+};