@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/choose-the-correct-answer/index.js

@@ -1,2 +1 @@
-export * from './ChooseTheCorrectAnswerCreator';
-export * from './ChooseTheCorrectAnswerClient';
+export*from"./ChooseTheCorrectAnswerCreator";export*from"./ChooseTheCorrectAnswerClient";

package/dist/components/questions/types/choose-the-correct-answer/register.js

@@ -1,101 +1 @@
-import { ChooseTheCorrectAnswerCreator } from './ChooseTheCorrectAnswerCreator';
-export const chooseTheCorrectAnswerRegistration = {
-    component: ChooseTheCorrectAnswerCreator,
-    transformInitialData: (initialData) => {
-        let creatorData = initialData?.answer;
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || content?.points || answer?.points || 1);
-        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
-        // Extract group info from API format
-        const questionGroup = initialData?.questionGroup || {};
-        const groupPayload = questionGroup?.payload || {};
-        if (content && typeof content === 'object' && (content.question !== undefined || content.options)) {
-            const optionsStrings = content.options || [];
-            const rawCorrectAnswer = answer?.answer;
-            const normalizedCorrectAnswer = Array.isArray(rawCorrectAnswer)
-                ? rawCorrectAnswer
-                : typeof rawCorrectAnswer === 'number'
-                    ? rawCorrectAnswer
-                    : -1;
-            const isMultipleAnswers = Boolean(content?.multipleAnswers
-                ?? answer?.multipleAnswers
-                ?? initialData?.multipleAnswers
-                ?? groupPayload?.multipleAnswers
-                ?? Array.isArray(normalizedCorrectAnswer));
-            creatorData = {
-                question: content.question || '',
-                optionType: content.optionType || 'text',
-                options: optionsStrings,
-                correctAnswer: normalizedCorrectAnswer,
-                multipleAnswers: isMultipleAnswers,
-                imageUrl: content.imageUrl || '',
-                askerName: content.askerName || '',
-                answererName: content.answererName || '',
-                isExample: initialData?.isExample || answer?.isExample || false,
-                explanation,
-                points,
-                // Add group stuff
-                groupTitle: groupPayload?.title || answer?.groupTitle || '',
-                groupContent: groupPayload?.content || answer?.groupContent || '',
-                groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || content?.groupImageUrl || '',
-                groupNumber: questionGroup.groupNumber || answer?.groupNumber || 1,
-                articles: groupPayload?.articles || answer?.articles || undefined,
-            };
-        }
-        else if (answer && typeof answer === 'object' && (answer.question !== undefined || answer.options)) {
-            creatorData = {
-                ...answer,
-                multipleAnswers: Boolean(answer?.multipleAnswers ?? initialData?.multipleAnswers ?? Array.isArray(answer?.correctAnswer)),
-                optionType: answer.optionType || content?.optionType || 'text',
-                imageUrl: answer.imageUrl || content?.imageUrl || '',
-                isExample: initialData?.isExample || answer?.isExample || false,
-                explanation,
-                points,
-                // Add group stuff
-                groupTitle: groupPayload?.title || answer?.groupTitle || '',
-                groupContent: groupPayload?.content || answer?.groupContent || '',
-                groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || content?.groupImageUrl || '',
-                groupNumber: questionGroup.groupNumber || answer?.groupNumber || 1,
-                articles: groupPayload?.articles || answer?.articles || undefined,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        optionCount: ctx.optionCount || 4,
-        optionMode: ctx.optionMode,
-        defaultValue: ctx.defaultValue,
-        defaultQuestion: ctx.defaultQuestion,
-        viewMode: ctx.viewMode,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        groups: ctx.groups,
-        groupType: ctx.groupType,
-        articleCount: ctx.articleCount,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        questionConfig: ctx.questionConfig,
-        multipleAnswers: ctx.multipleAnswers,
-    }),
-    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,
-    }),
-    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,
-    }),
-};
+import{ChooseTheCorrectAnswerCreator as e}from"./ChooseTheCorrectAnswerCreator";export const chooseTheCorrectAnswerRegistration={component:e,transformInitialData:e=>{let t=e?.answer;const o=e?.content,n=e?.answer,r=e?.total_points?parseFloat(e.total_points):e?.points||o?.points||n?.points||1,i=e?.explanation||o?.explanation||n?.explanation||"",s=e?.questionGroup||{},a=s?.payload||{};if(o&&"object"==typeof o&&(void 0!==o.question||o.options)){const p=o.options||[],l=n?.answer,u=Array.isArray(l)||"number"==typeof l?l:-1,g=Boolean(o?.multipleAnswers??n?.multipleAnswers??e?.multipleAnswers??a?.multipleAnswers??Array.isArray(u));t={question:o.question||"",optionType:o.optionType||"text",options:p,correctAnswer:u,multipleAnswers:g,imageUrl:o.imageUrl||"",askerName:o.askerName||"",answererName:o.answererName||"",isExample:e?.isExample||n?.isExample||!1,explanation:i,points:r,groupTitle:a?.title||n?.groupTitle||"",groupContent:a?.content||n?.groupContent||"",groupImageUrl:a?.imageUrl||n?.groupImageUrl||o?.groupImageUrl||"",groupNumber:s.groupNumber||n?.groupNumber||1,articles:a?.articles||n?.articles||void 0}}else n&&"object"==typeof n&&(void 0!==n.question||n.options)&&(t={...n,multipleAnswers:Boolean(n?.multipleAnswers??e?.multipleAnswers??Array.isArray(n?.correctAnswer)),optionType:n.optionType||o?.optionType||"text",imageUrl:n.imageUrl||o?.imageUrl||"",isExample:e?.isExample||n?.isExample||!1,explanation:i,points:r,groupTitle:a?.title||n?.groupTitle||"",groupContent:a?.content||n?.groupContent||"",groupImageUrl:a?.imageUrl||n?.groupImageUrl||o?.groupImageUrl||"",groupNumber:s.groupNumber||n?.groupNumber||1,articles:a?.articles||n?.articles||void 0});return t},getExtraProps:e=>({optionCount:e.optionCount||4,optionMode:e.optionMode,defaultValue:e.defaultValue,defaultQuestion:e.defaultQuestion,viewMode:e.viewMode,onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,groupType:e.groupType,articleCount:e.articleCount,questionIndexInPart:e.questionIndexInPart,partId:e.partId,questionConfig:e.questionConfig,multipleAnswers:e.multipleAnswers}),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}),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})};

package/dist/components/questions/types/choose-the-correct-answer/transform.js

@@ -1,43 +1 @@
-export const transformChooseTheCorrectAnswer = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.options || answerData.correctAnswer === undefined) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const apiContent = {
-        question: answerData.question || '',
-        optionType: answerData.optionType || 'text',
-        options: answerData.options,
-        ...(answerData.multipleAnswers ? { multipleAnswers: true } : {}),
-    };
-    // Per-question image goes into content (not group card)
-    if (answerData.imageUrl) {
-        apiContent.imageUrl = answerData.imageUrl;
-    }
-    if (answerData.askerName) {
-        apiContent.askerName = answerData.askerName;
-    }
-    if (answerData.answererName) {
-        apiContent.answererName = answerData.answererName;
-    }
-    // Build basicGroupData when any group field is present
-    const hasGroupData = !!(answerData.groupTitle || answerData.groupSubtitle || answerData.groupContent || answerData.groupImageUrl || (answerData.articles && answerData.articles.length > 0));
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.groupTitle || '',
-            subtitle: answerData.groupSubtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.groupImageUrl || '',
-            ...(answerData.articles ? { articles: answerData.articles } : {}),
-        }
-        : undefined;
-    return {
-        apiContent,
-        apiCorrectAnswer: {
-            answer: answerData.correctAnswer,
-            ...(answerData.multipleAnswers ? { multipleAnswers: true } : {}),
-        },
-        isExample: answerData.isExample || false,
-        basicGroupData,
-        groupNumber: answerData.groupNumber || 1,
-    };
-};
+export const transformChooseTheCorrectAnswer=e=>{const r=e.answer;if(!r?.options||void 0===r.correctAnswer)return{apiContent:{},apiCorrectAnswer:{}};const t={question:r.question||"",optionType:r.optionType||"text",options:r.options,...r.multipleAnswers?{multipleAnswers:!0}:{}};r.imageUrl&&(t.imageUrl=r.imageUrl),r.askerName&&(t.askerName=r.askerName),r.answererName&&(t.answererName=r.answererName);const o=!!(r.groupTitle||r.groupSubtitle||r.groupContent||r.groupImageUrl||r.articles&&r.articles.length>0)?{title:r.groupTitle||"",subtitle:r.groupSubtitle||"",content:r.groupContent||"",imageUrl:r.groupImageUrl||"",...r.articles?{articles:r.articles}:{}}:void 0;return{apiContent:t,apiCorrectAnswer:{answer:r.correctAnswer,...r.multipleAnswers?{multipleAnswers:!0}:{}},isExample:r.isExample||!1,basicGroupData:o,groupNumber:r.groupNumber||1}};

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

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