@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

package/dist/components/questions/types/listen-and-speak-info-exchange/ListenAndSpeakInfoExchangeCreator.js

@@ -1,386 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Label } from '../../../../components/ui/label';
-import { Button } from '../../../../components/ui/button';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { PointsInput } from '../../../../components/ui/points-input';
-// Stores & hooks
-import { useInfoExchangeGroup } from '../../_shared/hooks/useInfoExchangeGroup';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { listenAndSpeakInfoExchangeSchema, } from '../../../../shared/lib/validation/listen-and-speak-info-exchange.validation';
-// Utilities & Icons
-import { Plus, Trash2, Mic, Volume2, Table2, MessageSquareText, ImageIcon, BookOpen, Eye, Pencil, Info, ListChecks } from 'lucide-react';
-import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { useDebouncedCallback } from '../../../../shared/lib/hooks/useDebouncedCallback';
-import { CreatorGuide } from '../../components/CreatorGuide';
-import { ListenAndSpeakInfoExchangeClient } from './ListenAndSpeakInfoExchangeClient';
-// ─── Sub-component: Image preview with presigned URL ─────────────────────────
-function ImagePreview({ imageUrl, label }) {
-    const { previewUrl } = usePresignedFileUrl(imageUrl);
-    if (!previewUrl)
-        return null;
-    return (_jsx("div", { className: "mt-2 rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm", children: _jsx("img", { src: previewUrl, alt: label, className: "max-h-80 w-full object-contain bg-gray-50 p-2" }) }));
-}
-const DEFAULT_FIELDS = [
-    { key: '', answer: '' },
-];
-export function ListenAndSpeakInfoExchangeCreator({ questionIndex, initialData, onChange, validationRef, onUnsavedChangesChange, isFirstInGroup: isFirstInGroupProp, partId, groups, questionIndexInPart, viewMode = 'ANSWER', }) {
-    const isGrouped = Boolean(groups && groups.length > 0);
-    const isFirstInGroup = useMemo(() => {
-        if (isFirstInGroupProp !== undefined)
-            return isFirstInGroupProp;
-        if (!groups || !groups.length || questionIndexInPart === undefined)
-            return true;
-        let cumulative = 0;
-        for (const group of groups) {
-            if (questionIndexInPart === cumulative)
-                return true;
-            cumulative += group.questionCount;
-        }
-        return false;
-    }, [isFirstInGroupProp, groups, questionIndexInPart]);
-    // ---------------------------------------------------------------
-    // 1. Group level state (Title, Image, CandidateFields, ExaminerFields) via shared store
-    // ---------------------------------------------------------------
-    const currentGroupNumber = useMemo(() => {
-        if (groups && groups.length > 0) {
-            if (questionIndexInPart === undefined)
-                return 1;
-            let cumulative = 0;
-            for (let i = 0; i < groups.length; i++) {
-                cumulative += groups[i].questionCount;
-                if (questionIndexInPart < cumulative)
-                    return i + 1;
-            }
-            return 1;
-        }
-        // Fallback: use groupNumber from initialData when groups prop is not yet available
-        const apiData = initialData;
-        return apiData?.groupNumber ?? 1;
-    }, [groups, questionIndexInPart, initialData]);
-    const { title, imageUrl, fields, candidateFields, examinerFields, updateGroupData } = useInfoExchangeGroup(partId, currentGroupNumber);
-    // Initialize group data from initialData on first question (also re-run when initialData changes)
-    const initialDataRef = useRef(null);
-    useEffect(() => {
-        if (isFirstInGroup && initialData) {
-            // Skip if initialData hasn't meaningfully changed
-            const initDataKey = JSON.stringify({
-                title: initialData.title,
-                imageUrl: initialData.imageUrl,
-                candidateFields: initialData.candidateFields,
-                examinerFields: initialData.examinerFields,
-                fields: initialData.fields,
-            });
-            if (initialDataRef.current === initDataKey)
-                return;
-            initialDataRef.current = initDataKey;
-            const initCandidateFields = initialData.candidateFields && initialData.candidateFields.length > 0
-                ? initialData.candidateFields
-                : (initialData.fields && initialData.fields.length > 0 ? initialData.fields : DEFAULT_FIELDS);
-            const initExaminerFields = initialData.examinerFields && initialData.examinerFields.length > 0
-                ? initialData.examinerFields
-                : DEFAULT_FIELDS;
-            updateGroupData({
-                title: initialData.title || '',
-                imageUrl: initialData.imageUrl || '',
-                fields: initCandidateFields, // backward compat
-                candidateFields: initCandidateFields,
-                examinerFields: initExaminerFields,
-            });
-        }
-    }, [isFirstInGroup, initialData, updateGroupData]);
-    // Use group store data, fallback to initialData
-    const groupTitle = title || initialData?.title || '';
-    const groupImageUrl = imageUrl || initialData?.imageUrl || '';
-    const groupCandidateFields = candidateFields && candidateFields.length > 0
-        ? candidateFields
-        : (initialData?.candidateFields && initialData.candidateFields.length > 0
-            ? initialData.candidateFields
-            : (initialData?.fields && initialData.fields.length > 0 ? initialData.fields : DEFAULT_FIELDS));
-    const groupExaminerFields = examinerFields && examinerFields.length > 0
-        ? examinerFields
-        : (initialData?.examinerFields && initialData.examinerFields.length > 0
-            ? initialData.examinerFields
-            : DEFAULT_FIELDS);
-    // ---------------------------------------------------------------
-    // 2. Per-question form data (Audio, ExpectedAnswers, Points, Explanation)
-    // ---------------------------------------------------------------
-    const form = useReactHookForm({
-        zodSchema: listenAndSpeakInfoExchangeSchema,
-        defaultValues: {
-            title: groupTitle,
-            imageUrl: groupImageUrl,
-            fields: groupCandidateFields, // backward compat
-            candidateFields: groupCandidateFields,
-            examinerFields: groupExaminerFields,
-            audioUrl: initialData?.audioUrl || '',
-            expectedAnswers: initialData?.expectedAnswers?.length
-                ? initialData.expectedAnswers
-                : [''],
-            points: initialData?.points ?? 1,
-            explanation: initialData?.explanation || '',
-        },
-    });
-    const { control, watch, setValue, trigger, clearErrors } = form;
-    const watchedAudioUrl = watch('audioUrl');
-    const watchedExpectedAnswers = watch('expectedAnswers');
-    const watchedPoints = watch('points');
-    const watchedExplanation = watch('explanation');
-    // ---------------------------------------------------------------
-    // Refs to prevent infinite loops (echo-detection pattern)
-    // ---------------------------------------------------------------
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Notify parent onChange (debounced)
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Track unsaved changes
-    useEffect(() => {
-        onUnsavedChangesChange?.(form.formState.isDirty);
-    }, [form.formState.isDirty, onUnsavedChangesChange]);
-    // ---------------------------------------------------------------
-    // Sync form values if initialData props change
-    // ---------------------------------------------------------------
-    useEffect(() => {
-        const normalizedInitialData = {
-            title: groupTitle,
-            imageUrl: groupImageUrl,
-            fields: groupCandidateFields,
-            candidateFields: groupCandidateFields,
-            examinerFields: groupExaminerFields,
-            audioUrl: initialData?.audioUrl || '',
-            expectedAnswers: initialData?.expectedAnswers?.length
-                ? initialData.expectedAnswers
-                : [''],
-            points: initialData?.points ?? 1,
-            explanation: initialData?.explanation || '',
-        };
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!initialDataChanged)
-            return;
-        previousInitialDataRef.current = initialData;
-        const currentFormData = {
-            audioUrl: watchedAudioUrl,
-            expectedAnswers: watchedExpectedAnswers,
-            points: watchedPoints,
-            explanation: watchedExplanation,
-        };
-        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
-            currentFormData.explanation === normalizedInitialData.explanation &&
-            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
-            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
-        const wasJustSaved = initialData?.isCompleted === true;
-        if (isEchoFromOnChange && wasJustSaved)
-            return;
-        const shouldReset = !isEchoFromOnChange &&
-            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
-                JSON.stringify(normalizedInitialData.expectedAnswers) !== JSON.stringify(currentFormData.expectedAnswers));
-        if (shouldReset) {
-            isInitializingRef.current = true;
-            form.reset(normalizedInitialData);
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData, form, watchedAudioUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints, groupTitle, groupImageUrl, groupCandidateFields, groupExaminerFields]);
-    // ---------------------------------------------------------------
-    // Fire onChange when form values change
-    // ---------------------------------------------------------------
-    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
-    useEffect(() => {
-        if (isInitializingRef.current) {
-            const currentPayload = JSON.stringify({
-                title: groupTitle,
-                imageUrl: groupImageUrl,
-                fields: groupCandidateFields,
-                candidateFields: groupCandidateFields,
-                examinerFields: groupExaminerFields,
-                audioUrl: watchedAudioUrl,
-                expectedAnswers: watchedExpectedAnswers,
-                points: watchedPoints,
-                explanation: watchedExplanation,
-                groupNumber: isGrouped ? currentGroupNumber : undefined,
-            });
-            previousPayloadRef.current = currentPayload;
-            return;
-        }
-        const payload = {
-            title: groupTitle,
-            imageUrl: groupImageUrl,
-            fields: groupCandidateFields,
-            candidateFields: groupCandidateFields,
-            examinerFields: groupExaminerFields,
-            audioUrl: watchedAudioUrl,
-            expectedAnswers: watchedExpectedAnswers,
-            points: watchedPoints,
-            explanation: watchedExplanation,
-            groupNumber: isGrouped ? currentGroupNumber : undefined,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [
-        watchedAudioUrl,
-        watchedExpectedAnswersString,
-        watchedPoints,
-        watchedExplanation,
-        groupTitle,
-        groupImageUrl,
-        groupCandidateFields,
-        groupExaminerFields,
-        isGrouped,
-        currentGroupNumber,
-        debouncedOnChange,
-    ]);
-    // ---------------------------------------------------------------
-    // Validation ref
-    // ---------------------------------------------------------------
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    // Sync group data into form for validation
-                    setValue('title', groupTitle);
-                    setValue('imageUrl', groupImageUrl);
-                    setValue('fields', groupCandidateFields);
-                    setValue('candidateFields', groupCandidateFields);
-                    setValue('examinerFields', groupExaminerFields);
-                    const isValid = await trigger();
-                    return isValid;
-                },
-                getFormData: () => ({
-                    ...form.getValues(),
-                    title: groupTitle,
-                    imageUrl: groupImageUrl,
-                    fields: groupCandidateFields,
-                    candidateFields: groupCandidateFields,
-                    examinerFields: groupExaminerFields,
-                    groupNumber: isGrouped ? currentGroupNumber : undefined,
-                }),
-            };
-        }
-    }, [trigger, validationRef, form, groupTitle, groupImageUrl, groupCandidateFields, groupExaminerFields, isGrouped, currentGroupNumber, setValue]);
-    // Track isDirty
-    useEffect(() => {
-        onUnsavedChangesChange?.(form.formState.isDirty);
-    }, [form.formState.isDirty, onUnsavedChangesChange]);
-    // ---------------------------------------------------------------
-    // Handlers for Candidate Fields table
-    // ---------------------------------------------------------------
-    const handleUpdateCandidateField = (index, part, value) => {
-        const newFields = groupCandidateFields.map((f, i) => i === index ? { ...f, [part]: value } : f);
-        updateGroupData({ candidateFields: newFields, fields: newFields });
-        setValue('candidateFields', newFields, { shouldDirty: true });
-        setValue('fields', newFields, { shouldDirty: true });
-    };
-    const handleAddCandidateField = () => {
-        const newFields = [...groupCandidateFields, { key: '', answer: '' }];
-        updateGroupData({ candidateFields: newFields, fields: newFields });
-        setValue('candidateFields', newFields, { shouldDirty: true });
-        setValue('fields', newFields, { shouldDirty: true });
-    };
-    const handleRemoveCandidateField = (index) => {
-        const newFields = groupCandidateFields.filter((_, i) => i !== index);
-        updateGroupData({ candidateFields: newFields, fields: newFields });
-        setValue('candidateFields', newFields, { shouldDirty: true });
-        setValue('fields', newFields, { shouldDirty: true });
-    };
-    // ---------------------------------------------------------------
-    // Handlers for Examiner Fields table
-    // ---------------------------------------------------------------
-    const handleUpdateExaminerField = (index, part, value) => {
-        const newFields = groupExaminerFields.map((f, i) => i === index ? { ...f, [part]: value } : f);
-        updateGroupData({ examinerFields: newFields });
-        setValue('examinerFields', newFields, { shouldDirty: true });
-    };
-    const handleAddExaminerField = () => {
-        const newFields = [...groupExaminerFields, { key: '', answer: '' }];
-        updateGroupData({ examinerFields: newFields });
-        setValue('examinerFields', newFields, { shouldDirty: true });
-    };
-    const handleRemoveExaminerField = (index) => {
-        const newFields = groupExaminerFields.filter((_, i) => i !== index);
-        updateGroupData({ examinerFields: newFields });
-        setValue('examinerFields', newFields, { shouldDirty: true });
-    };
-    // ---------------------------------------------------------------
-    // Handlers for Expected Answers
-    // ---------------------------------------------------------------
-    const addExpectedAnswer = () => {
-        setValue('expectedAnswers', [...watchedExpectedAnswers, ''], { shouldValidate: true, shouldDirty: true });
-    };
-    const handleExpectedAnswerChange = (index, value) => {
-        const newAnswers = [...watchedExpectedAnswers];
-        newAnswers[index] = value;
-        setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
-    };
-    const removeExpectedAnswer = (index) => {
-        if (watchedExpectedAnswers.length > 1) {
-            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
-            setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
-        }
-    };
-    // ---------------------------------------------------------------
-    // Display helpers
-    // ---------------------------------------------------------------
-    const displayQuestionNumber = typeof questionIndex === 'number' && !isNaN(questionIndex)
-        ? questionIndex + 1
-        : (typeof questionIndexInPart === 'number' && !isNaN(questionIndexInPart)
-            ? questionIndexInPart + 1
-            : '?');
-    const modeLabel = viewMode === 'ANSWER' ? 'Part 2a (Examiner hỏi - Candidate trả lời)' : 'Part 2b (Candidate hỏi - Examiner trả lời)';
-    const audioLabel = viewMode === 'ANSWER' ? 'Audio câu hỏi của Examiner' : 'Audio câu trả lời của Examiner';
-    const answerLabel = viewMode === 'ANSWER' ? 'Đáp án mong muốn (Candidate nói gì)' : 'Câu hỏi mong muốn (Candidate hỏi gì)';
-    const answerPlaceholder = viewMode === 'ANSWER' ? "VD: It's in King Road." : "VD: Where is Alex's house?";
-    // Color scheme based on viewMode
-    const modeColors = viewMode === 'ANSWER'
-        ? { badge: 'bg-blue-50 text-blue-700 border-blue-200', icon: '📣', gradientFrom: 'from-blue-500', gradientTo: 'to-cyan-500' }
-        : { badge: 'bg-purple-50 text-purple-700 border-purple-200', icon: '🎤', gradientFrom: 'from-purple-500', gradientTo: 'to-pink-500' };
-    const [isClientMode, setIsClientMode] = useState(false);
-    // ─── Preview Mode ────────────────────────────────────────────────
-    if (isClientMode) {
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { className: "text-lg font-bold", children: "\uD83D\uDC41\uFE0F Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndSpeakInfoExchangeClient, { questionData: {
-                        audioUrl: watchedAudioUrl,
-                        title: groupTitle,
-                        imageUrl: groupImageUrl,
-                        fields: groupCandidateFields,
-                        candidateFields: groupCandidateFields,
-                        examinerFields: groupExaminerFields,
-                        expectedAnswers: watchedExpectedAnswers,
-                        points: watchedPoints,
-                        explanation: watchedExplanation,
-                    }, viewMode: viewMode })] }));
-    }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
-                    { text: 'Nhập tiêu đề chung cho bảng thông tin (ví dụ: Shopping List, Holiday Plans)' },
-                    { text: 'Upload hình ảnh minh họa nếu có' },
-                    { text: 'Thiết lập bảng thông tin Candidate và Examiner — mỗi bảng có các cặp key/value' },
-                    { text: 'Upload audio câu hỏi cho từng câu' },
-                    { text: 'Chọn chế độ: ANSWER (trả lời) hoặc ASK (đặt câu hỏi)' },
-                    { text: 'Nhập đáp án/câu hỏi mong muốn và giải thích' },
-                ], tips: ['Trường có giá trị "?" là trường học sinh cần tìm câu trả lời'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs(CardTitle, { className: "text-lg font-bold text-gray-900", children: ["Trao \u0111\u1ED5i th\u00F4ng tin \u2014 C\u00E2u #", displayQuestionNumber] }), _jsx("p", { className: "text-sm text-gray-500", children: modeLabel })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${modeColors.badge}`, children: [modeColors.icon, " ", viewMode === 'ANSWER' ? 'Examiner → Candidate' : 'Candidate → Examiner', _jsx("span", { className: "text-gray-400", children: "|" }), " ", modeLabel] }), isFirstInGroup ? (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-teal-500 via-emerald-500 to-cyan-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md", children: _jsx(Table2, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Th\u00F4ng tin chung" }), isGrouped && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-300 bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: ["Nh\u00F3m ", currentGroupNumber] }))] }), _jsx("p", { className: "text-sm text-gray-500", children: "D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m \u2014 Ti\u00EAu \u0111\u1EC1, h\u00ECnh \u1EA3nh, v\u00E0 2 b\u1EA3ng th\u00F4ng tin" })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1 ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: groupTitle, onChange: (e) => {
-                                            updateGroupData({ title: e.target.value });
-                                            setValue('title', e.target.value, { shouldDirty: true });
-                                        }, placeholder: "VD: Katy's house", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh minh ho\u1EA1"] }), _jsx(FileUpload, { accept: "image/*", value: groupImageUrl, onChange: (url) => {
-                                            updateGroupData({ imageUrl: url });
-                                            setValue('imageUrl', url, { shouldDirty: true });
-                                        }, placeholder: "Upload h\u00ECnh \u1EA3nh", label: "", autoUpload: true, prefix: "info-exchange" }), groupImageUrl && (_jsx(ImagePreview, { imageUrl: groupImageUrl, label: "H\u00ECnh \u1EA3nh minh ho\u1EA1" }))] }), _jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "rounded-xl border border-teal-200 overflow-hidden shadow-sm bg-white", children: [_jsx("div", { className: "bg-gradient-to-r from-teal-600 to-emerald-600 px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm", children: _jsx(Table2, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-bold text-white tracking-wide", children: "Candidate's Copy" }), _jsx("p", { className: "text-[10px] text-teal-100 font-medium", children: "B\u1EA3ng th\u00F4ng tin h\u1ECDc sinh nh\u00ECn th\u1EA5y" })] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-2 py-0.5 text-[10px] font-bold text-white", children: [groupCandidateFields.length, " d\u00F2ng"] }) })] }) }), _jsx("div", { className: "bg-teal-50/60 border-b border-teal-100 px-4 py-2", children: _jsx("p", { className: "text-xs font-semibold text-teal-800 text-center", children: groupTitle || '(Chưa nhập tiêu đề)' }) }), _jsxs("div", { className: "grid grid-cols-[40px_1fr_1fr_36px] bg-gradient-to-r from-teal-50/80 to-emerald-50/80 border-b border-teal-100", children: [_jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider text-center", children: "#" }), _jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider", children: "Key" }), _jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider", children: "Value" }), _jsx("div", {})] }), _jsx("div", { className: "divide-y divide-gray-100", children: groupCandidateFields.map((field, index) => (_jsxs("div", { className: "grid grid-cols-[40px_1fr_1fr_36px] items-center bg-white hover:bg-teal-50/30 transition-colors group/row", children: [_jsx("div", { className: "px-2 py-2 flex justify-center", children: _jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100 text-teal-700 font-bold text-[11px]", children: index + 1 }) }), _jsx("div", { className: "px-1.5 py-1.5", children: _jsx(Input, { value: field.key, onChange: (e) => handleUpdateCandidateField(index, 'key', e.target.value), placeholder: "VD: Where", className: "h-8 text-sm border-gray-200 bg-white focus:border-teal-400 focus:ring-teal-200 transition-all" }) }), _jsx("div", { className: "px-1.5 py-1.5", children: _jsx(Input, { value: field.answer, onChange: (e) => handleUpdateCandidateField(index, 'answer', e.target.value), placeholder: "VD: King Road", className: "h-8 text-sm border-gray-200 bg-white focus:border-teal-400 focus:ring-teal-200 transition-all" }) }), _jsx("div", { className: "px-1 py-1.5 flex justify-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => handleRemoveCandidateField(index), disabled: groupCandidateFields.length <= 1, className: "h-7 w-7 text-gray-300 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/row:opacity-100 transition-all disabled:opacity-0 disabled:group-hover/row:opacity-30", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, index))) }), _jsx("div", { className: "border-t border-dashed border-teal-200 bg-teal-50/30", children: _jsxs("button", { type: "button", onClick: handleAddCandidateField, className: "w-full flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-teal-600 hover:text-teal-700 hover:bg-teal-50 transition-colors cursor-pointer", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm d\u00F2ng"] }) })] }) }), _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "rounded-xl border border-amber-200 overflow-hidden shadow-sm bg-white", children: [_jsx("div", { className: "bg-gradient-to-r from-amber-600 to-orange-600 px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm", children: _jsx(Table2, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-bold text-white tracking-wide", children: "Examiner's Copy" }), _jsx("p", { className: "text-[10px] text-amber-100 font-medium", children: "B\u1EA3ng th\u00F4ng tin gi\u00E1m kh\u1EA3o nh\u00ECn th\u1EA5y" })] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-2 py-0.5 text-[10px] font-bold text-white", children: [groupExaminerFields.length, " d\u00F2ng"] }) })] }) }), _jsx("div", { className: "bg-amber-50/60 border-b border-amber-100 px-4 py-2", children: _jsx("p", { className: "text-xs font-semibold text-amber-800 text-center", children: groupTitle || '(Chưa nhập tiêu đề)' }) }), _jsxs("div", { className: "grid grid-cols-[40px_1fr_1fr_36px] bg-gradient-to-r from-amber-50/80 to-orange-50/80 border-b border-amber-100", children: [_jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider text-center", children: "#" }), _jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider", children: "Key" }), _jsx("div", { className: "px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider", children: "Value" }), _jsx("div", {})] }), _jsx("div", { className: "divide-y divide-gray-100", children: groupExaminerFields.map((field, index) => (_jsxs("div", { className: "grid grid-cols-[40px_1fr_1fr_36px] items-center bg-white hover:bg-amber-50/30 transition-colors group/row", children: [_jsx("div", { className: "px-2 py-2 flex justify-center", children: _jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-amber-100 text-amber-700 font-bold text-[11px]", children: index + 1 }) }), _jsx("div", { className: "px-1.5 py-1.5", children: _jsx(Input, { value: field.key, onChange: (e) => handleUpdateExaminerField(index, 'key', e.target.value), placeholder: "VD: Where", className: "h-8 text-sm border-gray-200 bg-white focus:border-amber-400 focus:ring-amber-200 transition-all" }) }), _jsx("div", { className: "px-1.5 py-1.5", children: _jsx(Input, { value: field.answer, onChange: (e) => handleUpdateExaminerField(index, 'answer', e.target.value), placeholder: "VD: King Road", className: "h-8 text-sm border-gray-200 bg-white focus:border-amber-400 focus:ring-amber-200 transition-all" }) }), _jsx("div", { className: "px-1 py-1.5 flex justify-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => handleRemoveExaminerField(index), disabled: groupExaminerFields.length <= 1, className: "h-7 w-7 text-gray-300 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/row:opacity-100 transition-all disabled:opacity-0 disabled:group-hover/row:opacity-30", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, index))) }), _jsx("div", { className: "border-t border-dashed border-amber-200 bg-amber-50/30", children: _jsxs("button", { type: "button", onClick: handleAddExaminerField, className: "w-full flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-amber-600 hover:text-amber-700 hover:bg-amber-50 transition-colors cursor-pointer", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm d\u00F2ng"] }) })] }) })] })] })] })) : (
-            /* Read-only view of the shared group data for non-first questions */
-            _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow shadow-teal-100/30", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 via-emerald-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-teal-100 shadow-sm", children: _jsx(Table2, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Th\u00F4ng tin chung" }), _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 Ch\u1EC9 \u0111\u1ECDc"] })] }), _jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "\u0110\u01B0\u1EE3c qu\u1EA3n l\u00FD b\u1EDFi c\u00E2u h\u1ECFi \u0111\u1EA7u ti\u00EAn trong nh\u00F3m" })] })] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-3", children: [groupTitle && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-teal-50/50 border border-teal-100", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-teal-500 shrink-0" }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: groupTitle })] })), groupImageUrl && (_jsx(ImagePreview, { imageUrl: groupImageUrl, label: groupTitle || 'Hình ảnh minh hoạ' })), _jsxs("div", { className: "space-y-4", children: [groupCandidateFields.length > 0 && (_jsxs("div", { className: "rounded-xl overflow-hidden border border-teal-200 shadow-sm", children: [_jsx("div", { className: "bg-gradient-to-r from-teal-600 to-emerald-600 px-3 py-2.5", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded bg-white/20", children: _jsx(Table2, { className: "h-3 w-3 text-white" }) }), _jsx("span", { className: "text-xs font-bold text-white tracking-wide", children: "Candidate's Copy" })] }), _jsxs("span", { className: "text-[10px] font-semibold text-teal-100 bg-white/15 rounded-full px-1.5 py-0.5", children: [groupCandidateFields.length, " d\u00F2ng"] })] }) }), _jsx("div", { className: "bg-teal-50/60 text-center font-semibold text-xs py-2 border-b border-teal-100 text-teal-800", children: groupTitle || '(Chưa nhập tiêu đề)' }), _jsxs("div", { className: "grid grid-cols-2 bg-teal-50/40 border-b border-teal-100", children: [_jsx("div", { className: "px-3 py-1.5 text-[10px] font-bold text-teal-600 uppercase tracking-wider", children: "Key" }), _jsx("div", { className: "px-3 py-1.5 text-[10px] font-bold text-teal-600 uppercase tracking-wider", children: "Value" })] }), _jsx("div", { className: "divide-y divide-gray-100", children: groupCandidateFields.map((row, index) => (_jsxs("div", { className: "grid grid-cols-2 bg-white hover:bg-teal-50/20 transition-colors", children: [_jsx("div", { className: "px-3 py-2 text-sm font-medium text-gray-700", children: row.key || _jsx("span", { className: "text-gray-300 italic", children: '(Chưa nhập)' }) }), _jsx("div", { className: "px-3 py-2 text-sm text-gray-800", children: row.answer || _jsx("span", { className: "text-gray-300", children: '—' }) })] }, index))) })] })), groupExaminerFields.length > 0 && (_jsxs("div", { className: "rounded-xl overflow-hidden border border-amber-200 shadow-sm", children: [_jsx("div", { className: "bg-gradient-to-r from-amber-600 to-orange-600 px-3 py-2.5", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded bg-white/20", children: _jsx(Table2, { className: "h-3 w-3 text-white" }) }), _jsx("span", { className: "text-xs font-bold text-white tracking-wide", children: "Examiner's Copy" })] }), _jsxs("span", { className: "text-[10px] font-semibold text-amber-100 bg-white/15 rounded-full px-1.5 py-0.5", children: [groupExaminerFields.length, " d\u00F2ng"] })] }) }), _jsx("div", { className: "bg-amber-50/60 text-center font-semibold text-xs py-2 border-b border-amber-100 text-amber-800", children: groupTitle || '(Chưa nhập tiêu đề)' }), _jsxs("div", { className: "grid grid-cols-2 bg-amber-50/40 border-b border-amber-100", children: [_jsx("div", { className: "px-3 py-1.5 text-[10px] font-bold text-amber-600 uppercase tracking-wider", children: "Key" }), _jsx("div", { className: "px-3 py-1.5 text-[10px] font-bold text-amber-600 uppercase tracking-wider", children: "Value" })] }), _jsx("div", { className: "divide-y divide-gray-100", children: groupExaminerFields.map((row, index) => (_jsxs("div", { className: "grid grid-cols-2 bg-white hover:bg-amber-50/20 transition-colors", children: [_jsx("div", { className: "px-3 py-2 text-sm font-medium text-gray-700", children: row.key || _jsx("span", { className: "text-gray-300 italic", children: '(Chưa nhập)' }) }), _jsx("div", { className: "px-3 py-2 text-sm text-gray-800", children: row.answer || _jsx("span", { className: "text-gray-300", children: '—' }) })] }, index))) })] }))] }), groupCandidateFields.length === 0 && groupExaminerFields.length === 0 && (_jsx("div", { className: "text-center py-4 text-sm text-gray-400 italic", children: "Ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u b\u1EA3ng th\u00F4ng tin" }))] }) })] })), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs(CardTitle, { className: "text-lg font-bold text-gray-900", children: ["C\u00E2u h\u1ECFi #", displayQuestionNumber] }), _jsx("p", { className: "text-sm text-gray-500", children: viewMode === 'ANSWER'
-                                                        ? 'Học sinh nghe câu hỏi của Examiner và trả lời'
-                                                        : 'Học sinh đặt câu hỏi cho Examiner' })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsx("div", { className: "flex flex-col md:flex-row gap-6", children: _jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }) }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), audioLabel, " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: `audio-info-exchange-${displayQuestionNumber}`, label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "info-exchange" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsxs("p", { className: "text-sm text-gray-500", children: [watchedExpectedAnswers.filter(a => a.trim()).length, " \u0111\u00E1p \u00E1n \u0111\u00E3 nh\u1EADp"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700", children: [_jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: "Ch\u1EA5m th\u1EE7 c\u00F4ng: gi\u00E1o vi\u00EAn tham kh\u1EA3o \u0111\u00E1p \u00E1n \u0111\u1EC3 ch\u1EA5m \u00B7 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng: AI so s\u00E1nh gi\u1ECDng n\u00F3i h\u1ECDc sinh v\u1EDBi \u0111\u00E1p \u00E1n." })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: answerPlaceholder, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers?.message && (_jsx(FormMessage, {}))] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
-}
-//# sourceMappingURL=ListenAndSpeakInfoExchangeCreator.js.map
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as r,useMemo as a,useRef as i,useState as l}from"react";import{Card as s,CardContent as n,CardHeader as d,CardTitle as c}from"../../../../components/ui/card";import{Label as o}from"../../../../components/ui/label";import{Button as m}from"../../../../components/ui/button";import{Input as h}from"../../../../components/ui/input";import{Textarea as g}from"../../../../components/ui/textarea";import{Form as p,FormControl as x,FormField as b,FormItem as u,FormMessage as f}from"../../../../components/ui/form";import{FileUpload as N}from"../../../../components/ui/file-upload";import{PointsInput as v}from"../../../../components/ui/points-input";import{useInfoExchangeGroup as y}from"../../_shared/hooks/useInfoExchangeGroup";import{usePresignedFileUrl as w}from"../../../../shared/lib/hooks";import{listenAndSpeakInfoExchangeSchema as k}from"../../../../shared/lib/validation/listen-and-speak-info-exchange.validation";import{Plus as C,Trash2 as F,Mic as U,Volume2 as A,Table2 as S,MessageSquareText as D,ImageIcon as j,BookOpen as E,Eye as V,Pencil as T,Info as R,ListChecks as _}from"lucide-react";import{useReactHookForm as W}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as I}from"../../../../shared/lib/hooks/useDebouncedCallback";import{CreatorGuide as J}from"../../components/CreatorGuide";import{ListenAndSpeakInfoExchangeClient as K}from"./ListenAndSpeakInfoExchangeClient";function O({imageUrl:t,label:r}){const{previewUrl:a}=w(t);return a?e("div",{className:"mt-2 rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm",children:e("img",{src:a,alt:r,className:"max-h-80 w-full object-contain bg-gray-50 p-2"})}):null}const z=[{key:"",answer:""}];export function ListenAndSpeakInfoExchangeCreator({questionIndex:w,initialData:H,onChange:q,validationRef:G,onUnsavedChangesChange:P,isFirstInGroup:B,partId:L,groups:$,questionIndexInPart:M,viewMode:Q="ANSWER"}){const X=Boolean($&&$.length>0),Y=a(()=>{if(void 0!==B)return B;if(!$||!$.length||void 0===M)return!0;let e=0;for(const t of $){if(M===e)return!0;e+=t.questionCount}return!1},[B,$,M]),Z=a(()=>{if($&&$.length>0){if(void 0===M)return 1;let e=0;for(let t=0;t<$.length;t++)if(e+=$[t].questionCount,M<e)return t+1;return 1}const e=H;return e?.groupNumber??1},[$,M,H]),{title:ee,imageUrl:te,fields:re,candidateFields:ae,examinerFields:ie,updateGroupData:le}=y(L,Z),se=i(null);r(()=>{if(Y&&H){const e=JSON.stringify({title:H.title,imageUrl:H.imageUrl,candidateFields:H.candidateFields,examinerFields:H.examinerFields,fields:H.fields});if(se.current===e)return;se.current=e;const t=H.candidateFields&&H.candidateFields.length>0?H.candidateFields:H.fields&&H.fields.length>0?H.fields:z,r=H.examinerFields&&H.examinerFields.length>0?H.examinerFields:z;le({title:H.title||"",imageUrl:H.imageUrl||"",fields:t,candidateFields:t,examinerFields:r})}},[Y,H,le]);const ne=ee||H?.title||"",de=te||H?.imageUrl||"",ce=ae&&ae.length>0?ae:H?.candidateFields&&H.candidateFields.length>0?H.candidateFields:H?.fields&&H.fields.length>0?H.fields:z,oe=ie&&ie.length>0?ie:H?.examinerFields&&H.examinerFields.length>0?H.examinerFields:z,me=W({zodSchema:k,defaultValues:{title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,audioUrl:H?.audioUrl||"",expectedAnswers:H?.expectedAnswers?.length?H.expectedAnswers:[""],points:H?.points??1,explanation:H?.explanation||""}}),{control:he,watch:ge,setValue:pe,trigger:xe,clearErrors:be}=me,ue=ge("audioUrl"),fe=ge("expectedAnswers"),Ne=ge("points"),ve=ge("explanation"),ye=i(H),we=i(!1),ke=i(q),Ce=i("");r(()=>{ke.current=q},[q]);const Fe=I(e=>{ke.current?.(e)},300);r(()=>{P?.(me.formState.isDirty)},[me.formState.isDirty,P]),r(()=>{const e={title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,audioUrl:H?.audioUrl||"",expectedAnswers:H?.expectedAnswers?.length?H.expectedAnswers:[""],points:H?.points??1,explanation:H?.explanation||""};if(!(JSON.stringify(ye.current)!==JSON.stringify(H)))return;ye.current=H;const t={audioUrl:ue,expectedAnswers:fe,points:Ne,explanation:ve},r=t.points===e.points&&t.explanation===e.explanation&&t.audioUrl===e.audioUrl&&JSON.stringify(t.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(r&&!0===H?.isCompleted)return;!r&&(e.audioUrl!==t.audioUrl||JSON.stringify(e.expectedAnswers)!==JSON.stringify(t.expectedAnswers))&&(we.current=!0,me.reset(e),setTimeout(()=>{we.current=!1},150))},[H,me,ue,fe,ve,Ne,ne,de,ce,oe]);const Ue=JSON.stringify(fe);r(()=>{if(we.current){const e=JSON.stringify({title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,audioUrl:ue,expectedAnswers:fe,points:Ne,explanation:ve,groupNumber:X?Z:void 0});return void(Ce.current=e)}const e={title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,audioUrl:ue,expectedAnswers:fe,points:Ne,explanation:ve,groupNumber:X?Z:void 0},t=JSON.stringify(e);Ce.current!==t&&(Ce.current=t,Fe(e))},[ue,Ue,Ne,ve,ne,de,ce,oe,X,Z,Fe]),r(()=>{G&&(G.current={triggerValidation:async()=>{pe("title",ne),pe("imageUrl",de),pe("fields",ce),pe("candidateFields",ce),pe("examinerFields",oe);return await xe()},getFormData:()=>({...me.getValues(),title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,groupNumber:X?Z:void 0})})},[xe,G,me,ne,de,ce,oe,X,Z,pe]),r(()=>{P?.(me.formState.isDirty)},[me.formState.isDirty,P]);const Ae=(e,t,r)=>{const a=ce.map((a,i)=>i===e?{...a,[t]:r}:a);le({candidateFields:a,fields:a}),pe("candidateFields",a,{shouldDirty:!0}),pe("fields",a,{shouldDirty:!0})},Se=(e,t,r)=>{const a=oe.map((a,i)=>i===e?{...a,[t]:r}:a);le({examinerFields:a}),pe("examinerFields",a,{shouldDirty:!0})},De="number"!=typeof w||isNaN(w)?"number"!=typeof M||isNaN(M)?"?":M+1:w+1,je="ANSWER"===Q?"Part 2a (Examiner hỏi - Candidate trả lời)":"Part 2b (Candidate hỏi - Examiner trả lời)",Ee="ANSWER"===Q?"Audio câu hỏi của Examiner":"Audio câu trả lời của Examiner",Ve="ANSWER"===Q?"VD: It's in King Road.":"VD: Where is Alex's house?",Te="ANSWER"===Q?{badge:"bg-blue-50 text-blue-700 border-blue-200",icon:"📣",gradientFrom:"from-blue-500",gradientTo:"to-cyan-500"}:{badge:"bg-purple-50 text-purple-700 border-purple-200",icon:"🎤",gradientFrom:"from-purple-500",gradientTo:"to-pink-500"},[Re,_e]=l(!1);return t("div",Re?{className:"space-y-6",children:[e(s,{children:e(d,{children:t("div",{className:"flex items-center justify-between",children:[e(c,{className:"text-lg font-bold",children:"👁️ Chế độ xem trước (Preview)"}),t(m,{variant:"outline",size:"sm",onClick:()=>_e(!1),children:[e(T,{className:"mr-2 h-4 w-4"}),"Quay lại chỉnh sửa"]})]})})}),e(K,{questionData:{audioUrl:ue,title:ne,imageUrl:de,fields:ce,candidateFields:ce,examinerFields:oe,expectedAnswers:fe,points:Ne,explanation:ve},viewMode:Q})]}:{className:"space-y-6",children:[e(J,{colorScheme:"blue",steps:[{text:"Nhập tiêu đề chung cho bảng thông tin (ví dụ: Shopping List, Holiday Plans)"},{text:"Upload hình ảnh minh họa nếu có"},{text:"Thiết lập bảng thông tin Candidate và Examiner — mỗi bảng có các cặp key/value"},{text:"Upload audio câu hỏi cho từng câu"},{text:"Chọn chế độ: ANSWER (trả lời) hoặc ASK (đặt câu hỏi)"},{text:"Nhập đáp án/câu hỏi mong muốn và giải thích"}],tips:['Trường có giá trị "?" là trường học sinh cần tìm câu trả lời']}),t(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(d,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm",children:e(_,{className:"h-4 w-4 text-white"})}),t("div",{children:[t(c,{className:"text-lg font-bold text-gray-900",children:["Trao đổi thông tin — Câu #",De]}),e("p",{className:"text-sm text-gray-500",children:je})]})]}),t(m,{type:"button",variant:"outline",size:"sm",onClick:()=>_e(!0),disabled:!ue,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50",children:[e(V,{className:"h-4 w-4"}),"Preview"]})]})})]}),t("div",{className:`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${Te.badge}`,children:[Te.icon," ","ANSWER"===Q?"Examiner → Candidate":"Candidate → Examiner",e("span",{className:"text-gray-400",children:"|"})," ",je]}),t(s,Y?{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-teal-500 via-emerald-500 to-cyan-500"}),e(d,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md",children:e(S,{className:"h-5 w-5 text-white"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-lg font-bold text-gray-900",children:"Thông tin chung"}),X&&t("span",{className:"inline-flex items-center rounded-full border border-teal-300 bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-700",children:["Nhóm ",Z]})]}),e("p",{className:"text-sm text-gray-500",children:"Dùng chung cho tất cả câu hỏi trong nhóm — Tiêu đề, hình ảnh, và 2 bảng thông tin"})]})]})}),t(n,{className:"space-y-5",children:[t("div",{className:"space-y-2",children:[t(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(D,{className:"h-4 w-4 text-teal-500"}),"Tiêu đề ",e("span",{className:"text-red-500",children:"*"})]}),e(h,{value:ne,onChange:e=>{le({title:e.target.value}),pe("title",e.target.value,{shouldDirty:!0})},placeholder:"VD: Katy's house",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200"})]}),t("div",{className:"space-y-2",children:[t(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(j,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh minh hoạ"]}),e(N,{accept:"image/*",value:de,onChange:e=>{le({imageUrl:e}),pe("imageUrl",e,{shouldDirty:!0})},placeholder:"Upload hình ảnh",label:"",autoUpload:!0,prefix:"info-exchange"}),de&&e(O,{imageUrl:de,label:"Hình ảnh minh hoạ"})]}),t("div",{className:"space-y-5",children:[e("div",{className:"space-y-3",children:t("div",{className:"rounded-xl border border-teal-200 overflow-hidden shadow-sm bg-white",children:[e("div",{className:"bg-gradient-to-r from-teal-600 to-emerald-600 px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2.5",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm",children:e(S,{className:"h-4 w-4 text-white"})}),t("div",{children:[e("h4",{className:"text-sm font-bold text-white tracking-wide",children:"Candidate's Copy"}),e("p",{className:"text-[10px] text-teal-100 font-medium",children:"Bảng thông tin học sinh nhìn thấy"})]})]}),e("div",{className:"flex items-center gap-2",children:t("span",{className:"inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-2 py-0.5 text-[10px] font-bold text-white",children:[ce.length," dòng"]})})]})}),e("div",{className:"bg-teal-50/60 border-b border-teal-100 px-4 py-2",children:e("p",{className:"text-xs font-semibold text-teal-800 text-center",children:ne||"(Chưa nhập tiêu đề)"})}),t("div",{className:"grid grid-cols-[40px_1fr_1fr_36px] bg-gradient-to-r from-teal-50/80 to-emerald-50/80 border-b border-teal-100",children:[e("div",{className:"px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider text-center",children:"#"}),e("div",{className:"px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider",children:"Key"}),e("div",{className:"px-2 py-2 text-[10px] font-bold text-teal-600 uppercase tracking-wider",children:"Value"}),e("div",{})]}),e("div",{className:"divide-y divide-gray-100",children:ce.map((r,a)=>t("div",{className:"grid grid-cols-[40px_1fr_1fr_36px] items-center bg-white hover:bg-teal-50/30 transition-colors group/row",children:[e("div",{className:"px-2 py-2 flex justify-center",children:e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-teal-100 text-teal-700 font-bold text-[11px]",children:a+1})}),e("div",{className:"px-1.5 py-1.5",children:e(h,{value:r.key,onChange:e=>Ae(a,"key",e.target.value),placeholder:"VD: Where",className:"h-8 text-sm border-gray-200 bg-white focus:border-teal-400 focus:ring-teal-200 transition-all"})}),e("div",{className:"px-1.5 py-1.5",children:e(h,{value:r.answer,onChange:e=>Ae(a,"answer",e.target.value),placeholder:"VD: King Road",className:"h-8 text-sm border-gray-200 bg-white focus:border-teal-400 focus:ring-teal-200 transition-all"})}),e("div",{className:"px-1 py-1.5 flex justify-center",children:e(m,{type:"button",variant:"ghost",size:"icon",onClick:()=>(e=>{const t=ce.filter((t,r)=>r!==e);le({candidateFields:t,fields:t}),pe("candidateFields",t,{shouldDirty:!0}),pe("fields",t,{shouldDirty:!0})})(a),disabled:ce.length<=1,className:"h-7 w-7 text-gray-300 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/row:opacity-100 transition-all disabled:opacity-0 disabled:group-hover/row:opacity-30",children:e(F,{className:"h-3.5 w-3.5"})})})]},a))}),e("div",{className:"border-t border-dashed border-teal-200 bg-teal-50/30",children:t("button",{type:"button",onClick:()=>{const e=[...ce,{key:"",answer:""}];le({candidateFields:e,fields:e}),pe("candidateFields",e,{shouldDirty:!0}),pe("fields",e,{shouldDirty:!0})},className:"w-full flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-teal-600 hover:text-teal-700 hover:bg-teal-50 transition-colors cursor-pointer",children:[e(C,{className:"h-3.5 w-3.5"}),"Thêm dòng"]})})]})}),e("div",{className:"space-y-3",children:t("div",{className:"rounded-xl border border-amber-200 overflow-hidden shadow-sm bg-white",children:[e("div",{className:"bg-gradient-to-r from-amber-600 to-orange-600 px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2.5",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm",children:e(S,{className:"h-4 w-4 text-white"})}),t("div",{children:[e("h4",{className:"text-sm font-bold text-white tracking-wide",children:"Examiner's Copy"}),e("p",{className:"text-[10px] text-amber-100 font-medium",children:"Bảng thông tin giám khảo nhìn thấy"})]})]}),e("div",{className:"flex items-center gap-2",children:t("span",{className:"inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-2 py-0.5 text-[10px] font-bold text-white",children:[oe.length," dòng"]})})]})}),e("div",{className:"bg-amber-50/60 border-b border-amber-100 px-4 py-2",children:e("p",{className:"text-xs font-semibold text-amber-800 text-center",children:ne||"(Chưa nhập tiêu đề)"})}),t("div",{className:"grid grid-cols-[40px_1fr_1fr_36px] bg-gradient-to-r from-amber-50/80 to-orange-50/80 border-b border-amber-100",children:[e("div",{className:"px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider text-center",children:"#"}),e("div",{className:"px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider",children:"Key"}),e("div",{className:"px-2 py-2 text-[10px] font-bold text-amber-600 uppercase tracking-wider",children:"Value"}),e("div",{})]}),e("div",{className:"divide-y divide-gray-100",children:oe.map((r,a)=>t("div",{className:"grid grid-cols-[40px_1fr_1fr_36px] items-center bg-white hover:bg-amber-50/30 transition-colors group/row",children:[e("div",{className:"px-2 py-2 flex justify-center",children:e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-amber-100 text-amber-700 font-bold text-[11px]",children:a+1})}),e("div",{className:"px-1.5 py-1.5",children:e(h,{value:r.key,onChange:e=>Se(a,"key",e.target.value),placeholder:"VD: Where",className:"h-8 text-sm border-gray-200 bg-white focus:border-amber-400 focus:ring-amber-200 transition-all"})}),e("div",{className:"px-1.5 py-1.5",children:e(h,{value:r.answer,onChange:e=>Se(a,"answer",e.target.value),placeholder:"VD: King Road",className:"h-8 text-sm border-gray-200 bg-white focus:border-amber-400 focus:ring-amber-200 transition-all"})}),e("div",{className:"px-1 py-1.5 flex justify-center",children:e(m,{type:"button",variant:"ghost",size:"icon",onClick:()=>(e=>{const t=oe.filter((t,r)=>r!==e);le({examinerFields:t}),pe("examinerFields",t,{shouldDirty:!0})})(a),disabled:oe.length<=1,className:"h-7 w-7 text-gray-300 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/row:opacity-100 transition-all disabled:opacity-0 disabled:group-hover/row:opacity-30",children:e(F,{className:"h-3.5 w-3.5"})})})]},a))}),e("div",{className:"border-t border-dashed border-amber-200 bg-amber-50/30",children:t("button",{type:"button",onClick:()=>{const e=[...oe,{key:"",answer:""}];le({examinerFields:e}),pe("examinerFields",e,{shouldDirty:!0})},className:"w-full flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-amber-600 hover:text-amber-700 hover:bg-amber-50 transition-colors cursor-pointer",children:[e(C,{className:"h-3.5 w-3.5"}),"Thêm dòng"]})})]})})]})]})]}:{className:"overflow-hidden border-0 bg-white shadow shadow-teal-100/30",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 via-emerald-400 to-cyan-400"}),e(d,{className:"pb-3",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-teal-100 shadow-sm",children:e(S,{className:"h-4 w-4 text-teal-600"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-base font-semibold text-gray-800",children:"Thông tin chung"}),t("span",{className:"inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500",children:["Nhóm ",Z," — Chỉ đọc"]})]}),e("p",{className:"text-xs text-gray-400 mt-0.5",children:"Được quản lý bởi câu hỏi đầu tiên trong nhóm"})]})]})}),e(n,{className:"pt-0",children:t("div",{className:"space-y-3",children:[ne&&t("div",{className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-teal-50/50 border border-teal-100",children:[e(D,{className:"h-4 w-4 text-teal-500 shrink-0"}),e("span",{className:"text-sm font-medium text-gray-700",children:ne})]}),de&&e(O,{imageUrl:de,label:ne||"Hình ảnh minh hoạ"}),t("div",{className:"space-y-4",children:[ce.length>0&&t("div",{className:"rounded-xl overflow-hidden border border-teal-200 shadow-sm",children:[e("div",{className:"bg-gradient-to-r from-teal-600 to-emerald-600 px-3 py-2.5",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded bg-white/20",children:e(S,{className:"h-3 w-3 text-white"})}),e("span",{className:"text-xs font-bold text-white tracking-wide",children:"Candidate's Copy"})]}),t("span",{className:"text-[10px] font-semibold text-teal-100 bg-white/15 rounded-full px-1.5 py-0.5",children:[ce.length," dòng"]})]})}),e("div",{className:"bg-teal-50/60 text-center font-semibold text-xs py-2 border-b border-teal-100 text-teal-800",children:ne||"(Chưa nhập tiêu đề)"}),t("div",{className:"grid grid-cols-2 bg-teal-50/40 border-b border-teal-100",children:[e("div",{className:"px-3 py-1.5 text-[10px] font-bold text-teal-600 uppercase tracking-wider",children:"Key"}),e("div",{className:"px-3 py-1.5 text-[10px] font-bold text-teal-600 uppercase tracking-wider",children:"Value"})]}),e("div",{className:"divide-y divide-gray-100",children:ce.map((r,a)=>t("div",{className:"grid grid-cols-2 bg-white hover:bg-teal-50/20 transition-colors",children:[e("div",{className:"px-3 py-2 text-sm font-medium text-gray-700",children:r.key||e("span",{className:"text-gray-300 italic",children:"(Chưa nhập)"})}),e("div",{className:"px-3 py-2 text-sm text-gray-800",children:r.answer||e("span",{className:"text-gray-300",children:"—"})})]},a))})]}),oe.length>0&&t("div",{className:"rounded-xl overflow-hidden border border-amber-200 shadow-sm",children:[e("div",{className:"bg-gradient-to-r from-amber-600 to-orange-600 px-3 py-2.5",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-5 w-5 items-center justify-center rounded bg-white/20",children:e(S,{className:"h-3 w-3 text-white"})}),e("span",{className:"text-xs font-bold text-white tracking-wide",children:"Examiner's Copy"})]}),t("span",{className:"text-[10px] font-semibold text-amber-100 bg-white/15 rounded-full px-1.5 py-0.5",children:[oe.length," dòng"]})]})}),e("div",{className:"bg-amber-50/60 text-center font-semibold text-xs py-2 border-b border-amber-100 text-amber-800",children:ne||"(Chưa nhập tiêu đề)"}),t("div",{className:"grid grid-cols-2 bg-amber-50/40 border-b border-amber-100",children:[e("div",{className:"px-3 py-1.5 text-[10px] font-bold text-amber-600 uppercase tracking-wider",children:"Key"}),e("div",{className:"px-3 py-1.5 text-[10px] font-bold text-amber-600 uppercase tracking-wider",children:"Value"})]}),e("div",{className:"divide-y divide-gray-100",children:oe.map((r,a)=>t("div",{className:"grid grid-cols-2 bg-white hover:bg-amber-50/20 transition-colors",children:[e("div",{className:"px-3 py-2 text-sm font-medium text-gray-700",children:r.key||e("span",{className:"text-gray-300 italic",children:"(Chưa nhập)"})}),e("div",{className:"px-3 py-2 text-sm text-gray-800",children:r.answer||e("span",{className:"text-gray-300",children:"—"})})]},a))})]})]}),0===ce.length&&0===oe.length&&e("div",{className:"text-center py-4 text-sm text-gray-400 italic",children:"Chưa có dữ liệu bảng thông tin"})]})})]}),t(p,{...me,children:[t(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"}),e(d,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(U,{className:"h-4 w-4 text-white"})}),t("div",{children:[t(c,{className:"text-lg font-bold text-gray-900",children:["Câu hỏi #",De]}),e("p",{className:"text-sm text-gray-500",children:"ANSWER"===Q?"Học sinh nghe câu hỏi của Examiner và trả lời":"Học sinh đặt câu hỏi cho Examiner"})]})]})}),t(n,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:e("div",{className:"flex flex-col md:flex-row gap-6",children:e("div",{className:"flex-1",children:e(v,{...me.register("points",{valueAsNumber:!0}),error:me.formState.errors?.points?.message})})})}),t("div",{className:"space-y-2",children:[t(o,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(A,{className:"h-4 w-4 text-indigo-500"}),Ee," ",e("span",{className:"text-red-500",children:"*"})]}),e(b,{control:he,name:"audioUrl",render:({field:r})=>t(u,{children:[e(x,{children:e(N,{id:`audio-info-exchange-${De}`,label:"",accept:"audio/*",value:r.value,onChange:e=>{r.onChange(e),be("audioUrl")},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"info-exchange"})}),e(f,{})]})})]})]})]}),t(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-green-400 to-emerald-500"}),e(d,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm",children:e(D,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(c,{className:"text-lg font-bold text-gray-900",children:"Đáp án mong muốn"}),t("p",{className:"text-sm text-gray-500",children:[fe.filter(e=>e.trim()).length," đáp án đã nhập"]})]})]}),t(m,{type:"button",variant:"outline",size:"sm",onClick:()=>{pe("expectedAnswers",[...fe,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(C,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),t(n,{className:"space-y-4",children:[t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700",children:[e(R,{className:"mt-0.5 h-3.5 w-3.5 shrink-0"}),e("span",{children:"Chấm thủ công: giáo viên tham khảo đáp án để chấm · Chấm tự động: AI so sánh giọng nói học sinh với đáp án."})]}),e(b,{control:he,name:"expectedAnswers",render:()=>t(u,{children:[e("div",{className:"space-y-3",children:fe.map((r,a)=>t("div",{className:"flex items-start gap-3 group/answer",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1",children:a+1}),t("div",{className:"flex-1",children:[e(h,{placeholder:Ve,value:r||"",onChange:e=>((e,t)=>{const r=[...fe];r[e]=t,pe("expectedAnswers",r,{shouldValidate:!0,shouldDirty:!0})})(a,e.target.value),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),me.formState.errors?.expectedAnswers?.[a]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.expectedAnswers[a]?.message})]}),fe.length>1&&e(m,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(fe.length>1){const t=fe.filter((t,r)=>r!==e);pe("expectedAnswers",t,{shouldValidate:!0,shouldDirty:!0})}})(a),className:"mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity","aria-label":`Xóa đáp án ${a+1}`,children:e(F,{className:"h-4 w-4"})})]},a))}),me.formState.errors?.expectedAnswers?.message&&e(f,{})]})})]})]}),t(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(d,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(E,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(n,{children:e(g,{...me.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none",rows:3})})]})]})]})}

package/dist/components/questions/types/listen-and-speak-info-exchange/register.d.ts

@@ -1,3 +1,2 @@
 import { QuestionTypeRegistration } from '../../creator/question-type-registry';
 export declare const listenAndSpeakInfoExchangeRegistration: QuestionTypeRegistration;
-//# sourceMappingURL=register.d.ts.map

package/dist/components/questions/types/listen-and-speak-info-exchange/register.js

@@ -1,88 +1 @@
-import { ListenAndSpeakInfoExchangeCreator } from './ListenAndSpeakInfoExchangeCreator';
-export const listenAndSpeakInfoExchangeRegistration = {
-    component: ListenAndSpeakInfoExchangeCreator,
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data?.explanation || '',
-        content: {
-            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
-            audioUrl: data.audioUrl,
-        },
-        answer: {
-            expectedAnswers: data.expectedAnswers || [],
-        },
-        ...(data.groupNumber && {
-            questionGroup: {
-                payload: {
-                    title: data.title || '',
-                    imageUrl: data.imageUrl || '',
-                    candidateFields: data.candidateFields || data.fields || [],
-                    examinerFields: data.examinerFields || [],
-                },
-                groupNumber: data.groupNumber,
-            },
-        }),
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data?.explanation || '',
-        content: {
-            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
-            audioUrl: data.audioUrl,
-        },
-        answer: {
-            expectedAnswers: data.expectedAnswers || [],
-        },
-        ...(data.groupNumber && {
-            questionGroup: {
-                payload: {
-                    title: data.title || '',
-                    imageUrl: data.imageUrl || '',
-                    candidateFields: data.candidateFields || data.fields || [],
-                    examinerFields: data.examinerFields || [],
-                },
-                groupNumber: data.groupNumber,
-            },
-        }),
-    }),
-    transformInitialData: (data) => {
-        const content = data?.content;
-        const answer = data?.answer || data?.correctAnswer || data?.correct_answer;
-        const groupPayload = data?.questionGroup?.payload || {};
-        const points = data?.total_points
-            ? parseFloat(data.total_points)
-            : (data?.points || content?.points || answer?.points || 1);
-        const explanation = data?.explanation || '';
-        const legacyFields = groupPayload.fields || [];
-        return {
-            // Group data
-            title: groupPayload.title || '',
-            imageUrl: groupPayload.imageUrl || '',
-            fields: legacyFields,
-            candidateFields: groupPayload.candidateFields || legacyFields,
-            examinerFields: groupPayload.examinerFields || [],
-            // Per-question
-            audioUrl: content?.audioUrl || '',
-            expectedAnswers: answer?.expectedAnswers || [],
-            explanation,
-            points,
-        };
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        viewMode: ctx.viewMode,
-    }),
-};
-//# sourceMappingURL=register.js.map
+import{ListenAndSpeakInfoExchangeCreator as e}from"./ListenAndSpeakInfoExchangeCreator";export const listenAndSpeakInfoExchangeRegistration={component:e,wrapOnSave:(e,t)=>({type:t.questionType,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||"",content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl},answer:{expectedAnswers:e.expectedAnswers||[]},...e.groupNumber&&{questionGroup:{payload:{title:e.title||"",imageUrl:e.imageUrl||"",candidateFields:e.candidateFields||e.fields||[],examinerFields:e.examinerFields||[]},groupNumber:e.groupNumber}}}),wrapOnChange:(e,t)=>({type:t.questionType,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||"",content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl},answer:{expectedAnswers:e.expectedAnswers||[]},...e.groupNumber&&{questionGroup:{payload:{title:e.title||"",imageUrl:e.imageUrl||"",candidateFields:e.candidateFields||e.fields||[],examinerFields:e.examinerFields||[]},groupNumber:e.groupNumber}}}),transformInitialData:e=>{const t=e?.content,n=e?.answer||e?.correctAnswer||e?.correct_answer,a=e?.questionGroup?.payload||{},i=e?.total_points?parseFloat(e.total_points):e?.points||t?.points||n?.points||1,s=e?.explanation||"",o=a.fields||[];return{title:a.title||"",imageUrl:a.imageUrl||"",fields:o,candidateFields:a.candidateFields||o,examinerFields:a.examinerFields||[],audioUrl:t?.audioUrl||"",expectedAnswers:n?.expectedAnswers||[],explanation:s,points:i}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId,viewMode:e.viewMode})};

package/dist/components/questions/types/listen-and-speak-info-exchange/transform.d.ts

@@ -1,3 +1,2 @@
 import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
 export declare const transformListenAndSpeakInfoExchange: TransformHandler;
-//# sourceMappingURL=transform.d.ts.map