@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/cross-out-word-group/transform.js

@@ -1 +1,67 @@
-function t(t){return t.reduce((t,r)=>{if(r.isExample)return t;return t+("number"==typeof r.points?r.points:1)},0)}function r(t){return"CROSS_OUT_AND_REPLACE"===t?"CROSS_OUT_AND_REPLACE":"CROSS_OUT"}export const transformCrossOutWordGroup=e=>{const n=e.answer,o=Array.isArray(n?.items)?n.items:[];if(0===o.length)return{apiContent:{items:[]},apiCorrectAnswer:{answer:[]}};const s=o.map((t,e)=>{const n=r(t.type||t.correctAnswer?.type),o=function(t,e){const n=r(t?.type||e),o={type:n,crossOut:"string"==typeof t?.crossOut?t.crossOut.trim():""};return"CROSS_OUT_AND_REPLACE"===n&&(o.replaceWith="string"==typeof t?.replaceWith?t.replaceWith.trim():""),o}(t.correctAnswer,n);return{questionType:"CROSS_OUT_WORD",...t.isExample?{isExample:!0}:{},content:{type:n,question:t.question||""},correctAnswer:{answer:o},points:t.isExample?0:"number"==typeof t.points?t.points:1,questionNumber:t.questionNumber||e+1}});return{apiContent:{meta:{instruction:n?.instruction||"Cross out the extra or incorrect word. If the word is incorrect, write the correct word."},items:s},apiCorrectAnswer:{answer:s.map(t=>t.correctAnswer.answer)},totalPoints:t(o)}};
+const CHILD_QUESTION_TYPE = 'CROSS_OUT_WORD';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample) {
+            return total;
+        }
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+function normalizeMode(type) {
+    return type === 'CROSS_OUT_AND_REPLACE' ? 'CROSS_OUT_AND_REPLACE' : 'CROSS_OUT';
+}
+function normalizeAnswer(answer, fallbackType) {
+    const type = normalizeMode(answer?.type || fallbackType);
+    const rawIndex = answer?.wordIndex;
+    const wordIndex = typeof rawIndex === 'number' && Number.isInteger(rawIndex) && rawIndex >= 0
+        ? rawIndex
+        : rawIndex === null
+            ? null
+            : undefined;
+    const result = {
+        type,
+        ...(wordIndex !== undefined ? { wordIndex } : {}),
+        crossOut: typeof answer?.crossOut === 'string' ? answer.crossOut.trim() : '',
+    };
+    if (type === 'CROSS_OUT_AND_REPLACE') {
+        result.replaceWith =
+            typeof answer?.replaceWith === 'string' ? answer.replaceWith.trim() : '';
+    }
+    return result;
+}
+export const transformCrossOutWordGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    if (items.length === 0) {
+        return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const apiItems = items.map((item, index) => {
+        const type = normalizeMode(item.type || item.correctAnswer?.type);
+        const correctAnswer = normalizeAnswer(item.correctAnswer, type);
+        return {
+            questionType: CHILD_QUESTION_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                type,
+                question: item.question || '',
+            },
+            correctAnswer: { answer: correctAnswer },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction ||
+                    'Cross out the extra or incorrect word. If the word is incorrect, write the correct word.',
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/types/fill-in-blank/FillInBlankClient.js

@@ -1 +1,275 @@
-"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 l}from"react";import{Input as n}from"../../../../components/ui/input";import{Check as i,X as d,PenLine as o,AlertTriangle as c,ClipboardList as m,Lightbulb as g,BookOpen as h,Type as b,Hash as x}from"lucide-react";import{cn as f}from"../../../../shared/lib/utils";import{usePresignedFileUrl as u}from"../../../../shared/lib/hooks";function p({src:r,alt:t,className:a}){const{previewUrl:s,isLoading:l}=u(r);return l?e("div",{className:"flex h-40 items-center justify-center",children:e("div",{className:"h-6 w-6 animate-spin rounded-full border-3 border-gray-200 border-t-indigo-500"})}):e("img",{src:s||r,alt:t,className:f("max-h-72 w-auto object-contain rounded-lg drop-shadow-sm",a),onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})}export function FillInBlankClient({questionData:N,onSubmit:w,isReviewMode:v=!1,userAnswer:y=[],autoFillCorrectAnswers:j=!1,explanation:k}){const C=!N.question&&N.blanks&&N.blanks.length>0,q=k||N.explanation,U=N.isGroup,A=N.groupTitle||N.title||"",S=N.groupContent||"",E=N.groupImageUrl||"",I=N.groupNumber,L=U&&(A||S||E),{previewUrl:F,isLoading:G}=u(!U&&N.imageUrl?N.imageUrl:""),H=l(()=>C?[]:function(e){const r=/\{(\d+)\}/g,t=[];let a;for(;null!==(a=r.exec(e));){const e=parseInt(a[1],10);t.includes(e)||t.push(e)}return t.sort((e,r)=>e-r)}(N.question||""),[N.question,C]),[T,V]=a(j?C&&N.blanks?N.blanks.map(e=>e.correctAnswer):N.answers||[]:y||[]);s(()=>{j?C&&N.blanks?V(N.blanks.map(e=>e.correctAnswer)):V(N.answers||[]):y&&V(y)},[y,j,N,C]);const B=(e,r)=>{if(v)return;const t=[...T];for(;t.length<=e;)t.push("");t[e]=r,V(t),w?.(t)},K=(e,r)=>{let t;if(C&&N.blanks?.[e])t=N.blanks[e].correctAnswer;else{if(!N.answers?.[e])return!1;t=N.answers[e]}const a=r.trim(),s=t.trim();return N.caseSensitive?a===s:a.toLowerCase()===s.toLowerCase()},M=v?(()=>{let e=0,r=0;return C&&N.blanks?(r=N.blanks.length,N.blanks.forEach((r,t)=>{K(t,T[t]||"")&&e++})):(r=H.length,H.forEach(r=>{K(r,T[r]||"")&&e++})),{correct:e,total:r}})():null,D=()=>L?r("div",{className:"relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all",children:[e("div",{className:"absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none"}),e("div",{className:"absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl"}),r("div",{className:"relative p-6 sm:p-7",children:[r("div",{className:"flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4",children:[e("div",{className:"flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50",children:e(h,{className:"h-5 w-5 text-indigo-600"})}),r("div",{className:"flex-1 pt-1",children:[r("div",{className:"flex items-center gap-2 mb-1",children:[I&&r("span",{className:"inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10",children:["Nhóm ",I]}),e("span",{className:"inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-700 ring-1 ring-inset ring-orange-700/10",children:"Điền vào chỗ trống"})]}),A&&e("h4",{className:"text-xl font-bold text-slate-800 leading-tight tracking-tight",children:A})]})]}),r("div",{className:"space-y-6 text-slate-700",children:[S&&e("div",{className:"prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]",children:S.split("\n").map((r,t)=>e("p",{className:"last:mb-0",children:r},t))}),E&&r("div",{className:"mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md",children:[e("div",{className:"flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2.5 w-2.5 rounded-full bg-slate-300"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-slate-300"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-slate-300"}),e("span",{className:"ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500",children:"Tài liệu đính kèm"})]})}),e("div",{className:"flex items-center justify-center p-4 min-h-[160px]",children:e(p,{src:E,alt:A||"Hình ảnh nhóm"})})]})]})]})]}):null,P=()=>{const t=(N.question||"").split(/(\{\d+\})/g);return e("div",{className:"flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]",children:t.map((t,a)=>{const s=t.match(/\{(\d+)\}/);if(s){const t=parseInt(s[1],10),l=T[t]||"",o=v&&K(t,l),c=v&&l&&!o;return r("span",{className:"relative inline-flex items-center mx-0.5",children:[e("span",{className:"flex h-5 w-5 items-center justify-center rounded-md bg-orange-100 text-[10px] font-bold text-orange-600 mr-1 ring-1 ring-orange-200/60",children:t+1}),e(n,{value:l,onChange:e=>B(t,e.target.value),disabled:v,className:f("h-9 w-28 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200","focus:ring-2 focus:ring-offset-1 focus:outline-none",v?o?"border-emerald-400 bg-emerald-50 text-emerald-700":c?"border-red-400 bg-red-50 text-red-700":"border-gray-200 bg-gray-50 text-gray-500":"border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50"),placeholder:"..."}),v&&(o||c)&&e("span",{className:f("absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white",o?"bg-emerald-500":"bg-red-500"),children:e(o?i:d,{className:"h-2.5 w-2.5 text-white"})})]},a)}return e("span",{className:"text-slate-800 font-medium",children:t},a)})})},Q=(t,a,s)=>{const l=t.split(/(\{0\})/g);return e("div",{className:"flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]",children:l.map((t,a)=>{if("{0}"===t){const t=T[s]||"",l=v&&K(s,t),o=v&&t&&!l;return r("span",{className:"relative inline-flex items-center mx-0.5",children:[e(n,{value:t,onChange:e=>B(s,e.target.value),disabled:v,className:f("h-9 w-32 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200","focus:ring-2 focus:ring-offset-1 focus:outline-none",v?l?"border-emerald-400 bg-emerald-50 text-emerald-700":o?"border-red-400 bg-red-50 text-red-700":"border-gray-200 bg-gray-50 text-gray-500":"border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50"),placeholder:"..."}),v&&(l||o)&&e("span",{className:f("absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white",l?"bg-emerald-500":"bg-red-500"),children:e(l?i:d,{className:"h-2.5 w-2.5 text-white"})})]},a)}return e("span",{className:"text-slate-800 font-medium",children:t},a)})})},R=()=>!v&&N.showHints&&N.hints&&0!==N.hints.length?r("div",{className:"rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50/80 to-purple-50/50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100 ring-1 ring-violet-200/60",children:e(g,{className:"h-3.5 w-3.5 text-violet-600"})}),e("span",{className:"text-sm font-semibold text-violet-800",children:"Gợi ý đáp án"})]}),e("div",{className:"flex flex-wrap gap-2",children:N.hints.map((r,t)=>e("span",{className:"inline-flex items-center rounded-full border border-violet-200 bg-white px-3 py-1 text-sm font-medium text-violet-700 shadow-sm transition-all hover:border-violet-300 hover:bg-violet-50 hover:shadow",children:r},t))})]}):null,z=()=>v||!N.caseSensitive?null:r("div",{className:"flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50/50 px-4 py-3",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm",children:e(b,{className:"h-3.5 w-3.5"})}),r("div",{children:[e("span",{className:"text-sm font-semibold text-amber-800",children:"Phân biệt hoa/thường"}),e("span",{className:"text-sm text-amber-700 ml-1",children:"– Vui lòng nhập đúng chữ hoa/thường"})]})]}),J=()=>{const t=q||N.explanation;return v&&t?r("div",{className:"overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm",children:[r("div",{className:"flex items-center gap-2.5 border-b border-blue-100 bg-white/60 px-5 py-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm",children:e(g,{className:"h-4 w-4"})}),e("h4",{className:"text-sm font-semibold text-slate-800",children:"Giải thích"})]}),e("div",{className:"p-5",children:e("p",{className:"text-sm text-slate-700 leading-relaxed",children:t})})]}):null},O=()=>U?null:F||N.imageUrl?r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 shadow-sm",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex items-center justify-center p-4",children:G?e("div",{className:"flex h-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-orange-500"})}):e("img",{src:F||N.imageUrl,alt:"Question illustration",className:"max-h-56 w-auto object-contain rounded-md",onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})})]}):null;if(!C){const a=H.some(e=>(T[e]||"").trim());return r("div",{className:"space-y-4",children:[D(),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm",children:e(o,{className:"h-4 w-4"})}),r("div",{className:"flex items-center gap-2",children:[e("span",{className:"text-sm font-semibold text-gray-700",children:"Điền vào chỗ trống"}),r("span",{className:"inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200/60",children:[e(x,{className:"h-3 w-3"}),H.length]})]})]}),v&&M&&r("div",{className:f("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold",M.correct===M.total?"bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60":M.correct>=M.total/2?"bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200/60":"bg-red-100 text-red-700 ring-1 ring-red-200/60"),children:[M.correct===M.total&&e(i,{className:"h-3 w-3"}),M.correct,"/",M.total," đúng"]})]}),r("div",{className:"p-5 space-y-4",children:[e("div",{className:"rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80",children:P()}),O(),R(),v&&r("div",{className:"rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white",children:e(m,{className:"h-3 w-3"})}),e("h4",{className:"text-xs font-semibold text-gray-600 uppercase tracking-wider",children:"Chi tiết đáp án"})]}),e("div",{className:"p-4 space-y-2.5",children:H.map(a=>{const s=T[a]||"",l=N.answers?.[a]||"",n=K(a,s),o=s.trim().length>0;return r("div",{className:f("rounded-lg border p-3 transition-colors",n?"border-emerald-200 bg-emerald-50/50":o?"border-red-200 bg-red-50/50":"border-gray-100 bg-gray-50/50"),children:[r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-orange-100 text-xs font-bold text-orange-600 ring-1 ring-orange-200/60",children:a+1}),r("span",{className:"text-sm text-gray-500",children:["Chỗ trống ",a+1]})]}),e("div",{className:f("flex items-center gap-1 text-xs font-semibold",n?"text-emerald-600":o?"text-red-600":"text-gray-400"),children:n?r(t,{children:[e(i,{className:"h-3.5 w-3.5"})," Đúng"]}):o?r(t,{children:[e(d,{className:"h-3.5 w-3.5"})," Sai"]}):"Bỏ trống"})]}),r("div",{className:"mt-2 grid grid-cols-2 gap-2 text-sm",children:[r("div",{className:"flex items-center justify-between rounded-md bg-white px-3 py-2 border border-gray-100",children:[e("span",{className:"text-gray-500 text-xs",children:"Đã nhập"}),e("span",{className:f("font-semibold",n?"text-emerald-600":o?"text-red-600":"text-gray-400 italic"),children:s||"—"})]}),r("div",{className:"flex items-center justify-between rounded-md bg-emerald-50 px-3 py-2 border border-emerald-100",children:[e("span",{className:"text-gray-500 text-xs",children:"Đáp án"}),e("span",{className:"font-semibold text-emerald-600",children:l})]})]})]},a)})})]}),!v&&!a&&r("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e(c,{className:"h-3 w-3"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng điền câu trả lời vào các chỗ trống"})]})]})]}),z(),J()]})}return r("div",{className:"space-y-4",children:[D(),N.blanks?.map((a,s)=>{const l=T[s]||"",n=v&&K(s,l),m=""!==l.trim();return r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm",children:e(o,{className:"h-4 w-4"})}),r("span",{className:"text-sm font-semibold text-gray-700",children:["Câu ",s+1,": Điền vào chỗ trống"]})]}),v&&m&&r("div",{className:f("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold",n?"bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60":"bg-red-100 text-red-700 ring-1 ring-red-200/60"),children:[e(n?i:d,{className:"h-3.5 w-3.5"}),n?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-4",children:[e("div",{className:"rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80",children:Q(a.text,a.id,s)}),0===s&&O(),0===s&&R(),v&&e("div",{className:f("rounded-xl border p-3 transition-colors",n?"border-emerald-200 bg-emerald-50/50":m?"border-red-200 bg-red-50/50":"border-gray-100 bg-gray-50/50"),children:r("div",{className:"space-y-2.5",children:[r("div",{className:"flex items-center justify-between rounded-md bg-white p-3 border border-gray-100",children:[e("span",{className:"text-sm text-gray-500",children:"Đã nhập:"}),e("span",{className:f("text-sm font-semibold",n?"text-emerald-600":m?"text-red-600":"text-gray-400 italic"),children:l||"—"})]}),r("div",{className:"flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100",children:[e("span",{className:"text-sm text-gray-500",children:"Đáp án đúng:"}),e("span",{className:"text-sm font-semibold text-emerald-600",children:a.correctAnswer})]}),r("div",{className:f("flex items-center justify-between rounded-md p-3 border",n?"bg-emerald-50 border-emerald-200":"bg-red-50 border-red-200"),children:[e("span",{className:"text-sm text-gray-500",children:"Kết quả:"}),e("div",{className:f("flex items-center gap-1.5 text-sm font-bold",n?"text-emerald-600":"text-red-600"),children:r(t,n?{children:[e(i,{className:"h-4 w-4"})," Chính xác"]}:{children:[e(d,{className:"h-4 w-4"})," Sai"]})})]})]})}),!v&&!m&&r("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e(c,{className:"h-3 w-3"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng điền câu trả lời"})]})]})]},a.id)}),z(),v&&M&&(N.blanks?.length||0)>1&&e("div",{className:f("overflow-hidden rounded-xl border shadow-sm",M.correct===M.total?"border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50":M.correct>=M.total/2?"border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50":"border-red-200 bg-gradient-to-r from-red-50 to-rose-50"),children:r("div",{className:"flex items-center justify-between px-5 py-4",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:f("flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm",M.correct===M.total?"bg-gradient-to-br from-emerald-500 to-green-600":M.correct>=M.total/2?"bg-gradient-to-br from-yellow-500 to-amber-600":"bg-gradient-to-br from-red-500 to-rose-600"),children:M.correct===M.total?e(i,{className:"h-5 w-5"}):e(m,{className:"h-5 w-5"})}),r("div",{children:[e("h4",{className:"text-sm font-semibold text-gray-800",children:"Tổng kết"}),e("p",{className:"text-xs text-gray-500",children:"Kết quả bài làm của bạn"})]})]}),r("div",{className:"text-right",children:[r("div",{className:f("text-2xl font-bold",M.correct===M.total?"text-emerald-600":M.correct>=M.total/2?"text-yellow-600":"text-red-600"),children:[M.correct,"/",M.total]}),r("div",{className:"text-xs text-gray-500",children:[Math.round(M.correct/M.total*100),"% chính xác"]})]})]})}),J()]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Input } from '../../../../components/ui/input';
+import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Type, Hash, } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+// Helper: Extract placeholder indices from question text
+function extractPlaceholderIndices(question) {
+    const regex = /\{(\d+)\}/g;
+    const indices = [];
+    let match;
+    while ((match = regex.exec(question)) !== null) {
+        const index = parseInt(match[1], 10);
+        if (!indices.includes(index)) {
+            indices.push(index);
+        }
+    }
+    return indices.sort((a, b) => a - b);
+}
+// Sub-component: Resolve presigned URL for group image
+function GroupImage({ src, alt, className }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(src);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-40 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-3 border-gray-200 border-t-indigo-500" }) }));
+    }
+    return (
+    /* eslint-disable-next-line @next/next/no-img-element */
+    _jsx("img", { src: previewUrl || src, alt: alt, className: cn('max-h-72 w-auto object-contain rounded-lg drop-shadow-sm', className), onError: (e) => {
+            const target = e.target;
+            target.onerror = null;
+            target.src = '/images/placeholder-image.svg';
+        } }));
+}
+export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false, userAnswer = [], autoFillCorrectAnswers = false, explanation: explanationProp, }) {
+    // Detect if this is new format (question + answers) or legacy format (blanks array)
+    const isLegacyFormat = !questionData.question && questionData.blanks && questionData.blanks.length > 0;
+    const explanation = explanationProp || questionData.explanation;
+    // Group data - resolve from multiple possible field names
+    const isGroup = questionData.isGroup;
+    const groupTitle = questionData.groupTitle || questionData.title || '';
+    const groupContent = questionData.groupContent || '';
+    const groupImageUrl = questionData.groupImageUrl || '';
+    const groupNumber = questionData.groupNumber;
+    const hasGroupData = isGroup && (groupTitle || groupContent || groupImageUrl);
+    // Custom hooks for presigned URL (question-level image, not group image)
+    const { previewUrl: imagePreviewUrl, isLoading: isImageLoading } = usePresignedFileUrl(
+    // Only use question-level imageUrl when NOT grouped (group image is handled separately)
+    (!isGroup && questionData.imageUrl) ? questionData.imageUrl : '');
+    // For new format: extract placeholders from question
+    const placeholderIndices = useMemo(() => {
+        if (isLegacyFormat)
+            return [];
+        return extractPlaceholderIndices(questionData.question || '');
+    }, [questionData.question, isLegacyFormat]);
+    // Initialize answers based on format
+    const getInitialAnswers = () => {
+        if (autoFillCorrectAnswers) {
+            if (isLegacyFormat && questionData.blanks) {
+                return questionData.blanks.map(b => b.correctAnswer);
+            }
+            return questionData.answers || [];
+        }
+        return userAnswer || [];
+    };
+    const [answers, setAnswers] = useState(getInitialAnswers());
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        if (autoFillCorrectAnswers) {
+            if (isLegacyFormat && questionData.blanks) {
+                setAnswers(questionData.blanks.map(b => b.correctAnswer));
+            }
+            else {
+                setAnswers(questionData.answers || []);
+            }
+        }
+        else if (userAnswer) {
+            setAnswers(userAnswer);
+        }
+    }, [userAnswer, autoFillCorrectAnswers, questionData, isLegacyFormat]);
+    // Handle answer change for specific placeholder index
+    const handleAnswerChange = (index, value) => {
+        if (isReviewMode)
+            return;
+        const newAnswers = [...answers];
+        while (newAnswers.length <= index) {
+            newAnswers.push('');
+        }
+        newAnswers[index] = value;
+        setAnswers(newAnswers);
+        onSubmit?.(newAnswers);
+    };
+    // Check if answer at index is correct
+    const isAnswerCorrect = (index, userInput) => {
+        let correctAnswer;
+        if (isLegacyFormat && questionData.blanks?.[index]) {
+            correctAnswer = questionData.blanks[index].correctAnswer;
+        }
+        else if (questionData.answers?.[index]) {
+            correctAnswer = questionData.answers[index];
+        }
+        else {
+            return false;
+        }
+        const answer = userInput.trim();
+        const correct = correctAnswer.trim();
+        if (questionData.caseSensitive) {
+            return answer === correct;
+        }
+        else {
+            return answer.toLowerCase() === correct.toLowerCase();
+        }
+    };
+    // Calculate score
+    const calculateScore = () => {
+        let correct = 0;
+        let total = 0;
+        if (isLegacyFormat && questionData.blanks) {
+            total = questionData.blanks.length;
+            questionData.blanks.forEach((_, idx) => {
+                if (isAnswerCorrect(idx, answers[idx] || '')) {
+                    correct++;
+                }
+            });
+        }
+        else {
+            total = placeholderIndices.length;
+            placeholderIndices.forEach((idx) => {
+                if (isAnswerCorrect(idx, answers[idx] || '')) {
+                    correct++;
+                }
+            });
+        }
+        return { correct, total };
+    };
+    const score = isReviewMode ? calculateScore() : null;
+    // =====================================================
+    //  SHARED SUB-RENDERS
+    // =====================================================
+    /** Group Block – displayed above the question when isGroup */
+    const renderGroupBlock = () => {
+        if (!hasGroupData)
+            return null;
+        return (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl" }), _jsxs("div", { className: "relative p-6 sm:p-7", children: [_jsxs("div", { className: "flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4", children: [_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50", children: _jsx(BookOpen, { className: "h-5 w-5 text-indigo-600" }) }), _jsxs("div", { className: "flex-1 pt-1", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [groupNumber && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10", children: ["Nh\u00F3m ", groupNumber] })), _jsx("span", { className: "inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-700 ring-1 ring-inset ring-orange-700/10", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" })] }), groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: groupTitle }))] })] }), _jsxs("div", { className: "space-y-6 text-slate-700", children: [groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", children: groupContent.split('\n').map((line, i) => (_jsx("p", { className: "last:mb-0", children: line }, i))) })), groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(GroupImage, { src: groupImageUrl, alt: groupTitle || 'Hình ảnh nhóm' }) })] }))] })] })] }));
+    };
+    /** Render inline blanks within question text (new format) */
+    const renderQuestionWithBlanks = () => {
+        const question = questionData.question || '';
+        const parts = question.split(/(\{\d+\})/g);
+        return (_jsx("div", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]", children: parts.map((part, partIndex) => {
+                const match = part.match(/\{(\d+)\}/);
+                if (match) {
+                    const placeholderIndex = parseInt(match[1], 10);
+                    const userInput = answers[placeholderIndex] || '';
+                    const isCorrect = isReviewMode && isAnswerCorrect(placeholderIndex, userInput);
+                    const isWrong = isReviewMode && userInput && !isCorrect;
+                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-orange-100 text-[10px] font-bold text-orange-600 mr-1 ring-1 ring-orange-200/60", children: placeholderIndex + 1 }), _jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(placeholderIndex, e.target.value), disabled: isReviewMode, className: cn('h-9 w-28 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
+                                    ? isCorrect
+                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-700'
+                                        : isWrong
+                                            ? 'border-red-400 bg-red-50 text-red-700'
+                                            : 'border-gray-200 bg-gray-50 text-gray-500'
+                                    : 'border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50'), placeholder: "..." }), isReviewMode && (isCorrect || isWrong) && (_jsx("span", { className: cn('absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white', isCorrect ? 'bg-emerald-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5 text-white" })) : (_jsx(X, { className: "h-2.5 w-2.5 text-white" })) }))] }, partIndex));
+                }
+                else {
+                    return (_jsx("span", { className: "text-slate-800 font-medium", children: part }, partIndex));
+                }
+            }) }));
+    };
+    /** Legacy format: render blanks array */
+    const renderLegacyBlank = (text, _blankId, blankIndex) => {
+        const parts = text.split(/(\{0\})/g);
+        return (_jsx("div", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]", children: parts.map((part, partIdx) => {
+                if (part === '{0}') {
+                    const userInput = answers[blankIndex] || '';
+                    const isCorrect = isReviewMode && isAnswerCorrect(blankIndex, userInput);
+                    const isWrong = isReviewMode && userInput && !isCorrect;
+                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(blankIndex, e.target.value), disabled: isReviewMode, className: cn('h-9 w-32 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
+                                    ? isCorrect
+                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-700'
+                                        : isWrong
+                                            ? 'border-red-400 bg-red-50 text-red-700'
+                                            : 'border-gray-200 bg-gray-50 text-gray-500'
+                                    : 'border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50'), placeholder: "..." }), isReviewMode && (isCorrect || isWrong) && (_jsx("span", { className: cn('absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white', isCorrect ? 'bg-emerald-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5 text-white" })) : (_jsx(X, { className: "h-2.5 w-2.5 text-white" })) }))] }, partIdx));
+                }
+                else {
+                    return (_jsx("span", { className: "text-slate-800 font-medium", children: part }, partIdx));
+                }
+            }) }));
+    };
+    /** Hints pills block */
+    const renderHints = () => {
+        if (isReviewMode || !questionData.showHints || !questionData.hints || questionData.hints.length === 0) {
+            return null;
+        }
+        return (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50/80 to-purple-50/50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100 ring-1 ring-violet-200/60", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-violet-600" }) }), _jsx("span", { className: "text-sm font-semibold text-violet-800", children: "G\u1EE3i \u00FD \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: questionData.hints.map((hint, index) => (_jsx("span", { className: "inline-flex items-center rounded-full border border-violet-200 bg-white px-3 py-1 text-sm font-medium text-violet-700 shadow-sm transition-all hover:border-violet-300 hover:bg-violet-50 hover:shadow", children: hint }, index))) })] }));
+    };
+    /** Case-sensitivity warning */
+    const renderCaseSensitiveNote = () => {
+        if (isReviewMode || !questionData.caseSensitive)
+            return null;
+        return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50/50 px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx(Type, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("span", { className: "text-sm font-semibold text-amber-800", children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("span", { className: "text-sm text-amber-700 ml-1", children: "\u2013 Vui l\u00F2ng nh\u1EADp \u0111\u00FAng ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }));
+    };
+    /** Explanation card (review mode only) */
+    const renderExplanation = () => {
+        const explText = explanation || questionData.explanation;
+        if (!isReviewMode || !explText)
+            return null;
+        return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2.5 border-b border-blue-100 bg-white/60 px-5 py-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsx("h4", { className: "text-sm font-semibold text-slate-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("div", { className: "p-5", children: _jsx("p", { className: "text-sm text-slate-700 leading-relaxed", children: explText }) })] }));
+    };
+    /** Question-level image (non-group) */
+    const renderQuestionImage = () => {
+        if (isGroup)
+            return null; // group image is rendered in group block
+        if (!imagePreviewUrl && !questionData.imageUrl)
+            return null;
+        return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 shadow-sm", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isImageLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-orange-500" }) })) : (
+                    /* eslint-disable-next-line @next/next/no-img-element */
+                    _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
+                            const target = e.target;
+                            target.onerror = null;
+                            target.src = '/images/placeholder-image.svg';
+                        } })) })] }));
+    };
+    // =====================================================
+    //  NEW FORMAT RENDER
+    // =====================================================
+    if (!isLegacyFormat) {
+        const hasAnyAnswer = placeholderIndices.some(idx => (answers[idx] || '').trim());
+        return (_jsxs("div", { className: "space-y-4", children: [renderGroupBlock(), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-gray-700", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200/60", children: [_jsx(Hash, { className: "h-3 w-3" }), placeholderIndices.length] })] })] }), isReviewMode && score && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold', score.correct === score.total
+                                        ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
+                                        : score.correct >= score.total / 2
+                                            ? 'bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200/60'
+                                            : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [score.correct === score.total && _jsx(Check, { className: "h-3 w-3" }), score.correct, "/", score.total, " \u0111\u00FAng"] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderQuestionWithBlanks() }), renderQuestionImage(), renderHints(), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white", children: _jsx(ClipboardList, { className: "h-3 w-3" }) }), _jsx("h4", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wider", children: "Chi ti\u1EBFt \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "p-4 space-y-2.5", children: placeholderIndices.map((idx) => {
+                                                const userInput = answers[idx] || '';
+                                                const correctAnswer = questionData.answers?.[idx] || '';
+                                                const isCorrect = isAnswerCorrect(idx, userInput);
+                                                const hasInput = userInput.trim().length > 0;
+                                                return (_jsxs("div", { className: cn('rounded-lg border p-3 transition-colors', isCorrect
+                                                        ? 'border-emerald-200 bg-emerald-50/50'
+                                                        : hasInput
+                                                            ? 'border-red-200 bg-red-50/50'
+                                                            : 'border-gray-100 bg-gray-50/50'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-orange-100 text-xs font-bold text-orange-600 ring-1 ring-orange-200/60", children: idx + 1 }), _jsxs("span", { className: "text-sm text-gray-500", children: ["Ch\u1ED7 tr\u1ED1ng ", idx + 1] })] }), _jsx("div", { className: cn('flex items-center gap-1 text-xs font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : hasInput ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) : ('Bỏ trống') })] }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white px-3 py-2 border border-gray-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E3 nh\u1EADp" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 px-3 py-2 border border-emerald-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E1p \u00E1n" }), _jsx("span", { className: "font-semibold text-emerald-600", children: correctAnswer })] })] })] }, idx));
+                                            }) })] })), !isReviewMode && !hasAnyAnswer && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi v\u00E0o c\u00E1c ch\u1ED7 tr\u1ED1ng" })] }))] })] }), renderCaseSensitiveNote(), renderExplanation()] }));
+    }
+    // =====================================================
+    //  LEGACY FORMAT RENDER
+    // =====================================================
+    return (_jsxs("div", { className: "space-y-4", children: [renderGroupBlock(), questionData.blanks?.map((blank, index) => {
+                const userInput = answers[index] || '';
+                const isCorrect = isReviewMode && isAnswerCorrect(index, userInput);
+                const hasAnswered = userInput.trim() !== '';
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["C\u00E2u ", index + 1, ": \u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng"] })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold', isCorrect
+                                        ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
+                                        : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderLegacyBlank(blank.text, blank.id, index) }), index === 0 && renderQuestionImage(), index === 0 && renderHints(), isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-3 transition-colors', isCorrect
+                                        ? 'border-emerald-200 bg-emerald-50/50'
+                                        : hasAnswered
+                                            ? 'border-red-200 bg-red-50/50'
+                                            : 'border-gray-100 bg-gray-50/50'), children: _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white p-3 border border-gray-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E3 nh\u1EADp:" }), _jsx("span", { className: cn('text-sm font-semibold', isCorrect ? 'text-emerald-600' : hasAnswered ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-emerald-600", children: blank.correctAnswer })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-md p-3 border', isCorrect
+                                                    ? 'bg-emerald-50 border-emerald-200'
+                                                    : 'bg-red-50 border-red-200'), children: [_jsx("span", { className: "text-sm text-gray-500", children: "K\u1EBFt qu\u1EA3:" }), _jsx("div", { className: cn('flex items-center gap-1.5 text-sm font-bold', isCorrect ? 'text-emerald-600' : 'text-red-600'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), " Ch\u00EDnh x\u00E1c"] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4" }), " Sai"] })) })] })] }) })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi" })] }))] })] }, blank.id));
+            }), renderCaseSensitiveNote(), isReviewMode && score && (questionData.blanks?.length || 0) > 1 && (_jsx("div", { className: cn('overflow-hidden rounded-xl border shadow-sm', score.correct === score.total
+                    ? 'border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50'
+                    : score.correct >= score.total / 2
+                        ? 'border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50'
+                        : 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50'), children: _jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm', score.correct === score.total
+                                        ? 'bg-gradient-to-br from-emerald-500 to-green-600'
+                                        : score.correct >= score.total / 2
+                                            ? 'bg-gradient-to-br from-yellow-500 to-amber-600'
+                                            : 'bg-gradient-to-br from-red-500 to-rose-600'), children: score.correct === score.total ? (_jsx(Check, { className: "h-5 w-5" })) : (_jsx(ClipboardList, { className: "h-5 w-5" })) }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "T\u1ED5ng k\u1EBFt" }), _jsx("p", { className: "text-xs text-gray-500", children: "K\u1EBFt qu\u1EA3 b\u00E0i l\u00E0m c\u1EE7a b\u1EA1n" })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: cn('text-2xl font-bold', score.correct === score.total
+                                        ? 'text-emerald-600'
+                                        : score.correct >= score.total / 2
+                                            ? 'text-yellow-600'
+                                            : 'text-red-600'), children: [score.correct, "/", score.total] }), _jsxs("div", { className: "text-xs text-gray-500", children: [Math.round((score.correct / score.total) * 100), "% ch\u00EDnh x\u00E1c"] })] })] }) })), renderExplanation()] }));
+}