@tinyweb_dev/oe-exam-sdk 0.1.0

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

@@ -0,0 +1,582 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useState, useRef, useEffect, useMemo } 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 { Switch } from '../../../../components/ui/switch';
+import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Pencil, Eye, Plus, Trash2, HelpCircle, CheckCircle2, Lightbulb, MessageSquare, ImageIcon, Type, Users, BookOpen, Star, ListChecks } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ChooseTheCorrectAnswerClient } from './ChooseTheCorrectAnswerClient';
+import { chooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/choose-correct-answer.validation';
+import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { ArticlesGroupCard } from '../../groups/ArticlesGroupCard';
+import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
+import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
+import { z } from 'zod';
+// Helper component to resolve presigned URL for option image preview (same pattern as Client's OptionImage)
+function OptionImagePreview({ src, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(src);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-24 w-full max-w-[200px] items-center justify-center rounded-lg border border-gray-200 bg-gray-50", children: _jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" }) }));
+    }
+    return (_jsx("div", { className: "relative h-24 w-full max-w-[200px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: _jsx("img", { src: previewUrl || src, alt: alt, className: "h-full w-full object-contain", onError: (e) => {
+                const target = e.target;
+                target.onerror = null;
+                target.src = '/images/placeholder-image.svg';
+            } }) }));
+}
+function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, optionCount = 4, optionMode, defaultValue, defaultQuestion, viewMode, onUnsavedChangesChange, validationRef, groups, questionIndexInPart = 0, partId = '', questionConfig, groupType, groupConfig, articleCount = 0, multipleAnswers, headerExtra, }) {
+    console.log('=== viewMode ===', viewMode);
+    // Use react-hook-form with Zod validation
+    // initialData can be in API format (content.question, correctAnswer.answer) or flat format
+    // Cast to any to support both formats
+    const apiData = initialData;
+    const formSchema = useMemo(() => {
+        return chooseCorrectAnswerFormSchema.superRefine((data, ctx) => {
+            if (viewMode === 'CONVERSATION') {
+                if (!data.askerName?.trim()) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Vui lòng nhập tên người hỏi!',
+                        path: ['askerName'],
+                    });
+                }
+                if (!data.answererName?.trim()) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: 'Vui lòng nhập tên người trả lời!',
+                        path: ['answererName'],
+                    });
+                }
+            }
+        });
+    }, [viewMode]);
+    const rawCorrectAnswer = apiData?.correctAnswer;
+    const normalizedInitialCorrectAnswer = Array.isArray(rawCorrectAnswer)
+        ? rawCorrectAnswer
+        : (typeof rawCorrectAnswer === 'object' && rawCorrectAnswer !== null)
+            ? (rawCorrectAnswer?.answer ?? -1)
+            : (rawCorrectAnswer ?? -1);
+    const initialMultipleAnswers = Boolean(apiData?.multipleAnswers
+        ?? apiData?.content?.multipleAnswers
+        ?? apiData?.questionGroup?.payload?.multipleAnswers
+        ?? Array.isArray(normalizedInitialCorrectAnswer));
+    const form = useReactHookForm({
+        defaultValues: {
+            // Support both API format (content.question) and flat format (question)
+            question: apiData?.content?.question || apiData?.question || defaultQuestion || '',
+            optionType: apiData?.content?.optionType || apiData?.optionType || 'text',
+            options: (apiData?.content?.options || apiData?.options)?.length > 0
+                ? (apiData?.content?.options || apiData?.options)
+                : defaultValue && defaultValue.length > 0
+                    ? defaultValue
+                    : Array.from({ length: optionCount }, () => ''),
+            // Support both API format (correctAnswer.answer) and flat format (correctAnswer as number/number[])
+            correctAnswer: initialMultipleAnswers
+                ? (Array.isArray(normalizedInitialCorrectAnswer)
+                    ? normalizedInitialCorrectAnswer
+                    : normalizedInitialCorrectAnswer === -1
+                        ? []
+                        : [normalizedInitialCorrectAnswer])
+                : (Array.isArray(normalizedInitialCorrectAnswer)
+                    ? (normalizedInitialCorrectAnswer[0] ?? -1)
+                    : normalizedInitialCorrectAnswer),
+            multipleAnswers: initialMultipleAnswers || Boolean(multipleAnswers),
+            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
+            explanation: apiData?.explanation || '',
+            askerName: apiData?.content?.askerName || apiData?.askerName || '',
+            answererName: apiData?.content?.answererName || apiData?.answererName || '',
+            isExample: apiData?.isExample || false,
+            points: apiData?.points ?? 1,
+        },
+        zodSchema: formSchema,
+        mode: 'onBlur',
+    });
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    const [optionPreviewUrls, setOptionPreviewUrls] = useState({});
+    // ============ GROUP (shared title / content / image) ============
+    const { isGrouped, currentGroupNumber, isFirstInGroup, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, articles, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, setArticles, } = useBasicQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            title: initialData?.groupTitle || initialData?.questionGroup?.payload?.title || initialData?.title || '',
+            subtitle: initialData?.groupSubtitle || initialData?.questionGroup?.payload?.subtitle || '',
+            content: initialData?.groupContent || initialData?.questionGroup?.payload?.content || '',
+            imageUrl: initialData?.groupImageUrl || initialData?.questionGroup?.payload?.imageUrl || '',
+            articles: initialData?.articles || initialData?.questionGroup?.payload?.articles || undefined,
+        },
+        articleCount,
+    });
+    // Cache options for each mode to preserve values when switching
+    const textOptionsCacheRef = useRef(null);
+    const imageOptionsCacheRef = useRef(null);
+    // Track previous initialData to detect changes
+    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 to prevent excessive re-renders
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Watch form values - MUST be declared before useEffects that use them
+    const watchedQuestion = form.watch('question');
+    const watchedOptionType = form.watch('optionType');
+    const watchedOptions = form.watch('options');
+    const watchedCorrectAnswer = form.watch('correctAnswer');
+    const watchedMultipleAnswers = form.watch('multipleAnswers');
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedExplanation = form.watch('explanation');
+    const watchedAskerName = form.watch('askerName');
+    const watchedAnswererName = form.watch('answererName');
+    const watchedIsExample = form.watch('isExample');
+    const watchedPoints = form.watch('points');
+    // Normalize optionMode from template (handle uppercase 'IMAGE', 'TEXT')
+    // If optionMode is null or undefined, default to 'text' as explicitly requested
+    const normalizedOptionMode = (optionMode?.toLowerCase() === 'image' ? 'image' : 'text');
+    // Default group type to 'BASIC' when template does not set group.type
+    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
+    // Whether per-question imageUrl is part of this part's questionConfig.
+    // When false, per-question image input is hidden and must NOT be saved to content.imageUrl.
+    const includesImageUrl = !questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl');
+    // Whether group-level imageUrl is part of this part's groupConfig.
+    // When false, DocumentGroupCard/BasicQuestionGroupCard hide the group image input and
+    // must NOT be saved to questionGroup.payload.imageUrl.
+    const includesGroupImageUrl = !groupConfig || groupConfig.length === 0 || groupConfig.includes('imageUrl');
+    // Force optionMode from template if provided
+    useEffect(() => {
+        if (normalizedOptionMode && watchedOptionType !== normalizedOptionMode) {
+            form.setValue('optionType', normalizedOptionMode);
+        }
+    }, [normalizedOptionMode, watchedOptionType, form]);
+    // Custom hooks for presigned URL
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage
+    // No need to track originalSavedData in Creator component
+    // NOTE: Unsaved changes tracking has been REMOVED from Creator component
+    // Status is now managed entirely by ExamCreator via localStorage (exam_question_status_{id})
+    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
+    // Expose validation function and getFormData via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const result = await form.trigger();
+                    return result;
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => ({
+                    question: watchedQuestion,
+                    optionType: watchedOptionType,
+                    options: watchedOptions,
+                    correctAnswer: watchedCorrectAnswer,
+                    multipleAnswers: watchedMultipleAnswers,
+                    imageUrl: includesImageUrl ? watchedImageUrl : '',
+                    explanation: watchedExplanation,
+                    askerName: watchedAskerName,
+                    answererName: watchedAnswererName,
+                    isExample: watchedIsExample,
+                    points: watchedPoints,
+                    groupTitle,
+                    groupSubtitle,
+                    groupContent,
+                    groupImageUrl: includesGroupImageUrl ? groupImageUrl : '',
+                    groupNumber: currentGroupNumber,
+                    ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+                }),
+            };
+        }
+    }, [validationRef, form, watchedCorrectAnswer, watchedMultipleAnswers, watchedQuestion, watchedOptionType, watchedOptions, watchedImageUrl, watchedExplanation, watchedAskerName, watchedAnswererName, watchedIsExample, watchedPoints, groupTitle, groupSubtitle, groupContent, groupImageUrl, currentGroupNumber, groupType, articles]);
+    // Sync state from initialData when it changes from EXTERNAL sources only
+    // We compare incoming initialData with current FORM values to detect true external changes
+    useEffect(() => {
+        // Cast to any to support both API format and flat format
+        const apiData = initialData;
+        // Normalize initialData for comparison - support both API and flat format
+        const normalizedInitialData = {
+            question: apiData?.content?.question || apiData?.question || defaultQuestion || '',
+            optionType: (apiData?.content?.optionType || apiData?.optionType || 'text'),
+            options: (apiData?.content?.options || apiData?.options)?.length > 0
+                ? (apiData?.content?.options || apiData?.options)
+                : defaultValue && defaultValue.length > 0
+                    ? defaultValue
+                    : Array.from({ length: optionCount }, () => ''),
+            correctAnswer: initialMultipleAnswers
+                ? (Array.isArray(normalizedInitialCorrectAnswer)
+                    ? normalizedInitialCorrectAnswer
+                    : normalizedInitialCorrectAnswer === -1
+                        ? []
+                        : [normalizedInitialCorrectAnswer])
+                : (Array.isArray(normalizedInitialCorrectAnswer)
+                    ? (normalizedInitialCorrectAnswer[0] ?? -1)
+                    : normalizedInitialCorrectAnswer),
+            multipleAnswers: initialMultipleAnswers || Boolean(multipleAnswers),
+            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
+            explanation: apiData?.explanation || '',
+            askerName: apiData?.content?.askerName || apiData?.askerName || '',
+            answererName: apiData?.content?.answererName || apiData?.answererName || '',
+            isExample: apiData?.isExample || false,
+            points: apiData?.points ?? 1,
+            groupTitle: apiData?.groupTitle || apiData?.questionGroup?.payload?.title || '',
+            groupContent: apiData?.groupContent || apiData?.questionGroup?.payload?.content || '',
+            groupImageUrl: apiData?.groupImageUrl || apiData?.questionGroup?.payload?.imageUrl || '',
+        };
+        // Check if initialData actually changed from previous prop
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return; // No change, nothing to do
+        }
+        // Update ref to track latest prop value
+        previousInitialDataRef.current = initialData;
+        // Get current form data to compare
+        const currentFormData = {
+            question: watchedQuestion,
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: watchedImageUrl,
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            points: watchedPoints,
+        };
+        // Check if this is truly new external data (not echoed from our own onChange)
+        // IMPORTANT: Must check ALL fields including points, explanation, and imageUrl
+        const isEchoFromOnChange = currentFormData.question === normalizedInitialData.question &&
+            currentFormData.optionType === normalizedInitialData.optionType &&
+            JSON.stringify(currentFormData.correctAnswer) === JSON.stringify(normalizedInitialData.correctAnswer) &&
+            currentFormData.multipleAnswers === normalizedInitialData.multipleAnswers &&
+            currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.imageUrl === normalizedInitialData.imageUrl &&
+            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
+        // IMPORTANT: If initialData changed and matches current form AND isCompleted is true,
+        // this means the question was just saved. Update originalSavedDataRef to the new baseline.
+        // The isCompleted check is crucial - it differentiates actual save from user typing echo.
+        const wasJustSaved = initialData?.isCompleted === true;
+        // If echo from save, just skip the reset (no need to update old refs anymore)
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        // Only reset if external data has different values than current form
+        // This prevents resetting when user just edits the question text
+        const shouldReset = !isEchoFromOnChange &&
+            (JSON.stringify(normalizedInitialData.correctAnswer) !== JSON.stringify(currentFormData.correctAnswer) ||
+                normalizedInitialData.multipleAnswers !== currentFormData.multipleAnswers ||
+                normalizedInitialData.question !== currentFormData.question ||
+                normalizedInitialData.imageUrl !== currentFormData.imageUrl);
+        const hasInitialCorrectAnswer = Array.isArray(normalizedInitialData.correctAnswer)
+            ? normalizedInitialData.correctAnswer.length > 0
+            : normalizedInitialData.correctAnswer !== -1;
+        if (shouldReset && hasInitialCorrectAnswer) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, optionCount, multipleAnswers, form, watchedQuestion, watchedOptionType, watchedOptions, watchedCorrectAnswer, watchedMultipleAnswers, watchedImageUrl, watchedExplanation, watchedAskerName, watchedAnswererName, watchedIsExample, watchedPoints]);
+    // Convert to payload format and call onChange
+    // NOTE: We need to stringify options for proper change detection since array reference doesn't change
+    const watchedOptionsString = JSON.stringify(watchedOptions);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                question: watchedQuestion,
+                optionType: watchedOptionType,
+                options: watchedOptions,
+                correctAnswer: watchedCorrectAnswer,
+                multipleAnswers: watchedMultipleAnswers,
+                imageUrl: watchedImageUrl,
+                explanation: watchedExplanation,
+                askerName: watchedAskerName,
+                answererName: watchedAnswererName,
+                isExample: watchedIsExample,
+                points: watchedPoints,
+                groupTitle,
+                groupSubtitle,
+                groupContent,
+                groupImageUrl,
+                groupNumber: currentGroupNumber,
+                ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            question: watchedQuestion,
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: includesImageUrl ? watchedImageUrl : '',
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            points: watchedPoints,
+            groupTitle,
+            groupSubtitle,
+            groupContent,
+            groupImageUrl: includesGroupImageUrl ? groupImageUrl : '',
+            groupNumber: currentGroupNumber,
+            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedQuestion,
+        watchedOptionType,
+        watchedOptionsString, // Use stringified version for proper change detection
+        watchedCorrectAnswer,
+        watchedMultipleAnswers,
+        watchedImageUrl,
+        watchedExplanation,
+        watchedAskerName,
+        watchedAnswererName,
+        watchedIsExample,
+        watchedPoints,
+        groupTitle,
+        groupSubtitle,
+        groupContent,
+        groupImageUrl,
+        currentGroupNumber,
+        groupType,
+        articles,
+    ]);
+    // Handle save with validation
+    const handleSave = form.handleSubmit((data) => {
+        if (data.multipleAnswers) {
+            const correctAnswers = Array.isArray(data.correctAnswer)
+                ? data.correctAnswer
+                : data.correctAnswer === -1
+                    ? []
+                    : [data.correctAnswer];
+            const hasInvalidAnswer = correctAnswers.some((answer) => answer < 0 || answer >= data.options.length);
+            if (hasInvalidAnswer) {
+                form.setError('correctAnswer', { message: 'Đáp án đúng không hợp lệ!' });
+                return;
+            }
+        }
+        else {
+            // Validate correctAnswer is within bounds (but allow -1 = not selected)
+            const correctAnswer = typeof data.correctAnswer === 'number' ? data.correctAnswer : -1;
+            if (correctAnswer !== -1 && correctAnswer >= data.options.length) {
+                form.setError('correctAnswer', { message: 'Đáp án đúng không hợp lệ!' });
+                return;
+            }
+        }
+        // NOTE: Save status is now managed by ExamCreator via localStorage
+        // No need to update old tracking refs here
+        // Clear cached options for the non-active mode after saving
+        textOptionsCacheRef.current = null;
+        imageOptionsCacheRef.current = null;
+        onSave?.(data);
+        // Note: Toast is shown by parent ExamCreator with question number
+    });
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            question: watchedQuestion || '',
+            optionType: watchedOptionType,
+            options: watchedOptions,
+            correctAnswer: watchedCorrectAnswer,
+            multipleAnswers: watchedMultipleAnswers,
+            imageUrl: displayPreviewUrl || watchedImageUrl,
+            explanation: watchedExplanation,
+            askerName: watchedAskerName,
+            answererName: watchedAnswererName,
+            isExample: watchedIsExample,
+            isGroup: isGrouped,
+            groupTitle,
+            groupSubtitle,
+            groupContent,
+            groupImageUrl,
+            groupNumber: currentGroupNumber,
+            ...(effectiveGroupType === 'ARTICLES' ? { articles } : {}),
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Choose the correct answer (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _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(ChooseTheCorrectAnswerClient, { questionData: questionData, questionConfig: questionConfig, isReviewMode: true, userAnswer: watchedMultipleAnswers
+                        ? watchedCorrectAnswer
+                        : watchedCorrectAnswer !== -1
+                            ? watchedCorrectAnswer
+                            : undefined })] }));
+    }
+    // Creator UI
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'ARTICLES' && (_jsx(ArticlesGroupCard, { groupNumber: currentGroupNumber, articleCount: articleCount, articles: articles, onArticlesChange: setArticles, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'articles'}` })), isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(HelpCircle, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi tr\u1EAFc nghi\u1EC7m v\u1EDBi nhi\u1EC1u l\u1EF1a ch\u1ECDn" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: watchedOptions.filter((o) => o.trim()).length < 2, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-y-2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => form.setValue('isExample', !watchedIsExample), className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedIsExample
+                                                    ? 'border-amber-300 bg-amber-50 text-amber-700'
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Star, { className: `h-4 w-4 ${watchedIsExample ? 'fill-amber-400 text-amber-400' : ''}` }), "Example"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, disabled: Boolean(multipleAnswers), onClick: () => {
+                                                    const enabled = !watchedMultipleAnswers;
+                                                    const currentValue = form.getValues('correctAnswer');
+                                                    const normalized = Array.isArray(currentValue)
+                                                        ? currentValue
+                                                        : currentValue === -1 ? [] : [currentValue];
+                                                    form.setValue('multipleAnswers', enabled, { shouldValidate: true });
+                                                    form.setValue('correctAnswer', enabled ? normalized : (normalized[0] ?? -1), { shouldValidate: true });
+                                                }, className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedMultipleAnswers
+                                                    ? 'border-violet-300 bg-violet-50 text-violet-700'
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Textarea, { id: "question", ...form.register('question'), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('question') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 3 }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
+                                            form.setValue('imageUrl', url, { shouldValidate: true });
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), 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))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {
+                                                        const newType = checked ? 'image' : 'text';
+                                                        const currentOptions = form.getValues('options');
+                                                        const currentCorrectAnswer = form.getValues('correctAnswer');
+                                                        // Save current mode's options to cache
+                                                        if (watchedOptionType === 'text') {
+                                                            textOptionsCacheRef.current = { options: currentOptions, correctAnswer: currentCorrectAnswer };
+                                                        }
+                                                        else {
+                                                            imageOptionsCacheRef.current = { options: currentOptions, correctAnswer: currentCorrectAnswer };
+                                                        }
+                                                        // Restore cached values for the target mode, or use empty defaults
+                                                        const targetCache = newType === 'text' ? textOptionsCacheRef.current : imageOptionsCacheRef.current;
+                                                        if (targetCache) {
+                                                            form.setValue('options', targetCache.options);
+                                                            form.setValue('correctAnswer', targetCache.correctAnswer);
+                                                        }
+                                                        else {
+                                                            const emptyOptions = Array.from({ length: currentOptions.length }, () => '');
+                                                            form.setValue('options', emptyOptions);
+                                                            form.setValue('correctAnswer', -1);
+                                                        }
+                                                        form.setValue('optionType', newType);
+                                                        // Clear all validation errors from previous mode
+                                                        form.clearErrors();
+                                                        setOptionPreviewUrls({});
+                                                    } }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${watchedOptionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                                const currentOptions = form.getValues('options');
+                                                form.setValue('options', [...currentOptions, '']);
+                                            }, 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-3 px-4 pb-4", children: [watchedMultipleAnswers ? (_jsx("div", { className: "space-y-3", children: watchedOptions.map((option, index) => {
+                                    const optionError = form.formState.errors.options?.[index];
+                                    const selectedAnswers = Array.isArray(watchedCorrectAnswer)
+                                        ? watchedCorrectAnswer
+                                        : watchedCorrectAnswer === -1
+                                            ? []
+                                            : [watchedCorrectAnswer];
+                                    const isCorrect = selectedAnswers.includes(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-indigo-100 hover:text-indigo-600'}`, onClick: () => {
+                                                        if (watchedMultipleAnswers) {
+                                                            const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
+                                                                ? form.getValues('correctAnswer')
+                                                                : [];
+                                                            const nextAnswers = currentAnswers.includes(index)
+                                                                ? currentAnswers.filter((answer) => answer !== index)
+                                                                : [...currentAnswers, index].sort((a, b) => a - b);
+                                                            form.setValue('correctAnswer', nextAnswers, { shouldValidate: true });
+                                                            return;
+                                                        }
+                                                        form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                    }, children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [watchedOptionType === 'image' ? (
+                                                        /* Image Upload Mode */
+                                                        _jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option || '', onChange: (url) => {
+                                                                        const newOptions = [...watchedOptions];
+                                                                        newOptions[index] = url;
+                                                                        form.setValue('options', newOptions, { shouldValidate: true });
+                                                                    }, onPresignedUrlChange: (presignedUrl) => {
+                                                                        setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
+                                                                    }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
+                                                        /* Text Input Mode */
+                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), 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" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                                if (watchedMultipleAnswers) {
+                                                                    const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
+                                                                        ? form.getValues('correctAnswer')
+                                                                        : [];
+                                                                    const nextAnswers = currentAnswers.includes(index)
+                                                                        ? currentAnswers.filter((answer) => answer !== index)
+                                                                        : [...currentAnswers, index].sort((a, b) => a - b);
+                                                                    form.setValue('correctAnswer', nextAnswers, { shouldValidate: true });
+                                                                    return;
+                                                                }
+                                                                form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                            }, className: isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600', title: watchedMultipleAnswers
+                                                                ? (isCorrect ? 'Bỏ chọn đáp án đúng' : 'Chọn thêm đáp án đúng')
+                                                                : 'Chọn làm đáp án đúng', children: _jsx(CheckCircle2, { className: "h-4 w-4" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                const currentOptions = form.getValues('options');
+                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
+                                                                form.setValue('options', newOptions);
+                                                                // Adjust correctAnswer if needed
+                                                                const currentCorrect = form.getValues('correctAnswer');
+                                                                if (Array.isArray(currentCorrect)) {
+                                                                    const nextCorrect = currentCorrect
+                                                                        .filter((answer) => answer !== index)
+                                                                        .map((answer) => (answer > index ? answer - 1 : answer));
+                                                                    form.setValue('correctAnswer', nextCorrect, { shouldValidate: true });
+                                                                }
+                                                                else if (currentCorrect === index) {
+                                                                    form.setValue('correctAnswer', -1, { shouldValidate: true });
+                                                                }
+                                                                else if (typeof currentCorrect === 'number' && currentCorrect > index) {
+                                                                    form.setValue('correctAnswer', currentCorrect - 1, { shouldValidate: true });
+                                                                }
+                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
+                                }) })) : (_jsx(RadioGroup, { value: watchedCorrectAnswer === -1 ? '' : watchedCorrectAnswer.toString(), onValueChange: (value) => {
+                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
+                                }, children: watchedOptions.map((option, index) => {
+                                    const optionError = form.formState.errors.options?.[index];
+                                    const isCorrect = watchedCorrectAnswer === 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-indigo-100 hover:text-indigo-600'}`, onClick: () => {
+                                                        form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                    }, children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [watchedOptionType === 'image' ? (
+                                                        /* Image Upload Mode */
+                                                        _jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option || '', onChange: (url) => {
+                                                                        const newOptions = [...watchedOptions];
+                                                                        newOptions[index] = url;
+                                                                        form.setValue('options', newOptions, { shouldValidate: true });
+                                                                    }, onPresignedUrlChange: (presignedUrl) => {
+                                                                        setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
+                                                                    }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
+                                                        /* Text Input Mode */
+                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), 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: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                                form.setValue('correctAnswer', index, { shouldValidate: true });
+                                                            }, className: isCorrect ? 'text-green-600 hover:text-green-700' : '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" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                const currentOptions = form.getValues('options');
+                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
+                                                                form.setValue('options', newOptions);
+                                                                // Adjust correctAnswer if needed
+                                                                const currentCorrect = form.getValues('correctAnswer');
+                                                                if (typeof currentCorrect === 'number' && currentCorrect === index) {
+                                                                    form.setValue('correctAnswer', -1, { shouldValidate: true });
+                                                                }
+                                                                else if (typeof currentCorrect === 'number' && currentCorrect > index) {
+                                                                    form.setValue('correctAnswer', currentCorrect - 1, { shouldValidate: true });
+                                                                }
+                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
+                                }) })), ((Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer.length === 0)
+                                || (!Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer === -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: watchedMultipleAnswers
+                                                    ? 'Click vào ô chữ cái hoặc icon ✓ để chọn một hoặc nhiều đáp án đúng'
+                                                    : 'Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng' })] })] })), form.hasError('correctAnswer') && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('correctAnswer') }) }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base 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 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs 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, { className: "px-4 pb-4", children: _jsx(Textarea, { ...form.register('explanation'), 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 ChooseTheCorrectAnswerCreator(props) {
+    return _jsx(ChooseTheCorrectAnswerCreatorContent, { ...props });
+}
+//# sourceMappingURL=ChooseTheCorrectAnswerCreator.js.map