@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphWrapper.js

@@ -1 +1,28 @@
-import{jsx as r}from"react/jsx-runtime";import{WordFillParagraphCreator as a}from"./WordFillParagraphCreator";export function WordFillParagraphWrapper(o){let i=o.viewMode;if(!i&&o.initialData){const r=o.initialData,a=r.content?.wordBank||r.answer?.wordBank||r.wordBank;a&&Array.isArray(a)&&a.length>0&&(Array.isArray(a[0]?.options)?i="WITH_OPTIONS":void 0!==a[0]?.word&&(i="WITH_WORD_BANK"))}return r(a,{...o,viewMode:i})}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WordFillParagraphCreator } from './WordFillParagraphCreator';
+/**
+ * Detects whether saved data uses per-blank options (WITH_OPTIONS) or a shared
+ * word bank (WITH_WORD_BANK) and forwards the correct `viewMode` to the unified
+ * `WordFillParagraphCreator`.
+ */
+export function WordFillParagraphWrapper(props) {
+    let mode = props.viewMode;
+    // Auto-detect viewMode from initialData if not explicitly provided.
+    // After transformInitialData, the data is flat (wordBank at top level),
+    // so we also check anyData.wordBank in addition to nested paths.
+    if (!mode && props.initialData) {
+        const anyData = props.initialData;
+        const wordBank = anyData.content?.wordBank || anyData.answer?.wordBank || anyData.wordBank;
+        if (wordBank &&
+            Array.isArray(wordBank) &&
+            wordBank.length > 0) {
+            if (Array.isArray(wordBank[0]?.options)) {
+                mode = 'WITH_OPTIONS';
+            }
+            else if (wordBank[0]?.word !== undefined) {
+                mode = 'WITH_WORD_BANK';
+            }
+        }
+    }
+    return _jsx(WordFillParagraphCreator, { ...props, viewMode: mode });
+}

package/dist/components/questions/types/word-fill-paragraph/index.js

@@ -1 +1,2 @@
-export*from"./WordFillParagraphCreator";export*from"./WordFillParagraphClient";
+export * from './WordFillParagraphCreator';
+export * from './WordFillParagraphClient';

package/dist/components/questions/types/word-fill-paragraph/register.js

@@ -1 +1,136 @@
-import{WordFillParagraphWrapper as e}from"./WordFillParagraphWrapper";import{WordFillParagraphCreator as t}from"./WordFillParagraphCreator";export const wordFillParagraphRegistration={component:e,transformInitialData:e=>{const t=e?.content||{},a=e?.answer||{},n=e?.correctAnswer||a?.correctAnswer||{},i=e?.total_points?parseFloat(e.total_points):a?.points||e?.points||1,o=e?.explanation||a?.explanation||"",r=e?.questionGroup?.payload;return{title:t?.title||a?.title||"",imageUrl:t?.imageUrl||a?.imageUrl||"",paragraph:t?.paragraph||a?.paragraph||"",wordBank:t?.wordBank||a?.wordBank||[],answers:n?.answers||a?.answers||[],exampleAnswer:(()=>{const e=[n?.example,a?.example,a?.exampleAnswer,t?.exampleAnswer];for(const t of e){if(Array.isArray(t)&&t.length>0)return t;if("string"==typeof t&&t)return[t]}return[]})(),isExample:e?.isExample||a?.isExample||!1,caseSensitive:n?.caseSensitive??a?.caseSensitive??!1,emailFrom:t?.emailFrom||a?.emailFrom||"",emailTo:t?.emailTo||a?.emailTo||"",explanation:o,points:i,groupTitle:r?.title||a?.groupTitle||"",groupSubtitle:r?.subtitle||a?.groupSubtitle||"",groupContent:r?.content||a?.groupContent||"",groupImageUrl:r?.imageUrl||a?.groupImageUrl||""}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,viewMode:"WITH_WORD_BANK"===e.viewMode||"WITH_OPTIONS"===e.viewMode||"DEFAULT"===e.viewMode||"EMAIL"===e.viewMode?e.viewMode:null,groupConfig:e.groupConfig,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};export const wordFillParagraphWithOptionsRegistration={component:t,transformInitialData:e=>{const t=e?.content||{},a=e?.answer||{},n=e?.correctAnswer||a?.correctAnswer||{},i=e?.total_points?parseFloat(e.total_points):a?.points||e?.points||1,o=e?.explanation||a?.explanation||"";return{title:t?.title||a?.title||"",imageUrl:t?.imageUrl||a?.imageUrl||"",paragraph:t?.paragraph||a?.paragraph||"",wordBank:t?.wordBank||a?.wordBank||[],answers:n?.answers||a?.answers||[],caseSensitive:n?.caseSensitive??a?.caseSensitive??!1,explanation:o,points:i}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groupConfig:e.groupConfig,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};
+import { WordFillParagraphWrapper } from './WordFillParagraphWrapper';
+import { WordFillParagraphCreator } from './WordFillParagraphCreator';
+export const wordFillParagraphRegistration = {
+    component: WordFillParagraphWrapper,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content || {};
+        const answer = initialData?.answer || {};
+        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (answer?.points || initialData?.points || 1);
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        // Group data from questionGroup payload
+        const groupPayload = initialData?.questionGroup?.payload;
+        return {
+            title: content?.title || answer?.title || '',
+            imageUrl: content?.imageUrl || answer?.imageUrl || '',
+            paragraph: content?.paragraph || answer?.paragraph || '',
+            wordBank: content?.wordBank || answer?.wordBank || [],
+            answers: correctAnswer?.answers || answer?.answers || [],
+            exampleAnswer: (() => {
+                const sources = [
+                    correctAnswer?.example,
+                    answer?.example,
+                    answer?.exampleAnswer,
+                    content?.exampleAnswer,
+                ];
+                for (const src of sources) {
+                    if (Array.isArray(src) && src.length > 0)
+                        return src;
+                    if (typeof src === 'string' && src)
+                        return [src];
+                }
+                return [];
+            })(),
+            isExample: initialData?.isExample || answer?.isExample || false,
+            caseSensitive: correctAnswer?.caseSensitive ?? answer?.caseSensitive ?? false,
+            emailFrom: content?.emailFrom || answer?.emailFrom || '',
+            emailTo: content?.emailTo || answer?.emailTo || '',
+            explanation,
+            points,
+            // Group shared fields
+            groupTitle: groupPayload?.title || answer?.groupTitle || '',
+            groupSubtitle: groupPayload?.subtitle || answer?.groupSubtitle || '',
+            groupContent: groupPayload?.content || answer?.groupContent || '',
+            groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || '',
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        // Narrow to the modes the wrapper/creator understands; legacy values become null.
+        viewMode: ctx.viewMode === 'WITH_WORD_BANK' || ctx.viewMode === 'WITH_OPTIONS' || ctx.viewMode === 'DEFAULT' || ctx.viewMode === 'EMAIL'
+            ? ctx.viewMode
+            : null,
+        groupConfig: ctx.groupConfig,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    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 || '',
+    }),
+};
+/**
+ * Registration for WITH_OPTIONS mode — uses the same unified creator/wrapper
+ * as the standard word-fill-paragraph, but the component is the options-mode
+ * creator directly (no viewMode detection needed since it's always WITH_OPTIONS).
+ */
+export const wordFillParagraphWithOptionsRegistration = {
+    component: WordFillParagraphCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content || {};
+        const answer = initialData?.answer || {};
+        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (answer?.points || initialData?.points || 1);
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        return {
+            title: content?.title || answer?.title || '',
+            imageUrl: content?.imageUrl || answer?.imageUrl || '',
+            paragraph: content?.paragraph || answer?.paragraph || '',
+            wordBank: content?.wordBank || answer?.wordBank || [],
+            answers: correctAnswer?.answers || answer?.answers || [],
+            caseSensitive: correctAnswer?.caseSensitive ?? answer?.caseSensitive ?? false,
+            explanation,
+            points,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groupConfig: ctx.groupConfig,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/word-fill-paragraph/transform.js

@@ -1 +1,56 @@
-export const transformWordFillParagraph=e=>{const r=e.answer;if(!r?.paragraph||!r?.answers)return{apiContent:{},apiCorrectAnswer:{}};const a=!!(r.groupTitle||r.groupSubtitle||r.groupContent||r.groupImageUrl),t={paragraph:r.paragraph,wordBank:r.wordBank||[]};!a&&r.title&&(t.title=r.title),r.exampleAnswer?.length>0&&(t.exampleAnswer=r.exampleAnswer),!a&&r.imageUrl&&(t.imageUrl=r.imageUrl),r.emailFrom&&(t.emailFrom=r.emailFrom),r.emailTo&&(t.emailTo=r.emailTo);const o={answers:r.answers,caseSensitive:r.caseSensitive||!1};void 0!==r.exampleAnswer&&(o.example=r.exampleAnswer||[]);const i=a?{title:r.groupTitle||"",subtitle:r.groupSubtitle||"",content:r.groupContent||"",imageUrl:r.groupImageUrl||""}:void 0;return{apiContent:t,apiCorrectAnswer:o,isExample:r.isExample||!1,basicGroupData:i,groupNumber:r.groupNumber||1}};
+/**
+ * Transform WORD_FILL_PARAGRAPH_WITH_WORD_BANK creator data → API format
+ * Creator: { title, paragraph, wordBank, answers, exampleAnswer, imageUrl }
+ * API: content: { title, paragraph, wordBank, imageUrl }, correctAnswer: { example, answers }
+ */
+export const transformWordFillParagraph = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.paragraph || !answerData?.answers) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const hasGroupData = !!(answerData.groupTitle ||
+        answerData.groupSubtitle ||
+        answerData.groupContent ||
+        answerData.groupImageUrl);
+    const apiContent = {
+        paragraph: answerData.paragraph,
+        wordBank: answerData.wordBank || [],
+    };
+    if (!hasGroupData && answerData.title) {
+        apiContent.title = answerData.title;
+    }
+    if (answerData.exampleAnswer?.length > 0) {
+        apiContent.exampleAnswer = answerData.exampleAnswer;
+    }
+    if (!hasGroupData && answerData.imageUrl) {
+        apiContent.imageUrl = answerData.imageUrl;
+    }
+    if (answerData.emailFrom) {
+        apiContent.emailFrom = answerData.emailFrom;
+    }
+    if (answerData.emailTo) {
+        apiContent.emailTo = answerData.emailTo;
+    }
+    const apiCorrectAnswer = {
+        answers: answerData.answers,
+        caseSensitive: answerData.caseSensitive || false,
+    };
+    if (answerData.exampleAnswer !== undefined) {
+        apiCorrectAnswer.example = answerData.exampleAnswer || [];
+    }
+    const basicGroupData = hasGroupData
+        ? {
+            title: answerData.groupTitle || '',
+            subtitle: answerData.groupSubtitle || '',
+            content: answerData.groupContent || '',
+            imageUrl: answerData.groupImageUrl || '',
+        }
+        : undefined;
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        isExample: answerData.isExample || false,
+        basicGroupData,
+        groupNumber: answerData.groupNumber || 1,
+    };
+};

package/dist/components/questions/types/word-fill-structured-form/WfsfWordBankEditor.js

@@ -1 +1,86 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CheckCircle2 as r,Library as n,ListChecks as a,Plus as s,Trash2 as l}from"lucide-react";import{Button as i}from"../../../../components/ui/button";import{Card as o,CardContent as d,CardHeader as c,CardTitle as h}from"../../../../components/ui/card";import{Checkbox as m}from"../../../../components/ui/checkbox";import{Input as g}from"../../../../components/ui/input";import{Label as p}from"../../../../components/ui/label";const x=[{id:"FREE_TYPE",label:"Tự gõ",hint:"Không word bank"},{id:"WITH_WORD_BANK",label:"Word Bank chung",hint:"Hộp gợi ý shared"},{id:"WITH_OPTIONS",label:"Options từng ô",hint:"Dropdown theo blank"}];export function WfsfWordBankEditor({mode:b,onModeChange:u,sharedBank:f,onSharedBankChange:N,optionsBank:y,onOptionsBankChange:w,blankKeys:v,answers:k,onAnswerChange:C}){const j=()=>{N([...f,{word:""}])};return t("div",{className:"space-y-4",children:[t(o,{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(c,{className:"px-4 py-3",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(n,{className:"h-3.5 w-3.5 text-indigo-600"})}),t("div",{children:[e(h,{className:"text-base font-semibold text-gray-800",children:"Word Bank / gợi ý đáp án"}),e("p",{className:"mt-0.5 text-xs text-gray-500",children:"Chọn chế độ hiển thị cho học sinh khi làm bài (WFSF plan 0024/0025)"})]})]})}),e(d,{className:"space-y-3 px-4 pb-4",children:e("div",{className:"grid grid-cols-1 gap-2 sm:grid-cols-3",children:x.map(r=>{const n=b===r.id;return t("button",{type:"button",onClick:()=>u(r.id),className:"rounded-xl border-2 px-3 py-2.5 text-left transition-all "+(n?"border-indigo-400 bg-indigo-50 shadow-sm":"border-gray-200 bg-white hover:border-indigo-200"),children:[e("span",{className:"block text-sm font-semibold "+(n?"text-indigo-800":"text-gray-700"),children:r.label}),e("span",{className:"mt-0.5 block text-[11px] text-gray-500",children:r.hint})]},r.id)})})})]}),"WITH_WORD_BANK"===b&&t(o,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-purple-400 to-pink-400"}),e(c,{className:"px-4 py-3",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-purple-100",children:e(n,{className:"h-3.5 w-3.5 text-purple-600"})}),t(h,{className:"text-base font-semibold text-gray-800",children:["Word Bank (",f.filter(e=>e.word.trim()).length," từ)"]})]}),t(i,{type:"button",variant:"outline",size:"sm",onClick:j,className:"gap-1.5 border-purple-200 text-purple-600 hover:bg-purple-50",children:[e(s,{className:"h-3.5 w-3.5"}),"Thêm từ"]})]})}),t(d,{className:"space-y-3 px-4 pb-4",children:[t("p",{className:"text-xs text-gray-500",children:["Danh sách gợi ý (đáp án + từ nhiễu). Không bắt buộc khớp 1:1 với số chỗ trống. Đánh dấu ",e("strong",{children:"Example"})," nếu từ là mẫu."]}),0===f.length?t("div",{className:"flex h-24 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50",children:[e("p",{className:"text-sm text-gray-400",children:"Chưa có từ nào"}),t(i,{type:"button",variant:"outline",size:"sm",onClick:j,children:[e(s,{className:"mr-1 h-3.5 w-3.5"}),"Thêm từ"]})]}):e("div",{className:"grid grid-cols-1 gap-3 md:grid-cols-2",children:f.map((r,n)=>t("div",{className:"rounded-lg border p-3 "+(r.isExample?"border-amber-300 bg-amber-50/50":"border-gray-200 bg-gray-50/50"),children:[t("div",{className:"mb-2 flex items-center justify-between",children:[e("span",{className:"flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white "+(r.isExample?"bg-gradient-to-br from-amber-400 to-orange-500":"bg-gradient-to-br from-purple-500 to-pink-600"),children:n+1}),t("div",{className:"flex items-center gap-2",children:[t("div",{className:"flex items-center gap-1.5",children:[e(m,{id:`wfsf-ex-${n}`,checked:!!r.isExample,onCheckedChange:e=>((e,t)=>{const r=[...f];r[e]={...r[e],isExample:t||void 0},N(r)})(n,!0===e)}),e(p,{htmlFor:`wfsf-ex-${n}`,className:"cursor-pointer text-xs text-gray-600",children:"Example"})]}),e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{N(f.filter((t,r)=>r!==e))})(n),className:"h-7 w-7 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500",children:e(l,{className:"h-3.5 w-3.5"})})]})]}),e(g,{value:r.word,onChange:e=>((e,t)=>{const r=[...f];r[e]={...r[e],word:t},N(r)})(n,e.target.value),placeholder:"Nhập từ...",className:r.isExample?"bg-amber-50":"border-gray-200"})]},n))})]})]}),"WITH_OPTIONS"===b&&t(o,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 to-cyan-400"}),e(c,{className:"px-4 py-3",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-teal-100",children:e(a,{className:"h-3.5 w-3.5 text-teal-600"})}),t(h,{className:"text-base font-semibold text-gray-800",children:["Lựa chọn theo chỗ trống (",v.length,")"]})]})}),e(d,{className:"space-y-4 px-4 pb-4",children:0===v.length?t("p",{className:"rounded-lg border-2 border-dashed border-gray-200 p-6 text-center text-sm text-gray-500",children:["Chưa có chỗ trống. Thêm ","{0}",", ","{1}","… trong nội dung trước."]}):v.map((n,a)=>{const o=y[a]??null,d=null==o,c=k[n]||"";return t("div",{className:"rounded-xl border-2 p-4 "+(d?"border-dashed border-gray-200 bg-gray-50/40":"border-gray-200 bg-white"),children:[t("div",{className:"mb-3 flex flex-wrap items-center justify-between gap-2",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white",children:n}),t("span",{className:"text-sm font-semibold text-gray-700",children:["Chỗ trống ",e("code",{className:"text-teal-700",children:`{${n}}`})]}),c&&t("span",{className:"inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700",children:[e(r,{className:"h-3 w-3"}),c]})]}),t("label",{className:"flex items-center gap-2 text-xs text-gray-600",children:[e(m,{checked:d,onCheckedChange:e=>((e,t)=>{const r=[...y];r[e]=t?null:{options:["",""]},w(r)})(a,!0===e)}),"Free-type (không options)"]})]}),!d&&o&&t("div",{className:"space-y-2",children:[o.options.map((r,s)=>t("div",{className:"flex items-center gap-2",children:[e("button",{type:"button",title:"Chọn làm đáp án đúng",onClick:()=>r.trim()&&C(n,r.trim()),className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold "+(c===r.trim()&&r.trim()?"bg-green-500 text-white":"bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-600"),children:String.fromCharCode(65+s)}),e(g,{value:r,onChange:e=>((e,t,r)=>{const n=[...y],a=n[e];if(null==a)return;const s=[...a.options];s[t]=r,n[e]={options:s},w(n)})(a,s,e.target.value),placeholder:`Lựa chọn ${String.fromCharCode(65+s)}`,className:"flex-1 border-gray-200 text-sm"}),o.options.length>2&&e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>((e,t)=>{const r=[...y],n=r[e];if(null==n||n.options.length<=2)return;const a=n.options.filter((e,r)=>r!==t);r[e]={options:a},w(r);const s=v[e],l=n.options[t];s&&k[s]===l&&C(s,"")})(a,s),className:"h-8 w-8 p-0 text-red-400 hover:bg-red-50 hover:text-red-600",children:e(l,{className:"h-3.5 w-3.5"})})]},s)),t(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{const t=[...y],r=t[e];null!=r&&(t[e]={options:[...r.options,""]},w(t))})(a),className:"mt-1 gap-1 text-xs text-teal-600 hover:bg-teal-50",children:[e(s,{className:"h-3 w-3"}),"Thêm lựa chọn"]})]})]},n)})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, Library, ListChecks, Plus, Trash2 } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+const MODE_OPTIONS = [
+    { id: 'FREE_TYPE', label: 'Tự gõ', hint: 'Không word bank' },
+    { id: 'WITH_WORD_BANK', label: 'Word Bank chung', hint: 'Hộp gợi ý shared' },
+    { id: 'WITH_OPTIONS', label: 'Options từng ô', hint: 'Dropdown theo blank' },
+];
+export function WfsfWordBankEditor({ mode, onModeChange, sharedBank, onSharedBankChange, optionsBank, onOptionsBankChange, blankKeys, answers, onAnswerChange, }) {
+    const addSharedWord = () => {
+        onSharedBankChange([...sharedBank, { word: '' }]);
+    };
+    const updateSharedWord = (index, word) => {
+        const next = [...sharedBank];
+        next[index] = { ...next[index], word };
+        onSharedBankChange(next);
+    };
+    const toggleSharedExample = (index, checked) => {
+        const next = [...sharedBank];
+        next[index] = { ...next[index], isExample: checked || undefined };
+        onSharedBankChange(next);
+    };
+    const removeSharedWord = (index) => {
+        onSharedBankChange(sharedBank.filter((_, i) => i !== index));
+    };
+    const setBlankFreeType = (blankIndex, free) => {
+        const next = [...optionsBank];
+        next[blankIndex] = free ? null : { options: ['', ''] };
+        onOptionsBankChange(next);
+    };
+    const updateOption = (blankIndex, optionIndex, value) => {
+        const next = [...optionsBank];
+        const entry = next[blankIndex];
+        if (entry == null)
+            return;
+        const options = [...entry.options];
+        options[optionIndex] = value;
+        next[blankIndex] = { options };
+        onOptionsBankChange(next);
+    };
+    const addOption = (blankIndex) => {
+        const next = [...optionsBank];
+        const entry = next[blankIndex];
+        if (entry == null)
+            return;
+        next[blankIndex] = { options: [...entry.options, ''] };
+        onOptionsBankChange(next);
+    };
+    const removeOption = (blankIndex, optionIndex) => {
+        const next = [...optionsBank];
+        const entry = next[blankIndex];
+        if (entry == null || entry.options.length <= 2)
+            return;
+        const options = entry.options.filter((_, i) => i !== optionIndex);
+        next[blankIndex] = { options };
+        onOptionsBankChange(next);
+        const key = blankKeys[blankIndex];
+        const removed = entry.options[optionIndex];
+        if (key && answers[key] === removed)
+            onAnswerChange(key, '');
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_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: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Word Bank / g\u1EE3i \u00FD \u0111\u00E1p \u00E1n" }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Ch\u1ECDn ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB cho h\u1ECDc sinh khi l\u00E0m b\u00E0i (WFSF plan 0024/0025)" })] })] }) }), _jsx(CardContent, { className: "space-y-3 px-4 pb-4", children: _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: MODE_OPTIONS.map((opt) => {
+                                const active = mode === opt.id;
+                                return (_jsxs("button", { type: "button", onClick: () => onModeChange(opt.id), className: `rounded-xl border-2 px-3 py-2.5 text-left transition-all ${active
+                                        ? 'border-indigo-400 bg-indigo-50 shadow-sm'
+                                        : 'border-gray-200 bg-white hover:border-indigo-200'}`, children: [_jsx("span", { className: `block text-sm font-semibold ${active ? 'text-indigo-800' : 'text-gray-700'}`, children: opt.label }), _jsx("span", { className: "mt-0.5 block text-[11px] text-gray-500", children: opt.hint })] }, opt.id));
+                            }) }) })] }), mode === 'WITH_WORD_BANK' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-pink-400" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["Word Bank (", sharedBank.filter((w) => w.word.trim()).length, " t\u1EEB)"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addSharedWord, className: "gap-1.5 border-purple-200 text-purple-600 hover:bg-purple-50", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Danh s\u00E1ch g\u1EE3i \u00FD (\u0111\u00E1p \u00E1n + t\u1EEB nhi\u1EC5u). Kh\u00F4ng b\u1EAFt bu\u1ED9c kh\u1EDBp 1:1 v\u1EDBi s\u1ED1 ch\u1ED7 tr\u1ED1ng. \u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " n\u1EBFu t\u1EEB l\u00E0 m\u1EABu."] }), sharedBank.length === 0 ? (_jsxs("div", { className: "flex h-24 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: [_jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addSharedWord, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: sharedBank.map((item, index) => (_jsxs("div", { className: `rounded-lg border p-3 ${item.isExample
+                                        ? 'border-amber-300 bg-amber-50/50'
+                                        : 'border-gray-200 bg-gray-50/50'}`, children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: `flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white ${item.isExample
+                                                        ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                                        : 'bg-gradient-to-br from-purple-500 to-pink-600'}`, children: index + 1 }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Checkbox, { id: `wfsf-ex-${index}`, checked: !!item.isExample, onCheckedChange: (c) => toggleSharedExample(index, c === true) }), _jsx(Label, { htmlFor: `wfsf-ex-${index}`, className: "cursor-pointer text-xs text-gray-600", children: "Example" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeSharedWord(index), className: "h-7 w-7 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), _jsx(Input, { value: item.word, onChange: (e) => updateSharedWord(index, e.target.value), placeholder: "Nh\u1EADp t\u1EEB...", className: item.isExample ? 'bg-amber-50' : 'border-gray-200' })] }, index))) }))] })] })), mode === 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["L\u1EF1a ch\u1ECDn theo ch\u1ED7 tr\u1ED1ng (", blankKeys.length, ")"] })] }) }), _jsx(CardContent, { className: "space-y-4 px-4 pb-4", children: blankKeys.length === 0 ? (_jsxs("p", { className: "rounded-lg border-2 border-dashed border-gray-200 p-6 text-center text-sm text-gray-500", children: ["Ch\u01B0a c\u00F3 ch\u1ED7 tr\u1ED1ng. Th\u00EAm ", '{0}', ", ", '{1}', "\u2026 trong n\u1ED9i dung tr\u01B0\u1EDBc."] })) : (blankKeys.map((key, blankIndex) => {
+                            const entry = optionsBank[blankIndex] ?? null;
+                            const isFree = entry == null;
+                            const selected = answers[key] || '';
+                            return (_jsxs("div", { className: `rounded-xl border-2 p-4 ${isFree
+                                    ? 'border-dashed border-gray-200 bg-gray-50/40'
+                                    : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white", children: key }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "text-teal-700", children: `{${key}}` })] }), selected && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), selected] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Checkbox, { checked: isFree, onCheckedChange: (c) => setBlankFreeType(blankIndex, c === true) }), "Free-type (kh\u00F4ng options)"] })] }), !isFree && entry && (_jsxs("div", { className: "space-y-2", children: [entry.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", onClick: () => option.trim() && onAnswerChange(key, option.trim()), className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${selected === option.trim() && option.trim()
+                                                            ? 'bg-green-500 text-white'
+                                                            : 'bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-600'}`, children: String.fromCharCode(65 + optionIndex) }), _jsx(Input, { value: option, onChange: (e) => updateOption(blankIndex, optionIndex, e.target.value), placeholder: `Lựa chọn ${String.fromCharCode(65 + optionIndex)}`, className: "flex-1 border-gray-200 text-sm" }), entry.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeOption(blankIndex, optionIndex), className: "h-8 w-8 p-0 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, optionIndex))), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => addOption(blankIndex), className: "mt-1 gap-1 text-xs text-teal-600 hover:bg-teal-50", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm l\u1EF1a ch\u1ECDn"] })] }))] }, key));
+                        })) })] }))] }));
+}

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormClient.js

@@ -1 +1,246 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as a,useEffect as l,useMemo as n,useCallback as s}from"react";import{Check as o,X as i,FileText as d,Library as m}from"lucide-react";import{usePresignedFileUrl as c}from"../../../../shared/lib/hooks";import{cn as b}from"../../../../shared/lib/utils";import{detectWfsfBankMode as p,isOptionsWordEntry as u,normalizeSharedWordBank as g}from"./wfsf-word-bank.utils";export function WordFillStructuredFormClient({questionData:x,isReviewMode:h=!1,userAnswer:f,onAnswerChange:w,autoFillCorrectAnswers:N=!1,instruction:y,questionNumber:v,explanation:k}){const{title:C="",imageUrl:S,content:E="",answers:A={},caseSensitive:T=!1,viewMode:j,wordBank:O=[],instruction:I}=x,[L,$]=a(()=>f?{...f}:N?{...A}:{}),[W,_]=a(null);l(()=>{f&&$({...f})},[f]);const B=n(()=>p(j,O),[j,O]),D=n(()=>"WITH_WORD_BANK"===B?g(O):[],[B,O]),F=n(()=>{const e=new Set;return Object.values(L).forEach(r=>{const t=String(r||"").trim().toLowerCase();t&&e.add(t)}),e},[L]),M=n(()=>{const e=new Map;return"WITH_OPTIONS"===B&&Array.isArray(O)?(O.forEach((r,t)=>{u(r)&&e.set(String(t),r.options.map(e=>String(e??"")))}),e):e},[B,O]),{previewUrl:H,isLoading:P}=c(S||""),R=n(()=>{const e=new Set,r=/\{([\w\d]+)\}/g;let t;for(;null!==(t=r.exec(E));)e.add(t[1]);return Array.from(e).sort((e,r)=>{const t=parseInt(e),a=parseInt(r);return isNaN(t)||isNaN(a)?e.localeCompare(r):t-a})},[E]),U=R.every(e=>L[e]?.trim()),q=h&&R.every(e=>{const r=(L[e]||"").trim(),t=(A[e]||"").trim();return T?r===t:r.toLowerCase()===t.toLowerCase()}),z=String(k||x.explanation||"").trim(),K=String(y||I||z||"").trim()||"Điền từ vào biểu mẫu có cấu trúc",G=z&&z!==K?z:"",X=s((e,r)=>{h||($(t=>({...t,[e]:r})),w?.(e,r))},[h,w]),J=s((e,r)=>{h||($(t=>({...t,[e]:r})),w?.(e,r),_(null))},[h,w]),Q=s((t,a)=>{const l=L[t]||"",n=A[t]||"",s=T?l.trim():l.trim().toLowerCase(),d=T?n.trim():n.trim().toLowerCase(),m=h&&s===d,c=h&&!!l&&s!==d,p=M.get(t);if("WITH_OPTIONS"===B&&p&&p.length>=2){const n=W===t;return r("span",{className:"relative mx-1 inline-flex flex-col items-center align-baseline",children:[r("button",{type:"button",onClick:()=>!h&&_(n?null:t),disabled:h,className:b("inline-flex min-w-[90px] items-center justify-center rounded border-2 border-dashed px-2 py-0.5 text-center text-sm font-semibold transition-all",h?m?"border-emerald-500 bg-emerald-50 text-emerald-800":c?"border-rose-500 bg-rose-50 text-rose-800":"border-amber-500 bg-amber-50 text-amber-800":"border-teal-400 bg-teal-50/50 text-teal-800 hover:bg-teal-50"),children:[l||`{${t}}`,h&&l&&(m?e(o,{className:"ml-0.5 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-0.5 h-3.5 w-3.5 text-red-600"}))]}),n&&!h&&e("div",{className:"absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 flex-wrap gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg",children:p.map(r=>e("button",{type:"button",onClick:()=>J(t,r),className:b("rounded-md border px-2 py-1 text-xs font-medium transition-colors",l===r?"border-teal-500 bg-teal-100 text-teal-800":"border-gray-200 bg-white text-gray-700 hover:border-teal-300 hover:bg-teal-50"),children:r},r))})]},a)}return r("span",{className:"relative mx-1 inline-flex items-baseline align-baseline",children:[e("span",{className:"absolute -top-4 left-1 text-[10px] font-semibold text-gray-400",children:t}),e("input",{type:"text",value:l,onChange:e=>X(t,e.target.value),disabled:h,placeholder:"",className:b("inline-block min-w-[90px] max-w-[200px] rounded-t border-b-2 bg-slate-50/40 px-2 py-0.5 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0",h?m?"border-emerald-500 bg-emerald-50 text-emerald-800 font-bold":c?"border-rose-500 bg-rose-50 text-rose-800 font-bold":"border-amber-500 bg-amber-50 text-amber-800":"border-slate-400 text-slate-800 focus:border-teal-600")}),h&&l&&(m?e(o,{className:"ml-0.5 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-0.5 h-3.5 w-3.5 text-red-600"}))]},a)},[A,B,T,W,L,X,J,h,M]),V=n(()=>{if("undefined"==typeof window)return E;const r=(new DOMParser).parseFromString(E||"<p></p>","text/html"),a=/\{([\w\d]+)\}/g,l=(r,n)=>{if(r.nodeType===Node.TEXT_NODE){const l=r.textContent||"",s=[];let o,i=0;for(a.lastIndex=0;null!==(o=a.exec(l));)o.index>i&&s.push(l.slice(i,o.index)),s.push(Q(o[1],`${n}-blank-${o.index}`)),i=o.index+o[0].length;return i<l.length&&s.push(l.slice(i)),0===s.length?null:1===s.length?s[0]:e(t.Fragment,{children:s},n)}if(r.nodeType!==Node.ELEMENT_NODE)return null;const s=r,o=s.tagName.toLowerCase(),i={key:n};Array.from(s.attributes).forEach(e=>{"class"!==e.name?"style"!==e.name?i[e.name]=e.value:i.style=e.value.split(";").map(e=>e.trim()).filter(Boolean).reduce((e,r)=>{const[t,a]=r.split(":").map(e=>e.trim());return t&&a?(e[t.replace(/-([a-z])/g,(e,r)=>r.toUpperCase())]=a,e):e},{}):i.className=e.value});const d=Array.from(s.childNodes).map((e,r)=>l(e,`${n}-${r}`)).filter(e=>null!==e);return t.createElement(o,i,...d)};return Array.from(r.body.childNodes).map((e,r)=>l(e,`root-${r}`)).filter(e=>null!==e)},[E,Q]);return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex min-w-0 items-start gap-3",children:[e("div",{className:"mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm",children:e(d,{className:"h-4 w-4"})}),r("div",{className:"min-w-0",children:["number"==typeof v&&v>0?r("p",{className:"text-[11px] font-semibold uppercase tracking-wider text-teal-700",children:["Bài ",v]}):null,e("span",{className:"block text-sm font-medium leading-snug text-gray-800",children:K})]})]}),h&&U&&r("div",{className:b("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",q?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(q?o:i,{className:"h-3.5 w-3.5"}),q?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[C&&e("h2",{className:"text-center text-xl font-bold text-gray-900",children:C}),(H||S)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:P?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500"})}):e("img",{src:H||S,alt:C,className:"max-h-56 w-auto object-contain p-2"})})}),"WITH_WORD_BANK"===B&&D.length>0&&r("div",{className:"rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3",children:[r("div",{className:"mb-2 flex items-center gap-2",children:[e(m,{className:"h-4 w-4 text-purple-600"}),e("span",{className:"text-xs font-semibold uppercase tracking-wider text-purple-700",children:"Word Bank"})]}),e("div",{className:"flex flex-wrap gap-2",children:D.map((e,t)=>{const a=F.has(e.word.trim().toLowerCase());return r("span",{className:b("rounded-full border px-3 py-1 text-sm font-medium",e.isExample?"border-amber-300 bg-amber-100 text-amber-800":a?"border-purple-200 bg-white/60 text-purple-400 line-through":"border-purple-300 bg-white text-purple-800"),children:[e.word,e.isExample?" (ex)":""]},`${e.word}-${t}`)})})]}),e("div",{className:"structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800",children:V}),h&&!q&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-green-600",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:R.map(e=>r("span",{className:"rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800",children:[`{${e}}`,": ",A[e]]},e))})]}),h&&G&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-blue-600",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:G})]})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Check, X, FileText, Library } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
+function normalizeWfsfBlankStyle(raw) {
+    const v = String(raw || '').toLowerCase();
+    if (v === 'letter' || v === 'box')
+        return 'letter';
+    if (v === 'phrase' || v === 'sentence')
+        return 'phrase';
+    return 'word';
+}
+function parseStyleAttribute(styleValue) {
+    return styleValue
+        .split(';')
+        .map((rule) => rule.trim())
+        .filter(Boolean)
+        .reduce((styles, rule) => {
+        const [property, value] = rule.split(':').map((part) => part.trim());
+        if (!property || !value)
+            return styles;
+        const reactProperty = property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        styles[reactProperty] = value;
+        return styles;
+    }, {});
+}
+function ClientImageItem({ url, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading)
+        return null;
+    return (_jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50 max-w-sm", children: isLoading ? (_jsx("div", { className: "flex h-36 w-48 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
+}
+function ClientAudioItem({ url }) {
+    const { previewUrl } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src)
+        return null;
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsx("audio", { controls: true, src: src, className: "w-full h-10 rounded-md" }) }));
+}
+const DEFAULT_WFSF_HEADER = 'Điền từ vào biểu mẫu có cấu trúc';
+export function WordFillStructuredFormClient({ questionData, isReviewMode = false, userAnswer, onAnswerChange, autoFillCorrectAnswers = false, instruction, questionNumber, explanation, }) {
+    const { title = '', content = '', answers = {}, caseSensitive = false, viewMode, wordBank = [], instruction: dataInstruction, } = questionData;
+    const allImages = useMemo(() => {
+        if (Array.isArray(questionData.imageUrls) && questionData.imageUrls.length > 0) {
+            return questionData.imageUrls.filter(Boolean);
+        }
+        if (questionData.imageUrl)
+            return [questionData.imageUrl];
+        return [];
+    }, [questionData.imageUrls, questionData.imageUrl]);
+    const allAudios = useMemo(() => {
+        if (Array.isArray(questionData.audioUrls) && questionData.audioUrls.length > 0) {
+            return questionData.audioUrls.filter(Boolean);
+        }
+        if (questionData.audioUrl)
+            return [questionData.audioUrl];
+        return [];
+    }, [questionData.audioUrls, questionData.audioUrl]);
+    const [filledAnswers, setFilledAnswers] = useState(() => {
+        if (userAnswer)
+            return { ...userAnswer };
+        if (autoFillCorrectAnswers)
+            return { ...answers };
+        return {};
+    });
+    const [expandedBlank, setExpandedBlank] = useState(null);
+    useEffect(() => {
+        if (userAnswer) {
+            setFilledAnswers({ ...userAnswer });
+        }
+    }, [userAnswer]);
+    const bankMode = useMemo(() => detectWfsfBankMode(viewMode, wordBank), [viewMode, wordBank]);
+    const sharedWords = useMemo(() => bankMode === 'WITH_WORD_BANK' ? normalizeSharedWordBank(wordBank) : [], [bankMode, wordBank]);
+    const usedSharedWords = useMemo(() => {
+        const used = new Set();
+        Object.values(filledAnswers).forEach((v) => {
+            const t = String(v || '').trim().toLowerCase();
+            if (t)
+                used.add(t);
+        });
+        return used;
+    }, [filledAnswers]);
+    const optionsByKey = useMemo(() => {
+        const map = new Map();
+        if (bankMode !== 'WITH_OPTIONS' || !Array.isArray(wordBank))
+            return map;
+        wordBank.forEach((entry, index) => {
+            if (isOptionsWordEntry(entry)) {
+                map.set(String(index), entry.options.map((o) => String(o ?? '')));
+            }
+        });
+        return map;
+    }, [bankMode, wordBank]);
+    const expectedBlankKeys = useMemo(() => {
+        const keys = new Set();
+        const regex = /\{([\w\d]+)\}/g;
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            keys.add(match[1]);
+        }
+        return Array.from(keys).sort((a, b) => {
+            const numA = parseInt(a);
+            const numB = parseInt(b);
+            if (!isNaN(numA) && !isNaN(numB))
+                return numA - numB;
+            return a.localeCompare(b);
+        });
+    }, [content]);
+    const allFilled = expectedBlankKeys.every(k => filledAnswers[k]?.trim());
+    const isAllCorrect = isReviewMode && expectedBlankKeys.every(k => {
+        const userVal = (filledAnswers[k] || '').trim();
+        const correctVal = (answers[k] || '').trim();
+        return caseSensitive ? userVal === correctVal : userVal.toLowerCase() === correctVal.toLowerCase();
+    });
+    // Header = page rubric. Pearson preview maps draft.instruction → explanation.
+    const rawExplanation = String(explanation || questionData.explanation || '').trim();
+    const headerInstruction = String(instruction || dataInstruction || rawExplanation || '').trim();
+    const headerLabel = headerInstruction || DEFAULT_WFSF_HEADER;
+    // Do not re-show the same rubric under "Giải thích".
+    const displayExplanation = rawExplanation && rawExplanation !== headerLabel ? rawExplanation : '';
+    const handleInputChange = useCallback((key, value) => {
+        if (isReviewMode)
+            return;
+        setFilledAnswers(prev => ({ ...prev, [key]: value }));
+        onAnswerChange?.(key, value);
+    }, [isReviewMode, onAnswerChange]);
+    const handleSelectOption = useCallback((key, option) => {
+        if (isReviewMode)
+            return;
+        setFilledAnswers(prev => ({ ...prev, [key]: option }));
+        onAnswerChange?.(key, option);
+        setExpandedBlank(null);
+    }, [isReviewMode, onAnswerChange]);
+    const renderBlank = useCallback((key, reactKey) => {
+        const filled = filledAnswers[key] || '';
+        const correctAnswer = answers[key] || '';
+        const normalizedFilled = caseSensitive ? filled.trim() : filled.trim().toLowerCase();
+        const normalizedCorrect = caseSensitive ? correctAnswer.trim() : correctAnswer.trim().toLowerCase();
+        const isCorrectFill = isReviewMode && normalizedFilled === normalizedCorrect;
+        const isWrongFill = isReviewMode && !!filled && normalizedFilled !== normalizedCorrect;
+        const blankOptions = optionsByKey.get(key);
+        if (bankMode === 'WITH_OPTIONS' && blankOptions && blankOptions.length >= 2) {
+            const isExpanded = expandedBlank === key;
+            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-baseline", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : key), disabled: isReviewMode, className: cn('inline-flex min-w-[90px] items-center justify-center rounded border-2 border-dashed px-2 py-0.5 text-center text-sm font-semibold transition-all', isReviewMode
+                            ? isCorrectFill
+                                ? 'border-emerald-500 bg-emerald-50 text-emerald-800'
+                                : isWrongFill
+                                    ? 'border-rose-500 bg-rose-50 text-rose-800'
+                                    : 'border-amber-500 bg-amber-50 text-amber-800'
+                            : 'border-teal-400 bg-teal-50/50 text-teal-800 hover:bg-teal-50'), children: [filled || `{${key}}`, isReviewMode && filled && (isCorrectFill
+                                ? _jsx(Check, { className: "ml-0.5 h-3.5 w-3.5 text-green-600" })
+                                : _jsx(X, { className: "ml-0.5 h-3.5 w-3.5 text-red-600" }))] }), isExpanded && !isReviewMode && (_jsx("div", { className: "absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 flex-wrap gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg", children: blankOptions.map((opt) => (_jsx("button", { type: "button", onClick: () => handleSelectOption(key, opt), className: cn('rounded-md border px-2 py-1 text-xs font-medium transition-colors', filled === opt
+                                ? 'border-teal-500 bg-teal-100 text-teal-800'
+                                : 'border-gray-200 bg-white text-gray-700 hover:border-teal-300 hover:bg-teal-50'), children: opt }, opt))) }))] }, reactKey));
+        }
+        return (_jsxs("span", { className: "relative mx-1 inline-flex items-baseline align-baseline", children: [_jsx("span", { className: "absolute -top-4 left-1 text-[10px] font-semibold text-gray-400", children: key }), _jsx("input", { type: "text", value: filled, onChange: (e) => handleInputChange(key, e.target.value), disabled: isReviewMode, placeholder: "", className: cn('inline-block min-w-[90px] max-w-[200px] rounded-t border-b-2 bg-slate-50/40 px-2 py-0.5 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isReviewMode
+                        ? isCorrectFill
+                            ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
+                            : isWrongFill
+                                ? 'border-rose-500 bg-rose-50 text-rose-800 font-bold'
+                                : 'border-amber-500 bg-amber-50 text-amber-800'
+                        : 'border-slate-400 text-slate-800 focus:border-teal-600') }), isReviewMode && filled && (isCorrectFill
+                    ? _jsx(Check, { className: "ml-0.5 h-3.5 w-3.5 text-green-600" })
+                    : _jsx(X, { className: "ml-0.5 h-3.5 w-3.5 text-red-600" }))] }, reactKey));
+    }, [
+        answers,
+        bankMode,
+        caseSensitive,
+        expandedBlank,
+        filledAnswers,
+        handleInputChange,
+        handleSelectOption,
+        isReviewMode,
+        optionsByKey,
+    ]);
+    const renderedContent = useMemo(() => {
+        if (typeof window === 'undefined') {
+            return content;
+        }
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(content || '<p></p>', 'text/html');
+        const placeholderRegex = /\{([\w\d]+)\}/g;
+        const renderNode = (node, path) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || '';
+                const parts = [];
+                let lastIndex = 0;
+                let match;
+                placeholderRegex.lastIndex = 0;
+                while ((match = placeholderRegex.exec(text)) !== null) {
+                    if (match.index > lastIndex) {
+                        parts.push(text.slice(lastIndex, match.index));
+                    }
+                    parts.push(renderBlank(match[1], `${path}-blank-${match.index}`));
+                    lastIndex = match.index + match[0].length;
+                }
+                if (lastIndex < text.length) {
+                    parts.push(text.slice(lastIndex));
+                }
+                if (parts.length === 0)
+                    return null;
+                if (parts.length === 1)
+                    return parts[0];
+                return _jsx(React.Fragment, { children: parts }, path);
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                return null;
+            }
+            const element = node;
+            const tagName = element.tagName.toLowerCase();
+            const props = { key: path };
+            Array.from(element.attributes).forEach((attr) => {
+                if (attr.name === 'class') {
+                    props.className = attr.value;
+                    return;
+                }
+                if (attr.name === 'style') {
+                    props.style = parseStyleAttribute(attr.value);
+                    return;
+                }
+                props[attr.name] = attr.value;
+            });
+            const children = Array.from(element.childNodes)
+                .map((child, index) => renderNode(child, `${path}-${index}`))
+                .filter((child) => child !== null);
+            return React.createElement(tagName, props, ...children);
+        };
+        return Array.from(doc.body.childNodes)
+            .map((node, index) => renderNode(node, `root-${index}`))
+            .filter((node) => node !== null);
+    }, [content, renderBlank]);
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : null, _jsx("span", { className: "block text-sm font-medium leading-snug text-gray-800", children: headerLabel })] })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
+                                        const used = usedSharedWords.has(item.word.trim().toLowerCase());
+                                        return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
+                                                ? 'border-amber-300 bg-amber-100 text-amber-800'
+                                                : used
+                                                    ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
+                                                    : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
+                                    }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", answers[key]] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+}