@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

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

@@ -1,233 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Check, X, FileText, Star, Mail } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-function parseParagraph(paragraph) {
-    const segments = [];
-    const regex = /\{(\d+)\}/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = regex.exec(paragraph)) !== null) {
-        if (match.index > lastIndex) {
-            segments.push({ type: 'text', value: paragraph.slice(lastIndex, match.index) });
-        }
-        segments.push({ type: 'blank', index: parseInt(match[1], 10) });
-        lastIndex = regex.lastIndex;
-    }
-    if (lastIndex < paragraph.length) {
-        segments.push({ type: 'text', value: paragraph.slice(lastIndex) });
-    }
-    return segments;
-}
-function isWithOptionsMode(wordBank) {
-    return wordBank.length > 0 && Array.isArray(wordBank[0]?.options);
-}
-// ---------------------------------------------------------------------------
-// Sub-component: presigned image for word-bank card
-// ---------------------------------------------------------------------------
-function WordBankImage({ imageUrl }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(imageUrl);
-    if (isLoading) {
-        return (_jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100", children: _jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-teal-500" }) }));
-    }
-    if (!previewUrl)
-        return null;
-    return (_jsx("img", { src: previewUrl, alt: "", className: "h-16 w-16 rounded-lg object-cover border border-gray-200" }));
-}
-// ---------------------------------------------------------------------------
-// Example blank badge — shown pre-filled in the paragraph
-// ---------------------------------------------------------------------------
-function ExampleBadge({ text }) {
-    return (_jsxs("span", { className: "mx-1 inline-flex items-center gap-1 rounded-sm border border-amber-300 bg-amber-100 px-2.5 py-0.5 text-sm font-semibold text-amber-800 align-middle", children: [_jsx(Star, { className: "h-3 w-3 fill-amber-400 text-amber-400 shrink-0" }), text] }));
-}
-// ---------------------------------------------------------------------------
-// Unified WordFillParagraphClient
-// ---------------------------------------------------------------------------
-export function WordFillParagraphClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
-    const { title = '', paragraph = '', wordBank = [], answers = [], exampleAnswer = [], imageUrl, emailFrom, emailTo, } = questionData;
-    const withOptions = isWithOptionsMode(wordBank);
-    const isDefaultMode = !withOptions && wordBank.length === 0;
-    // ── Example sets ──────────────────────────────────────────────────────────
-    // WITH_WORD_BANK: example blank indices derived from wordBank[i].isExample
-    const exampleBlankIndices = useMemo(() => {
-        if (withOptions || isDefaultMode)
-            return new Set();
-        const indices = new Set();
-        wordBank.forEach((item) => {
-            if (item.isExample) {
-                const answerIdx = answers.indexOf(item.word);
-                if (answerIdx >= 0)
-                    indices.add(answerIdx);
-            }
-        });
-        return indices;
-    }, [withOptions, isDefaultMode, wordBank, answers]);
-    // DEFAULT / EMAIL: example blank indices derived from exampleAnswer string list
-    const defaultExampleBlankIndices = useMemo(() => {
-        if (!isDefaultMode || !exampleAnswer?.length)
-            return new Set();
-        const exSet = new Set(exampleAnswer);
-        const indices = new Set();
-        answers.forEach((ans, idx) => {
-            if (exSet.has(ans))
-                indices.add(idx);
-        });
-        return indices;
-    }, [isDefaultMode, exampleAnswer, answers]);
-    // Unified helper: is a given blank index an example?
-    const isExampleBlank = useCallback((blankIdx) => {
-        if (withOptions)
-            return !!(wordBank[blankIdx]?.isExample);
-        if (isDefaultMode)
-            return defaultExampleBlankIndices.has(blankIdx);
-        return exampleBlankIndices.has(blankIdx);
-    }, [withOptions, isDefaultMode, wordBank, exampleBlankIndices, defaultExampleBlankIndices]);
-    // ── Filled answers state ──────────────────────────────────────────────────
-    const [filledAnswers, setFilledAnswers] = useState(() => {
-        const initial = {};
-        if (userAnswer) {
-            userAnswer.forEach((ans, idx) => { initial[idx] = ans; });
-        }
-        else if (autoFillCorrectAnswers) {
-            answers.forEach((ans, idx) => { initial[idx] = ans; });
-        }
-        return initial;
-    });
-    useEffect(() => {
-        if (userAnswer) {
-            const updated = {};
-            userAnswer.forEach((ans, idx) => { updated[idx] = ans; });
-            setFilledAnswers(updated);
-        }
-    }, [userAnswer]);
-    // ── Image ─────────────────────────────────────────────────────────────────
-    const { previewUrl: imagePreviewUrl, isLoading: imageLoading } = usePresignedFileUrl(imageUrl || '');
-    // ── Paragraph parsing ─────────────────────────────────────────────────────
-    const segments = useMemo(() => parseParagraph(paragraph), [paragraph]);
-    const allBlanks = useMemo(() => segments.filter(s => s.type === 'blank').map(s => s.index), [segments]);
-    // ── Correctness (skip example blanks) ────────────────────────────────────
-    const nonExampleBlanks = useMemo(() => allBlanks.filter(idx => !isExampleBlank(idx)), [allBlanks, isExampleBlank]);
-    const allFilled = nonExampleBlanks.every(idx => filledAnswers[idx]);
-    const isAllCorrect = isReviewMode && nonExampleBlanks.every(idx => filledAnswers[idx] === answers[idx]);
-    const displayExplanation = explanation || questionData.explanation;
-    // ── WITH_OPTIONS: expanded blank ──────────────────────────────────────────
-    const [expandedBlank, setExpandedBlank] = useState(null);
-    const handleSelectOption = useCallback((blankIndex, option) => {
-        if (isReviewMode)
-            return;
-        const updated = { ...filledAnswers, [blankIndex]: option };
-        setFilledAnswers(updated);
-        const answerArray = allBlanks.map(idx => updated[idx] || '');
-        onSubmit?.(answerArray);
-    }, [isReviewMode, filledAnswers, allBlanks, onSubmit]);
-    // ── WITH_WORD_BANK: direct input handling ─────────────────────────────────
-    const handleInputChange = useCallback((blankIndex, value) => {
-        if (isReviewMode)
-            return;
-        const updated = { ...filledAnswers, [blankIndex]: value };
-        setFilledAnswers(updated);
-        const answerArray = allBlanks.map(idx => updated[idx] || '');
-        onSubmit?.(answerArray);
-    }, [isReviewMode, filledAnswers, allBlanks, onSubmit]);
-    const usedWords = useMemo(() => {
-        const used = new Set();
-        Object.values(filledAnswers).forEach(w => { if (w)
-            used.add(w); });
-        return used;
-    }, [filledAnswers]);
-    // ── Example summary (blanks pre-filled) ───────────────────────────────────
-    const exampleEntries = useMemo(() => {
-        return allBlanks
-            .filter(idx => isExampleBlank(idx))
-            .map(idx => ({ blankIdx: idx, answer: answers[idx] || '' }))
-            .filter(e => e.answer);
-    }, [allBlanks, isExampleBlank, answers]);
-    // ── Render ────────────────────────────────────────────────────────────────
-    const headerGradient = withOptions
-        ? 'bg-gradient-to-br from-emerald-500 to-teal-600'
-        : isDefaultMode
-            ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
-            : 'bg-gradient-to-br from-teal-500 to-cyan-600';
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between 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 ${headerGradient} text-white shadow-sm`, children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
-                                ? 'overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm'
-                                : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-5 py-3 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
-                                        if (segment.type === 'text') {
-                                            return _jsx("span", { children: segment.value }, idx);
-                                        }
-                                        const blankIdx = segment.index;
-                                        const filled = filledAnswers[blankIdx];
-                                        const isCorrectFill = isReviewMode && filled === answers[blankIdx];
-                                        const isWrongFill = isReviewMode && !!filled && filled !== answers[blankIdx];
-                                        const example = isExampleBlank(blankIdx);
-                                        // ── Example blank: always shown pre-filled ──────────────────
-                                        if (example) {
-                                            return _jsx(ExampleBadge, { text: answers[blankIdx] || '___' }, idx);
-                                        }
-                                        // ── WITH_OPTIONS blank ──────────────────────────────────────
-                                        if (withOptions) {
-                                            const isExpanded = expandedBlank === blankIdx;
-                                            const blankOptions = wordBank[blankIdx]?.options || [];
-                                            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-middle", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : blankIdx), disabled: isReviewMode, className: cn('inline-flex min-w-[80px] items-center rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all', isReviewMode
-                                                            ? isCorrectFill
-                                                                ? 'border-green-400 bg-green-50 text-green-800'
-                                                                : isWrongFill
-                                                                    ? 'border-red-400 bg-red-50 text-red-800'
-                                                                    : 'border-gray-300 bg-gray-50 text-gray-400'
-                                                            : isExpanded
-                                                                ? 'border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200'
-                                                                : filled
-                                                                    ? 'cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100'
-                                                                    : 'cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
-                                                                ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
-                                                                : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }), isExpanded && !isReviewMode && blankOptions.length > 0 && (_jsx("div", { className: "absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg", children: blankOptions.map((opt, optIdx) => (_jsx("button", { type: "button", onClick: (e) => {
-                                                                e.stopPropagation();
-                                                                handleSelectOption(blankIdx, opt);
-                                                                setExpandedBlank(null);
-                                                            }, className: cn('whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all', filled === opt
-                                                                ? 'bg-teal-500 text-white'
-                                                                : 'bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700'), children: opt }, optIdx))) }))] }, idx));
-                                        }
-                                        // ── WITH_WORD_BANK or DEFAULT blank ─────────────────────────
-                                        if (isDefaultMode) {
-                                            // DEFAULT: read-only inputs in review, otherwise show filled/empty state
-                                            return (_jsxs("span", { className: cn('mx-1 inline-flex min-w-[80px] items-center justify-center rounded border-2 px-3 py-0.5 text-sm font-semibold align-middle', isReviewMode
-                                                    ? isCorrectFill
-                                                        ? 'border-green-400 bg-green-50 text-green-800'
-                                                        : isWrongFill
-                                                            ? 'border-red-400 bg-red-50 text-red-800'
-                                                            : 'border-dashed border-gray-300 bg-gray-50 text-gray-400'
-                                                    : filled
-                                                        ? 'border-indigo-300 bg-indigo-50 text-indigo-800'
-                                                        : 'border-dashed border-gray-300 bg-white text-gray-400'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
-                                                        ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
-                                                        : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }, idx));
-                                        }
-                                        // WITH_WORD_BANK input field
-                                        return (_jsxs("span", { className: "mx-1 inline-flex items-center align-middle", children: [_jsx("input", { type: "text", value: filled || '', onChange: (e) => handleInputChange(blankIdx, e.target.value), disabled: isReviewMode, placeholder: `(${blankIdx + 1})`, className: cn('inline-flex min-w-[80px] max-w-[120px] rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all outline-none', isReviewMode
-                                                        ? isCorrectFill
-                                                            ? 'border-green-400 bg-green-50 text-green-800'
-                                                            : isWrongFill
-                                                                ? 'border-red-400 bg-red-50 text-red-800'
-                                                                : 'border-gray-300 bg-gray-50 text-gray-400'
-                                                        : filled
-                                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
-                                                            : 'border-gray-300 bg-white text-gray-400 placeholder:text-gray-300', 'focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200', isReviewMode ? 'cursor-default' : 'cursor-text') }), isReviewMode && filled && (_jsx("span", { className: "ml-1", children: isCorrectFill
-                                                        ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
-                                                        : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }) }))] }, idx));
-                                    }) })] }), !withOptions && !isDefaultMode && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Word Bank (Reference)" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: wordBank.map((item, index) => {
-                                        const isUsed = usedWords.has(item.word);
-                                        const isExampleWord = item.isExample;
-                                        const hasImage = item.imageUrl && item.imageUrl.trim() !== '';
-                                        return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 rounded-xl border-2 p-3', isExampleWord
-                                                ? 'border-amber-300 bg-amber-50'
-                                                : isUsed
-                                                    ? 'border-emerald-200 bg-emerald-50 opacity-60'
-                                                    : 'border-gray-200 bg-gray-50'), children: [hasImage && _jsx(WordBankImage, { imageUrl: item.imageUrl }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: cn('text-sm font-semibold', isExampleWord ? 'text-amber-700' : isUsed ? 'text-emerald-700' : 'text-gray-700'), children: item.word }), isExampleWord && (_jsxs("span", { className: "flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600", children: [_jsx(Star, { className: "h-2.5 w-2.5 fill-amber-400 text-amber-400" }), "example"] })), isUsed && !isExampleWord && (_jsx("span", { className: "flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600", children: "used" }))] })] }, index));
-                                    }) })] })), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answers.map((answer, index) => {
-                                        if (isExampleBlank(index))
-                                            return null;
-                                        return (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: ['{' + index + '}', ": ", answer] }, index));
-                                    }) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
-}
+"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as a,useEffect as l,useCallback as n,useMemo as s}from"react";import{Check as d,X as i,FileText as o,Star as m,Mail as c}from"lucide-react";import{usePresignedFileUrl as g}from"../../../../shared/lib/hooks";import{cn as b}from"../../../../shared/lib/utils";function x({imageUrl:r}){const{previewUrl:t,isLoading:a}=g(r);return a?e("div",{className:"flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100",children:e("div",{className:"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-teal-500"})}):t?e("img",{src:t,alt:"",className:"h-16 w-16 rounded-lg object-cover border border-gray-200"}):null}function p({text:t}){return r("span",{className:"mx-1 inline-flex items-center gap-1 rounded-sm border border-amber-300 bg-amber-100 px-2.5 py-0.5 text-sm font-semibold text-amber-800 align-middle",children:[e(m,{className:"h-3 w-3 fill-amber-400 text-amber-400 shrink-0"}),t]})}export function WordFillParagraphClient({questionData:h,onSubmit:u,isReviewMode:f=!1,userAnswer:y,autoFillCorrectAnswers:w=!1,explanation:N}){const{title:v="",paragraph:k="",wordBank:j=[],answers:E=[],exampleAnswer:S=[],imageUrl:U,emailFrom:A,emailTo:C}=h,F=function(e){return e.length>0&&Array.isArray(e[0]?.options)}(j),I=!F&&0===j.length,$=s(()=>{if(F||I)return new Set;const e=new Set;return j.forEach(r=>{if(r.isExample){const t=E.indexOf(r.word);t>=0&&e.add(t)}}),e},[F,I,j,E]),_=s(()=>{if(!I||!S?.length)return new Set;const e=new Set(S),r=new Set;return E.forEach((t,a)=>{e.has(t)&&r.add(a)}),r},[I,S,E]),B=n(e=>F?!!j[e]?.isExample:I?_.has(e):$.has(e),[F,I,j,$,_]),[L,O]=a(()=>{const e={};return y?y.forEach((r,t)=>{e[t]=r}):w&&E.forEach((r,t)=>{e[t]=r}),e});l(()=>{if(y){const e={};y.forEach((r,t)=>{e[t]=r}),O(e)}},[y]);const{previewUrl:P,isLoading:R}=g(U||""),T=s(()=>function(e){const r=[],t=/\{(\d+)\}/g;let a,l=0;for(;null!==(a=t.exec(e));)a.index>l&&r.push({type:"text",value:e.slice(l,a.index)}),r.push({type:"blank",index:parseInt(a[1],10)}),l=t.lastIndex;return l<e.length&&r.push({type:"text",value:e.slice(l)}),r}(k),[k]),W=s(()=>T.filter(e=>"blank"===e.type).map(e=>e.index),[T]),q=s(()=>W.filter(e=>!B(e)),[W,B]),z=q.every(e=>L[e]),D=f&&q.every(e=>L[e]===E[e]),G=N||h.explanation,[M,H]=a(null),J=n((e,r)=>{if(f)return;const t={...L,[e]:r};O(t);const a=W.map(e=>t[e]||"");u?.(a)},[f,L,W,u]),K=n((e,r)=>{if(f)return;const t={...L,[e]:r};O(t);const a=W.map(e=>t[e]||"");u?.(a)},[f,L,W,u]),Q=s(()=>{const e=new Set;return Object.values(L).forEach(r=>{r&&e.add(r)}),e},[L]),V=s(()=>W.filter(e=>B(e)).map(e=>({blankIdx:e,answer:E[e]||""})).filter(e=>e.answer),[W,B,E]);return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between 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 ${F?"bg-gradient-to-br from-emerald-500 to-teal-600":I?"bg-gradient-to-br from-indigo-500 to-blue-600":"bg-gradient-to-br from-teal-500 to-cyan-600"} text-white shadow-sm`,children:e(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Điền từ vào đoạn văn"})]}),f&&z&&r("div",{className:b("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",D?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(D?d:i,{className:"h-3.5 w-3.5"}),D?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[v&&e("h2",{className:"text-center text-xl font-bold text-gray-900",children:v}),V.length>0&&r("div",{className:"flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5",children:[r("div",{className:"flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0",children:[e(m,{className:"h-3.5 w-3.5 fill-amber-400 text-amber-400"}),"Đã điền sẵn (Example):"]}),V.map(({blankIdx:t,answer:a})=>r("span",{className:"inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800",children:[e("span",{className:"text-amber-500",children:"{"+t+"}"}),a]},t))]}),(P||U)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:R?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500"})}):e("img",{src:P||U,alt:v,className:"max-h-56 w-auto object-contain p-2"})})}),r("div",{className:A||C?"overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm":"rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50",children:[(A||C)&&r(t,{children:[r("div",{className:"flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5",children:[e("span",{className:"h-3 w-3 rounded-full bg-red-400"}),e("span",{className:"h-3 w-3 rounded-full bg-yellow-400"}),e("span",{className:"h-3 w-3 rounded-full bg-green-400"}),r("div",{className:"ml-3 flex items-center gap-1.5 text-xs text-gray-400",children:[e(c,{className:"h-3.5 w-3.5"}),e("span",{children:"Email"})]})]}),r("div",{className:"border-b border-gray-200 bg-gray-50 px-5 py-3 space-y-1.5 text-sm",children:[A&&r("div",{className:"flex items-baseline gap-2",children:[e("span",{className:"w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400",children:"From"}),e("span",{className:"font-medium text-gray-800",children:A})]}),C&&r("div",{className:"flex items-baseline gap-2",children:[e("span",{className:"w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400",children:"To"}),e("span",{className:"font-medium text-gray-800",children:C})]})]})]}),e("div",{className:"text-base leading-loose text-gray-800 whitespace-pre-wrap "+(A||C?"p-5 bg-white":"p-5 bg-gradient-to-r from-gray-50 to-slate-50"),children:T.map((t,a)=>{if("text"===t.type)return e("span",{children:t.value},a);const l=t.index,n=L[l],s=f&&n===E[l],o=f&&!!n&&n!==E[l];if(B(l))return e(p,{text:E[l]||"___"},a);if(F){const t=M===l,m=j[l]?.options||[];return r("span",{className:"relative mx-1 inline-flex flex-col items-center align-middle",children:[r("button",{type:"button",onClick:()=>!f&&H(t?null:l),disabled:f,className:b("inline-flex min-w-[80px] items-center rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-gray-300 bg-gray-50 text-gray-400":t?"border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200":n?"cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100":"cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50"),children:[n||`(${l+1})`,f&&n&&(s?e(d,{className:"ml-1 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-1 h-3.5 w-3.5 text-red-600"}))]}),t&&!f&&m.length>0&&e("div",{className:"absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg",children:m.map((r,t)=>e("button",{type:"button",onClick:e=>{e.stopPropagation(),J(l,r),H(null)},className:b("whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all",n===r?"bg-teal-500 text-white":"bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700"),children:r},t))})]},a)}return r("span",I?{className:b("mx-1 inline-flex min-w-[80px] items-center justify-center rounded border-2 px-3 py-0.5 text-sm font-semibold align-middle",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-dashed border-gray-300 bg-gray-50 text-gray-400":n?"border-indigo-300 bg-indigo-50 text-indigo-800":"border-dashed border-gray-300 bg-white text-gray-400"),children:[n||`(${l+1})`,f&&n&&(s?e(d,{className:"ml-1 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-1 h-3.5 w-3.5 text-red-600"}))]}:{className:"mx-1 inline-flex items-center align-middle",children:[e("input",{type:"text",value:n||"",onChange:e=>K(l,e.target.value),disabled:f,placeholder:`(${l+1})`,className:b("inline-flex min-w-[80px] max-w-[120px] rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all outline-none",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-gray-300 bg-gray-50 text-gray-400":n?"border-teal-300 bg-teal-50 text-teal-700":"border-gray-300 bg-white text-gray-400 placeholder:text-gray-300","focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200",f?"cursor-default":"cursor-text")}),f&&n&&e("span",{className:"ml-1",children:s?e(d,{className:"h-3.5 w-3.5 text-green-600"}):e(i,{className:"h-3.5 w-3.5 text-red-600"})})]},a)})})]}),!F&&!I&&r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-gray-500",children:"Word Bank (Reference)"}),e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",children:j.map((t,a)=>{const l=Q.has(t.word),n=t.isExample,s=t.imageUrl&&""!==t.imageUrl.trim();return r("div",{className:b("flex flex-col items-center gap-2 rounded-xl border-2 p-3",n?"border-amber-300 bg-amber-50":l?"border-emerald-200 bg-emerald-50 opacity-60":"border-gray-200 bg-gray-50"),children:[s&&e(x,{imageUrl:t.imageUrl}),r("div",{className:"flex flex-col items-center gap-1",children:[e("span",{className:b("text-sm font-semibold",n?"text-amber-700":l?"text-emerald-700":"text-gray-700"),children:t.word}),n&&r("span",{className:"flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600",children:[e(m,{className:"h-2.5 w-2.5 fill-amber-400 text-amber-400"}),"example"]}),l&&!n&&e("span",{className:"flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600",children:"used"})]})]},a)})})]}),f&&!D&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-green-600",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:E.map((e,t)=>B(t)?null:r("span",{className:"rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800",children:["{"+t+"}",": ",e]},t))})]}),f&&G&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-blue-600",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:G})]})]})]})})}