@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

package/dist/components/questions/viewer/QuestionViewer.js

@@ -1,446 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
-import { Input } from '../../../components/ui/input';
-import { Check, Volume2, X } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import { t } from '../../../shared/lib/i18n';
-import { ReadAndColorObjectsClient } from '../types/read-and-color-objects/ReadAndColorObjectsClient';
-import { ArrangeLettersIntoWordsClient } from '../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient';
-import { WriteShortParagraphClient } from '../types/write-short-paragraph/WriteShortParagraphClient';
-import { LabelThePictureClient } from '../types/label-the-picture/LabelThePictureClient';
-import { LookPictureFillWordHintClient } from '../types/look-picture-fill-word-hint/LookPictureFillWordHintClient';
-import { ReadPassageAndAnswerQuestionsClient } from '../types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient';
-import { ChooseTheCorrectAnswerClient } from '../types/choose-the-correct-answer/ChooseTheCorrectAnswerClient';
-import { WriteAShortLetterClient } from '../types/write-a-short-letter/WriteAShortLetterClient';
-import { LookPictureChooseCorrectAnswerClient } from '../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient';
-import { LookPictureFillBlankChooseAnswerClient } from '../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient';
-import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-grid/FillMissingWordsInGridClient';
-export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, }) {
-    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
-    const [playCount, setPlayCount] = useState(0);
-    const audioRef = useRef(null);
-    // State for TICK_TRUE_OR_FALSE / TICK_YES_OR_NO
-    const [tickCrossAnswers, setTickCrossAnswers] = useState(userAnswer || {});
-    // State for LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE
-    const answer = question.answer;
-    const [fillBlankAnswers, setFillBlankAnswers] = useState(userAnswer || Array(answer?.blanks?.length || 0).fill(''));
-    // State for LISTEN_AND_COLOR_OBJECTS (legacy - kept for compatibility but not used in new implementation)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [colorAnswers, setColorAnswers] = useState(userAnswer || {});
-    // State for READ_PASSAGE_AND_COMPLETE_STORY
-    const [passageFillAnswers, setPassageFillAnswers] = useState(userAnswer || {});
-    // State for VIEW_IMAGE_AND_FILL_IN_THE_BLANK
-    const [viewImageFillAnswers, setViewImageFillAnswers] = useState(userAnswer || {});
-    const handleAudioPlay = () => {
-        const answer = question.answer;
-        const maxPlay = answer.maxPlayCount || 3;
-        if (playCount >= maxPlay) {
-            toast.warning(t('common.audio.maxPlayReached', { maxPlay: String(maxPlay) }));
-            return;
-        }
-        audioRef.current?.play();
-        setPlayCount(playCount + 1);
-    };
-    const handleSubmit = () => {
-        onSubmitAnswer?.(selectedAnswer);
-    };
-    ;
-    const renderListeningFillBlank = () => {
-        const answer = question.answer;
-        const { audioUrl, blanks } = answer;
-        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-4 rounded-lg bg-blue-50 p-4", children: [_jsxs(Button, { onClick: handleAudioPlay, variant: "outline", className: "gap-2", children: [_jsx(Volume2, { className: "h-5 w-5" }), "Ph\u00E1t \u00E2m thanh (", playCount, "/", answer.maxPlayCount || 3, ")"] }), _jsx("audio", { ref: audioRef, src: audioUrl })] }), _jsx("div", { className: "space-y-3", children: blanks.map((_, idx) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "w-20 font-medium", children: ["Blank ", idx + 1, ":"] }), _jsx(Input, { value: fillBlankAnswers[idx], onChange: (e) => {
-                                    const newAnswers = [...fillBlankAnswers];
-                                    newAnswers[idx] = e.target.value;
-                                    setFillBlankAnswers(newAnswers);
-                                    setSelectedAnswer(newAnswers);
-                                }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", disabled: isReviewMode, className: isReviewMode
-                                    ? fillBlankAnswers[idx]?.toLowerCase() === blanks[idx]?.toLowerCase()
-                                        ? 'border-green-500 bg-green-50'
-                                        : 'border-red-500 bg-red-50'
-                                    : '' }), isReviewMode && (_jsxs("span", { className: "text-sm text-gray-600", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: blanks[idx] })] }))] }, idx))) })] }));
-    };
-    ;
-    ;
-    const renderReadingTickCross = () => {
-        const answer = question.answer;
-        const { statements } = answer;
-        return (_jsx("div", { className: "space-y-3", children: statements.map((statement) => (_jsx("div", { className: `rounded-lg border-2 p-4 ${isReviewMode && tickCrossAnswers[statement.id] === statement.isCorrect ? 'border-green-500 bg-green-50' : ''} ${isReviewMode && tickCrossAnswers[statement.id] !== statement.isCorrect ? 'border-red-500 bg-red-50' : 'border-gray-200'} `, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx("button", { onClick: () => {
-                                        const newAnswers = { ...tickCrossAnswers, [statement.id]: true };
-                                        setTickCrossAnswers(newAnswers);
-                                        setSelectedAnswer(newAnswers);
-                                    }, disabled: isReviewMode, className: `flex h-8 w-8 items-center justify-center rounded border-2 ${tickCrossAnswers[statement.id] === true ? 'border-green-500 bg-green-500 text-white' : 'border-gray-300'} `, children: _jsx(Check, { className: "h-5 w-5" }) }), _jsx("button", { onClick: () => {
-                                        const newAnswers = { ...tickCrossAnswers, [statement.id]: false };
-                                        setTickCrossAnswers(newAnswers);
-                                        setSelectedAnswer(newAnswers);
-                                    }, disabled: isReviewMode, className: `flex h-8 w-8 items-center justify-center rounded border-2 ${tickCrossAnswers[statement.id] === false ? 'border-red-500 bg-red-500 text-white' : 'border-gray-300'} `, children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("p", { className: "flex-1", children: statement.text }), isReviewMode && (_jsx("span", { className: "text-sm font-medium", children: statement.isCorrect ? '✓ Đúng' : '✗ Sai' }))] }) }, statement.id))) }));
-    };
-    const renderReadingLetterArrange = () => {
-        const answer = question.answer;
-        const correctAnswer = question.correctAnswer || question.correct_answer;
-        // Merge correctWord from correct_answer into subQuestions
-        const subQuestions = (answer?.subQuestions || []).map((sq) => {
-            const correctWord = correctAnswer?.answers?.[sq.id] || sq.correctWord || '';
-            return {
-                ...sq,
-                correctWord,
-            };
-        });
-        const questionData = {
-            subQuestions,
-        };
-        return (_jsx(ArrangeLettersIntoWordsClient, { questionData: questionData, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
-    };
-    const renderReadingPassageFill = () => {
-        const answer = question.answer;
-        const { passage, blanks } = answer;
-        // Split passage by placeholders
-        const parts = passage.split(/\{(\d+)\}/);
-        return (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "prose max-w-none", children: _jsx("div", { className: "text-lg leading-relaxed", children: parts.map((part, idx) => {
-                        const blankIndex = parseInt(part);
-                        if (!isNaN(blankIndex)) {
-                            const blank = blanks.find((b) => b.index === blankIndex);
-                            return (_jsxs("span", { className: "mx-1 inline-flex items-center", children: [_jsx(Input, { value: passageFillAnswers[blankIndex] || '', onChange: (e) => {
-                                            const newAnswers = { ...passageFillAnswers, [blankIndex]: e.target.value };
-                                            setPassageFillAnswers(newAnswers);
-                                            setSelectedAnswer(newAnswers);
-                                        }, className: `inline-block h-8 w-32 text-center ${isReviewMode && passageFillAnswers[blankIndex] === blank?.correctAnswer
-                                            ? 'border-green-500 bg-green-50'
-                                            : ''} ${isReviewMode && passageFillAnswers[blankIndex] !== blank?.correctAnswer
-                                            ? 'border-red-500 bg-red-50'
-                                            : ''} `, disabled: isReviewMode }), isReviewMode && (_jsxs("span", { className: "ml-2 text-sm text-green-600", children: ["(", blank?.correctAnswer, ")"] }))] }, idx));
-                        }
-                        return _jsx("span", { children: part }, idx);
-                    }) }) }) }));
-    };
-    // Basic question type renderers
-    ;
-    const renderChooseTheCorrectAnswer = () => {
-        const answer = question.answer;
-        const { isGroup, questionGroup } = question;
-        let questionData = {};
-        if (question.content && typeof question.content === 'object') {
-            questionData = {
-                ...question.content,
-                correctAnswer: question.correctAnswer?.answer ?? -1,
-                id: question.id,
-                isGroup,
-                groupTitle: questionGroup?.payload?.title,
-                groupContent: questionGroup?.payload?.content,
-                groupImageUrl: questionGroup?.payload?.imageUrl,
-                groupNumber: questionGroup?.groupNumber,
-            };
-        }
-        else {
-            questionData = {
-                ...answer,
-                question: question.content || answer?.question,
-                id: question.id,
-                isGroup,
-                groupTitle: questionGroup?.payload?.title,
-                groupContent: questionGroup?.payload?.content,
-                groupImageUrl: questionGroup?.payload?.imageUrl,
-                groupNumber: questionGroup?.groupNumber,
-            };
-        }
-        return (_jsx(ChooseTheCorrectAnswerClient, { questionData: questionData, questionConfig: question.questionConfig, onSubmit: (ans) => {
-                setSelectedAnswer(ans);
-                onSubmitAnswer?.(ans);
-            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
-    };
-    const renderFillInBlank = () => {
-        const answer = question.answer;
-        const { blanks, caseSensitive = false } = answer;
-        const handleBlankChange = (index, value) => {
-            const newAnswers = [...fillBlankAnswers];
-            newAnswers[index] = value;
-            setFillBlankAnswers(newAnswers);
-        };
-        const isCorrect = (index, value) => {
-            const correctAnswer = blanks[index];
-            return caseSensitive
-                ? value === correctAnswer
-                : value.toLowerCase() === correctAnswer.toLowerCase();
-        };
-        return (_jsxs("div", { className: "space-y-4", children: [blanks.map((correctAnswer, index) => {
-                    const userValue = fillBlankAnswers[index] || '';
-                    const isCorrectAnswer = isReviewMode && isCorrect(index, userValue);
-                    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["Ch\u1ED7 tr\u1ED1ng ", index + 1, ":"] }), _jsx(Input, { value: userValue, onChange: (e) => handleBlankChange(index, e.target.value), placeholder: "Nh\u1EADp \u0111\u00E1p \u00E1n...", className: `flex-1 ${isReviewMode
-                                    ? isCorrectAnswer
-                                        ? 'border-green-500 bg-green-50'
-                                        : 'border-red-500 bg-red-50'
-                                    : ''}`, disabled: isReviewMode }), isReviewMode && isCorrectAnswer && _jsx(Check, { className: "h-4 w-4 text-green-600" }), isReviewMode && !isCorrectAnswer && userValue && (_jsx(X, { className: "h-4 w-4 text-red-600" }))] }, index));
-                }), !isReviewMode && (_jsx(Button, { onClick: () => {
-                        if (onSubmitAnswer) {
-                            onSubmitAnswer(fillBlankAnswers);
-                        }
-                    }, disabled: fillBlankAnswers.some((answer) => answer.trim() === ''), children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
-    };
-    const renderTrueFalse = () => {
-        const answer = question.answer;
-        const { correctAnswer } = answer;
-        const options = [
-            { value: true, label: 'Đúng' },
-            { value: false, label: 'Sai' },
-        ];
-        return (_jsxs("div", { className: "space-y-3", children: [options.map((option) => {
-                    const isSelected = selectedAnswer === option.value;
-                    return (_jsx("div", { className: `flex cursor-pointer items-center rounded-lg border p-3 transition-colors ${isSelected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'} ${isReviewMode && option.value === correctAnswer
-                            ? 'border-green-500 bg-green-50'
-                            : isReviewMode && isSelected && option.value !== correctAnswer
-                                ? 'border-red-500 bg-red-50'
-                                : ''}`, onClick: () => !isReviewMode && setSelectedAnswer(option.value), children: _jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: `mr-3 h-4 w-4 rounded-full border-2 ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'} ${isReviewMode && option.value === correctAnswer
-                                        ? 'border-green-500 bg-green-500'
-                                        : ''}`, children: isSelected && _jsx("div", { className: "m-auto h-2 w-2 rounded-full bg-white" }) }), _jsx("span", { className: "flex-1", children: option.label }), isReviewMode && option.value === correctAnswer && (_jsx(Check, { className: "ml-2 h-4 w-4 text-green-600" })), isReviewMode && isSelected && option.value !== correctAnswer && (_jsx(X, { className: "ml-2 h-4 w-4 text-red-600" }))] }) }, option.value.toString()));
-                }), !isReviewMode && (_jsx(Button, { onClick: () => {
-                        if (onSubmitAnswer) {
-                            onSubmitAnswer(selectedAnswer);
-                        }
-                    }, disabled: selectedAnswer === null, children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
-    };
-    const renderEssay = () => {
-        const answer = question.answer;
-        const { minWords, maxWords } = answer;
-        const wordCount = selectedAnswer ? selectedAnswer.trim().split(/\s+/).length : 0;
-        const isWithinLimit = wordCount >= (minWords || 0) && wordCount <= (maxWords || Infinity);
-        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "text-sm text-gray-600", children: [minWords && maxWords
-                            ? `Số từ: ${minWords} - ${maxWords} từ`
-                            : minWords
-                                ? `Tối thiểu: ${minWords} từ`
-                                : maxWords
-                                    ? `Tối đa: ${maxWords} từ`
-                                    : '', selectedAnswer && (_jsxs("span", { className: `ml-2 ${isWithinLimit ? 'text-green-600' : 'text-red-600'}`, children: ["(", wordCount, " t\u1EEB)"] }))] }), _jsx("textarea", { value: selectedAnswer || '', onChange: (e) => setSelectedAnswer(e.target.value), placeholder: "Vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y...", className: "h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:border-blue-500 focus:ring-1 focus:ring-blue-500", disabled: isReviewMode }), !isReviewMode && (_jsx(Button, { onClick: () => {
-                        if (onSubmitAnswer) {
-                            onSubmitAnswer(selectedAnswer);
-                        }
-                    }, disabled: !selectedAnswer || selectedAnswer.trim().length < (minWords || 0), children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
-    };
-    ;
-    ;
-    ;
-    ;
-    ;
-    const renderWriteShortParagraph = () => {
-        const answer = question.answer;
-        const questionData = {
-            contexts: answer?.contexts || [],
-            minWords: answer?.minWords || 20,
-            maxWords: answer?.maxWords,
-            instruction: answer?.instruction || '',
-        };
-        return (_jsx(WriteShortParagraphClient, { questionData: questionData, onSubmit: (answerText) => {
-                setSelectedAnswer(answerText);
-                onSubmitAnswer?.(answerText);
-            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
-    };
-    const renderWriteAShortLetter = () => {
-        const answer = question.answer;
-        const questionData = {
-            contexts: answer?.contexts || [],
-            informations: answer?.informations || [],
-            minWords: answer?.minWords || 20,
-            maxWords: answer?.maxWords,
-            instruction: answer?.instruction || '',
-        };
-        return (_jsx(WriteAShortLetterClient, { questionData: questionData, onSubmit: (answerText) => {
-                setSelectedAnswer(answerText);
-                onSubmitAnswer?.(answerText);
-            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
-    };
-    ;
-    ;
-    const renderLabelThePicture = () => {
-        const questionData = question.answer; // answer contains the full data structure
-        return (_jsx(LabelThePictureClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderReadAndColorObjects = () => {
-        const answer = question.answer;
-        const questionData = {
-            backgroundImageUrl: answer?.backgroundImageUrl || '',
-            colorNodes: answer?.colorNodes || [],
-            regionNodes: answer?.regionNodes || [],
-            instructions: answer?.instructions || [],
-        };
-        return (_jsx(ReadAndColorObjectsClient, { questionData: questionData, onSubmit: (userConnections) => {
-                setSelectedAnswer(userConnections);
-                onSubmitAnswer?.(userConnections);
-            } }));
-    };
-    const renderLookPictureFillWordHint = () => {
-        const answer = question.answer;
-        const content = question.content;
-        // Check if question has group info (from API)
-        const questionGroup = question.questionGroup;
-        let subQuestions = [];
-        if (answer?.subQuestions && answer.subQuestions.length > 0) {
-            subQuestions = answer.subQuestions;
-        }
-        else if (content?.imageUrl && content?.word) {
-            // Single question format - transform to subQuestions
-            subQuestions = [{
-                    id: question.id,
-                    imageUrl: content.imageUrl,
-                    word: content.word,
-                    correctAnswer: answer?.correctAnswer || '',
-                    groupNumber: questionGroup?.groupNumber || 1,
-                }];
-        }
-        // Get hintLetters from multiple sources (priority order):
-        // 1. questionGroup.payload.hintLetters (from API group payload)
-        // 2. answer.hintLetters
-        // 3. content.hintLetters
-        const hintLetters = questionGroup?.payload?.hintLetters ||
-            answer?.hintLetters ||
-            content?.hintLetters ||
-            [];
-        // Build hintLettersByGroup if we have a groupNumber
-        const groupNumber = questionGroup?.groupNumber || 1;
-        const hintLettersByGroup = {};
-        if (hintLetters.length > 0) {
-            hintLettersByGroup[groupNumber] = hintLetters;
-        }
-        const questionData = {
-            subQuestions,
-            hintLetters,
-            hintLettersByGroup,
-            groups: [{ number: groupNumber, questionCount: subQuestions.length }],
-        };
-        return (_jsx(LookPictureFillWordHintClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, explanation: question.explanation, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderReadPassageAndAnswerQuestions = () => {
-        const answer = question.answer;
-        const questionData = {
-            passage: answer?.passage || '',
-            passageTitle: answer?.passageTitle || '',
-            instructions: answer?.instructions || '',
-            subQuestions: answer?.subQuestions || [],
-        };
-        return (_jsx(ReadPassageAndAnswerQuestionsClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderLookPictureChooseCorrectAnswer = () => {
-        const content = question.content;
-        const answer = question.answer;
-        // Merge correct answers into subQuestions
-        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
-            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
-            return {
-                ...sq,
-                options: (sq.options || []).map((opt) => ({
-                    ...opt,
-                    isCorrect: opt.id === correctAnswerId,
-                })),
-            };
-        });
-        const questionData = {
-            subQuestions,
-        };
-        return (_jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderLookPictureFillBlankChooseAnswer = () => {
-        const content = question.content;
-        const answer = question.answer;
-        // Merge correct answers into subQuestions
-        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
-            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
-            return {
-                ...sq,
-                options: (sq.options || []).map((opt) => ({
-                    ...opt,
-                    isCorrect: opt.id === correctAnswerId,
-                })),
-            };
-        });
-        const questionData = {
-            subQuestions,
-        };
-        return (_jsx(LookPictureFillBlankChooseAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderFillMissingWordsInGrid = () => {
-        const content = question.content;
-        const answer = question.answer;
-        // Build questionData in the expected format: { content: {...}, answer: {...} }
-        const questionData = {
-            content: {
-                grid: content?.grid || [],
-                rows: content?.rows || 3,
-                columns: content?.columns || 3,
-                disabledCells: content?.disabledCells || [],
-            },
-            answer: {
-                answers: answer?.answers || {},
-                missingLetters: answer?.missingLetters || [],
-                caseSensitive: answer?.caseSensitive || false,
-            },
-        };
-        return (_jsx(FillMissingWordsInGridClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderQuestion = () => {
-        switch (question.type) {
-            case 'CHOOSE_THE_CORRECT_ANSWER':
-                return renderChooseTheCorrectAnswer();
-            case 'FILL_IN_BLANK':
-                return renderFillInBlank();
-            case 'TRUE_FALSE':
-                return renderTrueFalse();
-            case 'ESSAY':
-                return renderEssay();
-            case 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE':
-                return renderListeningFillBlank();
-            case 'TICK_TRUE_OR_FALSE':
-            case 'TICK_YES_OR_NO':
-                return renderReadingTickCross();
-            case 'ARRANGE_LETTERS_INTO_WORDS':
-                return renderReadingLetterArrange();
-            case 'READ_PASSAGE_AND_COMPLETE_STORY':
-                return renderReadingPassageFill();
-            case 'WRITE_SHORT_PARAGRAPH':
-                return renderWriteShortParagraph();
-            case 'WRITE_A_SHORT_LETTER':
-                return renderWriteAShortLetter();
-            // Marketing exam questions grade 1-2
-            case 'LOOK_PICTURE_FILL_WORD_HINT':
-                return renderLookPictureFillWordHint();
-            case 'LABEL_THE_PICTURE':
-                return renderLabelThePicture();
-            case 'READ_AND_COLOR_OBJECTS':
-                return renderReadAndColorObjects();
-            case 'READ_PASSAGE_AND_ANSWER_QUESTIONS':
-                return renderReadPassageAndAnswerQuestions();
-            // Additional marketing exam questions
-            case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
-                return renderLookPictureChooseCorrectAnswer();
-            case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
-                return renderLookPictureFillBlankChooseAnswer();
-            case 'FILL_MISSING_WORDS_IN_GRID':
-                return renderFillMissingWordsInGrid();
-            default:
-                return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
-        }
-    };
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { children: typeof question.content === 'string'
-                                ? question.content
-                                : question.content?.question || 'Câu hỏi' }), _jsxs("span", { className: "text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [renderQuestion(), !isReviewMode && (_jsx("div", { className: "flex justify-end border-t pt-4", children: _jsx(Button, { onClick: handleSubmit, className: "bg-blue-500 hover:bg-blue-600", children: "X\u00E1c nh\u1EADn \u0111\u00E1p \u00E1n" }) }))] })] }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Button as s}from"../../../components/ui/button";import{Card as n,CardContent as t,CardHeader as o,CardTitle as a}from"../../../components/ui/card";import{Input as i}from"../../../components/ui/input";import{Check as c,Volume2 as l,X as d}from"lucide-react";import{useRef as u,useState as m}from"react";import{toast as p}from"sonner";import{t as g}from"../../../shared/lib/i18n";import{ReadAndColorObjectsClient as b}from"../types/read-and-color-objects/ReadAndColorObjectsClient";import{ArrangeLettersIntoWordsClient as h}from"../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient";import{WriteShortParagraphClient as w}from"../types/write-short-paragraph/WriteShortParagraphClient";import{LabelThePictureClient as N}from"../types/label-the-picture/LabelThePictureClient";import{LookPictureFillWordHintClient as C}from"../types/look-picture-fill-word-hint/LookPictureFillWordHintClient";import{ReadPassageAndAnswerQuestionsClient as f}from"../types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient";import{ChooseTheCorrectAnswerClient as x}from"../types/choose-the-correct-answer/ChooseTheCorrectAnswerClient";import{WriteAShortLetterClient as A}from"../types/write-a-short-letter/WriteAShortLetterClient";import{LookPictureChooseCorrectAnswerClient as _}from"../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient";import{LookPictureFillBlankChooseAnswerClient as v}from"../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient";import{FillMissingWordsInGridClient as y}from"../types/fill-missing-words-in-grid/FillMissingWordsInGridClient";export function QuestionViewer({question:S,onSubmitAnswer:R,isReviewMode:L=!1,userAnswer:E}){const[T,I]=m(E||null),[O,W]=m(0),k=u(null),[D,q]=m(E||{}),P=S.answer,[Q,U]=m(E||Array(P?.blanks?.length||0).fill("")),[M,G]=m(E||{}),[$,H]=m(E||{}),[j,F]=m(E||{}),B=()=>{const e=S.answer.maxPlayCount||3;O>=e?p.warning(g("common.audio.maxPlayReached",{maxPlay:String(e)})):(k.current?.play(),W(O+1))},K=()=>{const n=S.answer,{blanks:t,caseSensitive:o=!1}=n;return r("div",{className:"space-y-4",children:[t.map((s,n)=>{const a=Q[n]||"",l=L&&((e,r)=>{const s=t[e];return o?r===s:r.toLowerCase()===s.toLowerCase()})(n,a);return r("div",{className:"flex items-center space-x-2",children:[r("span",{className:"text-sm font-medium",children:["Chỗ trống ",n+1,":"]}),e(i,{value:a,onChange:e=>((e,r)=>{const s=[...Q];s[e]=r,U(s)})(n,e.target.value),placeholder:"Nhập đáp án...",className:"flex-1 "+(L?l?"border-green-500 bg-green-50":"border-red-500 bg-red-50":""),disabled:L}),L&&l&&e(c,{className:"h-4 w-4 text-green-600"}),L&&!l&&a&&e(d,{className:"h-4 w-4 text-red-600"})]},n)}),!L&&e(s,{onClick:()=>{R&&R(Q)},disabled:Q.some(e=>""===e.trim()),children:"Nộp đáp án"})]})};return r(n,{children:[e(o,{children:r(a,{className:"flex items-center justify-between",children:[e("span",{children:"string"==typeof S.content?S.content:S.content?.question||"Câu hỏi"}),r("span",{className:"text-sm font-normal text-gray-500",children:[S.points," điểm"]})]})}),r(t,{className:"space-y-4",children:[(()=>{switch(S.type){case"CHOOSE_THE_CORRECT_ANSWER":return(()=>{const r=S.answer,{isGroup:s,questionGroup:n}=S;let t={};return t=S.content&&"object"==typeof S.content?{...S.content,correctAnswer:S.correctAnswer?.answer??-1,id:S.id,isGroup:s,groupTitle:n?.payload?.title,groupContent:n?.payload?.content,groupImageUrl:n?.payload?.imageUrl,groupNumber:n?.groupNumber}:{...r,question:S.content||r?.question,id:S.id,isGroup:s,groupTitle:n?.payload?.title,groupContent:n?.payload?.content,groupImageUrl:n?.payload?.imageUrl,groupNumber:n?.groupNumber},e(x,{questionData:t,questionConfig:S.questionConfig,onSubmit:e=>{I(e),R?.(e)},isReviewMode:L,userAnswer:E})})();case"FILL_IN_BLANK":return K();case"TRUE_FALSE":return(()=>{const n=S.answer,{correctAnswer:t}=n;return r("div",{className:"space-y-3",children:[[{value:!0,label:"Đúng"},{value:!1,label:"Sai"}].map(s=>{const n=T===s.value;return e("div",{className:`flex cursor-pointer items-center rounded-lg border p-3 transition-colors ${n?"border-blue-500 bg-blue-50":"border-gray-200 hover:border-gray-300"} ${L&&s.value===t?"border-green-500 bg-green-50":L&&n&&s.value!==t?"border-red-500 bg-red-50":""}`,onClick:()=>!L&&I(s.value),children:r("div",{className:"flex w-full items-center",children:[e("div",{className:`mr-3 h-4 w-4 rounded-full border-2 ${n?"border-blue-500 bg-blue-500":"border-gray-300"} ${L&&s.value===t?"border-green-500 bg-green-500":""}`,children:n&&e("div",{className:"m-auto h-2 w-2 rounded-full bg-white"})}),e("span",{className:"flex-1",children:s.label}),L&&s.value===t&&e(c,{className:"ml-2 h-4 w-4 text-green-600"}),L&&n&&s.value!==t&&e(d,{className:"ml-2 h-4 w-4 text-red-600"})]})},s.value.toString())}),!L&&e(s,{onClick:()=>{R&&R(T)},disabled:null===T,children:"Nộp đáp án"})]})})();case"ESSAY":return(()=>{const n=S.answer,{minWords:t,maxWords:o}=n,a=T?T.trim().split(/\s+/).length:0;return r("div",{className:"space-y-4",children:[r("div",{className:"text-sm text-gray-600",children:[t&&o?`Số từ: ${t} - ${o} từ`:t?`Tối thiểu: ${t} từ`:o?`Tối đa: ${o} từ`:"",T&&r("span",{className:"ml-2 "+(a>=(t||0)&&a<=(o||1/0)?"text-green-600":"text-red-600"),children:["(",a," từ)"]})]}),e("textarea",{value:T||"",onChange:e=>I(e.target.value),placeholder:"Viết câu trả lời của bạn ở đây...",className:"h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:border-blue-500 focus:ring-1 focus:ring-blue-500",disabled:L}),!L&&e(s,{onClick:()=>{R&&R(T)},disabled:!T||T.trim().length<(t||0),children:"Nộp đáp án"})]})})();case"LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE":return(()=>{const n=S.answer,{audioUrl:t,blanks:o}=n;return r("div",{className:"space-y-4",children:[r("div",{className:"flex items-center gap-4 rounded-lg bg-blue-50 p-4",children:[r(s,{onClick:B,variant:"outline",className:"gap-2",children:[e(l,{className:"h-5 w-5"}),"Phát âm thanh (",O,"/",n.maxPlayCount||3,")"]}),e("audio",{ref:k,src:t})]}),e("div",{className:"space-y-3",children:o.map((s,n)=>r("div",{className:"flex items-center gap-3",children:[r("span",{className:"w-20 font-medium",children:["Blank ",n+1,":"]}),e(i,{value:Q[n],onChange:e=>{const r=[...Q];r[n]=e.target.value,U(r),I(r)},placeholder:"Nhập câu trả lời...",disabled:L,className:L?Q[n]?.toLowerCase()===o[n]?.toLowerCase()?"border-green-500 bg-green-50":"border-red-500 bg-red-50":""}),L&&r("span",{className:"text-sm text-gray-600",children:["Đáp án: ",e("strong",{children:o[n]})]})]},n))})]})})();case"TICK_TRUE_OR_FALSE":case"TICK_YES_OR_NO":return(()=>{const s=S.answer,{statements:n}=s;return e("div",{className:"space-y-3",children:n.map(s=>e("div",{className:`rounded-lg border-2 p-4 ${L&&D[s.id]===s.isCorrect?"border-green-500 bg-green-50":""} ${L&&D[s.id]!==s.isCorrect?"border-red-500 bg-red-50":"border-gray-200"} `,children:r("div",{className:"flex items-start gap-4",children:[r("div",{className:"mt-1 flex gap-2",children:[e("button",{onClick:()=>{const e={...D,[s.id]:!0};q(e),I(e)},disabled:L,className:`flex h-8 w-8 items-center justify-center rounded border-2 ${!0===D[s.id]?"border-green-500 bg-green-500 text-white":"border-gray-300"} `,children:e(c,{className:"h-5 w-5"})}),e("button",{onClick:()=>{const e={...D,[s.id]:!1};q(e),I(e)},disabled:L,className:`flex h-8 w-8 items-center justify-center rounded border-2 ${!1===D[s.id]?"border-red-500 bg-red-500 text-white":"border-gray-300"} `,children:e(d,{className:"h-5 w-5"})})]}),e("p",{className:"flex-1",children:s.text}),L&&e("span",{className:"text-sm font-medium",children:s.isCorrect?"✓ Đúng":"✗ Sai"})]})},s.id))})})();case"ARRANGE_LETTERS_INTO_WORDS":return(()=>{const r=S.answer,s=S.correctAnswer||S.correct_answer,n=(r?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctWord||"";return{...e,correctWord:r}});return e(h,{questionData:{subQuestions:n},onSubmit:e=>{I(e),R?.(e)},isReviewMode:L,userAnswer:E})})();case"READ_PASSAGE_AND_COMPLETE_STORY":return(()=>{const s=S.answer,{passage:n,blanks:t}=s,o=n.split(/\{(\d+)\}/);return e("div",{className:"space-y-4",children:e("div",{className:"prose max-w-none",children:e("div",{className:"text-lg leading-relaxed",children:o.map((s,n)=>{const o=parseInt(s);if(!isNaN(o)){const s=t.find(e=>e.index===o);return r("span",{className:"mx-1 inline-flex items-center",children:[e(i,{value:$[o]||"",onChange:e=>{const r={...$,[o]:e.target.value};H(r),I(r)},className:`inline-block h-8 w-32 text-center ${L&&$[o]===s?.correctAnswer?"border-green-500 bg-green-50":""} ${L&&$[o]!==s?.correctAnswer?"border-red-500 bg-red-50":""} `,disabled:L}),L&&r("span",{className:"ml-2 text-sm text-green-600",children:["(",s?.correctAnswer,")"]})]},n)}return e("span",{children:s},n)})})})})})();case"WRITE_SHORT_PARAGRAPH":return(()=>{const r=S.answer;return e(w,{questionData:{contexts:r?.contexts||[],minWords:r?.minWords||20,maxWords:r?.maxWords,instruction:r?.instruction||""},onSubmit:e=>{I(e),R?.(e)},isReviewMode:L,userAnswer:E})})();case"WRITE_A_SHORT_LETTER":return(()=>{const r=S.answer;return e(A,{questionData:{contexts:r?.contexts||[],informations:r?.informations||[],minWords:r?.minWords||20,maxWords:r?.maxWords,instruction:r?.instruction||""},onSubmit:e=>{I(e),R?.(e)},isReviewMode:L,userAnswer:E})})();case"LOOK_PICTURE_FILL_WORD_HINT":return(()=>{const r=S.answer,s=S.content,n=S.questionGroup;let t=[];r?.subQuestions&&r.subQuestions.length>0?t=r.subQuestions:s?.imageUrl&&s?.word&&(t=[{id:S.id,imageUrl:s.imageUrl,word:s.word,correctAnswer:r?.correctAnswer||"",groupNumber:n?.groupNumber||1}]);const o=n?.payload?.hintLetters||r?.hintLetters||s?.hintLetters||[],a=n?.groupNumber||1,i={};o.length>0&&(i[a]=o);const c={subQuestions:t,hintLetters:o,hintLettersByGroup:i,groups:[{number:a,questionCount:t.length}]};return e(C,{questionData:c,userAnswer:E,isReviewMode:L,explanation:S.explanation,onSubmit:e=>{I(e),R?.(e)}})})();case"LABEL_THE_PICTURE":return(()=>{const r=S.answer;return e(N,{questionData:r,userAnswer:E,isReviewMode:L,onSubmit:e=>{I(e),R?.(e)}})})();case"READ_AND_COLOR_OBJECTS":return(()=>{const r=S.answer;return e(b,{questionData:{backgroundImageUrl:r?.backgroundImageUrl||"",colorNodes:r?.colorNodes||[],regionNodes:r?.regionNodes||[],instructions:r?.instructions||[]},onSubmit:e=>{I(e),R?.(e)}})})();case"READ_PASSAGE_AND_ANSWER_QUESTIONS":return(()=>{const r=S.answer;return e(f,{questionData:{passage:r?.passage||"",passageTitle:r?.passageTitle||"",instructions:r?.instructions||"",subQuestions:r?.subQuestions||[]},userAnswer:E,isReviewMode:L,onSubmit:e=>{I(e),R?.(e)}})})();case"LOOK_PICTURE_CHOOSE_CORRECT_ANSWER":return(()=>{const r=S.content,s=S.answer,n=(r?.subQuestions||s?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctAnswer;return{...e,options:(e.options||[]).map(e=>({...e,isCorrect:e.id===r}))}});return e(_,{questionData:{subQuestions:n},userAnswer:E,isReviewMode:L,onSubmit:e=>{I(e),R?.(e)}})})();case"LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER":return(()=>{const r=S.content,s=S.answer,n=(r?.subQuestions||s?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctAnswer;return{...e,options:(e.options||[]).map(e=>({...e,isCorrect:e.id===r}))}});return e(v,{questionData:{subQuestions:n},userAnswer:E,isReviewMode:L,onSubmit:e=>{I(e),R?.(e)}})})();case"FILL_MISSING_WORDS_IN_GRID":return(()=>{const r=S.content,s=S.answer;return e(y,{questionData:{content:{grid:r?.grid||[],rows:r?.rows||3,columns:r?.columns||3,disabledCells:r?.disabledCells||[]},answer:{answers:s?.answers||{},missingLetters:s?.missingLetters||[],caseSensitive:s?.caseSensitive||!1}},userAnswer:E,isReviewMode:L,onSubmit:e=>{I(e),R?.(e)}})})();default:return r("div",{children:["Loại câu hỏi không được hỗ trợ: ",S.type]})}})(),!L&&e("div",{className:"flex justify-end border-t pt-4",children:e(s,{onClick:()=>{R?.(T)},className:"bg-blue-500 hover:bg-blue-600",children:"Xác nhận đáp án"})})]})]})}

package/dist/components/questions/viewer/index.js

@@ -1,2 +1 @@
-export { QuestionViewer } from './QuestionViewer';
-export { QuestionGroupViewer } from './QuestionGroupViewer';
+export{QuestionViewer}from"./QuestionViewer";export{QuestionGroupViewer}from"./QuestionGroupViewer";

package/dist/components/results/ResultReviewPageContainer.js

@@ -1,98 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { ChevronLeft, Download, Loader2, Sparkles, XCircle } from 'lucide-react';
-import { Button } from '../../components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
-import { useToast } from '../../shared/lib/hooks/useToast';
-import { transformResultAnswersForReview } from './review-data';
-import { ReviewQuestionRenderer } from './ReviewQuestionRenderer';
-import { unwrap } from './result-review.utils';
-export function ResultReviewPageContainer({ attemptId, token, api, onBack, onNavigate, topActionsSlot, beforeReportSlot, afterReportSlot }) {
-    const { error: errorToast, success } = useToast();
-    const [detail, setDetail] = useState(null);
-    const [attempt, setAttempt] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [isExporting, setIsExporting] = useState(false);
-    useEffect(() => {
-        let ignore = false;
-        setIsLoading(true);
-        Promise.all([api.getDetailedResult(attemptId, token), api.getAttempt?.(attemptId, token)])
-            .then(([detailResult, attemptResult]) => {
-            if (ignore)
-                return;
-            setDetail(unwrap(detailResult));
-            setAttempt(attemptResult ? unwrap(attemptResult) : null);
-        })
-            .catch((err) => errorToast({ message: 'Không thể tải kết quả', description: err instanceof Error ? err.message : undefined }))
-            .finally(() => { if (!ignore)
-            setIsLoading(false); });
-        return () => { ignore = true; };
-    }, [api, attemptId, token, errorToast]);
-    const reviewData = useMemo(() => transformResultAnswersForReview(detail?.answers ?? [], attempt?.exam?.template?.parts), [detail?.answers, attempt?.exam?.template?.parts]);
-    const studentName = attempt?.studentName ?? 'Học sinh';
-    const studentCode = attempt?.studentUsername;
-    const branchName = attempt?.branchName ?? 'Chưa tham gia chi nhánh';
-    const examTitle = attempt?.exam?.template?.title ?? detail?.examName ?? 'Kết quả bài thi';
-    const handleBack = () => {
-        if (onBack)
-            onBack();
-        else if (onNavigate)
-            onNavigate('/student/results');
-        else if (typeof window !== 'undefined')
-            window.history.back();
-    };
-    const handleExport = async () => {
-        if (!detail || !api.exportPdf)
-            return;
-        setIsExporting(true);
-        try {
-            const { blob, filename } = await api.exportPdf(attemptId, attempt?.exam?.template?.type);
-            downloadBlob(blob, filename);
-            success({ message: 'Xuất PDF thành công' });
-        }
-        catch (err) {
-            errorToast({ message: 'Không xuất được PDF', description: err instanceof Error ? err.message : undefined });
-        }
-        finally {
-            setIsExporting(false);
-        }
-    };
-    if (isLoading)
-        return _jsx(State, { icon: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-[#2874A6]" }), title: "\u0110ang t\u1EA3i k\u1EBFt qu\u1EA3 b\u00E0i thi..." });
-    if (!detail)
-        return _jsx(State, { icon: _jsx(XCircle, { className: "h-8 w-8 text-red-400" }), title: "Kh\u00F4ng th\u1EC3 t\u1EA3i k\u1EBFt qu\u1EA3", action: _jsx(Button, { onClick: handleBack, children: "Quay l\u1EA1i" }) });
-    return (_jsx("div", { className: "min-h-screen bg-[#e0e0e0] py-4 md:py-6", children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1160px] flex-col gap-4 px-3 sm:px-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 print:hidden", children: [_jsxs(Button, { variant: "outline", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i"] }), _jsxs("div", { className: "flex items-center gap-2", children: [api.exportPdf && _jsxs(Button, { onClick: () => void handleExport(), disabled: isExporting, className: "bg-[#00AEEF] hover:bg-[#0099D6]", children: [isExporting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(Download, { className: "mr-2 h-4 w-4" }), "Xu\u1EA5t PDF"] }), topActionsSlot] })] }), beforeReportSlot, _jsxs(Card, { className: "overflow-hidden rounded-[28px] border-0 shadow-xl", children: [_jsxs(CardHeader, { className: "bg-gradient-to-r from-[#0054A6] to-[#00AEEF] text-white", children: [_jsx(CardTitle, { className: "text-2xl", children: examTitle }), _jsxs("p", { className: "text-sm text-white/80", children: [studentName, studentCode ? ` • ${studentCode}` : '', " \u2022 ", branchName] })] }), _jsxs(CardContent, { className: "space-y-6 p-5 md:p-8", children: [_jsx(ScoreSummary, { detail: detail }), _jsx(Assessment, { detail: detail }), detail.showDetailedResults !== false && _jsx(AnswerSections, { reviewData: reviewData })] })] }), afterReportSlot] }) }));
-}
-function ScoreSummary({ detail }) {
-    return _jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsx(Metric, { label: "T\u1ED5ng \u0111i\u1EC3m", value: `${formatScore(detail.totalScore)} / ${formatScore(detail.maxScore)}` }), _jsx(Metric, { label: "C\u00E2u \u0111\u00FAng", value: `${detail.correctAnswers} / ${detail.totalQuestions}` }), _jsx(Metric, { label: "X\u1EBFp h\u1EA1ng", value: detail.rank ? `${detail.rank}/${detail.totalStudents ?? '-'}` : '-' }), _jsx(Metric, { label: "Tr\u1EA1ng th\u00E1i", value: detail.isPendingGrading ? 'Đang chấm' : 'Hoàn tất' })] });
-}
-function Assessment({ detail }) {
-    if (!detail.llmOverallAssessment && !detail.llmSkillAssessment)
-        return null;
-    return _jsxs("section", { className: "rounded-2xl border border-[#00AEEF]/30 bg-[#f0f8ff] p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 font-bold text-[#0054A6]", children: [_jsx(Sparkles, { className: "h-5 w-5" }), "Ph\u00E2n t\u00EDch t\u1ED5ng quan"] }), detail.llmOverallAssessment && _jsx("p", { className: "whitespace-pre-wrap text-sm text-slate-700", children: detail.llmOverallAssessment }), detail.llmSkillAssessment && _jsx("div", { className: "mt-3 grid gap-2 md:grid-cols-2", children: Object.entries(detail.llmSkillAssessment).map(([key, value]) => value ? _jsxs("div", { className: "rounded-xl bg-white p-3 text-sm", children: [_jsx("strong", { children: value.label }), _jsx("p", { className: "mt-1 text-slate-600", children: value.feedback })] }, key) : null) })] });
-}
-function AnswerSections({ reviewData }) {
-    return _jsx("div", { className: "space-y-6", children: reviewData.parts.map((part, index) => _jsxs("section", { className: "rounded-2xl border border-[#00AEEF] bg-white p-5", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-bold text-[#0054A6]", children: part.name || `Phần ${part.partNo}` }), reviewData.partScoresMap[index] && _jsxs("span", { className: "rounded-full bg-[#0054A6] px-3 py-1 text-sm font-bold text-white", children: [formatScore(reviewData.partScoresMap[index].score), " / ", formatScore(reviewData.partScoresMap[index].maxScore)] })] }), part.instructions && _jsx("p", { className: "mb-4 font-semibold text-slate-700", children: part.instructions }), _jsx(ReviewQuestionRenderer, { part: part, reviewData: reviewData })] }, `${part.partId}-${index}`)) });
-}
-function Metric({ label, value }) {
-    return _jsxs("div", { className: "rounded-2xl bg-slate-50 p-4", children: [_jsx("p", { className: "text-xs font-semibold uppercase text-slate-500", children: label }), _jsx("p", { className: "mt-1 text-xl font-black text-[#0054A6]", children: value })] });
-}
-function State({ icon, title, action }) {
-    return _jsx("div", { className: "flex min-h-screen items-center justify-center bg-[#e0e0e0]", children: _jsxs("div", { className: "rounded-[28px] bg-white p-8 text-center shadow-xl", children: [_jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-50", children: icon }), _jsx("p", { className: "font-semibold text-slate-700", children: title }), action && _jsx("div", { className: "mt-5", children: action })] }) });
-}
-function formatScore(score) {
-    if (score == null || !Number.isFinite(score))
-        return '0';
-    return score < 10 ? score.toFixed(1) : String(Math.round(score));
-}
-function downloadBlob(blob, filename) {
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as a,useMemo as s,useState as l}from"react";import{ChevronLeft as n,Download as r,Loader2 as i,Sparkles as c,XCircle as o}from"lucide-react";import{Button as m}from"../../components/ui/button";import{Card as d,CardContent as h,CardHeader as p,CardTitle as u}from"../../components/ui/card";import{useToast as x}from"../../shared/lib/hooks/useToast";import{transformResultAnswersForReview as f}from"./review-data";import{ReviewQuestionRenderer as b}from"./ReviewQuestionRenderer";import{unwrap as g}from"./result-review.utils";export function ResultReviewPageContainer({attemptId:c,token:b,api:y,onBack:A,onNavigate:S,topActionsSlot:R,beforeReportSlot:E,afterReportSlot:P}){const{error:j,success:$}=x(),[D,F]=l(null),[C,O]=l(null),[q,U]=l(!0),[K,L]=l(!1);a(()=>{let e=!1;return U(!0),Promise.all([y.getDetailedResult(c,b),y.getAttempt?.(c,b)]).then(([t,a])=>{e||(F(g(t)),O(a?g(a):null))}).catch(e=>j({message:"Không thể tải kết quả",description:e instanceof Error?e.message:void 0})).finally(()=>{e||U(!1)}),()=>{e=!0}},[y,c,b,j]);const M=s(()=>f(D?.answers??[],C?.exam?.template?.parts),[D?.answers,C?.exam?.template?.parts]),Q=C?.studentName??"Học sinh",T=C?.studentUsername,X=C?.branchName??"Chưa tham gia chi nhánh",H=C?.exam?.template?.title??D?.examName??"Kết quả bài thi",I=()=>{A?A():S?S("/student/results"):"undefined"!=typeof window&&window.history.back()},B=async()=>{if(D&&y.exportPdf){L(!0);try{const{blob:e,filename:t}=await y.exportPdf(c,C?.exam?.template?.type);!function(e,t){const a=URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(a)}(e,t),$({message:"Xuất PDF thành công"})}catch(e){j({message:"Không xuất được PDF",description:e instanceof Error?e.message:void 0})}finally{L(!1)}}};return q?e(k,{icon:e(i,{className:"h-8 w-8 animate-spin text-[#2874A6]"}),title:"Đang tải kết quả bài thi..."}):D?e("div",{className:"min-h-screen bg-[#e0e0e0] py-4 md:py-6",children:t("div",{className:"mx-auto flex w-full max-w-[1160px] flex-col gap-4 px-3 sm:px-4",children:[t("div",{className:"flex items-center justify-between gap-3 print:hidden",children:[t(m,{variant:"outline",onClick:I,children:[e(n,{className:"mr-2 h-4 w-4"}),"Quay lại"]}),t("div",{className:"flex items-center gap-2",children:[y.exportPdf&&t(m,{onClick:()=>{B()},disabled:K,className:"bg-[#00AEEF] hover:bg-[#0099D6]",children:[K?e(i,{className:"mr-2 h-4 w-4 animate-spin"}):e(r,{className:"mr-2 h-4 w-4"}),"Xuất PDF"]}),R]})]}),E,t(d,{className:"overflow-hidden rounded-[28px] border-0 shadow-xl",children:[t(p,{className:"bg-gradient-to-r from-[#0054A6] to-[#00AEEF] text-white",children:[e(u,{className:"text-2xl",children:H}),t("p",{className:"text-sm text-white/80",children:[Q,T?` • ${T}`:""," • ",X]})]}),t(h,{className:"space-y-6 p-5 md:p-8",children:[e(N,{detail:D}),e(w,{detail:D}),!1!==D.showDetailedResults&&e(v,{reviewData:M})]})]}),P]})}):e(k,{icon:e(o,{className:"h-8 w-8 text-red-400"}),title:"Không thể tải kết quả",action:e(m,{onClick:I,children:"Quay lại"})})}function N({detail:a}){return t("div",{className:"grid gap-3 md:grid-cols-4",children:[e(y,{label:"Tổng điểm",value:`${A(a.totalScore)} / ${A(a.maxScore)}`}),e(y,{label:"Câu đúng",value:`${a.correctAnswers} / ${a.totalQuestions}`}),e(y,{label:"Xếp hạng",value:a.rank?`${a.rank}/${a.totalStudents??"-"}`:"-"}),e(y,{label:"Trạng thái",value:a.isPendingGrading?"Đang chấm":"Hoàn tất"})]})}function w({detail:a}){return a.llmOverallAssessment||a.llmSkillAssessment?t("section",{className:"rounded-2xl border border-[#00AEEF]/30 bg-[#f0f8ff] p-4",children:[t("div",{className:"mb-2 flex items-center gap-2 font-bold text-[#0054A6]",children:[e(c,{className:"h-5 w-5"}),"Phân tích tổng quan"]}),a.llmOverallAssessment&&e("p",{className:"whitespace-pre-wrap text-sm text-slate-700",children:a.llmOverallAssessment}),a.llmSkillAssessment&&e("div",{className:"mt-3 grid gap-2 md:grid-cols-2",children:Object.entries(a.llmSkillAssessment).map(([a,s])=>s?t("div",{className:"rounded-xl bg-white p-3 text-sm",children:[e("strong",{children:s.label}),e("p",{className:"mt-1 text-slate-600",children:s.feedback})]},a):null)})]}):null}function v({reviewData:a}){return e("div",{className:"space-y-6",children:a.parts.map((s,l)=>t("section",{className:"rounded-2xl border border-[#00AEEF] bg-white p-5",children:[t("div",{className:"mb-4 flex items-center justify-between",children:[e("h3",{className:"text-lg font-bold text-[#0054A6]",children:s.name||`Phần ${s.partNo}`}),a.partScoresMap[l]&&t("span",{className:"rounded-full bg-[#0054A6] px-3 py-1 text-sm font-bold text-white",children:[A(a.partScoresMap[l].score)," / ",A(a.partScoresMap[l].maxScore)]})]}),s.instructions&&e("p",{className:"mb-4 font-semibold text-slate-700",children:s.instructions}),e(b,{part:s,reviewData:a})]},`${s.partId}-${l}`))})}function y({label:a,value:s}){return t("div",{className:"rounded-2xl bg-slate-50 p-4",children:[e("p",{className:"text-xs font-semibold uppercase text-slate-500",children:a}),e("p",{className:"mt-1 text-xl font-black text-[#0054A6]",children:s})]})}function k({icon:a,title:s,action:l}){return e("div",{className:"flex min-h-screen items-center justify-center bg-[#e0e0e0]",children:t("div",{className:"rounded-[28px] bg-white p-8 text-center shadow-xl",children:[e("div",{className:"mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-50",children:a}),e("p",{className:"font-semibold text-slate-700",children:s}),l&&e("div",{className:"mt-5",children:l})]})})}function A(e){return null!=e&&Number.isFinite(e)?e<10?e.toFixed(1):String(Math.round(e)):"0"}