@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/choose-correct-adjective/ChooseCorrectAdjectiveCreator.js

@@ -1,169 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Label } from '../../../../components/ui/label';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { RadioGroup } from '../../../../components/ui/radio-group';
-import { toast } from 'sonner';
-import { Pencil, Eye, Plus, Trash2, Lightbulb, CheckCircle2, MessageSquare, Type, BookOpen } from 'lucide-react';
-import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { ChooseCorrectAdjectiveClient } from './ChooseCorrectAdjectiveClient';
-function ChooseCorrectAdjectiveCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, optionCount = 3, }) {
-    // ============ STATE ============
-    const [sentence, setSentence] = useState(initialData?.sentence || '');
-    const [options, setOptions] = useState(initialData?.options && initialData.options.length > 0
-        ? initialData.options
-        : Array.from({ length: optionCount }, () => ''));
-    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer ?? -1);
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [points, setPoints] = useState(initialData?.points || 1);
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    // Refs for initialization tracking
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // Update onChange ref when it changes
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // ============ SYNC INITIAL DATA ============
-    useEffect(() => {
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (initialDataChanged) {
-            isInitializingRef.current = true;
-            previousInitialDataRef.current = initialData;
-            // Reset to initial data values, or defaults if initialData is empty/undefined (new question)
-            setSentence(initialData?.sentence || '');
-            setOptions(initialData?.options && initialData.options.length > 0
-                ? initialData.options
-                : Array.from({ length: optionCount }, () => ''));
-            setCorrectAnswer(initialData?.correctAnswer ?? -1);
-            setExplanation(initialData?.explanation || '');
-            setPoints(initialData?.points || 1);
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData, optionCount]);
-    // ============ ON CHANGE CALLBACK ============
-    // NOTE: We stringify options for proper change detection since array reference doesn't change
-    const optionsString = JSON.stringify(options);
-    useEffect(() => {
-        const payload = {
-            sentence,
-            options,
-            correctAnswer,
-            explanation,
-            points,
-        };
-        const payloadString = JSON.stringify(payload);
-        // Skip if payload hasn't changed OR if we're still in initial mount
-        // Only skip onChange if the payload is the SAME as before (duplicate prevention)
-        // This allows user changes even during initialization window
-        if (previousPayloadRef.current === payloadString) {
-            return;
-        }
-        // If we're initializing, just update the ref but don't trigger onChange
-        // This prevents the initial data load from triggering unsaved changes
-        if (isInitializingRef.current) {
-            previousPayloadRef.current = payloadString;
-            return;
-        }
-        previousPayloadRef.current = payloadString;
-        debouncedOnChange(payload);
-    }, [sentence, optionsString, correctAnswer, explanation, points]);
-    // ============ VALIDATION ============
-    const isValid = () => {
-        if (!sentence.trim() || !sentence.includes('{0}')) {
-            return false;
-        }
-        if (options.filter((o) => o.trim()).length < 2) {
-            return false;
-        }
-        if (correctAnswer < 0 || correctAnswer >= options.length) {
-            return false;
-        }
-        return true;
-    };
-    // Handle option change
-    const handleOptionChange = (index, value) => {
-        const newOptions = [...options];
-        newOptions[index] = value;
-        setOptions(newOptions);
-    };
-    // Handle add option
-    const handleAddOption = () => {
-        setOptions([...options, '']);
-    };
-    // Handle delete option
-    const handleDeleteOption = (index) => {
-        const newOptions = options.filter((_, i) => i !== index);
-        setOptions(newOptions);
-        // Adjust correctAnswer if needed
-        if (correctAnswer === index) {
-            setCorrectAnswer(-1);
-        }
-        else if (correctAnswer > index) {
-            setCorrectAnswer(correctAnswer - 1);
-        }
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!sentence.trim()) {
-            toast.error('Vui lòng nhập câu hỏi!');
-            return;
-        }
-        if (!sentence.includes('{0}')) {
-            toast.error('Câu hỏi phải có chỗ trống {0}!');
-            return;
-        }
-        if (options.filter((o) => o.trim()).length < 2) {
-            toast.error('Vui lòng nhập ít nhất 2 đáp án!');
-            return;
-        }
-        if (correctAnswer < 0 || correctAnswer >= options.length) {
-            toast.error('Vui lòng chọn đáp án đúng!');
-            return;
-        }
-        onSave?.({
-            sentence,
-            options,
-            correctAnswer,
-            explanation,
-            points,
-        });
-    };
-    // ============ CLIENT MODE PREVIEW ============
-    if (isClientMode) {
-        const questionData = {
-            sentence,
-            options,
-            correctAnswer,
-            explanation,
-        };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Choose the correct adjective (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ChooseCorrectAdjectiveClient, { questionData: questionData, isReviewMode: true, userAnswer: correctAnswer !== -1 ? correctAnswer : undefined })] }));
-    }
-    // ============ CREATOR UI ============
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md", children: _jsx(Type, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Ch\u1ECDn t\u00EDnh t\u1EEB \u0111\u00FAng" }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u1ECDn d\u1EA1ng \u0111\u00FAng c\u1EE7a t\u00EDnh t\u1EEB \u0111\u1EC3 ho\u00E0n th\u00E0nh c\u00E2u" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !sentence.trim() || options.filter((o) => o.trim()).length < 1, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsx("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-purple-600" }) }), _jsxs("div", { className: "text-sm text-purple-900", children: [_jsx("p", { className: "font-semibold text-purple-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-purple-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800", children: '{0}' }), " \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "Nh\u1EADp 3 d\u1EA1ng t\u00EDnh t\u1EEB: nguy\u00EAn m\u1EABu / so s\u00E1nh h\u01A1n / so s\u00E1nh nh\u1EA5t"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng b\u1EB1ng c\u00E1ch click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-purple-400" }), "V\u00ED d\u1EE5: ", _jsxs("code", { className: "ml-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800 select-all cursor-pointer", title: "Click \u0111\u1EC3 copy", children: ["The elephant is a very ", '{0}', " animal."] })] })] })] })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "sentence", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-purple-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "sentence", value: sentence, onChange: (e) => setSentence(e.target.value), placeholder: "V\u00ED d\u1EE5: The elephant is a very {0} animal.", className: `min-h-[80px] border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 ${!sentence.includes('{0}') && sentence ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 2 }), !sentence.includes('{0}') && sentence && (_jsxs("p", { className: "text-sm text-red-600", children: ["\u26A0\uFE0F C\u00E2u c\u1EA7n c\u00F3 ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-red-100 px-1", children: '{0}' })] }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-violet-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-violet-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-violet-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-violet-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", options.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddOption, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(RadioGroup, { value: correctAnswer.toString(), onValueChange: (value) => setCorrectAnswer(Number(value)), children: options.map((option, index) => {
-                                    const isCorrect = correctAnswer === index;
-                                    const optionLetter = String.fromCharCode(65 + index);
-                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
-                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
-                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
-                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                        : 'bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600'}`, onClick: () => setCorrectAnswer(index), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${index}`, value: option, onChange: (e) => handleOptionChange(index, e.target.value), placeholder: `Nhập đáp án ${optionLetter}...`, className: "border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200" }), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setCorrectAnswer(index), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), options.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDeleteOption(index), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
-                                }) }), correctAnswer === -1 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), sentence && options.filter((o) => o.trim()).length >= 2 && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsx("p", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wide", children: "Xem tr\u01B0\u1EDBc:" }), _jsxs("p", { className: "mt-2 text-sm text-gray-700", children: [sentence.split('{0}').map((part, index, arr) => (_jsxs("span", { children: [part, index < arr.length - 1 && (_jsx("span", { className: "mx-1 inline-block text-purple-600", children: "______" }))] }, index))), _jsxs("span", { className: "text-gray-500", children: [" (", options.filter((o) => o.trim()).join(' / '), ")"] })] }), correctAnswer >= 0 && options[correctAnswer] && (_jsxs("p", { className: "mt-2 flex items-center gap-2 text-sm text-green-600", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), sentence.replace('{0}', options[correctAnswer])] }))] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
-}
-export function ChooseCorrectAdjectiveCreator(props) {
-    return _jsx(ChooseCorrectAdjectiveCreatorContent, { ...props });
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as s}from"react";import{Button as a}from"../../../../components/ui/button";import{Label as l}from"../../../../components/ui/label";import{Input as i}from"../../../../components/ui/input";import{Textarea as c}from"../../../../components/ui/textarea";import{PointsInput as o}from"../../../../components/ui/points-input";import{Card as d,CardContent as m,CardHeader as h,CardTitle as p}from"../../../../components/ui/card";import{RadioGroup as g}from"../../../../components/ui/radio-group";import{toast as u}from"sonner";import{Pencil as x,Eye as f,Plus as b,Trash2 as N,Lightbulb as v,CheckCircle2 as w,MessageSquare as y,Type as C,BookOpen as j}from"lucide-react";import{useDebouncedCallback as k}from"../../../../shared/lib/hooks";import{ChooseCorrectAdjectiveClient as A}from"./ChooseCorrectAdjectiveClient";function S({initialData:u,onSave:S,onCancel:z,onChange:_,externalErrors:V,optionCount:J=3}){const[O,T]=t(u?.sentence||""),[D,E]=t(u?.options&&u.options.length>0?u.options:Array.from({length:J},()=>"")),[G,M]=t(u?.correctAnswer??-1),[X,$]=t(u?.explanation||""),[q,F]=t(u?.points||1),[H,K]=t(!1),L=n(u),P=n(!1),Q=n(_),R=n("");s(()=>{Q.current=_},[_]);const B=k(e=>{Q.current?.(e)},300);s(()=>{JSON.stringify(L.current)!==JSON.stringify(u)&&(P.current=!0,L.current=u,T(u?.sentence||""),E(u?.options&&u.options.length>0?u.options:Array.from({length:J},()=>"")),M(u?.correctAnswer??-1),$(u?.explanation||""),F(u?.points||1),setTimeout(()=>{P.current=!1},150))},[u,J]);const I=JSON.stringify(D);s(()=>{const e={sentence:O,options:D,correctAnswer:G,explanation:X,points:q},r=JSON.stringify(e);R.current!==r&&(P.current?R.current=r:(R.current=r,B(e)))},[O,I,G,X,q]);if(H){const t={sentence:O,options:D,correctAnswer:G,explanation:X};return r("div",{className:"space-y-6",children:[e(d,{children:e(h,{children:r("div",{className:"flex items-center justify-between",children:[e(p,{children:"Choose the correct adjective (Preview)"}),r(a,{variant:"outline",size:"sm",onClick:()=>K(!1),children:[e(x,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(A,{questionData:t,isReviewMode:!0,userAnswer:-1!==G?G:void 0})]})}return r("div",{className:"space-y-6",children:[r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500"}),e(h,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md",children:e(C,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(p,{className:"text-xl font-bold text-gray-900",children:"Chọn tính từ đúng"}),e("p",{className:"text-sm text-gray-500",children:"Chọn dạng đúng của tính từ để hoàn thành câu"})]})]}),r(a,{variant:"outline",size:"sm",onClick:()=>K(!0),disabled:!O.trim()||D.filter(e=>e.trim()).length<1,className:"gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700",children:[e(f,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(m,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(o,{defaultValue:q,onChange:e=>F(Number(e.target.value)||1)})}),e("div",{className:"rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100",children:e(v,{className:"h-4 w-4 text-purple-600"})}),r("div",{className:"text-sm text-purple-900",children:[e("p",{className:"font-semibold text-purple-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-purple-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Sử dụng ",e("code",{className:"mx-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800",children:"{0}"})," để đánh dấu chỗ trống"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Nhập 3 dạng tính từ: nguyên mẫu / so sánh hơn / so sánh nhất"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Chọn đáp án đúng bằng cách click vào ô chữ cái hoặc icon ✓"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-purple-400"}),"Ví dụ: ",r("code",{className:"ml-1 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-purple-800 select-all cursor-pointer",title:"Click để copy",children:["The elephant is a very ","{0}"," animal."]})]})]})]})]})}),r("div",{className:"space-y-2",children:[r(l,{htmlFor:"sentence",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-purple-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:"sentence",value:O,onChange:e=>T(e.target.value),placeholder:"Ví dụ: The elephant is a very {0} animal.",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 "+(!O.includes("{0}")&&O?"border-red-400 focus:border-red-500 focus:ring-red-200":""),rows:2}),!O.includes("{0}")&&O&&r("p",{className:"text-sm text-red-600",children:["⚠️ Câu cần có chỗ trống ",e("code",{className:"rounded bg-red-100 px-1",children:"{0}"})]})]}),V&&V.length>0&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:V.map((r,t)=>e("li",{children:r},t))})]})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-violet-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-violet-400 to-purple-400"}),e(h,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-violet-100",children:e(v,{className:"h-3.5 w-3.5 text-violet-600"})}),r(p,{className:"text-lg font-semibold text-gray-800",children:["Các lựa chọn ",r("span",{className:"text-sm font-normal text-gray-500",children:["(",D.length," đáp án)"]})]})]}),r(a,{variant:"outline",size:"sm",onClick:()=>{E([...D,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(m,{className:"space-y-4",children:[e(g,{value:G.toString(),onValueChange:e=>M(Number(e)),children:D.map((t,n)=>{const s=G===n,l=String.fromCharCode(65+n);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(s?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(s?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600"),onClick:()=>M(n),children:l}),r("div",{className:"flex-1 space-y-2",children:[e(i,{id:`option-input-${n}`,value:t,onChange:e=>((e,r)=>{const t=[...D];t[e]=r,E(t)})(n,e.target.value),placeholder:`Nhập đáp án ${l}...`,className:"border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200"}),s&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(w,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[!s&&e(a,{type:"button",variant:"ghost",size:"sm",onClick:()=>M(n),className:"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(w,{className:"h-4 w-4"})}),D.length>2&&e(a,{variant:"ghost",size:"sm",onClick:()=>(e=>{const r=D.filter((r,t)=>t!==e);E(r),G===e?M(-1):G>e&&M(G-1)})(n),className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(N,{className:"h-4 w-4"})})]})]})},n)})}),-1===G&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),r("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:"Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng"})]})]}),O&&D.filter(e=>e.trim()).length>=2&&r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:[e("p",{className:"text-xs font-semibold text-gray-600 uppercase tracking-wide",children:"Xem trước:"}),r("p",{className:"mt-2 text-sm text-gray-700",children:[O.split("{0}").map((t,n,s)=>r("span",{children:[t,n<s.length-1&&e("span",{className:"mx-1 inline-block text-purple-600",children:"______"})]},n)),r("span",{className:"text-gray-500",children:[" (",D.filter(e=>e.trim()).join(" / "),")"]})]}),G>=0&&D[G]&&r("p",{className:"mt-2 flex items-center gap-2 text-sm text-green-600",children:[e(w,{className:"h-4 w-4"}),O.replace("{0}",D[G])]})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(h,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(j,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(m,{children:e(c,{id:"explanation",value:X,onChange:e=>$(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function ChooseCorrectAdjectiveCreator(r){return e(S,{...r})}

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

@@ -1,2 +1 @@
-export * from './ChooseCorrectAdjectiveCreator';
-export * from './ChooseCorrectAdjectiveClient';
+export*from"./ChooseCorrectAdjectiveCreator";export*from"./ChooseCorrectAdjectiveClient";

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

@@ -1,55 +1 @@
-import { ChooseCorrectAdjectiveCreator } from './ChooseCorrectAdjectiveCreator';
-export const chooseCorrectAdjectiveRegistration = {
-    component: ChooseCorrectAdjectiveCreator,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || answer?.points || 1);
-        let creatorData = answer;
-        if (content && (content.sentence !== undefined || content.options)) {
-            creatorData = {
-                sentence: content.sentence || '',
-                options: content.options || [],
-                correctAnswer: answer?.answer ?? -1,
-                explanation: initialData?.explanation || content.explanation || '',
-                points,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        optionCount: ctx.optionCount || 3,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        points: data.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data.explanation || '',
-        content: {
-            sentence: data.sentence,
-            options: data.options,
-        },
-        answer: {
-            answer: data.correctAnswer,
-        },
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        points: data.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data.explanation || '',
-        content: {
-            sentence: data.sentence,
-            options: data.options,
-        },
-        answer: {
-            answer: data.correctAnswer,
-        },
-    }),
-};
+import{ChooseCorrectAdjectiveCreator as t}from"./ChooseCorrectAdjectiveCreator";export const chooseCorrectAdjectiveRegistration={component:t,transformInitialData:t=>{const e=t?.content,n=t?.answer,o=t?.total_points?parseFloat(t.total_points):t?.points||n?.points||1;let s=n;return e&&(void 0!==e.sentence||e.options)&&(s={sentence:e.sentence||"",options:e.options||[],correctAnswer:n?.answer??-1,explanation:t?.explanation||e.explanation||"",points:o}),s},getExtraProps:t=>({optionCount:t.optionCount||3}),wrapOnSave:(t,e)=>({type:e.questionType,points:t.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,explanation:t.explanation||"",content:{sentence:t.sentence,options:t.options},answer:{answer:t.correctAnswer}}),wrapOnChange:(t,e)=>({type:e.questionType,points:t.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,explanation:t.explanation||"",content:{sentence:t.sentence,options:t.options},answer:{answer:t.correctAnswer}})};

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

@@ -1,16 +1 @@
-export const transformChooseCorrectAdjective = (question) => {
-    const contentData = question.content;
-    const answerData = question.answer;
-    if (!contentData?.sentence || !contentData?.options) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    return {
-        apiContent: {
-            sentence: contentData.sentence,
-            options: contentData.options,
-        },
-        apiCorrectAnswer: {
-            answer: answerData?.answer ?? -1,
-        },
-    };
-};
+export const transformChooseCorrectAdjective=e=>{const n=e.content,t=e.answer;return n?.sentence&&n?.options?{apiContent:{sentence:n.sentence,options:n.options},apiCorrectAnswer:{answer:t?.answer??-1}}:{apiContent:{},apiCorrectAnswer:{}}};

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

@@ -1,131 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { Check, X, CircleHelp, Lightbulb, ClipboardList, Users, BookOpen } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-// Helper component to resolve presigned URL for each image option
-function OptionImage({ src, alt, className }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(src);
-    if (isLoading) {
-        return (_jsx("div", { className: "flex h-16 w-16 items-center justify-center", children: _jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" }) }));
-    }
-    return (
-    /* eslint-disable-next-line @next/next/no-img-element */
-    _jsx("img", { src: previewUrl || src, alt: alt, className: cn('max-h-20 w-auto object-contain rounded-md', className), onError: (e) => {
-            const target = e.target;
-            target.onerror = null;
-            target.src = '/images/placeholder-image.svg';
-        } }));
-}
-export function ChooseTheCorrectAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer, questionConfig, }) {
-    const isMultipleAnswers = Boolean(questionData.multipleAnswers || Array.isArray(questionData.correctAnswer));
-    const normalizedCorrectAnswers = useMemo(() => Array.isArray(questionData.correctAnswer)
-        ? questionData.correctAnswer
-        : questionData.correctAnswer === -1
-            ? []
-            : [questionData.correctAnswer], [questionData.correctAnswer]);
-    const normalizedUserAnswers = useMemo(() => userAnswer === undefined
-        ? []
-        : Array.isArray(userAnswer)
-            ? userAnswer
-            : userAnswer === -1
-                ? []
-                : [userAnswer], [userAnswer]);
-    // State
-    const [selectedAnswer, setSelectedAnswer] = useState(normalizedUserAnswers);
-    // Custom hooks
-    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(questionData.imageUrl || '');
-    // Sync userAnswer when it changes (e.g., when loading from server in review mode)
-    useEffect(() => {
-        setSelectedAnswer(normalizedUserAnswers);
-    }, [normalizedUserAnswers]);
-    // Handle answer change
-    const handleAnswerChange = (index) => {
-        if (isReviewMode)
-            return;
-        const nextAnswer = isMultipleAnswers
-            ? (selectedAnswer.includes(index)
-                ? selectedAnswer.filter((answer) => answer !== index)
-                : [...selectedAnswer, index].sort((a, b) => a - b))
-            : [index];
-        setSelectedAnswer(nextAnswer);
-        // Auto submit if callback provided
-        onSubmit?.(isMultipleAnswers ? nextAnswer : nextAnswer[0]);
-    };
-    // Check if answer is correct - only used in review mode
-    const isCorrect = (optionIndex) => {
-        // Only check correctness in review mode to prevent revealing answers
-        if (!isReviewMode)
-            return false;
-        return normalizedCorrectAnswers.includes(optionIndex);
-    };
-    const hasAnswered = selectedAnswer.length > 0;
-    const isAnswerCorrect = isReviewMode
-        && selectedAnswer.length === normalizedCorrectAnswers.length
-        && selectedAnswer.every((answer) => normalizedCorrectAnswers.includes(answer));
-    const formatAnswerLabel = (answers) => {
-        if (answers.length === 0)
-            return '(Chưa trả lời)';
-        return answers.map((answerIndex) => {
-            const answerLetter = String.fromCharCode(65 + answerIndex);
-            return questionData.optionType === 'image'
-                ? `Đáp án ${answerLetter}`
-                : `${answerLetter}. ${questionData.options[answerIndex]}`;
-        }).join(', ');
-    };
-    // Visibility toggles based on questionConfig (from template)
-    // Default to displaying if no config provided
-    const showQuestion = !questionConfig || questionConfig.length === 0 || questionConfig.includes('question');
-    const showImage = !questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('image');
-    console.log('questionConfig', questionConfig);
-    console.log('showImage', showImage);
-    const showOptions = !questionConfig || questionConfig.length === 0 || questionConfig.includes('options');
-    // Clean up imageUrl, often it might be just an empty space ' ' from DB
-    const cleanImageUrl = questionData.imageUrl?.trim() ? questionData.imageUrl : '';
-    const hasArticles = Array.isArray(questionData.articles) && questionData.articles.length > 0;
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isGroup && (questionData.groupTitle || questionData.groupSubtitle || questionData.groupContent || questionData.groupImageUrl || hasArticles) && (_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: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: questionData.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: ["B\u00E0i \u0111\u1ECDc ", questionData.groupNumber] })) }), questionData.groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: questionData.groupTitle })), questionData.groupSubtitle && (_jsx("p", { className: "mt-1 text-sm text-slate-500 leading-snug", children: questionData.groupSubtitle }))] })] }), hasArticles && (_jsx("div", { className: "flex flex-col gap-4", children: questionData.articles.map((article, i) => (_jsxs("div", { className: "group relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-all hover:shadow-md hover:border-indigo-200", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 bg-gradient-to-r from-indigo-50/60 to-blue-50/40 px-4 py-2.5", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-xs font-bold text-white shadow-sm", children: String.fromCharCode(65 + i) }), _jsx("h5", { className: "flex-1 truncate text-sm font-bold text-slate-800", children: article.name || `Bài viết ${i + 1}` })] }), _jsxs("div", { className: "flex flex-col gap-3 p-4 sm:flex-row sm:items-start", children: [article.imageUrl && (_jsx("div", { className: "flex flex-shrink-0 items-center justify-center rounded-md bg-slate-50 p-2 sm:w-40", children: _jsx(OptionImage, { src: article.imageUrl, alt: article.name || `Article ${i + 1}`, className: "max-h-40 w-auto rounded-md object-contain" }) })), article.content && (_jsx("div", { className: "prose prose-sm prose-slate max-w-none flex-1 text-[14px] leading-relaxed text-slate-700", children: article.content.split('\n').map((line, j) => (_jsx("p", { className: "mb-2 last:mb-0", children: line }, j))) }))] })] }, i))) })), !hasArticles && (_jsxs("div", { className: "space-y-6 text-slate-700", children: [questionData.groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", dangerouslySetInnerHTML: {
-                                            __html: questionData.groupContent
-                                                .replace(/\{(\d+)\}/g, (_m, num) => `<span style="display:inline-block;min-width:100px;padding:1px 5px;margin:0 5px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(num) + 1})———</span>`)
-                                                .split('\n')
-                                                .map((line) => `<p class="last:mb-0">${line}</p>`)
-                                                .join(''),
-                                        } })), questionData.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(OptionImage, { src: questionData.groupImageUrl, alt: questionData.groupTitle || 'Group Image Attachment', className: "max-h-72 w-auto object-contain drop-shadow-sm rounded-lg" }) })] }))] }))] })] })), _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 bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: isMultipleAnswers ? 'Chọn các đáp án đúng' : 'Chọn đáp án đúng' })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
-                                    ? 'bg-green-100 text-green-700'
-                                    : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(questionData.askerName || questionData.answererName) && (_jsxs("div", { className: "flex items-center gap-4 rounded-lg border border-purple-100 bg-gradient-to-r from-purple-50 to-violet-50 px-4 py-3", children: [_jsx(Users, { className: "h-4 w-4 flex-shrink-0 text-purple-500" }), _jsxs("div", { className: "flex items-center gap-4 text-sm", children: [questionData.askerName && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "font-medium text-gray-500", children: "Ng\u01B0\u1EDDi h\u1ECFi:" }), _jsx("span", { className: "font-semibold text-purple-700", children: questionData.askerName })] })), questionData.askerName && questionData.answererName && (_jsx("div", { className: "h-4 w-px bg-purple-200" })), questionData.answererName && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "font-medium text-gray-500", children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi:" }), _jsx("span", { className: "font-semibold text-purple-700", children: questionData.answererName })] }))] })] })), showQuestion && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-100", children: _jsx("h3", { className: "text-base font-semibold text-gray-800 leading-relaxed", children: questionData.question || 'Câu hỏi chưa được nhập' }) })), showImage && (imagePreviewUrl || cleanImageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", 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: isLoading ? (_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-blue-500" }) })) : (
-                                        /* eslint-disable-next-line @next/next/no-img-element */
-                                        _jsx("img", { src: imagePreviewUrl || cleanImageUrl, 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';
-                                            } })) })] })), showOptions && (_jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: isMultipleAnswers ? 'Chọn một hoặc nhiều đáp án' : 'Chọn đáp án' }), questionData.options.map((option, index) => {
-                                        const isSelected = selectedAnswer.includes(index);
-                                        const isCorrectAnswer = isCorrect(index);
-                                        const letter = String.fromCharCode(65 + index);
-                                        return (_jsxs("button", { type: "button", onClick: () => handleAnswerChange(index), disabled: isReviewMode, className: cn('group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all', isReviewMode
-                                                ? isCorrectAnswer
-                                                    ? 'border-green-400 bg-green-50'
-                                                    : isSelected
-                                                        ? 'border-red-400 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'
-                                                : isSelected
-                                                    ? 'border-blue-500 bg-blue-50 shadow-sm ring-2 ring-blue-100'
-                                                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all', isReviewMode
-                                                        ? isCorrectAnswer
-                                                            ? 'bg-green-500 text-white'
-                                                            : isSelected
-                                                                ? 'bg-red-500 text-white'
-                                                                : 'bg-gray-200 text-gray-600'
-                                                        : isSelected
-                                                            ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), questionData.optionType === 'image' ? (_jsx("div", { className: "flex-1 flex items-center justify-center py-1", children: _jsx(OptionImage, { src: option, alt: `Đáp án ${letter}` }) })) : (_jsx("span", { className: cn('flex-1 text-sm font-medium', isReviewMode && isCorrectAnswer
-                                                        ? 'text-green-800'
-                                                        : isReviewMode && isSelected && !isCorrectAnswer
-                                                            ? 'text-red-800'
-                                                            : 'text-gray-700'), children: option })), isReviewMode && (isCorrectAnswer || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectAnswer ? 'bg-green-500' : 'bg-red-500'), children: isCorrectAnswer
-                                                        ? _jsx(Check, { className: "h-4 w-4 text-white" })
-                                                        : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, index));
-                                    })] })), !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", 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("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: isMultipleAnswers ? 'Vui lòng chọn ít nhất một đáp án' : 'Vui lòng chọn một đáp án' })] }))] })] }), isReviewMode && questionData.explanation && (_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 border-b border-blue-100 bg-white/50 px-4 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-gray-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-sm text-gray-700 leading-relaxed", children: questionData.explanation }) })] })), isReviewMode && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-gray-600 text-white shadow-sm", children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "T\u1ED5ng k\u1EBFt" })] }), _jsxs("div", { className: "p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-gray-50 p-3", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n:" }), _jsx("span", { className: cn('text-sm font-semibold', isAnswerCorrect ? 'text-green-600' : hasAnswered ? 'text-red-600' : 'text-gray-500'), children: formatAnswerLabel(selectedAnswer) })] }), _jsxs("div", { className: "flex items-center justify-between rounded-lg bg-green-50 p-3 border border-green-100", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-green-600", children: formatAnswerLabel(normalizedCorrectAnswers) })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-lg p-3 border', isAnswerCorrect
-                                    ? 'bg-green-50 border-green-200'
-                                    : 'bg-red-50 border-red-200'), children: [_jsx("span", { className: "text-sm text-gray-600", children: "K\u1EBFt qu\u1EA3:" }), _jsx("div", { className: cn('flex items-center gap-1.5 text-sm font-semibold', isAnswerCorrect ? 'text-green-600' : 'text-red-600'), children: isAnswerCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), _jsx("span", { children: "Ch\u00EDnh x\u00E1c" })] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { children: "Sai" })] })) })] })] })] }))] }));
-}
+"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as s,useEffect as a,useMemo as l}from"react";import{Check as n,X as i,CircleHelp as d,Lightbulb as o,ClipboardList as c,Users as m,BookOpen as g}from"lucide-react";import{usePresignedFileUrl as h}from"../../../../shared/lib/hooks";import{cn as b}from"../../../../shared/lib/utils";function p({src:r,alt:t,className:s}){const{previewUrl:a,isLoading:l}=h(r);return l?e("div",{className:"flex h-16 w-16 items-center justify-center",children:e("div",{className:"h-4 w-4 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500"})}):e("img",{src:a||r,alt:t,className:b("max-h-20 w-auto object-contain rounded-md",s),onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})}export function ChooseTheCorrectAnswerClient({questionData:x,onSubmit:u,isReviewMode:f=!1,userAnswer:N,questionConfig:w}){const v=Boolean(x.multipleAnswers||Array.isArray(x.correctAnswer)),y=l(()=>Array.isArray(x.correctAnswer)?x.correctAnswer:-1===x.correctAnswer?[]:[x.correctAnswer],[x.correctAnswer]),j=l(()=>void 0===N?[]:Array.isArray(N)?N:-1===N?[]:[N],[N]),[C,k]=s(j),{previewUrl:A,isLoading:U}=h(x.imageUrl||"");a(()=>{k(j)},[j]);const S=C.length>0,T=f&&C.length===y.length&&C.every(e=>y.includes(e)),$=e=>0===e.length?"(Chưa trả lời)":e.map(e=>{const r=String.fromCharCode(65+e);return"image"===x.optionType?`Đáp án ${r}`:`${r}. ${x.options[e]}`}).join(", "),q=!w||0===w.length||w.includes("question"),I=!w||0===w.length||w.includes("imageUrl")||w.includes("image");console.log("questionConfig",w),console.log("showImage",I);const B=!w||0===w.length||w.includes("options"),G=x.imageUrl?.trim()?x.imageUrl:"",L=Array.isArray(x.articles)&&x.articles.length>0;return r("div",{className:"space-y-4",children:[x.isGroup&&(x.groupTitle||x.groupSubtitle||x.groupContent||x.groupImageUrl||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(g,{className:"h-5 w-5 text-indigo-600"})}),r("div",{className:"flex-1 pt-1",children:[e("div",{className:"flex items-center gap-2 mb-1",children:x.groupNumber&&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:["Bài đọc ",x.groupNumber]})}),x.groupTitle&&e("h4",{className:"text-xl font-bold text-slate-800 leading-tight tracking-tight",children:x.groupTitle}),x.groupSubtitle&&e("p",{className:"mt-1 text-sm text-slate-500 leading-snug",children:x.groupSubtitle})]})]}),L&&e("div",{className:"flex flex-col gap-4",children:x.articles.map((t,s)=>r("div",{className:"group relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-all hover:shadow-md hover:border-indigo-200",children:[r("div",{className:"flex items-center gap-2 border-b border-slate-100 bg-gradient-to-r from-indigo-50/60 to-blue-50/40 px-4 py-2.5",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-xs font-bold text-white shadow-sm",children:String.fromCharCode(65+s)}),e("h5",{className:"flex-1 truncate text-sm font-bold text-slate-800",children:t.name||`Bài viết ${s+1}`})]}),r("div",{className:"flex flex-col gap-3 p-4 sm:flex-row sm:items-start",children:[t.imageUrl&&e("div",{className:"flex flex-shrink-0 items-center justify-center rounded-md bg-slate-50 p-2 sm:w-40",children:e(p,{src:t.imageUrl,alt:t.name||`Article ${s+1}`,className:"max-h-40 w-auto rounded-md object-contain"})}),t.content&&e("div",{className:"prose prose-sm prose-slate max-w-none flex-1 text-[14px] leading-relaxed text-slate-700",children:t.content.split("\n").map((r,t)=>e("p",{className:"mb-2 last:mb-0",children:r},t))})]})]},s))}),!L&&r("div",{className:"space-y-6 text-slate-700",children:[x.groupContent&&e("div",{className:"prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]",dangerouslySetInnerHTML:{__html:x.groupContent.replace(/\{(\d+)\}/g,(e,r)=>`<span style="display:inline-block;min-width:100px;padding:1px 5px;margin:0 5px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(r)+1})———</span>`).split("\n").map(e=>`<p class="last:mb-0">${e}</p>`).join("")}}),x.groupImageUrl&&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:x.groupImageUrl,alt:x.groupTitle||"Group Image Attachment",className:"max-h-72 w-auto object-contain drop-shadow-sm rounded-lg"})})]})]})]})]}),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 bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm",children:e(d,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:v?"Chọn các đáp án đúng":"Chọn đáp án đúng"})]}),f&&S&&r("div",{className:b("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",T?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(T?n:i,{className:"h-3.5 w-3.5"}),T?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-5",children:[(x.askerName||x.answererName)&&r("div",{className:"flex items-center gap-4 rounded-lg border border-purple-100 bg-gradient-to-r from-purple-50 to-violet-50 px-4 py-3",children:[e(m,{className:"h-4 w-4 flex-shrink-0 text-purple-500"}),r("div",{className:"flex items-center gap-4 text-sm",children:[x.askerName&&r("div",{className:"flex items-center gap-1.5",children:[e("span",{className:"font-medium text-gray-500",children:"Người hỏi:"}),e("span",{className:"font-semibold text-purple-700",children:x.askerName})]}),x.askerName&&x.answererName&&e("div",{className:"h-4 w-px bg-purple-200"}),x.answererName&&r("div",{className:"flex items-center gap-1.5",children:[e("span",{className:"font-medium text-gray-500",children:"Người trả lời:"}),e("span",{className:"font-semibold text-purple-700",children:x.answererName})]})]})]}),q&&e("div",{className:"rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-100",children:e("h3",{className:"text-base font-semibold text-gray-800 leading-relaxed",children:x.question||"Câu hỏi chưa được nhập"})}),I&&(A||G)&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",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:U?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-blue-500"})}):e("img",{src:A||G,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"}})})]}),B&&r("div",{className:"space-y-2.5",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:v?"Chọn một hoặc nhiều đáp án":"Chọn đáp án"}),x.options.map((t,s)=>{const a=C.includes(s),l=(d=s,!!f&&y.includes(d));var d;const o=String.fromCharCode(65+s);return r("button",{type:"button",onClick:()=>(e=>{if(f)return;const r=v?C.includes(e)?C.filter(r=>r!==e):[...C,e].sort((e,r)=>e-r):[e];k(r),u?.(v?r:r[0])})(s),disabled:f,className:b("group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all",f?l?"border-green-400 bg-green-50":a?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":a?"border-blue-500 bg-blue-50 shadow-sm ring-2 ring-blue-100":"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm"),children:[e("div",{className:b("flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all",f?l?"bg-green-500 text-white":a?"bg-red-500 text-white":"bg-gray-200 text-gray-600":a?"bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm":"bg-gray-100 text-gray-600 group-hover:bg-gray-200"),children:o}),"image"===x.optionType?e("div",{className:"flex-1 flex items-center justify-center py-1",children:e(p,{src:t,alt:`Đáp án ${o}`})}):e("span",{className:b("flex-1 text-sm font-medium",f&&l?"text-green-800":f&&a&&!l?"text-red-800":"text-gray-700"),children:t}),f&&(l||a)&&e("div",{className:b("flex h-6 w-6 items-center justify-center rounded-full",l?"bg-green-500":"bg-red-500"),children:e(l?n:i,{className:"h-4 w-4 text-white"})})]},s)})]}),!f&&!S&&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",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("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:v?"Vui lòng chọn ít nhất một đáp án":"Vui lòng chọn một đáp án"})]})]})]}),f&&x.explanation&&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 border-b border-blue-100 bg-white/50 px-4 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(o,{className:"h-4 w-4"})}),e("h4",{className:"text-sm font-semibold text-gray-800",children:"Giải thích"})]}),e("div",{className:"p-4",children:e("p",{className:"text-sm text-gray-700 leading-relaxed",children:x.explanation})})]}),f&&r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-gray-600 text-white shadow-sm",children:e(c,{className:"h-4 w-4"})}),e("h4",{className:"text-sm font-semibold text-gray-800",children:"Tổng kết"})]}),r("div",{className:"p-4 space-y-3",children:[r("div",{className:"flex items-center justify-between rounded-lg bg-gray-50 p-3",children:[e("span",{className:"text-sm text-gray-600",children:"Đáp án của bạn:"}),e("span",{className:b("text-sm font-semibold",T?"text-green-600":S?"text-red-600":"text-gray-500"),children:$(C)})]}),r("div",{className:"flex items-center justify-between rounded-lg bg-green-50 p-3 border border-green-100",children:[e("span",{className:"text-sm text-gray-600",children:"Đáp án đúng:"}),e("span",{className:"text-sm font-semibold text-green-600",children:$(y)})]}),r("div",{className:b("flex items-center justify-between rounded-lg p-3 border",T?"bg-green-50 border-green-200":"bg-red-50 border-red-200"),children:[e("span",{className:"text-sm text-gray-600",children:"Kết quả:"}),e("div",{className:b("flex items-center gap-1.5 text-sm font-semibold",T?"text-green-600":"text-red-600"),children:r(t,T?{children:[e(n,{className:"h-4 w-4"}),e("span",{children:"Chính xác"})]}:{children:[e(i,{className:"h-4 w-4"}),e("span",{children:"Sai"})]})})]})]})]})]})}