@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

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

@@ -1,581 +1 @@
-'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 });
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as n,useRef as s,useEffect as o,useMemo as a}from"react";import{Button as i}from"../../../../components/ui/button";import{Label as l}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as g,CardContent as p,CardHeader as u,CardTitle as h}from"../../../../components/ui/card";import{RadioGroup as x}from"../../../../components/ui/radio-group";import{Switch as f}from"../../../../components/ui/switch";import{usePresignedFileUrl as b,useDebouncedCallback as w}from"../../../../shared/lib/hooks";import{useReactHookForm as N}from"../../../../shared/lib/hooks/useReactHookForm";import{Pencil as y,Eye as v,Plus as A,Trash2 as C,HelpCircle as V,CheckCircle2 as U,Lightbulb as k,MessageSquare as T,ImageIcon as S,Type as E,Users as q,BookOpen as I,Star as G,ListChecks as O}from"lucide-react";import{FileUpload as j}from"../../../../components/ui/file-upload";import{ChooseTheCorrectAnswerClient as $}from"./ChooseTheCorrectAnswerClient";import{chooseCorrectAnswerFormSchema as R}from"../../../../shared/lib/validation/choose-correct-answer.validation";import{BasicQuestionGroupCard as z}from"../../groups/BasicQuestionGroupCard";import{ArticlesGroupCard as B}from"../../groups/ArticlesGroupCard";import{DocumentGroupCard as F}from"../../groups/DocumentGroupCard";import{useBasicQuestionGroup as J}from"../../_shared/hooks/useBasicQuestionGroup";import{z as P}from"zod";function D({src:r,alt:t}){const{previewUrl:n,isLoading:s}=b(r);return e("div",s?{className:"flex h-24 w-full max-w-[200px] items-center justify-center rounded-lg border border-gray-200 bg-gray-50",children:e("div",{className:"h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500"})}:{className:"relative h-24 w-full max-w-[200px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:e("img",{src:n||r,alt:t,className:"h-full w-full object-contain",onError:e=>{const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})})}function L({initialData:L,onSave:M,onCancel:H,onChange:Q,externalErrors:Z,optionCount:K=4,optionMode:X,defaultValue:_,defaultQuestion:W,viewMode:Y,onUnsavedChangesChange:ee,validationRef:re,groups:te,questionIndexInPart:ne=0,partId:se="",questionConfig:oe,groupType:ae,groupConfig:ie,articleCount:le=0,multipleAnswers:ce,headerExtra:de}){console.log("=== viewMode ===",Y);const me=L,ge=a(()=>R.superRefine((e,r)=>{"CONVERSATION"===Y&&(e.askerName?.trim()||r.addIssue({code:P.ZodIssueCode.custom,message:"Vui lòng nhập tên người hỏi!",path:["askerName"]}),e.answererName?.trim()||r.addIssue({code:P.ZodIssueCode.custom,message:"Vui lòng nhập tên người trả lời!",path:["answererName"]}))}),[Y]),pe=me?.correctAnswer,ue=Array.isArray(pe)?pe:"object"==typeof pe&&null!==pe?pe?.answer??-1:pe??-1,he=Boolean(me?.multipleAnswers??me?.content?.multipleAnswers??me?.questionGroup?.payload?.multipleAnswers??Array.isArray(ue)),xe=N({defaultValues:{question:me?.content?.question||me?.question||W||"",optionType:me?.content?.optionType||me?.optionType||"text",options:(me?.content?.options||me?.options)?.length>0?me?.content?.options||me?.options:_&&_.length>0?_:Array.from({length:K},()=>""),correctAnswer:he?Array.isArray(ue)?ue:-1===ue?[]:[ue]:Array.isArray(ue)?ue[0]??-1:ue,multipleAnswers:he||Boolean(ce),imageUrl:me?.content?.imageUrl||me?.imageUrl||"",explanation:me?.explanation||"",askerName:me?.content?.askerName||me?.askerName||"",answererName:me?.content?.answererName||me?.answererName||"",isExample:me?.isExample||!1,points:me?.points??1},zodSchema:ge,mode:"onBlur"}),[fe,be]=n(!1),[we,Ne]=n(""),[ye,ve]=n({}),{isGrouped:Ae,currentGroupNumber:Ce,isFirstInGroup:Ve,groupTitle:Ue,groupSubtitle:ke,groupContent:Te,imageUrl:Se,articles:Ee,setGroupTitle:qe,setGroupSubtitle:Ie,setGroupContent:Ge,setImageUrl:Oe,setArticles:je}=J({partId:se,groups:te,questionIndexInPart:ne,initialData:{title:L?.groupTitle||L?.questionGroup?.payload?.title||L?.title||"",subtitle:L?.groupSubtitle||L?.questionGroup?.payload?.subtitle||"",content:L?.groupContent||L?.questionGroup?.payload?.content||"",imageUrl:L?.groupImageUrl||L?.questionGroup?.payload?.imageUrl||"",articles:L?.articles||L?.questionGroup?.payload?.articles||void 0},articleCount:le}),$e=s(null),Re=s(null),ze=s(L),Be=s(!1),Fe=s(Q),Je=s("");o(()=>{Fe.current=Q},[Q]);const Pe=w(e=>{Fe.current?.(e)},300),De=xe.watch("question"),Le=xe.watch("optionType"),Me=xe.watch("options"),He=xe.watch("correctAnswer"),Qe=xe.watch("multipleAnswers"),Ze=xe.watch("imageUrl"),Ke=xe.watch("explanation"),Xe=xe.watch("askerName"),_e=xe.watch("answererName"),We=xe.watch("isExample"),Ye=xe.watch("points"),er="image"===X?.toLowerCase()?"image":"text",rr=(ae||"BASIC").toUpperCase(),tr=!oe||0===oe.length||oe.includes("imageUrl"),nr=!ie||0===ie.length||ie.includes("imageUrl");o(()=>{er&&Le!==er&&xe.setValue("optionType",er)},[er,Le,xe]);const{previewUrl:sr}=b(Ze),or=we||sr||"";o(()=>{re&&(re.current={triggerValidation:async()=>await xe.trigger(),getFormData:()=>({question:De,optionType:Le,options:Me,correctAnswer:He,multipleAnswers:Qe,imageUrl:tr?Ze:"",explanation:Ke,askerName:Xe,answererName:_e,isExample:We,points:Ye,groupTitle:Ue,groupSubtitle:ke,groupContent:Te,groupImageUrl:nr?Se:"",groupNumber:Ce,..."ARTICLES"===rr?{articles:Ee}:{}})})},[re,xe,He,Qe,De,Le,Me,Ze,Ke,Xe,_e,We,Ye,Ue,ke,Te,Se,Ce,ae,Ee]),o(()=>{const e=L,r={question:e?.content?.question||e?.question||W||"",optionType:e?.content?.optionType||e?.optionType||"text",options:(e?.content?.options||e?.options)?.length>0?e?.content?.options||e?.options:_&&_.length>0?_:Array.from({length:K},()=>""),correctAnswer:he?Array.isArray(ue)?ue:-1===ue?[]:[ue]:Array.isArray(ue)?ue[0]??-1:ue,multipleAnswers:he||Boolean(ce),imageUrl:e?.content?.imageUrl||e?.imageUrl||"",explanation:e?.explanation||"",askerName:e?.content?.askerName||e?.askerName||"",answererName:e?.content?.answererName||e?.answererName||"",isExample:e?.isExample||!1,points:e?.points??1,groupTitle:e?.groupTitle||e?.questionGroup?.payload?.title||"",groupContent:e?.groupContent||e?.questionGroup?.payload?.content||"",groupImageUrl:e?.groupImageUrl||e?.questionGroup?.payload?.imageUrl||""};if(!(JSON.stringify(ze.current)!==JSON.stringify(L)))return;ze.current=L;const t={question:De,optionType:Le,options:Me,correctAnswer:He,multipleAnswers:Qe,imageUrl:Ze,explanation:Ke,askerName:Xe,answererName:_e,isExample:We,points:Ye},n=t.question===r.question&&t.optionType===r.optionType&&JSON.stringify(t.correctAnswer)===JSON.stringify(r.correctAnswer)&&t.multipleAnswers===r.multipleAnswers&&t.points===r.points&&t.explanation===r.explanation&&t.imageUrl===r.imageUrl&&JSON.stringify(t.options)===JSON.stringify(r.options);if(n&&!0===L?.isCompleted)return;const s=!n&&(JSON.stringify(r.correctAnswer)!==JSON.stringify(t.correctAnswer)||r.multipleAnswers!==t.multipleAnswers||r.question!==t.question||r.imageUrl!==t.imageUrl),o=Array.isArray(r.correctAnswer)?r.correctAnswer.length>0:-1!==r.correctAnswer;s&&o&&(Be.current=!0,xe.reset(r),setTimeout(()=>{Be.current=!1},150))},[L,K,ce,xe,De,Le,Me,He,Qe,Ze,Ke,Xe,_e,We,Ye]);const ar=JSON.stringify(Me);o(()=>{if(Be.current){const e=JSON.stringify({question:De,optionType:Le,options:Me,correctAnswer:He,multipleAnswers:Qe,imageUrl:Ze,explanation:Ke,askerName:Xe,answererName:_e,isExample:We,points:Ye,groupTitle:Ue,groupSubtitle:ke,groupContent:Te,groupImageUrl:Se,groupNumber:Ce,..."ARTICLES"===rr?{articles:Ee}:{}});return void(Je.current=e)}const e={question:De,optionType:Le,options:Me,correctAnswer:He,multipleAnswers:Qe,imageUrl:tr?Ze:"",explanation:Ke,askerName:Xe,answererName:_e,isExample:We,points:Ye,groupTitle:Ue,groupSubtitle:ke,groupContent:Te,groupImageUrl:nr?Se:"",groupNumber:Ce,..."ARTICLES"===rr?{articles:Ee}:{}},r=JSON.stringify(e);Je.current!==r&&(Je.current=r,Pe(e))},[De,Le,ar,He,Qe,Ze,Ke,Xe,_e,We,Ye,Ue,ke,Te,Se,Ce,ae,Ee]);xe.handleSubmit(e=>{if(e.multipleAnswers){if((Array.isArray(e.correctAnswer)?e.correctAnswer:-1===e.correctAnswer?[]:[e.correctAnswer]).some(r=>r<0||r>=e.options.length))return void xe.setError("correctAnswer",{message:"Đáp án đúng không hợp lệ!"})}else{const r="number"==typeof e.correctAnswer?e.correctAnswer:-1;if(-1!==r&&r>=e.options.length)return void xe.setError("correctAnswer",{message:"Đáp án đúng không hợp lệ!"})}$e.current=null,Re.current=null,M?.(e)});if(fe){const t={question:De||"",optionType:Le,options:Me,correctAnswer:He,multipleAnswers:Qe,imageUrl:or||Ze,explanation:Ke,askerName:Xe,answererName:_e,isExample:We,isGroup:Ae,groupTitle:Ue,groupSubtitle:ke,groupContent:Te,groupImageUrl:Se,groupNumber:Ce,..."ARTICLES"===rr?{articles:Ee}:{}};return r("div",{className:"space-y-4",children:[e(g,{children:e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Choose the correct answer (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>be(!1),children:[e(y,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e($,{questionData:t,questionConfig:oe,isReviewMode:!0,userAnswer:Qe||-1!==He?He:void 0})]})}return r("div",{className:"space-y-4",children:[Ae&&"ARTICLES"===rr&&e(B,{groupNumber:Ce,articleCount:le,articles:Ee,onArticlesChange:je,title:Ue,onTitleChange:qe,isReadOnly:!Ve,uploadIdPrefix:`choose-correct-answer-${se??"articles"}`}),Ae&&"BASIC"===rr&&e(z,{groupNumber:Ce,title:Ue,subtitle:ke,content:Te,imageUrl:Se,onTitleChange:qe,onSubtitleChange:Ie,onContentChange:Ge,onImageChange:Oe,groupConfig:ae?ie:void 0,isReadOnly:!Ve,uploadIdPrefix:`choose-correct-answer-${se??"group"}`}),Ae&&"DOCUMENT"===rr&&e(F,{groupNumber:Ce,title:Ue,subtitle:ke,content:Te,imageUrl:Se,onTitleChange:qe,onSubtitleChange:Ie,onContentChange:Ge,onImageChange:Oe,groupConfig:ae?ie:void 0,isReadOnly:!Ve,uploadIdPrefix:`choose-correct-answer-${se??"document"}`}),r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(V,{className:"h-4 w-4 text-gray-600"})}),r("div",{children:[e(h,{className:"text-base font-bold text-gray-900",children:"Chọn đáp án đúng"}),e("p",{className:"text-xs text-gray-500",children:"Tạo câu hỏi trắc nghiệm với nhiều lựa chọn"})]})]}),r("div",{className:"flex items-center gap-2",children:[de,r(i,{variant:"outline",size:"sm",onClick:()=>be(!0),disabled:Me.filter(e=>e.trim()).length<2,className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(v,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(p,{className:"space-y-3 px-4 pb-4",children:[r("div",{className:"flex flex-wrap items-center justify-between gap-y-2",children:[e(m,{...xe.register("points",{valueAsNumber:!0}),error:xe.hasError("points")?xe.getFieldError("points"):void 0}),r("div",{className:"flex items-center gap-2",children:[r("button",{type:"button",style:{paddingBlock:"calc(var(--spacing) * 1)"},onClick:()=>xe.setValue("isExample",!We),className:"inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none "+(We?"border-amber-300 bg-amber-50 text-amber-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"),children:[e(G,{className:"h-4 w-4 "+(We?"fill-amber-400 text-amber-400":"")}),"Example"]}),r("button",{type:"button",style:{paddingBlock:"calc(var(--spacing) * 1)"},disabled:Boolean(ce),onClick:()=>{const e=!Qe,r=xe.getValues("correctAnswer"),t=Array.isArray(r)?r:-1===r?[]:[r];xe.setValue("multipleAnswers",e,{shouldValidate:!0}),xe.setValue("correctAnswer",e?t:t[0]??-1,{shouldValidate:!0})},className:`inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${Qe?"border-violet-300 bg-violet-50 text-violet-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"} ${Boolean(ce)?"cursor-not-allowed opacity-50":""}`,children:[e(O,{className:"h-4 w-4"}),"Nhiều đáp án"]})]})]}),"CONVERSATION"===Y&&r("div",{className:"space-y-3",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(q,{className:"h-4 w-4 text-indigo-500"}),"Hội thoại ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn - dùng cho câu hỏi dạng hội thoại)"})]}),r("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:[r("div",{className:"space-y-1.5",children:[r(l,{htmlFor:"askerName",className:"flex items-center gap-1 text-sm font-medium text-gray-600",children:["Tên người hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:"askerName",...xe.register("askerName"),placeholder:"VD: John, Mary, Teacher...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(xe.hasError("askerName")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),xe.hasError("askerName")&&e("p",{className:"text-sm text-red-600",children:xe.getFieldError("askerName")})]}),r("div",{className:"space-y-1.5",children:[r(l,{htmlFor:"answererName",className:"flex items-center gap-1 text-sm font-medium text-gray-600",children:["Tên người trả lời ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:"answererName",...xe.register("answererName"),placeholder:"VD: Tom, Anna, Student...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(xe.hasError("answererName")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),xe.hasError("answererName")&&e("p",{className:"text-sm text-red-600",children:xe.getFieldError("answererName")})]})]})]}),(!oe||0===oe.length||oe.includes("question"))&&r("div",{className:"space-y-2",children:[r(l,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(T,{className:"h-4 w-4 text-indigo-500"}),e("span",{className:"flex items-center gap-1",children:"Câu hỏi"}),e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(d,{id:"question",...xe.register("question"),placeholder:"Nhập câu hỏi...",className:"min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(xe.hasError("question")?"border-red-400 focus:border-red-500 focus:ring-red-200":""),rows:3}),xe.hasError("question")&&e("p",{className:"text-sm text-red-600",children:xe.getFieldError("question")})]}),(!oe||0===oe.length||oe.includes("imageUrl")||oe.includes("imageUrl "))&&r("div",{className:"space-y-2",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(S,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh ",e("span",{className:"text-sm font-normal text-gray-500"})]}),e(j,{id:"question-image",label:"",accept:"image/*",value:Ze||"",onChange:e=>{xe.setValue("imageUrl",e,{shouldValidate:!0})},onPresignedUrlChange:Ne,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),xe.hasError("imageUrl")&&e("p",{className:"mt-1 text-sm text-red-600",children:xe.getFieldError("imageUrl")}),or&&e(t,{src:or,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),Z&&Z.length>0&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:Z.map((r,t)=>e("li",{children:r},t))})]})]}),xe.formState.errors.options?.message&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:xe.formState.errors.options.message})})]})]}),(!oe||0===oe.length||oe.includes("options"))&&r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(k,{className:"h-3.5 w-3.5 text-indigo-600"})}),r(h,{className:"text-base font-semibold text-gray-800",children:["Các lựa chọn ",r("span",{className:"text-xs font-normal text-gray-500",children:["(",Me.length," đáp án)"]})]})]}),r("div",{className:"flex items-center gap-3",children:[r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5",children:[e(E,{className:"h-3.5 w-3.5 "+("text"===Le?"text-indigo-600":"text-gray-400")}),e("span",{className:"text-xs font-medium "+("text"===Le?"text-indigo-600":"text-gray-400"),children:"Text"}),e(f,{checked:"image"===Le,disabled:!0,className:"!bg-indigo-600 !opacity-100",onCheckedChange:e=>{const r=e?"image":"text",t=xe.getValues("options"),n=xe.getValues("correctAnswer");"text"===Le?$e.current={options:t,correctAnswer:n}:Re.current={options:t,correctAnswer:n};const s="text"===r?$e.current:Re.current;if(s)xe.setValue("options",s.options),xe.setValue("correctAnswer",s.correctAnswer);else{const e=Array.from({length:t.length},()=>"");xe.setValue("options",e),xe.setValue("correctAnswer",-1)}xe.setValue("optionType",r),xe.clearErrors(),ve({})}}),e(S,{className:"h-3.5 w-3.5 "+("image"===Le?"text-indigo-600":"text-gray-400")}),e("span",{className:"text-xs font-medium "+("image"===Le?"text-indigo-600":"text-gray-400"),children:"Ảnh"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>{const e=xe.getValues("options");xe.setValue("options",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(A,{className:"h-4 w-4"}),"Thêm đáp án"]})]})]})}),r(p,{className:"space-y-3 px-4 pb-4",children:[Qe?e("div",{className:"space-y-3",children:Me.map((t,n)=>{const s=xe.formState.errors.options?.[n],o=(Array.isArray(He)?He:-1===He?[]:[He]).includes(n),a=String.fromCharCode(65+n);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(o?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(o?"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(Qe){const e=Array.isArray(xe.getValues("correctAnswer"))?xe.getValues("correctAnswer"):[],r=e.includes(n)?e.filter(e=>e!==n):[...e,n].sort((e,r)=>e-r);return void xe.setValue("correctAnswer",r,{shouldValidate:!0})}xe.setValue("correctAnswer",n,{shouldValidate:!0})},children:a}),r("div",{className:"flex-1 space-y-2",children:["image"===Le?r("div",{className:"space-y-2",children:[e(j,{id:`option-image-${n}`,label:"",accept:"image/*",value:t||"",onChange:e=>{const r=[...Me];r[n]=e,xe.setValue("options",r,{shouldValidate:!0})},onPresignedUrlChange:e=>{ve(r=>({...r,[n]:e}))},maxSize:5,placeholder:`Upload ảnh đáp án ${a}...`,autoUpload:!0,prefix:"questions/options"}),(ye[n]||t)&&e(D,{src:ye[n]||t,alt:`Đáp án ${a}`})]}):e(c,{id:`option-input-${n}`,...xe.register(`options.${n}`),placeholder:`Nhập đáp án ${a}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(s?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),s&&e("p",{className:"text-sm text-red-600",children:s.message}),o&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(U,{className:"h-3.5 w-3.5"}),Qe?"Đáp án đúng đã chọn":"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>{if(Qe){const e=Array.isArray(xe.getValues("correctAnswer"))?xe.getValues("correctAnswer"):[],r=e.includes(n)?e.filter(e=>e!==n):[...e,n].sort((e,r)=>e-r);return void xe.setValue("correctAnswer",r,{shouldValidate:!0})}xe.setValue("correctAnswer",n,{shouldValidate:!0})},className:o?"text-green-600 hover:text-green-700":"text-gray-400 hover:text-green-600",title:Qe?o?"Bỏ chọn đáp án đúng":"Chọn thêm đáp án đúng":"Chọn làm đáp án đúng",children:e(U,{className:"h-4 w-4"})}),Me.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>{const e=xe.getValues("options").filter((e,r)=>r!==n);xe.setValue("options",e);const r=xe.getValues("correctAnswer");if(Array.isArray(r)){const e=r.filter(e=>e!==n).map(e=>e>n?e-1:e);xe.setValue("correctAnswer",e,{shouldValidate:!0})}else r===n?xe.setValue("correctAnswer",-1,{shouldValidate:!0}):"number"==typeof r&&r>n&&xe.setValue("correctAnswer",r-1,{shouldValidate:!0})},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(C,{className:"h-4 w-4"})})]})]})},n)})}):e(x,{value:-1===He?"":He.toString(),onValueChange:e=>{xe.setValue("correctAnswer",Number(e),{shouldValidate:!0})},children:Me.map((t,n)=>{const s=xe.formState.errors.options?.[n],o=He===n,a=String.fromCharCode(65+n);return e("div",{className:"group relative rounded-xl border-2 p-4 transition-all duration-200 "+(o?"border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100":"border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"),children:r("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all "+(o?"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:()=>{xe.setValue("correctAnswer",n,{shouldValidate:!0})},children:a}),r("div",{className:"flex-1 space-y-2",children:["image"===Le?r("div",{className:"space-y-2",children:[e(j,{id:`option-image-${n}`,label:"",accept:"image/*",value:t||"",onChange:e=>{const r=[...Me];r[n]=e,xe.setValue("options",r,{shouldValidate:!0})},onPresignedUrlChange:e=>{ve(r=>({...r,[n]:e}))},maxSize:5,placeholder:`Upload ảnh đáp án ${a}...`,autoUpload:!0,prefix:"questions/options"}),(ye[n]||t)&&e(D,{src:ye[n]||t,alt:`Đáp án ${a}`})]}):e(c,{id:`option-input-${n}`,...xe.register(`options.${n}`),placeholder:`Nhập đáp án ${a}...`,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(s?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),s&&e("p",{className:"text-sm text-red-600",children:s.message}),o&&r("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700",children:[e(U,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]})]}),r("div",{className:"flex items-center gap-2",children:[e(i,{type:"button",variant:"ghost",size:"sm",onClick:()=>{xe.setValue("correctAnswer",n,{shouldValidate:!0})},className:o?"text-green-600 hover:text-green-700":"text-gray-400 hover:text-green-600",title:"Chọn làm đáp án đúng",children:e(U,{className:"h-4 w-4"})}),Me.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>{const e=xe.getValues("options").filter((e,r)=>r!==n);xe.setValue("options",e);const r=xe.getValues("correctAnswer");"number"==typeof r&&r===n?xe.setValue("correctAnswer",-1,{shouldValidate:!0}):"number"==typeof r&&r>n&&xe.setValue("correctAnswer",r-1,{shouldValidate:!0})},className:"text-red-500 hover:bg-red-50 hover:text-red-600",children:e(C,{className:"h-4 w-4"})})]})]})},n)})}),(Array.isArray(He)&&0===He.length||!Array.isArray(He)&&-1===He)&&r("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),r("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Chưa chọn đáp án đúng"}),e("p",{className:"mt-0.5 text-amber-700",children:Qe?"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"})]})]}),xe.hasError("correctAnswer")&&e("div",{className:"rounded-xl border border-red-200 bg-red-50 p-4",children:e("p",{className:"text-sm text-red-600",children:xe.getFieldError("correctAnswer")})})]})]}),r(g,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(u,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("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:e(I,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(p,{className:"px-4 pb-4",children:e(d,{...xe.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function ChooseTheCorrectAnswerCreator(r){return e(L,{...r})}