@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

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

@@ -1,138 +1 @@
-import { FillInBlankCreator } from './FillInBlankCreator';
-export const fillInBlankRegistration = {
-    component: FillInBlankCreator,
-    transformInitialData: (initialData) => {
-        let creatorData = null;
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        // Extract group-level shared data from questionGroup.payload (API format)
-        const questionGroup = initialData?.questionGroup || {};
-        const groupPayload = questionGroup?.payload || {};
-        const groupImageUrl = groupPayload?.imageUrl || answer?.imageUrl || content?.imageUrl || '';
-        const groupTitle = groupPayload?.title || answer?.title || '';
-        const groupContent = groupPayload?.content || groupPayload?.passage || answer?.groupContent || '';
-        const groupNumber = questionGroup?.groupNumber || answer?.groupNumber || 1;
-        // NEW FORMAT: question with {0}, {1}, {2}... placeholders and answers array
-        if (answer?.question && Array.isArray(answer?.answers)) {
-            creatorData = {
-                question: answer.question,
-                answers: answer.answers,
-                caseSensitive: answer?.caseSensitive ?? false,
-                imageUrl: groupImageUrl,
-                showHints: answer?.showHints || false,
-                hints: answer?.hints || [],
-                explanation,
-                isExample: initialData?.isExample || answer?.isExample || false,
-                points: answer?.points || 1,
-                title: groupTitle,
-                groupContent,
-                groupNumber,
-                groups: answer?.groups || initialData?.groups,
-            };
-        }
-        else if (content?.question && Array.isArray(answer?.answers)) {
-            creatorData = {
-                question: content.question,
-                answers: answer.answers,
-                caseSensitive: answer?.caseSensitive ?? false,
-                imageUrl: groupImageUrl,
-                showHints: content?.showHints || false,
-                hints: content?.hints || [],
-                explanation,
-                isExample: initialData?.isExample || answer?.isExample || false,
-                points: answer?.points || content?.points || 1,
-                title: groupTitle,
-                groupContent,
-                groupNumber,
-                groups: answer?.groups || initialData?.groups,
-            };
-        }
-        // LEGACY: Pre-transformed format with blanks array
-        else if (answer?.blanks && Array.isArray(answer.blanks)) {
-            const firstBlank = answer.blanks[0];
-            creatorData = {
-                question: firstBlank?.text || '',
-                answers: answer.blanks.map((b) => b.correctAnswer || ''),
-                caseSensitive: answer?.caseSensitive ?? false,
-                showHints: answer?.showHints || false,
-                hints: answer?.hints || [],
-                explanation,
-                isExample: initialData?.isExample || answer?.isExample || false,
-                blanks: answer.blanks,
-                imageUrl: groupImageUrl,
-                title: groupTitle,
-                groupContent,
-                groupNumber,
-                groups: answer?.groups || initialData?.groups,
-            };
-        }
-        else if (content && content.text !== undefined && !content.blanks) {
-            // LEGACY Format 1: Single blank
-            creatorData = {
-                question: content.text || '',
-                answers: [answer?.correctAnswer || ''],
-                caseSensitive: answer?.caseSensitive ?? false,
-                showHints: content?.showHints || false,
-                hints: content?.hints || [],
-                explanation,
-                isExample: initialData?.isExample || answer?.isExample || false,
-                imageUrl: groupImageUrl,
-                title: groupTitle,
-                groupContent,
-                groupNumber,
-                groups: answer?.groups || initialData?.groups,
-            };
-        }
-        else if (content?.blanks) {
-            // LEGACY Format 2: Multiple blanks
-            const answersMap = answer?.answers || {};
-            const mergedBlanks = content.blanks.map((blank) => ({
-                ...blank,
-                correctAnswer: answersMap[blank.id] || blank.correctAnswer || '',
-            }));
-            const firstBlank = mergedBlanks[0];
-            creatorData = {
-                question: firstBlank?.text || '',
-                answers: mergedBlanks.map((b) => b.correctAnswer || ''),
-                caseSensitive: answer?.caseSensitive ?? false,
-                showHints: content?.showHints || false,
-                hints: content?.hints || [],
-                explanation,
-                isExample: initialData?.isExample || answer?.isExample || false,
-                blanks: mergedBlanks,
-                imageUrl: groupImageUrl,
-                title: groupTitle,
-                groupContent,
-                groupNumber,
-                groups: answer?.groups || initialData?.groups,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        validationRef: ctx.validationRef,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points || 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points || 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-};
+import{FillInBlankCreator as e}from"./FillInBlankCreator";export const fillInBlankRegistration={component:e,transformInitialData:e=>{let s=null;const t=e?.content,n=e?.answer,i=e?.explanation||n?.explanation||"",a=e?.questionGroup||{},o=a?.payload||{},r=o?.imageUrl||n?.imageUrl||t?.imageUrl||"",l=o?.title||n?.title||"",p=o?.content||o?.passage||n?.groupContent||"",u=a?.groupNumber||n?.groupNumber||1;if(n?.question&&Array.isArray(n?.answers))s={question:n.question,answers:n.answers,caseSensitive:n?.caseSensitive??!1,imageUrl:r,showHints:n?.showHints||!1,hints:n?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,points:n?.points||1,title:l,groupContent:p,groupNumber:u,groups:n?.groups||e?.groups};else if(t?.question&&Array.isArray(n?.answers))s={question:t.question,answers:n.answers,caseSensitive:n?.caseSensitive??!1,imageUrl:r,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,points:n?.points||t?.points||1,title:l,groupContent:p,groupNumber:u,groups:n?.groups||e?.groups};else if(n?.blanks&&Array.isArray(n.blanks)){const t=n.blanks[0];s={question:t?.text||"",answers:n.blanks.map(e=>e.correctAnswer||""),caseSensitive:n?.caseSensitive??!1,showHints:n?.showHints||!1,hints:n?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,blanks:n.blanks,imageUrl:r,title:l,groupContent:p,groupNumber:u,groups:n?.groups||e?.groups}}else if(t&&void 0!==t.text&&!t.blanks)s={question:t.text||"",answers:[n?.correctAnswer||""],caseSensitive:n?.caseSensitive??!1,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,imageUrl:r,title:l,groupContent:p,groupNumber:u,groups:n?.groups||e?.groups};else if(t?.blanks){const a=n?.answers||{},o=t.blanks.map(e=>({...e,correctAnswer:a[e.id]||e.correctAnswer||""})),g=o[0];s={question:g?.text||"",answers:o.map(e=>e.correctAnswer||""),caseSensitive:n?.caseSensitive??!1,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,blanks:o,imageUrl:r,title:l,groupContent:p,groupNumber:u,groups:n?.groups||e?.groups}}return s},getExtraProps:e=>({validationRef:e.validationRef,onUnsavedChangesChange:e.onUnsavedChangesChange,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,s)=>({type:s.questionType,content:s.state.content,points:e?.points||1,level:s.state.level,difficulty:s.state.difficulty,skill:s.state.skill,answer:e}),wrapOnChange:(e,s)=>({type:s.questionType,content:s.state.content,points:e?.points||1,level:s.state.level,difficulty:s.state.difficulty,skill:s.state.skill,answer:e})};

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

@@ -1,59 +1 @@
-export const transformFillInBlank = (question) => {
-    const answerData = question.answer;
-    // Helper: build basicGroupData if any group field is present
-    const hasGroupData = !!(answerData?.title || answerData?.subtitle || answerData?.groupContent || answerData?.imageUrl);
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.title || '',
-            subtitle: answerData.subtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.imageUrl || '',
-        }
-        : undefined;
-    const groupNumber = answerData?.groupNumber || 1;
-    // NEW FORMAT: question with {0}, {1}, {2}... placeholders and answers array
-    if (answerData?.question && Array.isArray(answerData?.answers)) {
-        const apiContent = {
-            question: answerData.question,
-            showHints: answerData.showHints || false,
-            hints: answerData.showHints ? (answerData.hints || []) : [],
-        };
-        // Per-question image (non-group image) — only add when NOT using group card
-        if (answerData.imageUrl && !hasGroupData) {
-            apiContent.imageUrl = answerData.imageUrl;
-        }
-        return {
-            apiContent,
-            apiCorrectAnswer: {
-                answers: answerData.answers,
-                caseSensitive: answerData.caseSensitive || false,
-            },
-            isExample: answerData.isExample || false,
-            basicGroupData,
-            groupNumber,
-        };
-    }
-    // LEGACY FORMAT: blanks array
-    if (!answerData?.blanks || answerData.blanks.length === 0) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const blanks = (answerData.blanks || []).map((blank) => ({
-        id: blank.id,
-        text: blank.text,
-    }));
-    const answers = (answerData.blanks || []).reduce((acc, blank) => {
-        if (blank.id && blank.correctAnswer) {
-            acc[blank.id] = blank.correctAnswer;
-        }
-        return acc;
-    }, {});
-    return {
-        apiContent: { blanks },
-        apiCorrectAnswer: {
-            answers,
-            caseSensitive: answerData.caseSensitive || false,
-        },
-        basicGroupData,
-        groupNumber,
-    };
-};
+export const transformFillInBlank=e=>{const t=e.answer,r=!!(t?.title||t?.subtitle||t?.groupContent||t?.imageUrl),s=r?{title:t.title||"",subtitle:t.subtitle||"",content:t.groupContent||"",imageUrl:t.imageUrl||""}:void 0,n=t?.groupNumber||1;if(t?.question&&Array.isArray(t?.answers)){const e={question:t.question,showHints:t.showHints||!1,hints:t.showHints&&t.hints||[]};return t.imageUrl&&!r&&(e.imageUrl=t.imageUrl),{apiContent:e,apiCorrectAnswer:{answers:t.answers,caseSensitive:t.caseSensitive||!1},isExample:t.isExample||!1,basicGroupData:s,groupNumber:n}}if(!t?.blanks||0===t.blanks.length)return{apiContent:{},apiCorrectAnswer:{}};return{apiContent:{blanks:(t.blanks||[]).map(e=>({id:e.id,text:e.text}))},apiCorrectAnswer:{answers:(t.blanks||[]).reduce((e,t)=>(t.id&&t.correctAnswer&&(e[t.id]=t.correctAnswer),e),{}),caseSensitive:t.caseSensitive||!1},basicGroupData:s,groupNumber:n}};

package/dist/components/questions/types/fill-missing-words-in-grid/FillMissingWordsInGridClient.js

@@ -1,117 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Input } from '../../../../components/ui/input';
-import { Check, X, Grid3X3, Trophy, AlertCircle, Lightbulb } from 'lucide-react';
-import { toast } from 'sonner';
-import { cn } from '../../../../shared/lib/utils';
-function FillMissingWordsInGridClientContent({ questionData, onSubmit, isReviewMode = false, userAnswer = {}, explanation, }) {
-    const { content, answer } = questionData;
-    const { grid, rows, columns, disabledCells = [] } = content;
-    const { answers: correctAnswers = {}, caseSensitive = false } = answer;
-    // State for user answers: { "row-column": "answer" }
-    const [userAnswers, setUserAnswers] = useState(userAnswer);
-    // Get missing positions from correctAnswers
-    const missingPositions = Object.keys(correctAnswers);
-    // Check if a position is a missing cell
-    const isMissingCell = useCallback((row, col) => {
-        const position = `${row + 1}-${col + 1}`;
-        return missingPositions.includes(position);
-    }, [missingPositions]);
-    // Check if a position is a disabled cell
-    const isDisabledCell = useCallback((row, col) => {
-        const position = `${row + 1}-${col + 1}`;
-        return disabledCells.includes(position);
-    }, [disabledCells]);
-    // Handle user input for missing cells
-    const handleInputChange = useCallback((row, col, value) => {
-        const position = `${row + 1}-${col + 1}`;
-        setUserAnswers(prev => ({
-            ...prev,
-            [position]: value,
-        }));
-    }, []);
-    // Check if user answer is correct
-    const isAnswerCorrect = useCallback((row, col) => {
-        const position = `${row + 1}-${col + 1}`;
-        const userAns = userAnswers[position];
-        const correctAns = correctAnswers[position];
-        if (!userAns || userAns.trim() === '')
-            return null;
-        if (!correctAns)
-            return null;
-        if (caseSensitive) {
-            return userAns.trim() === correctAns.trim();
-        }
-        return userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
-    }, [userAnswers, correctAnswers, caseSensitive]);
-    // Handle submit
-    const handleSubmit = useCallback(() => {
-        // Check if all missing cells are filled
-        const allFilled = missingPositions.every(pos => {
-            const answer = userAnswers[pos];
-            return answer && answer.trim() !== '';
-        });
-        if (!allFilled) {
-            toast.error('Vui lòng điền tất cả các ô còn thiếu!');
-            return;
-        }
-        onSubmit?.(userAnswers);
-    }, [missingPositions, userAnswers, onSubmit]);
-    // Calculate score for review mode
-    const calculateScore = useCallback(() => {
-        let correct = 0;
-        const total = missingPositions.length;
-        missingPositions.forEach(position => {
-            const userAns = userAnswers[position];
-            const correctAns = correctAnswers[position];
-            if (userAns && correctAns) {
-                const isCorrect = caseSensitive
-                    ? userAns.trim() === correctAns.trim()
-                    : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
-                if (isCorrect)
-                    correct++;
-            }
-        });
-        return { correct, total };
-    }, [missingPositions, userAnswers, correctAnswers, caseSensitive]);
-    const score = isReviewMode ? calculateScore() : null;
-    const scorePercentage = score ? Math.round((score.correct / score.total) * 100) : 0;
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(Grid3X3, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o b\u1EA3ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110i\u1EC1n c\u00E1c t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u m\u00E0u xanh" })] })] }), isReviewMode && score && (_jsxs("div", { className: cn('flex items-center gap-3 rounded-xl px-4 py-2', scorePercentage >= 80 ? 'bg-green-50 border border-green-200' :
-                            scorePercentage >= 50 ? 'bg-yellow-50 border border-yellow-200' :
-                                'bg-red-50 border border-red-200'), children: [_jsx(Trophy, { className: cn('h-5 w-5', scorePercentage >= 80 ? 'text-green-500' :
-                                    scorePercentage >= 50 ? 'text-yellow-500' :
-                                        'text-red-500') }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: cn('text-lg font-bold', scorePercentage >= 80 ? 'text-green-600' :
-                                            scorePercentage >= 50 ? 'text-yellow-600' :
-                                                'text-red-600'), children: [score.correct, "/", score.total] }), _jsxs("div", { className: "text-xs text-gray-500", children: [scorePercentage, "% ch\u00EDnh x\u00E1c"] })] })] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "inline-block min-w-full", children: [_jsxs("div", { className: "grid gap-1.5 mb-2", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "h-8" }), Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: i + 1 }, `col-header-${i}`)))] }), _jsx("div", { className: "grid gap-1.5", children: Array.from({ length: rows }, (_, rowIndex) => (_jsxs("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: rowIndex + 1 }), Array.from({ length: columns }, (_, colIndex) => {
-                                                const isMissing = isMissingCell(rowIndex, colIndex);
-                                                const isDisabled = isDisabledCell(rowIndex, colIndex);
-                                                const cellValue = grid[rowIndex]?.[colIndex] || '';
-                                                const position = `${rowIndex + 1}-${colIndex + 1}`;
-                                                const userValue = userAnswers[position] || '';
-                                                // Determine if answer is correct in review mode
-                                                const answerStatus = isReviewMode ? isAnswerCorrect(rowIndex, colIndex) : null;
-                                                return (_jsx("div", { className: cn('relative flex h-14 items-center justify-center rounded-lg border-2 transition-all', isDisabled && 'border-gray-300 bg-gray-200', isMissing && !isReviewMode && 'border-teal-400 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm', isMissing && isReviewMode && answerStatus === true && 'border-green-400 bg-gradient-to-br from-green-50 to-emerald-50', isMissing && isReviewMode && answerStatus === false && 'border-red-400 bg-gradient-to-br from-red-50 to-rose-50', isMissing && isReviewMode && answerStatus === null && 'border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50', !isMissing && !isDisabled && 'border-gray-200 bg-white'), children: isDisabled ? (
-                                                    // Disabled cell - empty
-                                                    _jsx("span", { className: "text-lg font-semibold text-gray-400" })) : isMissing ? (
-                                                    // Missing cell - input field
-                                                    _jsxs("div", { className: "relative w-full h-full flex items-center justify-center px-1", children: [_jsx(Input, { value: userValue, onChange: (e) => handleInputChange(rowIndex, colIndex, e.target.value), disabled: isReviewMode, className: cn('h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md', 'focus:ring-2 focus:ring-offset-0', !isReviewMode && 'focus:ring-teal-400', isReviewMode && answerStatus === true && 'text-green-700', isReviewMode && answerStatus === false && 'text-red-700', isReviewMode && answerStatus === null && 'text-yellow-700'), maxLength: 20, placeholder: "?" }), isReviewMode && answerStatus !== null && (_jsx("div", { className: cn('absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm', answerStatus === true ? 'bg-green-500' : 'bg-red-500'), children: answerStatus === true ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] })) : (
-                                                    // Regular cell - display value
-                                                    _jsx("span", { className: "text-base font-semibold text-gray-700", children: cellValue })) }, `cell-${rowIndex}-${colIndex}`));
-                                            })] }, `row-${rowIndex}`))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-teal-400 bg-teal-50" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u1EA7n \u0111i\u1EC1n" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-200 bg-white" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u00F3 s\u1EB5n" })] }), disabledCells.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300 bg-gray-200" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 b\u1ECB v\u00F4 hi\u1EC7u" })] }))] }), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-white", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: missingPositions.map((position) => {
-                                        const userAns = userAnswers[position] || '';
-                                        const correctAns = correctAnswers[position] || '';
-                                        const isCorrect = caseSensitive
-                                            ? userAns.trim() === correctAns.trim()
-                                            : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
-                                        return (_jsxs("div", { className: cn('rounded-lg border-2 p-3 transition-all', isCorrect
-                                                ? 'border-green-300 bg-gradient-to-br from-green-50 to-emerald-50'
-                                                : 'border-red-300 bg-gradient-to-br from-red-50 to-rose-50'), children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: cn('inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: ["\u00D4 ", position] }), isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(X, { className: "h-4 w-4 text-red-500" }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "\u0110\u00FAng:" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-green-700' : 'text-gray-800'), children: correctAns })] }), !isCorrect && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "B\u1EA1n:" }), _jsx("span", { className: "font-medium text-red-600", children: userAns || '(trống)' })] }))] })] }, position));
-                                    }) }) })] })), !isReviewMode && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsxs("span", { children: ["\u0110\u00E3 \u0111i\u1EC1n: ", Object.values(userAnswers).filter(v => v.trim() !== '').length, "/", missingPositions.length, " \u00F4"] })] }), onSubmit && (_jsxs(Button, { onClick: handleSubmit, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white shadow-sm", children: [_jsx(Check, { className: "h-4 w-4 mr-2" }), "N\u1ED9p \u0111\u00E1p \u00E1n"] }))] }))] }), isReviewMode && explanation && (_jsx("div", { className: "mx-5 mb-5 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
-}
-export function FillMissingWordsInGridClient(props) {
-    return _jsx(FillMissingWordsInGridClientContent, { ...props });
-}
-// Legacy export for backward compatibility
-export const WriteMissingLettersClient = FillMissingWordsInGridClient;
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useCallback as a}from"react";import{Button as s}from"../../../../components/ui/button";import{Input as l}from"../../../../components/ui/input";import{Check as n,X as i,Grid3X3 as d,Trophy as o,AlertCircle as c,Lightbulb as m}from"lucide-react";import{toast as g}from"sonner";import{cn as h}from"../../../../shared/lib/utils";function x({questionData:x,onSubmit:b,isReviewMode:f=!1,userAnswer:u={},explanation:p}){const{content:N,answer:y}=x,{grid:w,rows:v,columns:j,disabledCells:$=[]}=N,{answers:C={},caseSensitive:L=!1}=y,[k,M]=t(u),A=Object.keys(C),G=a((e,r)=>{const t=`${e+1}-${r+1}`;return A.includes(t)},[A]),W=a((e,r)=>{const t=`${e+1}-${r+1}`;return $.includes(t)},[$]),F=a((e,r,t)=>{const a=`${e+1}-${r+1}`;M(e=>({...e,[a]:t}))},[]),I=a((e,r)=>{const t=`${e+1}-${r+1}`,a=k[t],s=C[t];return a&&""!==a.trim()&&s?L?a.trim()===s.trim():a.trim().toLowerCase()===s.trim().toLowerCase():null},[k,C,L]),O=a(()=>{const e=A.every(e=>{const r=k[e];return r&&""!==r.trim()});e?b?.(k):g.error("Vui lòng điền tất cả các ô còn thiếu!")},[A,k,b]),S=a(()=>{let e=0;const r=A.length;return A.forEach(r=>{const t=k[r],a=C[r];if(t&&a){(L?t.trim()===a.trim():t.trim().toLowerCase()===a.trim().toLowerCase())&&e++}}),{correct:e,total:r}},[A,k,C,L]),T=f?S():null,q=T?Math.round(T.correct/T.total*100):0;return r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-4",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm",children:e(d,{className:"h-5 w-5"})}),r("div",{children:[e("h3",{className:"text-base font-semibold text-gray-900",children:"Điền từ còn thiếu vào bảng"}),e("p",{className:"text-xs text-gray-500",children:"Điền các từ còn thiếu vào các ô được đánh dấu màu xanh"})]})]}),f&&T&&r("div",{className:h("flex items-center gap-3 rounded-xl px-4 py-2",q>=80?"bg-green-50 border border-green-200":q>=50?"bg-yellow-50 border border-yellow-200":"bg-red-50 border border-red-200"),children:[e(o,{className:h("h-5 w-5",q>=80?"text-green-500":q>=50?"text-yellow-500":"text-red-500")}),r("div",{className:"text-right",children:[r("div",{className:h("text-lg font-bold",q>=80?"text-green-600":q>=50?"text-yellow-600":"text-red-600"),children:[T.correct,"/",T.total]}),r("div",{className:"text-xs text-gray-500",children:[q,"% chính xác"]})]})]})]}),r("div",{className:"p-5 space-y-5",children:[e("div",{className:"overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4",children:r("div",{className:"inline-block min-w-full",children:[r("div",{className:"grid gap-1.5 mb-2",style:{gridTemplateColumns:`48px repeat(${j}, minmax(80px, 1fr))`},children:[e("div",{className:"h-8"}),Array.from({length:j},(r,t)=>e("div",{className:"flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm",children:t+1},`col-header-${t}`))]}),e("div",{className:"grid gap-1.5",children:Array.from({length:v},(t,a)=>r("div",{className:"grid gap-1.5",style:{gridTemplateColumns:`48px repeat(${j}, minmax(80px, 1fr))`},children:[e("div",{className:"flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm",children:a+1}),Array.from({length:j},(t,s)=>{const d=G(a,s),o=W(a,s),c=w[a]?.[s]||"",m=k[`${a+1}-${s+1}`]||"",g=f?I(a,s):null;return e("div",{className:h("relative flex h-14 items-center justify-center rounded-lg border-2 transition-all",o&&"border-gray-300 bg-gray-200",d&&!f&&"border-teal-400 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm",d&&f&&!0===g&&"border-green-400 bg-gradient-to-br from-green-50 to-emerald-50",d&&f&&!1===g&&"border-red-400 bg-gradient-to-br from-red-50 to-rose-50",d&&f&&null===g&&"border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50",!d&&!o&&"border-gray-200 bg-white"),children:o?e("span",{className:"text-lg font-semibold text-gray-400"}):d?r("div",{className:"relative w-full h-full flex items-center justify-center px-1",children:[e(l,{value:m,onChange:e=>F(a,s,e.target.value),disabled:f,className:h("h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md","focus:ring-2 focus:ring-offset-0",!f&&"focus:ring-teal-400",f&&!0===g&&"text-green-700",f&&!1===g&&"text-red-700",f&&null===g&&"text-yellow-700"),maxLength:20,placeholder:"?"}),f&&null!==g&&e("div",{className:h("absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm",!0===g?"bg-green-500":"bg-red-500"),children:e(!0===g?n:i,{className:"h-3 w-3 text-white"})})]}):e("span",{className:"text-base font-semibold text-gray-700",children:c})},`cell-${a}-${s}`)})]},`row-${a}`))})]})}),r("div",{className:"flex flex-wrap items-center gap-4 text-xs",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-teal-400 bg-teal-50"}),e("span",{className:"text-gray-600",children:"Ô cần điền"})]}),r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-gray-200 bg-white"}),e("span",{className:"text-gray-600",children:"Ô có sẵn"})]}),$.length>0&&r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-gray-300 bg-gray-200"}),e("span",{className:"text-gray-600",children:"Ô bị vô hiệu"})]})]}),f&&r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-white",children:e(n,{className:"h-3.5 w-3.5"})}),e("h4",{className:"text-sm font-semibold text-gray-800",children:"Đáp án đúng"})]}),e("div",{className:"p-4",children:e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",children:A.map(t=>{const a=k[t]||"",s=C[t]||"",l=L?a.trim()===s.trim():a.trim().toLowerCase()===s.trim().toLowerCase();return r("div",{className:h("rounded-lg border-2 p-3 transition-all",l?"border-green-300 bg-gradient-to-br from-green-50 to-emerald-50":"border-red-300 bg-gradient-to-br from-red-50 to-rose-50"),children:[r("div",{className:"flex items-center justify-between mb-2",children:[r("span",{className:h("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",l?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:["Ô ",t]}),l?e(n,{className:"h-4 w-4 text-green-500"}):e(i,{className:"h-4 w-4 text-red-500"})]}),r("div",{className:"space-y-1",children:[r("div",{className:"flex items-center gap-2",children:[e("span",{className:"text-xs text-gray-500",children:"Đúng:"}),e("span",{className:h("font-semibold",l?"text-green-700":"text-gray-800"),children:s})]}),!l&&r("div",{className:"flex items-center gap-2",children:[e("span",{className:"text-xs text-gray-500",children:"Bạn:"}),e("span",{className:"font-medium text-red-600",children:a||"(trống)"})]})]})]},t)})})})]}),!f&&r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2 text-sm text-gray-500",children:[e(c,{className:"h-4 w-4"}),r("span",{children:["Đã điền: ",Object.values(k).filter(e=>""!==e.trim()).length,"/",A.length," ô"]})]}),b&&r(s,{onClick:O,className:"bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white shadow-sm",children:[e(n,{className:"h-4 w-4 mr-2"}),"Nộp đáp án"]})]})]}),f&&p&&e("div",{className:"mx-5 mb-5 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(m,{className:"h-3.5 w-3.5"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:p})]})]})})]})}export function FillMissingWordsInGridClient(r){return e(x,{...r})}export const WriteMissingLettersClient=FillMissingWordsInGridClient;