@tinyweb_dev/oe-exam-sdk 0.1.0

package/dist/components/questions/types/fill-missing-words-in-grid/FillMissingWordsInGridCreator.js

@@ -0,0 +1,672 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Pencil, Eye, Trash2, Grid3X3, Lightbulb, CheckCircle2, BookOpen } from 'lucide-react';
+import { toast } from 'sonner';
+import { t } from '../../../../shared/lib/i18n';
+import { FillMissingWordsInGridClient } from './FillMissingWordsInGridClient';
+function FillMissingWordsInGridCreatorContent({ initialData, onSave, onCancel, // eslint-disable-line @typescript-eslint/no-unused-vars
+onChange, onUnsavedChangesChange, externalErrors = [], }) {
+    // Grid dimensions - FIXED: 4 rows, 7 columns
+    const [rows, setRows] = useState(4); // Fixed to 4
+    const [columns, setColumns] = useState(7); // Fixed to 7
+    // Points/Score
+    const [points, setPoints] = useState(initialData?.points || 1);
+    // Explanation (optional)
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    // Grid data: 2D array, null = empty cell (missing word)
+    const [grid, setGrid] = useState(() => {
+        if (initialData?.content?.grid) {
+            return initialData.content.grid;
+        }
+        // Initialize empty grid
+        return Array(rows)
+            .fill(null)
+            .map(() => Array(columns).fill(null));
+    });
+    // Missing words list - NEW: Support both API format (answers) and internal format (missingLetters)
+    const [missingLetters, setMissingLetters] = useState(() => {
+        if (initialData?.answer?.missingLetters) {
+            // Internal format
+            console.log('📝 Using missingLetters format');
+            return initialData.answer.missingLetters.map((item, index) => {
+                const [row1Based, column1Based] = item.position.split('-').map(Number);
+                const row = (row1Based || 1) - 1;
+                const column = (column1Based || 1) - 1;
+                return {
+                    id: `word-${index}-${Date.now()}`,
+                    row,
+                    column,
+                    correctAnswer: item.correctAnswer,
+                };
+            });
+        }
+        else if (initialData?.answer?.answers && typeof initialData.answer.answers === 'object') {
+            // API format
+            const answersObj = initialData.answer.answers;
+            const result = Object.entries(answersObj).map(([position, correctAnswer], index) => {
+                const [row1Based, column1Based] = position.split('-').map(Number);
+                const row = (row1Based || 1) - 1;
+                const column = (column1Based || 1) - 1;
+                return {
+                    id: `word-${index}-${Date.now()}-${Math.random()}`,
+                    row,
+                    column,
+                    correctAnswer: correctAnswer,
+                };
+            });
+            return result;
+        }
+        return [];
+    });
+    // Disabled cells list - NEW: cells that are disabled (not fillable, not missing)
+    const [disabledCells, setDisabledCells] = useState(() => {
+        if (initialData?.content?.disabledCells) {
+            return initialData.content.disabledCells;
+        }
+        return [];
+    });
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(true); // Start as true - prevent false "unsaved changes" on initial mount
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const hasInitializedOnceRef = useRef(false); // Start as false - track if component has fully initialized
+    const hasSetInitialUnsavedStateRef = useRef(false); // Track if we've set initial unsaved state to false
+    // CRITICAL FIX: Store the ORIGINAL saved data from API (not updated when store updates)
+    // This is used to compare against to determine if there are unsaved changes
+    const originalSavedDataRef = useRef(undefined);
+    const hasOriginalDataRef = useRef(false); // Track if we have original data from API
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // CRITICAL FIX: Initialize originalSavedDataRef ONLY ONCE when we first receive valid initialData from API
+    // This ref should NOT be updated when the store updates (which would make initialData prop change)
+    useEffect(() => {
+        // Only set original data once, and only if initialData has valid content (from API)
+        if (!hasOriginalDataRef.current && initialData?.content?.grid) {
+            // Deep clone to prevent reference issues
+            originalSavedDataRef.current = JSON.parse(JSON.stringify(initialData));
+            hasOriginalDataRef.current = true;
+            console.log('📌 [FillMissingWordsInGridCreator] Saved original data from API:', originalSavedDataRef.current);
+        }
+    }, [initialData]);
+    // Track unsaved changes and notify parent
+    // FIXED: Compare against originalSavedDataRef (stable) instead of initialData (which updates with store)
+    useEffect(() => {
+        // Don't notify during initialization
+        if (isInitializingRef.current) {
+            return;
+        }
+        // Use original saved data (from API) for comparison, not live initialData
+        const savedData = originalSavedDataRef.current;
+        // If we have original saved data, compare against it
+        if (hasOriginalDataRef.current && savedData?.content?.grid) {
+            // Existing question - check for changes from ORIGINAL saved state
+            const hasGridChanges = JSON.stringify(grid) !== JSON.stringify(savedData.content.grid);
+            // Normalize disabledCells arrays (sort before comparison)
+            const normalizedDisabledCells = [...(disabledCells || [])].sort();
+            const normalizedSavedDisabledCells = [...(savedData.content.disabledCells || [])].sort();
+            const hasDisabledCellsChanges = JSON.stringify(normalizedDisabledCells) !== JSON.stringify(normalizedSavedDisabledCells);
+            // Normalize points (convert to number for comparison)
+            const normalizedPoints = typeof points === 'string' ? Number(points) : points;
+            const normalizedSavedPoints = typeof savedData?.points === 'string'
+                ? Number(savedData.points)
+                : (savedData?.points || 1);
+            const hasPointsChanges = normalizedPoints !== normalizedSavedPoints;
+            // Normalize answers objects (sort keys before comparison)
+            const savedAnswers = savedData?.answer?.answers || {};
+            const currentAnswers = missingLetters.reduce((acc, item) => {
+                acc[`${item.row + 1}-${item.column + 1}`] = item.correctAnswer;
+                return acc;
+            }, {});
+            const savedAnswersSorted = Object.keys(savedAnswers).sort().reduce((acc, key) => {
+                acc[key] = savedAnswers[key];
+                return acc;
+            }, {});
+            const currentAnswersSorted = Object.keys(currentAnswers).sort().reduce((acc, key) => {
+                acc[key] = currentAnswers[key];
+                return acc;
+            }, {});
+            const hasMissingLettersChanges = JSON.stringify(currentAnswersSorted) !== JSON.stringify(savedAnswersSorted);
+            const hasAnyChanges = hasGridChanges || hasDisabledCellsChanges || hasPointsChanges || hasMissingLettersChanges;
+            onUnsavedChangesChange?.(hasAnyChanges);
+        }
+        else {
+            // New question (no original data) - check if user has entered any data
+            const hasGridContent = grid.some(row => row.some(cell => cell !== null && cell !== ''));
+            const hasMissingLettersContent = missingLetters.length > 0;
+            const hasDisabledCellsContent = disabledCells.length > 0;
+            const hasAnyData = hasGridContent || hasMissingLettersContent || hasDisabledCellsContent;
+            onUnsavedChangesChange?.(hasAnyData);
+        }
+    }, [grid, missingLetters, disabledCells, points, onUnsavedChangesChange]);
+    // Sync state from initialData when it changes
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            if (initialData) {
+                // FIXED: Do not update rows/columns from initialData - keep fixed at 4x7
+                // if (initialData.content?.rows !== undefined) setRows(initialData.content.rows);
+                // if (initialData.content?.columns !== undefined) setColumns(initialData.content.columns);
+                if (initialData.content?.grid !== undefined)
+                    setGrid(initialData.content.grid);
+                // NEW: Support both formats
+                if (initialData.answer?.missingLetters) {
+                    setMissingLetters((prev) => {
+                        const positionToId = new Map(prev.map((item) => [`${item.row}-${item.column}`, item.id]));
+                        return initialData.answer.missingLetters.map((item, index) => {
+                            const [row1Based, column1Based] = item.position.split('-').map(Number);
+                            const row = (row1Based || 1) - 1;
+                            const column = (column1Based || 1) - 1;
+                            const positionKey = `${row}-${column}`;
+                            const existingId = positionToId.get(positionKey);
+                            const id = existingId || `word-${index}-${Date.now()}-${Math.random()}`;
+                            return {
+                                id,
+                                row,
+                                column,
+                                correctAnswer: item.correctAnswer,
+                            };
+                        });
+                    });
+                }
+                else if (initialData.answer?.answers) {
+                    setMissingLetters((prev) => {
+                        const positionToId = new Map(prev.map((item) => [`${item.row}-${item.column}`, item.id]));
+                        const result = Object.entries(initialData.answer.answers).map(([position, correctAnswer], index) => {
+                            const [row1Based, column1Based] = position.split('-').map(Number);
+                            const row = (row1Based || 1) - 1;
+                            const column = (column1Based || 1) - 1;
+                            const positionKey = `${row}-${column}`;
+                            const existingId = positionToId.get(positionKey);
+                            const id = existingId || `word-${index}-${Date.now()}-${Math.random()}`;
+                            return {
+                                id,
+                                row,
+                                column,
+                                correctAnswer: correctAnswer,
+                            };
+                        });
+                        return result;
+                    });
+                }
+                // NEW: Sync disabled cells (ensure it's an array)
+                if (initialData.content?.disabledCells !== undefined) {
+                    const disabledCellsArray = Array.isArray(initialData.content.disabledCells)
+                        ? initialData.content.disabledCells
+                        : [];
+                    setDisabledCells(disabledCellsArray);
+                }
+                // Sync points (convert to number if it's a string)
+                if (initialData.points !== undefined) {
+                    const pointsValue = initialData.points;
+                    setPoints(typeof pointsValue === 'string' ? Number(pointsValue) : pointsValue);
+                }
+                // Sync explanation
+                if (initialData.explanation !== undefined) {
+                    setExplanation(initialData.explanation);
+                }
+                // FIXED: Keep rows and columns fixed
+                // setRows(4);
+                // setColumns(7);
+                // setGrid(Array(4).fill(null).map(() => Array(7).fill(null)));
+                // setMissingLetters([]);
+            }
+            // SIMPLIFIED: After syncing state from initialData, mark initialization complete
+            // FIXED: Only set unsaved changes to false on FIRST initialization, not on every initialData change
+            setTimeout(() => {
+                isInitializingRef.current = false;
+                // Only on first initialization, set the initial status
+                if (!hasInitializedOnceRef.current) {
+                    hasInitializedOnceRef.current = true;
+                    hasSetInitialUnsavedStateRef.current = true;
+                    // If we have initialData from API, question is already saved - no unsaved changes
+                    if (initialData?.content?.grid) {
+                        onUnsavedChangesChange?.(false);
+                    }
+                }
+                // Note: After first initialization, we don't reset unsaved changes state
+                // because the useEffect that tracks changes will handle it correctly
+            }, 100);
+        }
+        else if (!hasInitializedOnceRef.current) {
+            // If no initialData and haven't initialized yet, mark as initialized after short delay
+            setTimeout(() => {
+                isInitializingRef.current = false;
+                hasInitializedOnceRef.current = true;
+                hasSetInitialUnsavedStateRef.current = true;
+            }, 100);
+        }
+    }, [initialData, rows, columns, onUnsavedChangesChange]);
+    // Update grid when dimensions change (always update, not just when not initializing)
+    useEffect(() => {
+        setGrid((prev) => {
+            // Check if dimensions actually changed
+            const currentRows = prev.length;
+            const currentCols = prev[0]?.length || 0;
+            // If dimensions are the same, don't recreate grid
+            if (currentRows === rows && currentCols === columns) {
+                return prev;
+            }
+            const newGrid = [];
+            for (let i = 0; i < rows; i++) {
+                const newRow = [];
+                for (let j = 0; j < columns; j++) {
+                    // Preserve existing values if within bounds
+                    if (i < prev.length && j < prev[i]?.length) {
+                        newRow.push(prev[i][j]);
+                    }
+                    else {
+                        newRow.push(null);
+                    }
+                }
+                newGrid.push(newRow);
+            }
+            return newGrid;
+        });
+        // Remove missing letters that are out of bounds (only when not initializing)
+        if (!isInitializingRef.current) {
+            setMissingLetters((prev) => {
+                const filtered = prev.filter((letter) => letter.row < rows && letter.column < columns);
+                const removedCount = prev.length - filtered.length;
+                if (removedCount > 0) {
+                    // Show warning as text instead of toast
+                    setGeneralErrors((prev) => [
+                        ...prev.filter((err) => !err.includes('ô còn thiếu ngoài phạm vi grid')),
+                        `Đã xóa ${removedCount} ô còn thiếu ngoài phạm vi grid mới (${rows}x${columns})`,
+                    ]);
+                }
+                return filtered;
+            });
+        }
+    }, [rows, columns]);
+    // Convert to payload format and call onChange
+    useEffect(() => {
+        // Don't call onChange until we've initialized at least once
+        if (isInitializingRef.current) {
+            return;
+        }
+        // NEW: Output API format directly - no transformation needed
+        const payload = {
+            content: {
+                grid,
+                rows,
+                columns,
+                disabledCells: [...disabledCells].sort(), // Sort for consistent comparison
+            },
+            answer: {
+                // Convert missingLetters array to answers object for API format
+                answers: missingLetters.reduce((acc, item) => {
+                    acc[`${item.row + 1}-${item.column + 1}`] = item.correctAnswer;
+                    return acc;
+                }, {}),
+                caseSensitive: false,
+            },
+            points: typeof points === 'string' ? Number(points) : points, // Ensure points is a number
+            explanation: explanation || '', // Include explanation in payload
+        };
+        const payloadString = JSON.stringify(payload);
+        // Only call onChange if payload actually changed
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            onChangeRef.current?.(payload);
+        }
+    }, [grid, rows, columns, missingLetters, disabledCells, points, explanation]);
+    // Parse externalErrors and set validation errors for missing letters and general errors
+    useEffect(() => {
+        if (externalErrors && externalErrors.length > 0) {
+            const newFieldErrors = {};
+            const newGeneralErrors = [];
+            externalErrors.forEach((error) => {
+                // Check if error is about missing letter answer
+                // Format: "Ô còn thiếu #X ở vị trí (row, col) phải có đáp án đúng"
+                const match = error.match(/Ô còn thiếu #(\d+) ở vị trí \((\d+), (\d+)\) phải có đáp án đúng/);
+                if (match) {
+                    const [, , rowStr, colStr] = match;
+                    const row = parseInt(rowStr) - 1; // Convert 1-based to 0-based
+                    const col = parseInt(colStr) - 1; // Convert 1-based to 0-based
+                    // Find the missing letter by position
+                    const letter = missingLetters.find((item) => item.row === row && item.column === col);
+                    if (letter) {
+                        newFieldErrors[letter.id] = 'Vui lòng nhập đáp án đúng';
+                    }
+                }
+                else {
+                    // Other errors go to general errors
+                    newGeneralErrors.push(error);
+                }
+            });
+            // Merge with existing validation errors
+            setValidationErrors((prev) => ({
+                ...prev,
+                ...newFieldErrors,
+            }));
+            // Set general errors from external (only if changed)
+            if (newGeneralErrors.length > 0) {
+                setGeneralErrors((prev) => {
+                    const isSame = prev.length === newGeneralErrors.length &&
+                        prev.every((err, i) => err === newGeneralErrors[i]);
+                    return isSame ? prev : newGeneralErrors;
+                });
+            }
+        }
+        else {
+            // Clear general errors when externalErrors is empty (only if not already empty)
+            setGeneralErrors((prev) => prev.length === 0 ? prev : []);
+        }
+    }, [externalErrors, missingLetters]);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [validationErrors, setValidationErrors] = useState({});
+    const [dimensionErrors, setDimensionErrors] = useState({});
+    const [generalErrors, setGeneralErrors] = useState([]);
+    // Update grid cell
+    const updateGridCell = useCallback((row, col, value) => {
+        setGrid((prev) => {
+            const newGrid = prev.map((r, i) => r.map((cell, j) => (i === row && j === col ? (value || null) : cell)));
+            return newGrid;
+        });
+        // Clear general errors related to this cell when user fills it
+        if (value && value.trim() !== '') {
+            setGeneralErrors((prev) => prev.filter((err) => !err.includes(`vị trí (${row + 1}, ${col + 1})`)));
+        }
+        // Immediately notify parent that there are unsaved changes when user types
+        onUnsavedChangesChange?.(true);
+    }, [onUnsavedChangesChange]);
+    // Toggle missing word (mark/unmark cell as missing)
+    const toggleMissingLetter = useCallback((row, col) => {
+        const positionKey = `${row}-${col}`;
+        const existing = missingLetters.find((item) => `${item.row}-${item.column}` === positionKey);
+        if (existing) {
+            // Remove from missing letters
+            setMissingLetters((prev) => prev.filter((item) => item.id !== existing.id));
+            // Clear validation error when removing
+            setValidationErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[existing.id];
+                return newErrors;
+            });
+        }
+        else {
+            // Add to missing letters and clear the cell value
+            const cellValue = grid[row]?.[col];
+            const newLetter = {
+                id: `word-${Date.now()}-${Math.random()}`,
+                row,
+                column: col,
+                correctAnswer: cellValue || '',
+            };
+            setMissingLetters((prev) => [...prev, newLetter]);
+            // Clear the cell value in grid
+            updateGridCell(row, col, '');
+            // Clear general errors related to this cell when marked as missing
+            setGeneralErrors((prev) => prev.filter((err) => !err.includes(`vị trí (${row + 1}, ${col + 1})`)));
+        }
+        // Immediately notify parent that there are unsaved changes
+        onUnsavedChangesChange?.(true);
+    }, [grid, missingLetters, updateGridCell, onUnsavedChangesChange]);
+    // Toggle disabled cell (mark/unmark cell as disabled)
+    const toggleDisabledCell = useCallback((row, col) => {
+        const position = `${row + 1}-${col + 1}`;
+        setDisabledCells(prev => {
+            if (prev.includes(position)) {
+                // Remove from disabled cells
+                return prev.filter(p => p !== position);
+            }
+            else {
+                // Add to disabled cells and clear the cell value
+                updateGridCell(row, col, '');
+                // Remove from missing letters if present
+                setMissingLetters(prevMissing => prevMissing.filter(item => !(item.row === row && item.column === col)));
+                return [...prev, position];
+            }
+        });
+        // Clear general errors related to this cell
+        setGeneralErrors((prev) => prev.filter((err) => !err.includes(`vị trí (${row + 1}, ${col + 1})`)));
+        // Immediately notify parent that there are unsaved changes
+        onUnsavedChangesChange?.(true);
+    }, [updateGridCell, onUnsavedChangesChange]);
+    // Update missing letter answer
+    const updateMissingLetter = useCallback((id, field, value) => {
+        setMissingLetters((prev) => prev.map((letter) => (letter.id === id ? { ...letter, [field]: value } : letter)));
+        // Clear validation error when user starts typing
+        if (field === 'correctAnswer') {
+            setValidationErrors((prev) => {
+                const newErrors = { ...prev };
+                if (typeof value === 'string' && value.trim() !== '') {
+                    delete newErrors[id];
+                }
+                return newErrors;
+            });
+        }
+        // Immediately notify parent that there are unsaved changes
+        onUnsavedChangesChange?.(true);
+    }, [onUnsavedChangesChange]);
+    // Remove missing letter
+    const removeMissingLetter = (id) => {
+        setMissingLetters((prev) => prev.filter((letter) => letter.id !== id));
+        // Clear validation error when removing
+        setValidationErrors((prev) => {
+            const newErrors = { ...prev };
+            delete newErrors[id];
+            return newErrors;
+        });
+    };
+    // Validate grid and missing letters
+    const validateGrid = useCallback(() => {
+        const errors = [];
+        const fieldErrors = {};
+        // Validate dimensions
+        if (!rows || rows < 1 || rows > 20) {
+            errors.push('Số hàng phải từ 1 đến 20');
+        }
+        if (!columns || columns < 1 || columns > 20) {
+            errors.push('Số cột phải từ 1 đến 20');
+        }
+        // Check if all cells have value OR are marked as missing OR are disabled
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < columns; col++) {
+                const cellValue = grid[row]?.[col];
+                const isMissing = missingLetters.some((item) => item.row === row && item.column === col);
+                const isDisabled = disabledCells.includes(`${row + 1}-${col + 1}`); // NEW
+                // Cell must have value OR be marked as missing OR be disabled
+                if (!cellValue && !isMissing && !isDisabled) {
+                    errors.push(`Ô ở vị trí (${row + 1}, ${col + 1}) phải có giá trị, được đánh dấu là còn thiếu, hoặc bị vô hiệu hóa`);
+                }
+            }
+        }
+        // Check if all marked missing letters have correctAnswer
+        missingLetters.forEach((letter) => {
+            if (!letter.correctAnswer || letter.correctAnswer.trim() === '') {
+                fieldErrors[letter.id] = 'Vui lòng nhập đáp án đúng';
+            }
+            else if (letter.correctAnswer.length > 100) {
+                fieldErrors[letter.id] = 'Đáp án không được vượt quá 100 ký tự';
+            }
+        });
+        // Update validation errors state
+        setValidationErrors(fieldErrors);
+        setGeneralErrors(errors);
+        return {
+            isValid: errors.length === 0 && Object.keys(fieldErrors).length === 0,
+            errors,
+        };
+    }, [grid, rows, columns, missingLetters]);
+    // Check if a cell is invalid (empty and not marked as missing and not disabled)
+    const isCellInvalid = useCallback((row, col) => {
+        const cellValue = grid[row]?.[col];
+        const isMissing = missingLetters.some((item) => item.row === row && item.column === col);
+        const isDisabled = disabledCells.includes(`${row + 1}-${col + 1}`); // NEW
+        // Cell is invalid if it has no value AND is not marked as missing AND is not disabled
+        return !cellValue && !isMissing && !isDisabled;
+    }, [grid, missingLetters, disabledCells] // NEW: Add disabledCells dependency
+    );
+    // Check if we should show validation highlights (when there are errors)
+    const shouldShowValidation = useCallback(() => {
+        return generalErrors.length > 0 || (externalErrors && externalErrors.length > 0);
+    }, [generalErrors, externalErrors]);
+    // Validate before switching to client mode
+    const handlePreview = () => {
+        const validation = validateGrid();
+        if (!validation.isValid) {
+            // Errors are already set in state by validateGrid
+            return;
+        }
+        setIsClientMode(true);
+    };
+    // Handle save with validation
+    const handleSave = () => {
+        const validation = validateGrid();
+        if (!validation.isValid) {
+            toast.error('Vui lòng điền đầy đủ thông tin!');
+            return;
+        }
+        // Additional validation
+        if (!rows || rows < 1 || rows > 20) {
+            toast.error('Số hàng phải từ 1 đến 20!');
+            return;
+        }
+        if (!columns || columns < 1 || columns > 20) {
+            toast.error('Số cột phải từ 1 đến 20!');
+            return;
+        }
+        if (missingLetters.length === 0) {
+            toast.error('Vui lòng đánh dấu ít nhất 1 ô còn thiếu!');
+            return;
+        }
+        // Check all missing letters have answers
+        for (let i = 0; i < missingLetters.length; i++) {
+            const letter = missingLetters[i];
+            if (!letter.correctAnswer || letter.correctAnswer.trim() === '') {
+                toast.error(t('common.questionType.missingAnswer', { index: String(i + 1), row: String(letter.row + 1), col: String(letter.column + 1) }));
+                return;
+            }
+        }
+        // All validation passed - NEW: Output API format with answers object
+        onSave?.({
+            content: {
+                grid,
+                rows,
+                columns,
+                disabledCells, // NEW: Include disabled cells in save
+            },
+            answer: {
+                answers: missingLetters.reduce((acc, item) => {
+                    acc[`${item.row + 1}-${item.column + 1}`] = item.correctAnswer;
+                    return acc;
+                }, {}),
+                caseSensitive: false,
+            },
+            points, // Include points in save
+            explanation: explanation || '', // Include explanation in save
+        });
+    };
+    // If in client mode, show preview using Client component
+    if (isClientMode) {
+        // Prepare data for Client component
+        const questionData = {
+            content: {
+                grid,
+                rows,
+                columns,
+                disabledCells,
+            },
+            answer: {
+                answers: missingLetters.reduce((acc, item) => {
+                    acc[`${item.row + 1}-${item.column + 1}`] = item.correctAnswer;
+                    return acc;
+                }, {}),
+                caseSensitive: false,
+            },
+        };
+        // Auto-fill correct answers for preview
+        const correctAnswers = missingLetters.reduce((acc, item) => {
+            acc[`${item.row + 1}-${item.column + 1}`] = item.correctAnswer;
+            return acc;
+        }, {});
+        return (_jsx("div", { className: "space-y-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Fill Missing Words In Grid (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }), _jsx(CardContent, { children: _jsx(FillMissingWordsInGridClient, { questionData: questionData, isReviewMode: true, userAnswer: correctAnswers, explanation: explanation }) })] }) }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-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-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 shadow-md", children: _jsx(Grid3X3, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o grid" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o grid v\u00E0 nh\u1EADp c\u00E1c t\u1EEB, \u0111\u00E1nh d\u1EA5u c\u00E1c \u00F4 c\u00F2n thi\u1EBFu" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePreview, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-cyan-200 bg-gradient-to-r from-cyan-50 to-blue-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-cyan-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-cyan-600" }) }), _jsxs("div", { className: "text-sm text-cyan-900", children: [_jsx("p", { className: "font-semibold text-cyan-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-cyan-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-cyan-400" }), "Nh\u1EADp t\u1EEB v\u00E0o c\u00E1c \u00F4 trong grid (4 h\u00E0ng \u00D7 7 c\u1ED9t)"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-cyan-400" }), _jsxs("span", { children: [_jsx("strong", { children: "Double-click:" }), " \u0110\u00E1nh d\u1EA5u \u00F4 c\u00F2n thi\u1EBFu (m\u00E0u xanh d\u01B0\u01A1ng)"] })] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-cyan-400" }), _jsxs("span", { children: [_jsx("strong", { children: "Triple-click:" }), " V\u00F4 hi\u1EC7u h\u00F3a \u00F4 (m\u00E0u \u0111\u1ECF - kh\u00F4ng c\u1EA7n \u0111i\u1EC1n)"] })] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-cyan-400" }), "Nh\u1EADp \u0111\u00E1p \u00E1n \u0111\u00FAng cho m\u1ED7i \u00F4 c\u00F2n thi\u1EBFu"] })] })] })] }) }), _jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }, `points-input-${points}`) }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Grid3X3, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Grid - Nh\u1EADp t\u1EEB v\u00E0o c\u00E1c \u00F4" })] }) }), _jsx("div", { className: "overflow-x-auto rounded-xl border-2 border-indigo-200 bg-gradient-to-br from-indigo-50/50 to-blue-50/50 p-5 shadow-sm", children: _jsxs("div", { className: "inline-block min-w-full", children: [_jsxs("div", { className: "grid gap-1 mb-1", style: { gridTemplateColumns: `auto repeat(${columns}, minmax(0, 1fr))` }, children: [_jsx("div", { className: "h-8" }), Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "flex h-8 items-center justify-center text-xs font-semibold text-gray-600", children: i + 1 }, `col-header-${i}`)))] }), _jsx("div", { className: "grid gap-1", children: grid.map((row, rowIndex) => (_jsxs("div", { className: "grid gap-1", style: { gridTemplateColumns: `auto repeat(${columns}, minmax(0, 1fr))` }, children: [_jsx("div", { className: "flex h-12 items-center justify-center text-xs font-semibold text-gray-600 border-2 border-transparent", children: rowIndex + 1 }), row.map((cell, colIndex) => {
+                                                                const isMissing = missingLetters.some((item) => item.row === rowIndex && item.column === colIndex);
+                                                                const isDisabled = disabledCells.includes(`${rowIndex + 1}-${colIndex + 1}`); // NEW
+                                                                const isInvalid = shouldShowValidation() && isCellInvalid(rowIndex, colIndex);
+                                                                return (_jsxs("div", { className: `relative flex h-12 items-center justify-center border-2 rounded transition-colors ${isDisabled
+                                                                        ? 'border-red-400 bg-red-100 hover:bg-red-150 cursor-pointer' // NEW: Red styling for disabled
+                                                                        : isMissing
+                                                                            ? 'border-blue-500 bg-blue-50 hover:bg-blue-100 cursor-pointer'
+                                                                            : isInvalid
+                                                                                ? 'border-red-500 bg-red-50 hover:bg-red-100'
+                                                                                : cell
+                                                                                    ? 'border-gray-400 bg-white hover:bg-gray-50'
+                                                                                    : 'border-gray-300 bg-gray-100 hover:bg-gray-200'}`, onClick: (e) => {
+                                                                        // Triple-click to toggle disabled
+                                                                        if (e.detail === 3) {
+                                                                            e.preventDefault();
+                                                                            e.stopPropagation();
+                                                                            toggleDisabledCell(rowIndex, colIndex);
+                                                                        }
+                                                                    }, onDoubleClick: (e) => {
+                                                                        e.preventDefault();
+                                                                        e.stopPropagation();
+                                                                        if (!isDisabled) {
+                                                                            toggleMissingLetter(rowIndex, colIndex);
+                                                                        }
+                                                                    }, children: [_jsx(Input, { type: "text", maxLength: 10, value: cell || '', onChange: (e) => {
+                                                                                if (!isMissing && !isDisabled) { // NEW: Also check disabled
+                                                                                    // Trim whitespace and limit length
+                                                                                    const value = e.target.value.trim().slice(0, 10);
+                                                                                    updateGridCell(rowIndex, colIndex, value);
+                                                                                }
+                                                                            }, onDoubleClick: (e) => {
+                                                                                e.preventDefault();
+                                                                                e.stopPropagation();
+                                                                                if (!isDisabled) { // NEW: Only toggle missing if not disabled
+                                                                                    toggleMissingLetter(rowIndex, colIndex);
+                                                                                }
+                                                                            }, disabled: isMissing || isDisabled, readOnly: isMissing || isDisabled, className: `h-full border-0 bg-transparent text-center text-lg font-semibold focus:ring-2 focus:ring-blue-500 ${isMissing || isDisabled ? 'cursor-not-allowed pointer-events-none' : ''} ${isDisabled ? 'text-gray-500' : isMissing ? 'text-blue-600' : ''}`, placeholder: "" }), isMissing && (_jsx("div", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white", children: "?" })), isDisabled && (_jsx("div", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white", children: "\uD83D\uDD12" }))] }, `${rowIndex}-${colIndex}`));
+                                                            })] }, `row-${rowIndex}`))) })] }) })] }), missingLetters.length > 0 && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-blue-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["Danh s\u00E1ch \u00F4 c\u00F2n thi\u1EBFu", _jsx("span", { className: "ml-2 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700", children: missingLetters.length })] })] }), _jsx("div", { className: "space-y-3", children: [...missingLetters]
+                                            .sort((a, b) => {
+                                            if (a.row !== b.row)
+                                                return a.row - b.row;
+                                            return a.column - b.column;
+                                        })
+                                            .map((letter, index) => {
+                                            const cellValue = grid[letter.row]?.[letter.column];
+                                            return (_jsx("div", { className: "rounded-xl border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 shadow-sm transition-all hover:border-blue-300 hover:shadow-md", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500 text-sm font-bold text-white shadow-sm", children: index + 1 }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["V\u1ECB tr\u00ED (", letter.row + 1, ", ", letter.column + 1, ")"] }), cellValue && (_jsxs("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-500", children: ["Hi\u1EC7n t\u1EA1i: \"", cellValue, "\""] }))] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${letter.id}`, className: "text-sm font-medium text-gray-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: `answer-${letter.id}`, type: "text", maxLength: 100, value: letter.correctAnswer, onChange: (e) => updateMissingLetter(letter.id, 'correctAnswer', e.target.value.trim()), onBlur: () => {
+                                                                                if (!letter.correctAnswer || letter.correctAnswer.trim() === '') {
+                                                                                    setValidationErrors((prev) => ({
+                                                                                        ...prev,
+                                                                                        [letter.id]: 'Vui lòng nhập đáp án đúng',
+                                                                                    }));
+                                                                                }
+                                                                                else if (letter.correctAnswer.length > 100) {
+                                                                                    setValidationErrors((prev) => ({
+                                                                                        ...prev,
+                                                                                        [letter.id]: 'Đáp án không được vượt quá 100 ký tự',
+                                                                                    }));
+                                                                                }
+                                                                            }, placeholder: "Nh\u1EADp \u0111\u00E1p \u00E1n \u0111\u00FAng...", className: `mt-1.5 border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200 ${validationErrors[letter.id]
+                                                                                ? 'border-red-400 focus:border-red-500 focus:ring-red-200'
+                                                                                : ''}` }), validationErrors[letter.id] && (_jsx("p", { className: "mt-1.5 text-sm text-red-600", children: validationErrors[letter.id] }))] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeMissingLetter(letter.id), className: "h-8 w-8 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) }, letter.id));
+                                        }) })] }))] })] }), _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, { id: "explanation", value: explanation, onChange: (e) => {
+                                setExplanation(e.target.value);
+                                onUnsavedChangesChange?.(true);
+                            }, placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+// Export with both new and legacy names for backward compatibility
+export function FillMissingWordsInGridCreator(props) {
+    return _jsx(FillMissingWordsInGridCreatorContent, { ...props });
+}
+// Legacy export for backward compatibility
+export const WriteMissingLettersCreator = FillMissingWordsInGridCreator;
+//# sourceMappingURL=FillMissingWordsInGridCreator.js.map