@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/listen-and-speak-image-group/transform.js

@@ -1,26 +1 @@
-export const transformListenAndSpeakImageGroup = (question) => {
-    const contentData = question.content;
-    const answerData = question.answer;
-    const questionGroup = question.questionGroup;
-    const expectedAnswers = answerData?.expectedAnswers || [];
-    const apiContent = {
-        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
-        activeImageId: contentData?.activeImageId || answerData?.activeImageId || '',
-        isBackup: contentData?.isBackup || answerData?.isBackup || false,
-    };
-    const result = {
-        apiContent,
-        apiCorrectAnswer: {
-            expectedAnswers: expectedAnswers,
-        },
-    };
-    if (contentData?.groupImages) {
-        result.sceneData = { images: contentData.groupImages };
-        result.groupNumber = contentData.groupNumber || questionGroup?.groupNumber || 1;
-    }
-    else if (questionGroup?.payload?.images) {
-        result.sceneData = { images: questionGroup.payload.images };
-        result.groupNumber = questionGroup.groupNumber;
-    }
-    return result;
-};
+export const transformListenAndSpeakImageGroup=e=>{const a=e.content,r=e.answer,o=e.questionGroup,s=r?.expectedAnswers||[],u={apiContent:{audioUrl:a?.audioUrl||r?.audioUrl||"",activeImageId:a?.activeImageId||r?.activeImageId||"",isBackup:a?.isBackup||r?.isBackup||!1},apiCorrectAnswer:{expectedAnswers:s}};return a?.groupImages?(u.sceneData={images:a.groupImages},u.groupNumber=a.groupNumber||o?.groupNumber||1):o?.payload?.images&&(u.sceneData={images:o.payload.images},u.groupNumber=o.groupNumber),u};

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

@@ -1,38 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Volume2, Mic, CheckCircle2, Play, Pause, Info, ArrowLeftRight } from 'lucide-react';
-import { Button } from '../../../../components/ui/button';
-import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
-// ─── Sub-component: Custom Audio Player ──────────────────────────────────────
-function QuestionAudioPlayer({ audioUrl }) {
-    const { previewUrl } = usePresignedFileUrl(audioUrl);
-    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
-    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) }), _jsx(Volume2, { className: "h-4 w-4 text-indigo-400" })] }));
-}
-// ─── Sub-component: Presigned Image Preview ──────────────────────────────────
-function ImagePreview({ imageUrl, title }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(imageUrl);
-    if (isLoading) {
-        return (_jsx("div", { className: "w-full aspect-[4/3] rounded-xl border-2 border-gray-200 bg-gray-100 animate-pulse flex items-center justify-center", children: _jsx("span", { className: "text-gray-400 text-sm", children: "\u0110ang t\u1EA3i..." }) }));
-    }
-    if (!previewUrl)
-        return null;
-    return (_jsx("img", { src: previewUrl, alt: title || 'Illustration', className: "w-full rounded-xl border-2 border-gray-200 object-cover shadow-sm" }));
-}
-// ─── Sub-component: Info Table ────────────────────────────────────────────────
-function InfoTable({ label, title, rows, headerColor, }) {
-    return (_jsxs("div", { className: "rounded-xl overflow-hidden border border-gray-200 shadow-sm", children: [_jsx("div", { className: `${headerColor} text-white text-xs font-bold text-center py-1.5 tracking-widest uppercase`, children: label }), _jsx("div", { className: "bg-amber-50 text-center font-semibold text-sm py-2 border-b border-gray-200", children: title }), _jsx("table", { className: "w-full text-sm", children: _jsx("tbody", { children: rows.map((row, index) => (_jsxs("tr", { className: "border-b border-gray-100 last:border-0 bg-white", children: [_jsx("td", { className: "px-3 py-2 font-medium text-gray-700 w-1/2", children: row.key }), _jsx("td", { className: `px-3 py-2 w-1/2 ${row.value === '?' ? 'text-gray-400 font-bold text-base' : 'text-gray-800'}`, children: row.value })] }, index))) }) })] }));
-}
-// ─── Main Client Component ───────────────────────────────────────────────────
-export function ListenAndSpeakInfoExchangeClient({ questionData, isReviewMode = false, viewMode = 'ANSWER', }) {
-    const { audioUrl, title, imageUrl, fields, expectedAnswers = [], explanation } = questionData;
-    const qData = questionData;
-    // Use dual fields if available, fall back to legacy single fields
-    const candidateRows = (qData.candidateFields || fields || [])
-        .map((f) => ({ key: f.key, value: f.answer }));
-    const examinerRows = (qData.examinerFields || [])
-        .map((f) => ({ key: f.key, value: f.answer }));
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(ArrowLeftRight, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Nghe v\u00E0 n\u00F3i (Trao \u0111\u1ED5i th\u00F4ng tin \u2014 ", viewMode === 'ANSWER' ? 'Trả lời' : 'Đặt câu hỏi', ")"] })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), _jsxs("div", { className: "flex flex-col lg:flex-row gap-4", children: [imageUrl && (_jsx("div", { className: "lg:w-1/2", children: _jsx(ImagePreview, { imageUrl: imageUrl, title: title }) })), _jsxs("div", { className: "flex-1 space-y-4", children: [_jsx(InfoTable, { label: "CANDIDATE'S COPY", title: title, rows: candidateRows, headerColor: "bg-teal-600" }), _jsx(InfoTable, { label: "EXAMINER'S COPY", title: title, rows: examinerRows, headerColor: "bg-amber-600" })] })] }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: viewMode === 'ANSWER'
-                                        ? 'Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây'
-                                        : 'Học sinh sẽ nhấn nút ghi âm và đặt câu hỏi tại đây' })] }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: viewMode === 'ANSWER' ? 'Các đáp án mong muốn' : 'Các câu hỏi mong muốn' })] }), _jsx("div", { className: "space-y-2", children: expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Volume2 as i,Mic as t,CheckCircle2 as a,Play as l,Pause as s,Info as d,ArrowLeftRight as n}from"lucide-react";import{Button as o}from"../../../../components/ui/button";import{usePresignedFileUrl as c,useAudioPreview as m}from"../../../../shared/lib/hooks";function g({audioUrl:t}){const{previewUrl:a}=c(t),{isPlaying:d,currentTime:n,duration:g,progressPercentage:h,handlePlayPause:x,handleProgressClick:b,formatTime:u}=m(a);return r("div",{className:"flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5",children:[e(o,{variant:"outline",size:"icon",onClick:x,disabled:!a,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(d?s:l,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[u(n)," / ",u(g)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:b,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${h}%`}})}),e(i,{className:"h-4 w-4 text-indigo-400"})]})}function h({imageUrl:r,title:i}){const{previewUrl:t,isLoading:a}=c(r);return a?e("div",{className:"w-full aspect-[4/3] rounded-xl border-2 border-gray-200 bg-gray-100 animate-pulse flex items-center justify-center",children:e("span",{className:"text-gray-400 text-sm",children:"Đang tải..."})}):t?e("img",{src:t,alt:i||"Illustration",className:"w-full rounded-xl border-2 border-gray-200 object-cover shadow-sm"}):null}function x({label:i,title:t,rows:a,headerColor:l}){return r("div",{className:"rounded-xl overflow-hidden border border-gray-200 shadow-sm",children:[e("div",{className:`${l} text-white text-xs font-bold text-center py-1.5 tracking-widest uppercase`,children:i}),e("div",{className:"bg-amber-50 text-center font-semibold text-sm py-2 border-b border-gray-200",children:t}),e("table",{className:"w-full text-sm",children:e("tbody",{children:a.map((i,t)=>r("tr",{className:"border-b border-gray-100 last:border-0 bg-white",children:[e("td",{className:"px-3 py-2 font-medium text-gray-700 w-1/2",children:i.key}),e("td",{className:"px-3 py-2 w-1/2 "+("?"===i.value?"text-gray-400 font-bold text-base":"text-gray-800"),children:i.value})]},t))})})]})}export function ListenAndSpeakInfoExchangeClient({questionData:l,isReviewMode:s=!1,viewMode:o="ANSWER"}){const{audioUrl:c,title:m,imageUrl:b,fields:u,expectedAnswers:p=[],explanation:f}=l,N=l,y=(N.candidateFields||u||[]).map(e=>({key:e.key,value:e.answer})),v=(N.examinerFields||[]).map(e=>({key:e.key,value:e.answer}));return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[e("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm",children:e(n,{className:"h-4 w-4"})}),r("span",{className:"text-sm font-medium text-gray-700",children:["Nghe và nói (Trao đổi thông tin — ","ANSWER"===o?"Trả lời":"Đặt câu hỏi",")"]})]})}),r("div",{className:"p-5 space-y-5",children:[c?e(g,{audioUrl:c}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(i,{className:"h-4 w-4 text-gray-400"}),e("span",{className:"text-xs text-gray-400",children:"Chưa có audio câu hỏi"})]}),r("div",{className:"flex flex-col lg:flex-row gap-4",children:[b&&e("div",{className:"lg:w-1/2",children:e(h,{imageUrl:b,title:m})}),r("div",{className:"flex-1 space-y-4",children:[e(x,{label:"CANDIDATE'S COPY",title:m,rows:y,headerColor:"bg-teal-600"}),e(x,{label:"EXAMINER'S COPY",title:m,rows:v,headerColor:"bg-amber-600"})]})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50",children:e(t,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:"ANSWER"===o?"Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây":"Học sinh sẽ nhấn nút ghi âm và đặt câu hỏi tại đây"})]}),s&&p.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(a,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"ANSWER"===o?"Các đáp án mong muốn":"Các câu hỏi mong muốn"})]}),e("div",{className:"space-y-2",children:p.map((i,t)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("span",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold",children:t+1}),e("span",{className:"text-sm text-green-800",children:i})]},t))})]}),s&&f&&r("div",{className:"rounded-xl border border-indigo-200 bg-indigo-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e(d,{className:"h-4 w-4 text-indigo-600"}),e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích"})]}),e("p",{className:"text-sm text-indigo-700 leading-relaxed",children:f})]})]})]})})}

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

@@ -1,385 +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 }) })] })] })] }));
-}
+"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})})]})]})]})}