@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.3

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

@@ -1,671 +1 @@
-'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;
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as s,useCallback as i}from"react";import{Button as l}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as c}from"../../../../components/ui/input";import{Textarea as a}from"../../../../components/ui/textarea";import{Card as d,CardContent as m,CardHeader as u,CardTitle as h}from"../../../../components/ui/card";import{PointsInput as g}from"../../../../components/ui/points-input";import{Pencil as p,Eye as f,Trash2 as b,Grid3X3 as w,Lightbulb as x,CheckCircle2 as N,BookOpen as v}from"lucide-react";import{toast as y}from"sonner";import{t as $}from"../../../../shared/lib/i18n";import{FillMissingWordsInGridClient as C}from"./FillMissingWordsInGridClient";function A({initialData:y,onSave:$,onCancel:A,onChange:j,onUnsavedChangesChange:k,externalErrors:O=[]}){const[S,D]=t(4),[M,J]=t(7),[V,G]=t(y?.points||1),[I,L]=t(y?.explanation||""),[F,T]=t(()=>y?.content?.grid?y.content.grid:Array(S).fill(null).map(()=>Array(M).fill(null))),[W,P]=t(()=>{if(y?.answer?.missingLetters)return console.log("📝 Using missingLetters format"),y.answer.missingLetters.map((e,r)=>{const[t,n]=e.position.split("-").map(Number),s=(t||1)-1,i=(n||1)-1;return{id:`word-${r}-${Date.now()}`,row:s,column:i,correctAnswer:e.correctAnswer}});if(y?.answer?.answers&&"object"==typeof y.answer.answers){const e=y.answer.answers;return Object.entries(e).map(([e,r],t)=>{const[n,s]=e.split("-").map(Number),i=(n||1)-1,l=(s||1)-1;return{id:`word-${t}-${Date.now()}-${Math.random()}`,row:i,column:l,correctAnswer:r}})}return[]}),[z,E]=t(()=>y?.content?.disabledCells?y.content.disabledCells:[]),q=n(y),H=n(!0),U=n(j),B=n(""),K=n(!1),Q=n(!1),R=n(void 0),X=n(!1);s(()=>{U.current=j},[j]),s(()=>{!X.current&&y?.content?.grid&&(R.current=JSON.parse(JSON.stringify(y)),X.current=!0,console.log("📌 [FillMissingWordsInGridCreator] Saved original data from API:",R.current))},[y]),s(()=>{if(H.current)return;const e=R.current;if(X.current&&e?.content?.grid){const r=JSON.stringify(F)!==JSON.stringify(e.content.grid),t=[...z||[]].sort(),n=[...e.content.disabledCells||[]].sort(),s=JSON.stringify(t)!==JSON.stringify(n),i=("string"==typeof V?Number(V):V)!==("string"==typeof e?.points?Number(e.points):e?.points||1),l=e?.answer?.answers||{},o=W.reduce((e,r)=>(e[`${r.row+1}-${r.column+1}`]=r.correctAnswer,e),{}),c=Object.keys(l).sort().reduce((e,r)=>(e[r]=l[r],e),{}),a=Object.keys(o).sort().reduce((e,r)=>(e[r]=o[r],e),{}),d=JSON.stringify(a)!==JSON.stringify(c),m=r||s||i||d;k?.(m)}else{const e=F.some(e=>e.some(e=>null!==e&&""!==e)),r=W.length>0,t=z.length>0,n=e||r||t;k?.(n)}},[F,W,z,V,k]),s(()=>{if(JSON.stringify(q.current)!==JSON.stringify(y)){if(H.current=!0,q.current=y,y){if(void 0!==y.content?.grid&&T(y.content.grid),y.answer?.missingLetters?P(e=>{const r=new Map(e.map(e=>[`${e.row}-${e.column}`,e.id]));return y.answer.missingLetters.map((e,t)=>{const[n,s]=e.position.split("-").map(Number),i=(n||1)-1,l=(s||1)-1,o=`${i}-${l}`;return{id:r.get(o)||`word-${t}-${Date.now()}-${Math.random()}`,row:i,column:l,correctAnswer:e.correctAnswer}})}):y.answer?.answers&&P(e=>{const r=new Map(e.map(e=>[`${e.row}-${e.column}`,e.id]));return Object.entries(y.answer.answers).map(([e,t],n)=>{const[s,i]=e.split("-").map(Number),l=(s||1)-1,o=(i||1)-1,c=`${l}-${o}`;return{id:r.get(c)||`word-${n}-${Date.now()}-${Math.random()}`,row:l,column:o,correctAnswer:t}})}),void 0!==y.content?.disabledCells){const e=Array.isArray(y.content.disabledCells)?y.content.disabledCells:[];E(e)}if(void 0!==y.points){const e=y.points;G("string"==typeof e?Number(e):e)}void 0!==y.explanation&&L(y.explanation)}setTimeout(()=>{H.current=!1,K.current||(K.current=!0,Q.current=!0,y?.content?.grid&&k?.(!1))},100)}else K.current||setTimeout(()=>{H.current=!1,K.current=!0,Q.current=!0},100)},[y,S,M,k]),s(()=>{T(e=>{const r=e.length,t=e[0]?.length||0;if(r===S&&t===M)return e;const n=[];for(let r=0;r<S;r++){const t=[];for(let n=0;n<M;n++)r<e.length&&n<e[r]?.length?t.push(e[r][n]):t.push(null);n.push(t)}return n}),H.current||P(e=>{const r=e.filter(e=>e.row<S&&e.column<M),t=e.length-r.length;return t>0&&se(e=>[...e.filter(e=>!e.includes("ô còn thiếu ngoài phạm vi grid")),`Đã xóa ${t} ô còn thiếu ngoài phạm vi grid mới (${S}x${M})`]),r})},[S,M]),s(()=>{if(H.current)return;const e={content:{grid:F,rows:S,columns:M,disabledCells:[...z].sort()},answer:{answers:W.reduce((e,r)=>(e[`${r.row+1}-${r.column+1}`]=r.correctAnswer,e),{}),caseSensitive:!1},points:"string"==typeof V?Number(V):V,explanation:I||""},r=JSON.stringify(e);B.current!==r&&(B.current=r,U.current?.(e))},[F,S,M,W,z,V,I]),s(()=>{if(O&&O.length>0){const e={},r=[];O.forEach(t=>{const n=t.match(/Ô còn thiếu #(\d+) ở vị trí \((\d+), (\d+)\) phải có đáp án đúng/);if(n){const[,,r,t]=n,s=parseInt(r)-1,i=parseInt(t)-1,l=W.find(e=>e.row===s&&e.column===i);l&&(e[l.id]="Vui lòng nhập đáp án đúng")}else r.push(t)}),ee(r=>({...r,...e})),r.length>0&&se(e=>e.length===r.length&&e.every((e,t)=>e===r[t])?e:r)}else se(e=>0===e.length?e:[])},[O,W]);const[Y,Z]=t(!1),[_,ee]=t({}),[re,te]=t({}),[ne,se]=t([]),ie=i((e,r,t)=>{T(n=>n.map((n,s)=>n.map((n,i)=>s===e&&i===r?t||null:n))),t&&""!==t.trim()&&se(t=>t.filter(t=>!t.includes(`vị trí (${e+1}, ${r+1})`))),k?.(!0)},[k]),le=i((e,r)=>{const t=`${e}-${r}`,n=W.find(e=>`${e.row}-${e.column}`===t);if(n)P(e=>e.filter(e=>e.id!==n.id)),ee(e=>{const r={...e};return delete r[n.id],r});else{const t=F[e]?.[r],n={id:`word-${Date.now()}-${Math.random()}`,row:e,column:r,correctAnswer:t||""};P(e=>[...e,n]),ie(e,r,""),se(t=>t.filter(t=>!t.includes(`vị trí (${e+1}, ${r+1})`)))}k?.(!0)},[F,W,ie,k]),oe=i((e,r)=>{const t=`${e+1}-${r+1}`;E(n=>n.includes(t)?n.filter(e=>e!==t):(ie(e,r,""),P(t=>t.filter(t=>!(t.row===e&&t.column===r))),[...n,t])),se(t=>t.filter(t=>!t.includes(`vị trí (${e+1}, ${r+1})`))),k?.(!0)},[ie,k]),ce=i((e,r,t)=>{P(n=>n.map(n=>n.id===e?{...n,[r]:t}:n)),"correctAnswer"===r&&ee(r=>{const n={...r};return"string"==typeof t&&""!==t.trim()&&delete n[e],n}),k?.(!0)},[k]),ae=i(()=>{const e=[],r={};(!S||S<1||S>20)&&e.push("Số hàng phải từ 1 đến 20"),(!M||M<1||M>20)&&e.push("Số cột phải từ 1 đến 20");for(let r=0;r<S;r++)for(let t=0;t<M;t++){const n=F[r]?.[t],s=W.some(e=>e.row===r&&e.column===t),i=z.includes(`${r+1}-${t+1}`);n||s||i||e.push(`Ô ở vị trí (${r+1}, ${t+1}) phải có giá trị, được đánh dấu là còn thiếu, hoặc bị vô hiệu hóa`)}return W.forEach(e=>{e.correctAnswer&&""!==e.correctAnswer.trim()?e.correctAnswer.length>100&&(r[e.id]="Đáp án không được vượt quá 100 ký tự"):r[e.id]="Vui lòng nhập đáp án đúng"}),ee(r),se(e),{isValid:0===e.length&&0===Object.keys(r).length,errors:e}},[F,S,M,W]),de=i((e,r)=>{const t=F[e]?.[r],n=W.some(t=>t.row===e&&t.column===r),s=z.includes(`${e+1}-${r+1}`);return!t&&!n&&!s},[F,W,z]),me=i(()=>ne.length>0||O&&O.length>0,[ne,O]);if(Y){const t={content:{grid:F,rows:S,columns:M,disabledCells:z},answer:{answers:W.reduce((e,r)=>(e[`${r.row+1}-${r.column+1}`]=r.correctAnswer,e),{}),caseSensitive:!1}},n=W.reduce((e,r)=>(e[`${r.row+1}-${r.column+1}`]=r.correctAnswer,e),{});return e("div",{className:"space-y-6",children:r(d,{children:[e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Fill Missing Words In Grid (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(l,{variant:"outline",size:"sm",onClick:()=>Z(!1),children:[e(p,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})}),e(m,{children:e(C,{questionData:t,isReviewMode:!0,userAnswer:n,explanation:I})})]})})}return r("div",{className:"space-y-6",children:[r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("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:e(w,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(h,{className:"text-xl font-bold text-gray-900",children:"Điền từ còn thiếu vào grid"}),e("p",{className:"text-sm text-gray-500",children:"Tạo grid và nhập các từ, đánh dấu các ô còn thiếu"})]})]}),r(l,{variant:"outline",size:"sm",onClick:()=>{ae().isValid&&Z(!0)},className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(f,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(m,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-cyan-200 bg-gradient-to-r from-cyan-50 to-blue-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-cyan-100",children:e(x,{className:"h-4 w-4 text-cyan-600"})}),r("div",{className:"text-sm text-cyan-900",children:[e("p",{className:"font-semibold text-cyan-800",children:"Hướng dẫn tạo câu hỏi"}),r("ul",{className:"mt-2 space-y-1.5 text-cyan-700",children:[r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-cyan-400"}),"Nhập từ vào các ô trong grid (4 hàng × 7 cột)"]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-cyan-400"}),r("span",{children:[e("strong",{children:"Double-click:"})," Đánh dấu ô còn thiếu (màu xanh dương)"]})]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-cyan-400"}),r("span",{children:[e("strong",{children:"Triple-click:"})," Vô hiệu hóa ô (màu đỏ - không cần điền)"]})]}),r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-cyan-400"}),"Nhập đáp án đúng cho mỗi ô còn thiếu"]})]})]})]})}),e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(g,{defaultValue:V,onChange:e=>G(Number(e.target.value)||1)},`points-input-${V}`)}),r("div",{className:"space-y-4",children:[e("div",{className:"flex items-center justify-between",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(w,{className:"h-3.5 w-3.5 text-indigo-600"})}),e(o,{className:"text-base font-semibold text-gray-800",children:"Grid - Nhập từ vào các ô"})]})}),e("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:r("div",{className:"inline-block min-w-full",children:[r("div",{className:"grid gap-1 mb-1",style:{gridTemplateColumns:`auto repeat(${M}, minmax(0, 1fr))`},children:[e("div",{className:"h-8"}),Array.from({length:M},(r,t)=>e("div",{className:"flex h-8 items-center justify-center text-xs font-semibold text-gray-600",children:t+1},`col-header-${t}`))]}),e("div",{className:"grid gap-1",children:F.map((t,n)=>r("div",{className:"grid gap-1",style:{gridTemplateColumns:`auto repeat(${M}, minmax(0, 1fr))`},children:[e("div",{className:"flex h-12 items-center justify-center text-xs font-semibold text-gray-600 border-2 border-transparent",children:n+1}),t.map((t,s)=>{const i=W.some(e=>e.row===n&&e.column===s),l=z.includes(`${n+1}-${s+1}`),o=me()&&de(n,s);return r("div",{className:"relative flex h-12 items-center justify-center border-2 rounded transition-colors "+(l?"border-red-400 bg-red-100 hover:bg-red-150 cursor-pointer":i?"border-blue-500 bg-blue-50 hover:bg-blue-100 cursor-pointer":o?"border-red-500 bg-red-50 hover:bg-red-100":t?"border-gray-400 bg-white hover:bg-gray-50":"border-gray-300 bg-gray-100 hover:bg-gray-200"),onClick:e=>{3===e.detail&&(e.preventDefault(),e.stopPropagation(),oe(n,s))},onDoubleClick:e=>{e.preventDefault(),e.stopPropagation(),l||le(n,s)},children:[e(c,{type:"text",maxLength:10,value:t||"",onChange:e=>{if(!i&&!l){const r=e.target.value.trim().slice(0,10);ie(n,s,r)}},onDoubleClick:e=>{e.preventDefault(),e.stopPropagation(),l||le(n,s)},disabled:i||l,readOnly:i||l,className:`h-full border-0 bg-transparent text-center text-lg font-semibold focus:ring-2 focus:ring-blue-500 ${i||l?"cursor-not-allowed pointer-events-none":""} ${l?"text-gray-500":i?"text-blue-600":""}`,placeholder:""}),i&&e("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:"?"}),l&&e("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:"🔒"})]},`${n}-${s}`)})]},`row-${n}`))})]})})]}),W.length>0&&r("div",{className:"space-y-4",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-blue-100",children:e(N,{className:"h-3.5 w-3.5 text-blue-600"})}),r(o,{className:"text-base font-semibold text-gray-800",children:["Danh sách ô còn thiếu",e("span",{className:"ml-2 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700",children:W.length})]})]}),e("div",{className:"space-y-3",children:[...W].sort((e,r)=>e.row!==r.row?e.row-r.row:e.column-r.column).map((t,n)=>{const s=F[t.row]?.[t.column];return e("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:r("div",{className:"flex items-start gap-4",children:[e("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:n+1}),r("div",{className:"flex-1 space-y-3",children:[r("div",{className:"flex items-center gap-2",children:[r("span",{className:"text-sm font-semibold text-gray-700",children:["Vị trí (",t.row+1,", ",t.column+1,")"]}),s&&r("span",{className:"rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-500",children:['Hiện tại: "',s,'"']})]}),r("div",{children:[r(o,{htmlFor:`answer-${t.id}`,className:"text-sm font-medium text-gray-700",children:["Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),e(c,{id:`answer-${t.id}`,type:"text",maxLength:100,value:t.correctAnswer,onChange:e=>ce(t.id,"correctAnswer",e.target.value.trim()),onBlur:()=>{t.correctAnswer&&""!==t.correctAnswer.trim()?t.correctAnswer.length>100&&ee(e=>({...e,[t.id]:"Đáp án không được vượt quá 100 ký tự"})):ee(e=>({...e,[t.id]:"Vui lòng nhập đáp án đúng"}))},placeholder:"Nhập đáp án đúng...",className:"mt-1.5 border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200 "+(_[t.id]?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),_[t.id]&&e("p",{className:"mt-1.5 text-sm text-red-600",children:_[t.id]})]})]}),e(l,{type:"button",variant:"ghost",size:"icon",onClick:()=>{return e=t.id,P(r=>r.filter(r=>r.id!==e)),void ee(r=>{const t={...r};return delete t[e],t});var e},className:"h-8 w-8 text-red-400 hover:bg-red-50 hover:text-red-600",children:e(b,{className:"h-4 w-4"})})]})},t.id)})})]})]})]}),r(d,{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(u,{className:"pb-4",children:r("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(v,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{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(m,{children:e(a,{id:"explanation",value:I,onChange:e=>{L(e.target.value),k?.(!0)},placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function FillMissingWordsInGridCreator(r){return e(A,{...r})}export const WriteMissingLettersCreator=FillMissingWordsInGridCreator;